sellmate-design-system-react 9.0.0-beta.0 → 9.0.0-beta.3

package/dist/index.cjs

@@ -3141,6 +3141,209 @@ var SIcon = /* @__PURE__ */ react.forwardRef(function SIcon2({ name, size = 24,
     }
   );
 });
+var VIEWBOX = 80;
+var RADIUS = 34;
+var STROKE = 12;
+var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+var COLOR_MAP = {
+  primary: { arc: "var(--cmp-progress-color-active)", track: "var(--cmp-progress-color-track)" },
+  // inverse: 어두운 배경용 — arc 흰색, track 은 흰색 40%(회색 링)
+  inverse: { arc: "var(--color-white)", track: "rgba(255,255,255,0.4)" },
+  error: { arc: "var(--color-red-75)", track: "var(--cmp-progress-color-track)" },
+  complete: { arc: "#01BB4B", track: "var(--cmp-progress-color-track)" },
+  // neutral: 콘텐츠가 아직 없는 자리를 채우는 용도 — arc 도 회색이라 진행률보다 "대기"로 읽힌다
+  neutral: { arc: "var(--color-grey-35)", track: "var(--cmp-progress-color-track)" }
+};
+var DEFAULT_SIZE = 80;
+var clamp = (v) => Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0;
+var SCircleProgress = /* @__PURE__ */ react.forwardRef(
+  function SCircleProgress2({
+    value = 0,
+    type = "primary",
+    indeterminate = false,
+    size = DEFAULT_SIZE,
+    label,
+    innerValue = false,
+    className,
+    style
+  }, ref) {
+    const v = clamp(value);
+    const dimension = typeof size === "number" ? `${size}px` : size;
+    const colors = COLOR_MAP[type];
+    const c = VIEWBOX / 2;
+    const percentColor = v === 0 ? "var(--sys-color-fg-tertiary, #888888)" : colors.arc;
+    const filled = v / 100 * CIRCUMFERENCE;
+    const showPercent = !indeterminate;
+    const percentNode = /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: cn(
+          "text-center text-[16px] font-bold",
+          innerValue ? (
+            // leading-[normal]: 26px leading 은 폰트 content(19px) 위아래로 홀수(7px)만큼 남아
+            // 3px/4px 로 쪼개지고 글자가 링 중심보다 위로 뜬다. (leading-normal 은 1.5 라 동일 문제)
+            "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 leading-[normal]"
+          ) : "leading-[26px]"
+        ),
+        style: { color: percentColor },
+        children: [
+          Math.round(v),
+          "%"
+        ]
+      }
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "inline-flex flex-col items-center gap-[var(--cmp-progress-circular-gap)]",
+          className
+        ),
+        style,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(innerValue && "relative"), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "svg",
+              {
+                viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`,
+                xmlns: "http://www.w3.org/2000/svg",
+                className: cn(indeterminate && "origin-center animate-circle-spin"),
+                style: { width: dimension, height: dimension },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "circle",
+                    {
+                      cx: c,
+                      cy: c,
+                      r: RADIUS,
+                      fill: "none",
+                      strokeWidth: STROKE,
+                      style: { stroke: colors.track }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "circle",
+                    {
+                      cx: c,
+                      cy: c,
+                      r: RADIUS,
+                      fill: "none",
+                      strokeWidth: STROKE,
+                      strokeLinecap: "round",
+                      className: cn(
+                        "origin-center",
+                        indeterminate ? "animate-circle-arc" : "-rotate-90 transition-[stroke-dasharray] duration-[400ms] ease-linear"
+                      ),
+                      style: {
+                        stroke: colors.arc,
+                        ...indeterminate ? {} : { strokeDasharray: `${filled} ${CIRCUMFERENCE}`, strokeDashoffset: 0 }
+                      }
+                    }
+                  )
+                ]
+              }
+            ),
+            showPercent && innerValue && percentNode
+          ] }),
+          showPercent && !innerValue && percentNode,
+          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]", children: label })
+        ]
+      }
+    );
+  }
+);
+var IMAGE_FITS = ["cover", "contain", "fill", "none", "scale-down"];
+var EMPTY_ICON_SIZE = "60cqh";
+var SPINNER_SIZE = "45cqh";
+var SImage = /* @__PURE__ */ react.forwardRef(function SImage2({
+  src,
+  alt = "",
+  ratio = 1,
+  fit = "cover",
+  position = "50% 50%",
+  loading: loading2 = "lazy",
+  loadingShowDelay = 0,
+  noSpinner = false,
+  loadingSlot,
+  errorSlot,
+  imgProps,
+  onLoad,
+  onError,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const [status, setStatus] = react.useState("loading");
+  const [spinnerVisible, setSpinnerVisible] = react.useState(loadingShowDelay <= 0);
+  const [trackedSrc, setTrackedSrc] = react.useState(src);
+  const imgRef = react.useRef(null);
+  if (src !== trackedSrc) {
+    setTrackedSrc(src);
+    setStatus("loading");
+  }
+  react.useEffect(() => {
+    if (!src) return;
+    const node = imgRef.current;
+    if (node?.complete && node.naturalWidth > 0) {
+      setStatus((current) => current === "loading" ? "loaded" : current);
+    }
+  }, [src]);
+  react.useEffect(() => {
+    if (status !== "loading" || loadingShowDelay <= 0) {
+      setSpinnerVisible(status === "loading");
+      return;
+    }
+    setSpinnerVisible(false);
+    const timer = setTimeout(() => setSpinnerVisible(true), loadingShowDelay);
+    return () => clearTimeout(timer);
+  }, [status, loadingShowDelay, src]);
+  const isEmpty = !src;
+  const showFallback = isEmpty || status === "error";
+  const showSpinner = !isEmpty && status === "loading" && !noSpinner && spinnerVisible;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn("relative overflow-hidden bg-(--cmp-image-bg)", className),
+      style: { containerType: "size", aspectRatio: ratio, ...style },
+      ...rest,
+      children: [
+        !isEmpty && /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            ...imgProps,
+            ref: imgRef,
+            src,
+            alt,
+            loading: loading2,
+            onLoad: () => {
+              setStatus("loaded");
+              onLoad?.(src);
+            },
+            onError: (event) => {
+              setStatus("error");
+              onError?.(event);
+            },
+            className: cn(
+              "h-full w-full",
+              // 로딩 중에도 자리를 지켜야 브라우저가 계속 받아온다 — 숨기되 없애지 않는다
+              status === "loaded" ? "visible" : "invisible",
+              imgProps?.className
+            ),
+            style: {
+              objectFit: fit,
+              objectPosition: position,
+              ...imgProps?.style
+            }
+          }
+        ),
+        showFallback && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: errorSlot ?? /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "image", size: EMPTY_ICON_SIZE, color: "var(--cmp-image-icon)" }) }),
+        showSpinner && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: loadingSlot ?? /* @__PURE__ */ jsxRuntime.jsx(SCircleProgress, { indeterminate: true, type: "neutral", size: SPINNER_SIZE }) })
+      ]
+    }
+  );
+});
 var BADGE_COLORS = [
   "red",
   "orange",
@@ -5582,14 +5785,14 @@ var SCallout = /* @__PURE__ */ react.forwardRef(function SCallout2({ type = "def
   );
 });
 var FILL_COLOR = {
-  primary: "var(--cmp-progress-active-color)",
-  error: "var(--cmp-progress-error-color)",
-  complete: "var(--cmp-progress-success-color)"
+  primary: "var(--cmp-progress-color-active)",
+  error: "var(--cmp-progress-color-error)",
+  complete: "var(--cmp-progress-color-success)"
 };
-var clamp = (v) => Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0;
+var clamp2 = (v) => Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0;
 var SLinearProgress = /* @__PURE__ */ react.forwardRef(
   function SLinearProgress2({ value = 0, type = "primary", indeterminate = false, label, className, style }, ref) {
-    const v = clamp(value);
+    const v = clamp2(value);
     const fill = FILL_COLOR[type];
     const valueColor = v === 0 ? "var(--sys-color-fg-tertiary, #888888)" : fill;
     const valueText = `${Math.round(v)}%`;
@@ -5636,115 +5839,6 @@ var SLinearProgress = /* @__PURE__ */ react.forwardRef(
     );
   }
 );
-var VIEWBOX = 80;
-var RADIUS = 34;
-var STROKE = 12;
-var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
-var COLOR_MAP = {
-  primary: { arc: "var(--cmp-progress-active-color)", track: "var(--cmp-progress-color-track)" },
-  // inverse: 어두운 배경용 — arc 흰색, track 은 흰색 40%(회색 링)
-  inverse: { arc: "var(--color-white)", track: "rgba(255,255,255,0.4)" },
-  error: { arc: "var(--color-red-75)", track: "var(--cmp-progress-color-track)" },
-  complete: { arc: "#01BB4B", track: "var(--cmp-progress-color-track)" }
-};
-var clamp2 = (v) => Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0;
-var SCircleProgress = /* @__PURE__ */ react.forwardRef(
-  function SCircleProgress2({
-    value = 0,
-    type = "primary",
-    indeterminate = false,
-    label,
-    innerValue = false,
-    className,
-    style
-  }, ref) {
-    const v = clamp2(value);
-    const colors = COLOR_MAP[type];
-    const c = VIEWBOX / 2;
-    const percentColor = v === 0 ? "var(--sys-color-fg-tertiary, #888888)" : colors.arc;
-    const filled = v / 100 * CIRCUMFERENCE;
-    const showPercent = !indeterminate;
-    const percentNode = /* @__PURE__ */ jsxRuntime.jsxs(
-      "span",
-      {
-        className: cn(
-          "text-center text-[16px] font-bold",
-          innerValue ? (
-            // leading-[normal]: 26px leading 은 폰트 content(19px) 위아래로 홀수(7px)만큼 남아
-            // 3px/4px 로 쪼개지고 글자가 링 중심보다 위로 뜬다. (leading-normal 은 1.5 라 동일 문제)
-            "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 leading-[normal]"
-          ) : "leading-[26px]"
-        ),
-        style: { color: percentColor },
-        children: [
-          Math.round(v),
-          "%"
-        ]
-      }
-    );
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        className: cn(
-          "inline-flex flex-col items-center gap-[var(--cmp-progress-circular-gap)]",
-          className
-        ),
-        style,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(innerValue && "relative"), children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "svg",
-              {
-                viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`,
-                xmlns: "http://www.w3.org/2000/svg",
-                className: cn(
-                  "h-[80px] w-[80px]",
-                  indeterminate && "origin-center animate-circle-spin"
-                ),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "circle",
-                    {
-                      cx: c,
-                      cy: c,
-                      r: RADIUS,
-                      fill: "none",
-                      strokeWidth: STROKE,
-                      style: { stroke: colors.track }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "circle",
-                    {
-                      cx: c,
-                      cy: c,
-                      r: RADIUS,
-                      fill: "none",
-                      strokeWidth: STROKE,
-                      strokeLinecap: "round",
-                      className: cn(
-                        "origin-center",
-                        indeterminate ? "animate-circle-arc" : "-rotate-90 transition-[stroke-dasharray] duration-[400ms] ease-linear"
-                      ),
-                      style: {
-                        stroke: colors.arc,
-                        ...indeterminate ? {} : { strokeDasharray: `${filled} ${CIRCUMFERENCE}`, strokeDashoffset: 0 }
-                      }
-                    }
-                  )
-                ]
-              }
-            ),
-            showPercent && innerValue && percentNode
-          ] }),
-          showPercent && !innerValue && percentNode,
-          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]", children: label })
-        ]
-      }
-    );
-  }
-);
 
 // src/lib/global-overlay.ts
 var GLOBAL_OVERLAY_ATTR = "data-s-global-overlay";
