@sarunyu/system-one 4.9.37 → 4.9.40

package/dist/index.cjs

@@ -6010,8 +6010,8 @@ TimeInput.displayName = "TimeInput";
 const avatarPlaceholder = "data:image/png;base64,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";
 const TEXT_GRADIENT = "linear-gradient(to top right, #B5D3F8, #E6F6FB)";
 const TEXT_COLOR = "#00A2D9";
-const SIZE_CONFIG = {
-  xxs: { container: "size-4", fontSize: "text-[11px]", dotSize: "size-[5px]", dotRing: "ring-[1.5px]" },
+const SIZE_CONFIG$1 = {
+  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" },
@@ -6028,7 +6028,7 @@ function Avatar({
   initials,
   className
 }) {
-  const { container, fontSize, dotSize, dotRing } = SIZE_CONFIG[size2];
+  const { container, fontSize, dotSize, dotRing } = SIZE_CONFIG$1[size2];
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative inline-flex shrink-0", container, className), children: [
     type === "photo" && /* @__PURE__ */ jsxRuntime.jsx(
       "img",
@@ -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
           },
@@ -6817,7 +6856,7 @@ const oppositeSideMap = {
   bottom: "top",
   top: "bottom"
 };
-function clamp(start, value, end) {
+function clamp$1(start, value, end) {
   return max(start, min(value, end));
 }
 function evaluate(value, param) {
@@ -7174,7 +7213,7 @@ const arrow$3 = (options) => ({
     const min$1 = minPadding;
     const max2 = clientSize - arrowDimensions[length] - maxPadding;
     const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
-    const offset2 = clamp(min$1, center, max2);
+    const offset2 = clamp$1(min$1, center, max2);
     const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset2 && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
     const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max2 : 0;
     return {
@@ -7473,14 +7512,14 @@ const shift$2 = function(options) {
         const maxSide = mainAxis === "y" ? "bottom" : "right";
         const min2 = mainAxisCoord + overflow[minSide];
         const max2 = mainAxisCoord - overflow[maxSide];
-        mainAxisCoord = clamp(min2, mainAxisCoord, max2);
+        mainAxisCoord = clamp$1(min2, mainAxisCoord, max2);
       }
       if (checkCrossAxis) {
         const minSide = crossAxis === "y" ? "top" : "left";
         const maxSide = crossAxis === "y" ? "bottom" : "right";
         const min2 = crossAxisCoord + overflow[minSide];
         const max2 = crossAxisCoord - overflow[maxSide];
-        crossAxisCoord = clamp(min2, crossAxisCoord, max2);
+        crossAxisCoord = clamp$1(min2, crossAxisCoord, max2);
       }
       const limitedCoords = limiter.fn({
         ...state,
@@ -9750,6 +9789,638 @@ function Tooltip({
     )
   ] }) });
 }
+const TRACK_HEIGHT = {
+  sm: "h-1",
+  md: "h-2",
+  lg: "h-3"
+};
+const THUMB_SIZE_CLASS = {
+  sm: "size-4",
+  md: "size-5",
+  lg: "size-6"
+};
+function clamp(v, lo, hi) {
+  return Math.min(Math.max(v, lo), hi);
+}
+function snapToStep(raw, min2, max2, step) {
+  return clamp(Math.round((raw - min2) / step) * step + min2, min2, max2);
+}
+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",
+  disabled = false,
+  showSteps = false,
+  min: min2 = 0,
+  max: max2 = 100,
+  step = 1,
+  value: valueProp,
+  rangeValue: rangeProp,
+  defaultValue = 50,
+  defaultRangeValue = [25, 75],
+  onChange,
+  onRangeChange,
+  className,
+  id: idProp
+}, ref) {
+  const autoId = React.useId();
+  const trackRef = React.useRef(null);
+  const activeThumb = React.useRef(null);
+  const [internalValue, setInternalValue] = React.useState(
+    () => clamp(defaultValue, min2, max2)
+  );
+  const [internalRange, setInternalRange] = React.useState(() => [
+    clamp(defaultRangeValue[0], min2, max2),
+    clamp(defaultRangeValue[1], min2, max2)
+  ]);
+  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 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, showSteps, stepLabels]
+  );
+  const commitSingle = React.useCallback(
+    (newValue) => {
+      if (valueProp === void 0) setInternalValue(newValue);
+      onChange == null ? void 0 : onChange(newValue);
+    },
+    [valueProp, onChange]
+  );
+  const commitRange = React.useCallback(
+    (newValue, thumb) => {
+      const [s, e] = rangeProp !== void 0 ? rangeProp : internalRange;
+      const next = thumb === "start" ? [clamp(newValue, min2, e), e] : [s, clamp(newValue, s, max2)];
+      if (rangeProp === void 0) setInternalRange(next);
+      onRangeChange == null ? void 0 : onRangeChange(next);
+    },
+    [rangeProp, internalRange, min2, max2, onRangeChange]
+  );
+  const handlePointerDown = React.useCallback(
+    (e) => {
+      if (disabled) return;
+      e.currentTarget.setPointerCapture(e.pointerId);
+      const newValue = getValueFromClientX(e.clientX);
+      if (isSingle) {
+        activeThumb.current = "end";
+        commitSingle(newValue);
+      } else {
+        const track = trackRef.current;
+        if (track) {
+          const { left, width } = track.getBoundingClientRect();
+          const clickPct = (e.clientX - left) / width * 100;
+          const distToStart = Math.abs(clickPct - valueToPct(range[0], min2, max2));
+          const distToEnd = Math.abs(clickPct - valueToPct(range[1], min2, max2));
+          activeThumb.current = distToStart <= distToEnd ? "start" : "end";
+        } else {
+          activeThumb.current = "end";
+        }
+        commitRange(newValue, activeThumb.current);
+      }
+    },
+    [disabled, getValueFromClientX, isSingle, range, min2, max2, commitSingle, commitRange]
+  );
+  const handlePointerMove = React.useCallback(
+    (e) => {
+      if (!activeThumb.current || disabled) return;
+      const newValue = getValueFromClientX(e.clientX);
+      if (isSingle) {
+        commitSingle(newValue);
+      } else {
+        commitRange(newValue, activeThumb.current);
+      }
+    },
+    [disabled, getValueFromClientX, isSingle, commitSingle, commitRange]
+  );
+  const handlePointerUp = React.useCallback(() => {
+    activeThumb.current = null;
+  }, []);
+  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;
+      else if (e.key === "Home") delta = min2 - (isSingle ? value : range[thumb === "start" ? 0 : 1]);
+      else if (e.key === "End") delta = max2 - (isSingle ? value : range[thumb === "start" ? 0 : 1]);
+      if (!delta && e.key !== "Home" && e.key !== "End") return;
+      e.preventDefault();
+      if (isSingle) {
+        commitSingle(clamp(value + delta, min2, max2));
+      } else {
+        const thumbVal = thumb === "start" ? range[0] : range[1];
+        commitRange(clamp(thumbVal + delta, min2, max2), thumb);
+      }
+    },
+    [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 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 ? "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"
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      id: idProp ?? autoId,
+      className: cn("flex w-full flex-col", showSteps ? "gap-1.5" : "", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: trackRef,
+            className: cn(
+              "relative w-full rounded-full",
+              TRACK_HEIGHT[size2],
+              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,
+            onPointerUp: handlePointerUp,
+            onPointerLeave: handlePointerUp,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  className: cn(
+                    "pointer-events-none absolute top-0 h-full rounded-full",
+                    disabled ? "bg-[var(--fill-gray-300)]" : "bg-[var(--bg-brand-primary)]"
+                  ),
+                  style: { left: `${startPct}%`, width: `${endPct - startPct}%` }
+                }
+              ),
+              isSingle && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  role: "slider",
+                  tabIndex: disabled ? -1 : 0,
+                  "aria-valuemin": min2,
+                  "aria-valuemax": max2,
+                  "aria-valuenow": value,
+                  "aria-disabled": disabled,
+                  className: thumbInteractive,
+                  style: {
+                    left: `${endPct}%`,
+                    top: "50%",
+                    transform: "translateX(-50%) translateY(-50%)"
+                  },
+                  onKeyDown: (e) => handleKeyDown(e, "end")
+                }
+              ),
+              !isSingle && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    role: "slider",
+                    tabIndex: disabled ? -1 : 0,
+                    "aria-valuemin": min2,
+                    "aria-valuemax": range[1],
+                    "aria-valuenow": range[0],
+                    "aria-label": "Start value",
+                    "aria-disabled": disabled,
+                    className: thumbInteractive,
+                    style: {
+                      left: `${startPct}%`,
+                      top: "50%",
+                      transform: "translateX(-50%) translateY(-50%)"
+                    },
+                    onKeyDown: (e) => handleKeyDown(e, "start")
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    role: "slider",
+                    tabIndex: disabled ? -1 : 0,
+                    "aria-valuemin": range[0],
+                    "aria-valuemax": max2,
+                    "aria-valuenow": range[1],
+                    "aria-label": "End value",
+                    "aria-disabled": disabled,
+                    className: cn(thumbInteractive, "z-10"),
+                    style: {
+                      left: `${endPct}%`,
+                      top: "50%",
+                      transform: "translateX(-50%) translateY(-50%)"
+                    },
+                    onKeyDown: (e) => handleKeyDown(e, "end")
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        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
+          );
+        }) })
+      ]
+    }
+  );
+});
+Slider.displayName = "Slider";
+const LinearProgress = React.forwardRef(
+  function LinearProgress2({ value, className }, ref) {
+    const pct = Math.min(100, Math.max(0, value));
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-valuenow": pct,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        className: cn(
+          "relative h-1 w-full rounded-full bg-bg-default-tertiary overflow-hidden",
+          className
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute inset-y-0 left-0 h-full rounded-full bg-bg-brand transition-[width] duration-300",
+            style: { width: `${pct}%` }
+          }
+        )
+      }
+    );
+  }
+);
+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: 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) {
+    const pct = Math.min(100, Math.max(0, value));
+    const cfg = SIZE_CONFIG[size2];
+    const circumference = 2 * Math.PI * cfg.r;
+    const offset2 = circumference * (1 - pct / 100);
+    const cx = cfg.dimension / 2;
+    const isZero = pct === 0;
+    const uid = React.useId();
+    const gradientId = `cp-grad-${uid}`;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        ref,
+        role: "progressbar",
+        "aria-valuenow": pct,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        width: cfg.dimension,
+        height: cfg.dimension,
+        viewBox: `0 0 ${cfg.dimension} ${cfg.dimension}`,
+        className: cn("shrink-0", className),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "linearGradient",
+            {
+              id: gradientId,
+              gradientUnits: "userSpaceOnUse",
+              x1: cx,
+              y1: 0,
+              x2: cx,
+              y2: cfg.dimension,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#00a1e9" }),
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#004eba" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx,
+              cy: cx,
+              r: cfg.r,
+              fill: "none",
+              stroke: cfg.trackColor,
+              strokeWidth: cfg.strokeWidth
+            }
+          ),
+          pct > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx,
+              cy: cx,
+              r: cfg.r,
+              fill: "none",
+              stroke: `url(#${gradientId})`,
+              strokeWidth: cfg.strokeWidth,
+              strokeDasharray: circumference,
+              strokeDashoffset: offset2,
+              strokeLinecap: "round",
+              transform: `rotate(-90 ${cx} ${cx})`,
+              style: { transition: "stroke-dashoffset 0.3s ease" }
+            }
+          ),
+          cfg.showLabel && /* @__PURE__ */ jsxRuntime.jsxs(
+            "text",
+            {
+              x: cx,
+              y: cx,
+              textAnchor: "middle",
+              dominantBaseline: "central",
+              style: {
+                fontSize: cfg.fontSize,
+                lineHeight: cfg.lineHeight,
+                fontWeight: 700,
+                fontVariationSettings: "'CTGR' 0, 'wdth' 100, 'wght' 700",
+                fill: isZero ? "var(--text-default-placeholder)" : "var(--text-brand-primary)",
+                fontFamily: "'Noto Sans Thai', sans-serif"
+              },
+              children: [
+                pct,
+                "%"
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+CircleProgress.displayName = "CircleProgress";
+const UploadArea = React.forwardRef(
+  function UploadArea2({ disabled = false, label = "อัปโหลดไฟล์", className, onClick, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        role: disabled ? void 0 : "button",
+        tabIndex: disabled ? void 0 : 0,
+        "aria-disabled": disabled,
+        onClick: disabled ? void 0 : onClick,
+        onKeyDown: disabled ? void 0 : (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClick == null ? void 0 : onClick(e);
+          }
+        },
+        className: cn(
+          "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
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "flex items-center justify-center w-5 h-5 shrink-0",
+                disabled ? "text-disabled" : "text-primary-action"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(react.UploadSimpleIcon, { size: 20, weight: "regular" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "text-sm font-medium leading-5 whitespace-nowrap",
+                disabled ? "text-disabled" : "text-primary-action"
+              ),
+              children: label
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+UploadArea.displayName = "UploadArea";
+const UploadItem = React.forwardRef(
+  function UploadItem2({
+    variant = "text",
+    status = "loading",
+    fileName = "filename.pdf",
+    fileSize = "1.66KB",
+    errorText = "Error Text",
+    progress = 50,
+    onDelete,
+    className
+  }, ref) {
+    const isLoading = status === "loading";
+    const isSuccess = status === "success";
+    const isError = status === "error";
+    if (variant === "text") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          className: cn(
+            "flex max-w-[500px] w-[300px] overflow-hidden",
+            isError ? "flex-col gap-1 items-start" : "gap-2 items-center",
+            className
+          ),
+          children: [
+            isLoading && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex-1 min-w-0 text-sm leading-5 text-text-default-placeholder truncate", children: fileName }),
+              /* @__PURE__ */ jsxRuntime.jsx(CircleProgress, { size: "sm", value: progress, className: "shrink-0" })
+            ] }),
+            isSuccess && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex-1 min-w-0 text-sm leading-5 text-text-info truncate", children: fileName }),
+              /* @__PURE__ */ jsxRuntime.jsx(TrashButton, { onDelete })
+            ] }),
+            isError && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center w-full py-px", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex-1 min-w-0 text-sm leading-5 text-text-danger truncate", children: fileName }),
+                /* @__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-xs leading-4", children: "*" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs leading-4", children: errorText })
+              ] })
+            ] })
+          ]
+        }
+      );
+    }
+    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",
+      {
+        ref,
+        className: cn(
+          "flex flex-col gap-1 items-start w-[343px]",
+          className
+        ),
+        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 })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(LinearProgress, { value: progress })
+          ] }),
+          (isSuccess || isError) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1 items-center w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  cardBase,
+                  isSuccess ? "text-text-info" : "text-text-danger"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex-1 min-w-0 overflow-hidden text-ellipsis", children: fileName }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 text-right", children: fileSize })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onDelete,
+                className: cn(
+                  "flex items-center justify-center size-12 shrink-0",
+                  "bg-background border border-border-default rounded-lg",
+                  "text-icon-danger cursor-pointer"
+                ),
+                "aria-label": "ลบไฟล์",
+                children: /* @__PURE__ */ jsxRuntime.jsx(react.TrashIcon, { size: 20 })
+              }
+            )
+          ] }),
+          isError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center px-1 py-0 w-full text-text-danger", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs leading-4 whitespace-nowrap", children: errorText }) })
+        ]
+      }
+    );
+  }
+);
+UploadItem.displayName = "UploadItem";
+function TrashButton({ onDelete }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onDelete,
+      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 })
+    }
+  );
+}
+const ListItem = React.forwardRef(
+  function ListItem2({
+    label,
+    leading,
+    action,
+    onAction,
+    trailing,
+    highlighted = false,
+    onClick,
+    className
+  }, ref) {
+    const [pressed, setPressed] = React.useState(false);
+    const isHighlighted = highlighted || !!onClick && pressed;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        onClick,
+        onPointerDown: () => {
+          if (onClick) setPressed(true);
+        },
+        onPointerUp: () => setPressed(false),
+        onPointerLeave: () => setPressed(false),
+        className: cn(
+          "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 hover:bg-bg-default-pressed",
+          className
+        ),
+        children: [
+          leading != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 flex items-center text-icon-default [&_svg]:text-icon-default [&_svg]:size-6", children: leading }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 min-w-0 text-sm leading-5 text-foreground truncate", children: label }),
+          action && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onAction == null ? void 0 : onAction(e);
+              },
+              className: "shrink-0 text-sm font-medium text-primary-action hover:underline cursor-pointer whitespace-nowrap",
+              children: action
+            }
+          ),
+          trailing != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 flex items-center text-icon-default [&_svg]:text-icon-default [&_svg]:size-6", children: trailing })
+        ]
+      }
+    );
+  }
+);
+ListItem.displayName = "ListItem";
+function List({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col", className), children });
+}
 const index = {
   Button,
   Badge,
@@ -9791,6 +10462,13 @@ const index = {
   PaginationCarousel,
   Tooltip,
   Popover,
+  Slider,
+  LinearProgress,
+  CircleProgress,
+  UploadArea,
+  UploadItem,
+  List,
+  ListItem,
   cn,
   useIsMobile
 };
@@ -9804,10 +10482,14 @@ exports.Button = Button;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
 exports.Chip = Chip;
+exports.CircleProgress = CircleProgress;
 exports.DateInput = DateInput;
 exports.Dropdown = Dropdown;
 exports.DropdownMultiple = DropdownMultiple;
 exports.Input = Input;
+exports.LinearProgress = LinearProgress;
+exports.List = List;
+exports.ListItem = ListItem;
 exports.Modal = Modal;
 exports.Notification = Notification;
 exports.OptionList = OptionList;
@@ -9817,6 +10499,7 @@ exports.PaginationCarousel = PaginationCarousel;
 exports.Popover = Popover;
 exports.Radio = Radio;
 exports.SearchInput = SearchInput;
+exports.Slider = Slider;
 exports.StatusTag = StatusTag;
 exports.Tab = Tab;
 exports.TabGroup = TabGroup;
@@ -9834,6 +10517,8 @@ exports.ToastStack = ToastStack;
 exports.Toaster = Toaster;
 exports.Toggle = Toggle;
 exports.Tooltip = Tooltip;
+exports.UploadArea = UploadArea;
+exports.UploadItem = UploadItem;
 exports.cn = cn;
 exports.default = index;
 exports.useIsMobile = useIsMobile;