@@ -6230,10 +6324,15 @@ function SSwitch({
     }
   );
 }
+var SIZE_CLASSES = {
+  xs: "h-[24px] px-[8px] text-[12px] font-normal leading-[20px]",
+  sm: "h-[28px] px-[12px] text-[14px] font-medium leading-[24px]"
+};
 function SToggle({
   value = false,
   label = "",
   disabled = false,
+  size = "sm",
   onValueChange,
   className,
   style
@@ -6249,7 +6348,8 @@ function SToggle({
       "aria-pressed": value,
       onClick: () => !disabled && onValueChange?.(!value),
       className: cn(
-        "box-border inline-flex h-[28px] items-center justify-center whitespace-nowrap rounded-full border border-solid px-[12px] text-[14px] font-medium leading-[24px] transition-colors",
+        "box-border inline-flex items-center justify-center whitespace-nowrap rounded-full border border-solid transition-colors",
+        SIZE_CLASSES[size],
         disabled ? "cursor-not-allowed" : "cursor-pointer",
         // 미선택(off) hover 시 파란 채움 + 흰 글자
         !disabled && !value && "hover:!bg-[var(--cmp-toggle-bg-hover)] hover:!text-[color:var(--cmp-toggle-content-hover)] hover:!border-[color:var(--cmp-toggle-bg-hover)]",
@@ -12056,12 +12156,244 @@ function SCalendar({
     }
   );
 }
+var DATEPICKER_MODE_LIST_HEIGHT = 240;
+var DATEPICKER_MODE_ITEM_HEIGHT = 28;
+var YEAR_LIST_EDGE_BUFFER = 24;
+var YEAR_LIST_EXPAND_SIZE = 80;
+var MONTHS = Array.from({ length: 12 }, (_, i) => i + 1);
+var getTodayParts = () => {
+  const today = /* @__PURE__ */ new Date();
+  return {
+    year: today.getFullYear(),
+    month: today.getMonth() + 1
+  };
+};
+var parseYear = (value) => {
+  const year = Number(value?.slice(0, 4));
+  return Number.isFinite(year) && year > 0 ? year : void 0;
+};
+var parseMonth = (value) => {
+  const month = Number(value?.slice(5, 7));
+  return Number.isFinite(month) && month >= 1 && month <= 12 ? month : void 0;
+};
+var formatMonthValue = (year, month) => `${year}-${String(month).padStart(2, "0")}`;
+var isYearDisabled = (year, selectable) => {
+  if (!selectable) return false;
+  const [start, end] = selectable;
+  if (start !== "" && year < Number(start.slice(0, 4))) return true;
+  if (end !== "" && year > Number(end.slice(0, 4))) return true;
+  return false;
+};
+var isMonthDisabled = (year, month, selectable) => {
+  if (!selectable) return false;
+  const value = formatMonthValue(year, month);
+  const [start, end] = selectable;
+  if (start !== "" && value < start.slice(0, 7)) return true;
+  if (end !== "" && value > end.slice(0, 7)) return true;
+  return false;
+};
+function YearWheel({ value, anchorYear, selectable, onCommit }) {
+  const listRef = react.useRef(null);
+  const syncingScrollRef = react.useRef(false);
+  const anchorYearRef = react.useRef(anchorYear);
+  const [range, setRange] = react.useState(() => ({
+    start: anchorYear - YEAR_LIST_EXPAND_SIZE,
+    end: anchorYear + YEAR_LIST_EXPAND_SIZE
+  }));
+  const rangeStartRef = react.useRef(range.start);
+  rangeStartRef.current = range.start;
+  const years = Array.from({ length: range.end - range.start + 1 }, (_, i) => range.start + i);
+  react.useLayoutEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const index = anchorYearRef.current - rangeStartRef.current;
+    syncingScrollRef.current = true;
+    list.scrollTop = index * DATEPICKER_MODE_ITEM_HEIGHT;
+    requestAnimationFrame(() => {
+      syncingScrollRef.current = false;
+    });
+  }, []);
+  const handleScroll = () => {
+    const list = listRef.current;
+    if (!list) return;
+    if (syncingScrollRef.current) return;
+    if (list.scrollTop < DATEPICKER_MODE_ITEM_HEIGHT * YEAR_LIST_EDGE_BUFFER) {
+      const previousHeight = list.scrollHeight;
+      setRange((current) => ({
+        start: current.start - YEAR_LIST_EXPAND_SIZE,
+        end: current.end
+      }));
+      requestAnimationFrame(() => {
+        if (!listRef.current) return;
+        syncingScrollRef.current = true;
+        listRef.current.scrollTop += listRef.current.scrollHeight - previousHeight;
+        requestAnimationFrame(() => {
+          syncingScrollRef.current = false;
+        });
+      });
+      return;
+    }
+    if (list.scrollHeight - list.scrollTop - list.clientHeight < DATEPICKER_MODE_ITEM_HEIGHT * YEAR_LIST_EDGE_BUFFER) {
+      setRange((current) => ({
+        start: current.start,
+        end: current.end + YEAR_LIST_EXPAND_SIZE
+      }));
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full overflow-hidden bg-[var(--cmp-datepicker-mode-bg)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: listRef,
+      role: "listbox",
+      "aria-label": "year",
+      className: "h-full overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+      style: {
+        paddingTop: `calc((${DATEPICKER_MODE_LIST_HEIGHT}px - ${DATEPICKER_MODE_ITEM_HEIGHT}px) / 2)`,
+        paddingBottom: `calc((${DATEPICKER_MODE_LIST_HEIGHT}px - ${DATEPICKER_MODE_ITEM_HEIGHT}px) / 2)`
+      },
+      onScroll: handleScroll,
+      children: years.map((year) => {
+        const selected = year === value;
+        const disabled = isYearDisabled(year, selectable);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": selected,
+            disabled,
+            className: cn(
+              "flex w-full items-center justify-center gap-[var(--cmp-datepicker-mode-item-gap)] border-0 px-[var(--cmp-datepicker-mode-item-paddingX)] py-[var(--cmp-datepicker-mode-item-paddingY)] text-center font-base text-12 leading-[20px]",
+              disabled && "cursor-not-allowed bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-disabled)]",
+              !disabled && !selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-default)] hover:bg-[var(--cmp-datepicker-mode-item-bg-hover)] hover:text-[color:var(--cmp-datepicker-mode-item-content-hover)]",
+              !disabled && selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-bold text-[color:var(--cmp-datepicker-mode-item-content-selected)]"
+            ),
+            onClick: () => !disabled && onCommit(year),
+            children: year
+          },
+          year
+        );
+      })
+    }
+  ) });
+}
+function MonthWheel({ year, value, selectable, onCommit }) {
+  const listRef = react.useRef(null);
+  const initialValueRef = react.useRef(value);
+  react.useLayoutEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    list.scrollTop = Math.max(
+      0,
+      (initialValueRef.current - 1) * DATEPICKER_MODE_ITEM_HEIGHT - (list.clientHeight - DATEPICKER_MODE_ITEM_HEIGHT) / 2
+    );
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full overflow-hidden bg-[var(--cmp-datepicker-mode-bg)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: listRef,
+      role: "listbox",
+      "aria-label": "month",
+      className: "h-full overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+      children: MONTHS.map((month) => {
+        const selected = month === value;
+        const disabled = isMonthDisabled(year, month, selectable);
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": selected,
+            disabled,
+            className: cn(
+              "flex w-full items-center justify-center gap-[var(--cmp-datepicker-mode-item-gap)] border-0 px-[var(--cmp-datepicker-mode-item-paddingX)] py-[var(--cmp-datepicker-mode-item-paddingY)] text-center font-base text-12 leading-[20px]",
+              disabled && "cursor-not-allowed bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-disabled)]",
+              !disabled && !selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-default)] hover:bg-[var(--cmp-datepicker-mode-item-bg-hover)] hover:text-[color:var(--cmp-datepicker-mode-item-content-hover)]",
+              !disabled && selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-bold text-[color:var(--cmp-datepicker-mode-item-content-selected)]"
+            ),
+            onClick: () => !disabled && onCommit(month),
+            children: [
+              month,
+              "\uC6D4"
+            ]
+          },
+          month
+        );
+      })
+    }
+  ) });
+}
+function DatePickerListbox({
+  mode,
+  value,
+  selectable,
+  onValueChange,
+  onClose
+}) {
+  const today = getTodayParts();
+  const [year, setYear] = react.useState(() => parseYear(value) ?? today.year);
+  const [month, setMonth] = react.useState(() => parseMonth(value) ?? today.month);
+  const commitYear = (nextYear) => {
+    setYear(nextYear);
+    if (mode === "year") {
+      onValueChange?.(String(nextYear));
+      onClose();
+      return;
+    }
+    onValueChange?.(formatMonthValue(nextYear, month));
+  };
+  const commitMonth = (nextMonth) => {
+    setMonth(nextMonth);
+    onValueChange?.(formatMonthValue(year, nextMonth));
+    onClose();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "inline-flex h-[240px] overflow-hidden rounded-[var(--cmp-datepicker-mode-radius)] bg-[var(--cmp-datepicker-mode-bg)] shadow-normal-sm",
+        mode === "month" ? "gap-[var(--cmp-datepicker-mode-yearMonth-gap)]" : "w-[var(--cmp-datepicker-mode-year-width)]"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "min-w-0",
+              mode === "month" ? "w-[var(--cmp-datepicker-mode-yearMonth-column-width)]" : "w-full"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              YearWheel,
+              {
+                value: year,
+                anchorYear: today.year,
+                selectable,
+                onCommit: commitYear
+              }
+            )
+          }
+        ),
+        mode === "month" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "w-[var(--border-width-1)] self-stretch bg-[var(--sys-color-divider-default)]"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 w-[var(--cmp-datepicker-mode-yearMonth-column-width)]", children: /* @__PURE__ */ jsxRuntime.jsx(MonthWheel, { year, value: month, selectable, onCommit: commitMonth }) })
+        ] })
+      ]
+    }
+  );
+}
 function SDatePicker({
   value,
   onValueChange,
   onViewChange,
+  mode = "date",
   size = "sm",
-  placeholder = "YYYY-MM-DD",
+  placeholder,
   selectable,
   disabled = false,
   width,
@@ -12087,6 +12419,7 @@ function SDatePicker({
   const [focused, setFocused] = react.useState(false);
   const [ruleError, setRuleError] = react.useState("");
   const hasValue = value != null && value !== "";
+  const resolvedPlaceholder = placeholder ?? (mode === "year" ? "YYYY" : mode === "month" ? "YYYY-MM" : "YYYY-MM-DD");
   useFormField({
     name,
     validate: () => {
@@ -12098,12 +12431,34 @@ function SDatePicker({
   });
   const resolvedError = error || ruleError !== "";
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
-  const dims = size === "md" ? { padX: 16, gap: 12, icon: 20, minW: 104, fontSize: 14, lineHeight: 24, radius: 6 } : { padX: 12, gap: 8, icon: 16, minW: 80, fontSize: 12, lineHeight: 20, radius: 4 };
+  const dims = size === "md" ? {
+    padX: 16,
+    gap: 12,
+    icon: 20,
+    minW: 104,
+    fieldMinW: 168,
+    fontSize: 14,
+    lineHeight: 24,
+    radius: 6
+  } : {
+    padX: 12,
+    gap: 8,
+    icon: 16,
+    minW: 80,
+    fieldMinW: 128,
+    fontSize: 12,
+    lineHeight: 20,
+    radius: 4
+  };
   const select = (date) => {
     onValueChange?.(date);
     if (rules && rules.length > 0) setRuleError(runRules(date, rules));
     setOpen(false);
   };
+  const selectListboxValue = (nextValue) => {
+    onValueChange?.(nextValue);
+    if (rules && rules.length > 0) setRuleError(runRules(nextValue, rules));
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     SField,
     {
@@ -12122,6 +12477,7 @@ function SDatePicker({
       focused: focused || open,
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
+      minWidth: dims.fieldMinW,
       disabled,
       className,
       style,
@@ -12156,7 +12512,7 @@ function SDatePicker({
                     lineHeight: `${dims.lineHeight}px`,
                     color: disabled ? "var(--cmp-datepicker-text-disabled)" : hasValue ? "var(--cmp-datepicker-text-default)" : "var(--cmp-field-hint-color)"
                   },
-                  children: hasValue ? value : placeholder
+                  children: hasValue ? value : resolvedPlaceholder
                 }
               )
             ]
@@ -12172,7 +12528,7 @@ function SDatePicker({
               "z-50 max-w-[var(--radix-popover-content-available-width)]",
               FLOATING_SLIDE_ANIM
             ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
+            children: mode === "date" ? /* @__PURE__ */ jsxRuntime.jsx(
               SCalendar,
               {
                 value: value ?? void 0,
@@ -12181,6 +12537,15 @@ function SDatePicker({
                 onValueChange: select,
                 onViewChange
               }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              DatePickerListbox,
+              {
+                mode,
+                value,
+                selectable,
+                onValueChange: selectListboxValue,
+                onClose: () => setOpen(false)
+              }
             )
           }
         ) })
@@ -16402,6 +16767,7 @@ exports.GNB_MENU_WIDTH = GNB_MENU_WIDTH;
 exports.GNB_RAIL = GNB_RAIL;
 exports.GNB_RAIL_WIDTH = GNB_RAIL_WIDTH;
 exports.ICONS = ICONS;
+exports.IMAGE_FITS = IMAGE_FITS;
 exports.PAGE_BACKGROUNDS = PAGE_BACKGROUNDS;
 exports.RangeCalendar = RangeCalendar;
 exports.SActionModal = SActionModal;
@@ -16436,6 +16802,7 @@ exports.SGhostButton = SGhostButton;
 exports.SGnb = SGnb;
 exports.SGuide = SGuide;
 exports.SIcon = SIcon;
+exports.SImage = SImage;
 exports.SInput = SInput;
 exports.SKeyValueTable = SKeyValueTable;
 exports.SLAYOUT_MIN_WIDTH = SLAYOUT_MIN_WIDTH;