sellmate-design-system-react 9.0.0-beta.89 → 9.0.0-beta.90

package/dist/index.cjs

@@ -14,6 +14,7 @@ var RDropdown5 = require('@radix-ui/react-dropdown-menu');
 var RSwitch = require('@radix-ui/react-switch');
 var RDialog = require('@radix-ui/react-dialog');
 var Ariakit = require('@ariakit/react');
+var RSlider = require('@radix-ui/react-slider');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -40,6 +41,7 @@ var RDropdown5__namespace = /*#__PURE__*/_interopNamespace(RDropdown5);
 var RSwitch__namespace = /*#__PURE__*/_interopNamespace(RSwitch);
 var RDialog__namespace = /*#__PURE__*/_interopNamespace(RDialog);
 var Ariakit__namespace = /*#__PURE__*/_interopNamespace(Ariakit);
+var RSlider__namespace = /*#__PURE__*/_interopNamespace(RSlider);
 
 var isSdSpacing = (value) => /^sd-\d+$/.test(value);
 var SD_SPACING_GROUPS = [
@@ -4898,10 +4900,16 @@ var ALIGN = {
   end: "flex-end"
 };
 var FOCUS_RING_SHADOW = "0px 0px 4px 0px #0071ff66";
+var fieldLabelId = (controlId) => `${controlId}-label`;
+function useFieldControlId(id) {
+  const autoId = react.useId();
+  return id ?? autoId;
+}
 var cssLen = (v) => v === void 0 || v === "" || v === 0 ? void 0 : typeof v === "number" ? `${v}px` : v;
 var SField = /* @__PURE__ */ react.forwardRef(function SField2({
   name,
   label = "",
+  controlId,
   subLabel = "",
   icon,
   iconColor,
@@ -5024,7 +5032,19 @@ var SField = /* @__PURE__ */ react.forwardRef(function SField2({
                       style: { marginRight: s.labelGap }
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: label }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "label",
+                    {
+                      id: controlId ? fieldLabelId(controlId) : void 0,
+                      htmlFor: controlId,
+                      className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap",
+                      onClick: () => {
+                        const control = controlId ? document.getElementById(controlId) : null;
+                        if (control && !("labels" in control)) control.focus();
+                      },
+                      children: label
+                    }
+                  ),
                   subLabel !== "" && // field 라벨 토큰이 아니라 기본 타이포 토큰을 쓴다 — 보조 라벨은 굵기·색이 라벨과
                   // 따로 가므로 field 토큰에 묶지 않는다. 크기도 size 와 무관하게 body/sm 고정.
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -5176,6 +5196,7 @@ var STextarea = /* @__PURE__ */ react.forwardRef(function STextarea2({
   const minHeight = heightForRows(MIN_ROWS);
   const maxHeight = autogrow && maxRows != null ? heightForRows(maxRows) : void 0;
   const [ruleError, setRuleError] = react.useState("");
+  const controlId = useFieldControlId(rest.id);
   const innerRef = react.useRef(null);
   const setRefs2 = react.useCallback(
     (node) => {
@@ -5217,6 +5238,7 @@ var STextarea = /* @__PURE__ */ react.forwardRef(function STextarea2({
     SField,
     {
       label,
+      controlId,
       labelPosition,
       subLabel,
       labelWidth,
@@ -5243,6 +5265,7 @@ var STextarea = /* @__PURE__ */ react.forwardRef(function STextarea2({
         "textarea",
         {
           ref: setRefs2,
+          id: controlId,
           value: value ?? "",
           rows,
           disabled,
@@ -5293,7 +5316,9 @@ var SChatInputImpl = /* @__PURE__ */ react.forwardRef(function SChatInput({
   placeholder = DEFAULT_PLACEHOLDER,
   disabled = false,
   onSend,
+  hasAttachments = false,
   onAttach,
+  onPasteFiles,
   busy = false,
   onStop,
   footerAction,
@@ -5303,17 +5328,26 @@ var SChatInputImpl = /* @__PURE__ */ react.forwardRef(function SChatInput({
   textareaClassName,
   ...rest
 }, ref) {
-  const canSend = !disabled && !busy && value.trim() !== "";
+  const hasText = value.trim() !== "";
+  const canSend = !disabled && !busy && (hasText || hasAttachments);
   const send = react.useCallback(() => {
     if (!canSend) return;
-    onSend?.(value);
-  }, [canSend, onSend, value]);
+    onSend?.(hasText ? value : "");
+  }, [canSend, hasText, onSend, value]);
   const handleKeyDown = (e) => {
     rest.onKeyDown?.(e);
     if (e.key !== "Enter" || e.shiftKey || e.nativeEvent.isComposing) return;
     e.preventDefault();
     send();
   };
+  const handlePaste = (e) => {
+    rest.onPaste?.(e);
+    if (onPasteFiles == null || e.defaultPrevented) return;
+    const files = Array.from(e.clipboardData.files);
+    if (files.length === 0) return;
+    e.preventDefault();
+    onPasteFiles(files);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col bg-(--cmp-chatInput-bg)", className), style, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-(--cmp-chatInput-gap) p-(--cmp-chatInput-padding)", children: [
       onAttach != null && /* @__PURE__ */ jsxRuntime.jsx(
@@ -5344,7 +5378,8 @@ var SChatInputImpl = /* @__PURE__ */ react.forwardRef(function SChatInput({
           textareaClassName,
           textareaStyle: { minHeight: TEXTAREA_MIN_HEIGHT },
           ...rest,
-          onKeyDown: handleKeyDown
+          onKeyDown: handleKeyDown,
+          onPaste: handlePaste
         }
       ),
       busy ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -5605,6 +5640,7 @@ var SChatMessageImpl = /* @__PURE__ */ react.forwardRef(function SChatMessage({
   readStatus,
   avatarSrc,
   avatarAlt,
+  showAvatar = true,
   continued = false,
   variant = "default",
   actions,
@@ -5635,7 +5671,7 @@ var SChatMessageImpl = /* @__PURE__ */ react.forwardRef(function SChatMessage({
       ),
       ...rest,
       children: [
-        !outgoing && /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: avatarSrc, alt: avatarAlt, placeholder: continued }),
+        !outgoing && showAvatar && /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: avatarSrc, alt: avatarAlt, placeholder: continued }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -6782,6 +6818,7 @@ var SListItemImpl = /* @__PURE__ */ react.forwardRef(function SListItem({
   className,
   onMouseEnter,
   onMouseLeave,
+  onKeyDown,
   ...rest
 }, ref) {
   const [hovered, setHovered] = react.useState(false);
@@ -6805,15 +6842,29 @@ var SListItemImpl = /* @__PURE__ */ react.forwardRef(function SListItem({
     setHovered(false);
     onMouseLeave?.(event);
   };
+  const pressable = isInteractive && rest.onClick != null;
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (!pressable || event.defaultPrevented || event.target !== event.currentTarget) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      event.currentTarget.click();
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref,
       "aria-disabled": disabled || void 0,
+      role: pressable ? "button" : void 0,
+      tabIndex: pressable ? 0 : void 0,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
+      onKeyDown: handleKeyDown,
       className: cn(
         "group/list-item relative flex w-full items-center justify-between bg-(--cmp-listItem-bg-default) text-left text-(--cmp-listItem-text-default)",
+        // 링을 안쪽으로 그린다 — bordered 항목은 overflow-hidden 이라 바깥 링이 잘린다
+        pressable && "focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--sys-color-border-accent)",
         titleTypo,
         disabled ? "pointer-events-none cursor-not-allowed text-(--sys-color-disabled-text)" : isSelected ? cn(
           "cursor-pointer text-(--cmp-listItem-text-selected)",
@@ -7497,6 +7548,7 @@ function SCheckbox({
   val,
   onValueChange,
   label = "",
+  ariaLabel,
   disabled = false,
   inverse = false,
   className,
@@ -7537,6 +7589,7 @@ function SCheckbox({
             checked: state2,
             disabled,
             onCheckedChange: handleChange,
+            "aria-label": ariaLabel,
             className: cn(
               "flex h-[var(--cmp-checkbox-size)] w-[var(--cmp-checkbox-size)] items-center justify-center rounded-[var(--cmp-checkbox-radius)] border-[length:var(--cmp-checkbox-borderWidth)] border-solid bg-[var(--cb-bg)] border-[color:var(--cb-border)] outline-none",
               disabled ? "cursor-not-allowed" : "cursor-pointer",
@@ -15737,6 +15790,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const baseId = react.useId();
   const listboxId = `${baseId}-listbox`;
   const activeOptionId = `${baseId}-active-option`;
+  const triggerId = `${baseId}-trigger`;
   const [win, setWin] = react.useState({ start: 0, end: 0, top: 0, bottom: 0 });
   const winRef = react.useRef(win);
   winRef.current = win;
@@ -16223,6 +16277,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     SField,
     {
       label,
+      controlId: triggerId,
       labelPosition,
       subLabel,
       labelWidth,
@@ -16248,8 +16303,10 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
           "button",
           {
             ref: triggerRef,
+            id: triggerId,
             type: "button",
             disabled: effectiveDisabled,
+            "aria-labelledby": label ? `${fieldLabelId(triggerId)} ${triggerId}` : void 0,
             "aria-haspopup": "listbox",
             "aria-expanded": open,
             "aria-controls": open ? listboxId : void 0,
@@ -16345,7 +16402,12 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
               event.preventDefault();
               requestAnimationFrame(() => searchInputRef.current?.focus());
             },
-            onPointerDownOutside: () => {
+            onPointerDownOutside: (event) => {
+              const target = event.target;
+              if (label && target?.closest?.(`[id="${fieldLabelId(triggerId)}"]`)) {
+                event.preventDefault();
+                return;
+              }
               dismissedByPointerRef.current = true;
             },
             onCloseAutoFocus: (event) => {
@@ -18265,6 +18327,7 @@ var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
 }, ref) {
   const [visible, setVisible] = react.useState(false);
   const [ruleError, setRuleError] = react.useState("");
+  const controlId = useFieldControlId(rest.id);
   const f = FONT2[size];
   const isPassword = type === "password";
   const inputType = isPassword ? visible ? "text" : "password" : type;
@@ -18289,6 +18352,7 @@ var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
     SField,
     {
       label,
+      controlId,
       labelPosition,
       subLabel,
       labelWidth,
@@ -18328,6 +18392,7 @@ var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
               "input",
               {
                 ref: mergeRefs(ref, valueTooltip.valueRef),
+                id: controlId,
                 type: inputType,
                 value: value ?? "",
                 disabled,
@@ -18503,6 +18568,7 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
   const numValue = applyDecimalLimit(toNumber(value), decimalLimit);
   const [display, setDisplay] = react.useState(() => formatWithCommas(numValue));
   const [ruleError, setRuleError] = react.useState("");
+  const controlId = useFieldControlId();
   const [rangeError, setRangeError] = react.useState("");
   const innerRef = react.useRef(null);
   const valueTooltip = useTruncatedValueTooltip({ enabled: readOnly && !disabled, text: display });
@@ -18652,6 +18718,7 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
     SField,
     {
       label,
+      controlId,
       labelPosition,
       subLabel,
       labelWidth,
@@ -18691,6 +18758,7 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
               "input",
               {
                 ref: setRefs2,
+                id: controlId,
                 name,
                 type: "text",
                 inputMode: allowDecimal ? "decimal" : "numeric",
@@ -19392,6 +19460,8 @@ function SDatePicker({
 }) {
   const portalContainer = usePortalContainer();
   const [open, setOpen] = react.useState(false);
+  const triggerId = useFieldControlId();
+  const triggerTextId = `${triggerId}-text`;
   const [focused, setFocused] = react.useState(false);
   const [ruleError, setRuleError] = react.useState("");
   const hasValue = value != null && value !== "";
@@ -19448,6 +19518,7 @@ function SDatePicker({
   return /* @__PURE__ */ jsxRuntime.jsx(
     SField,
     {
+      controlId: triggerId,
       label,
       labelPosition,
       subLabel,
@@ -19474,8 +19545,10 @@ function SDatePicker({
         /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
+            id: triggerId,
             role: "button",
             "aria-disabled": disabled,
+            "aria-labelledby": label ? `${fieldLabelId(triggerId)} ${triggerTextId}` : void 0,
             tabIndex: disabled ? -1 : 0,
             "data-name": name,
             onFocus: () => setFocused(true),
@@ -19505,6 +19578,7 @@ function SDatePicker({
               /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
+                  id: triggerTextId,
                   className: "flex-1 truncate text-center",
                   style: {
                     minWidth: dims.minW,
@@ -19931,6 +20005,8 @@ function SDateRangePicker({
 }) {
   const portalContainer = usePortalContainer();
   const [open, setOpen] = react.useState(false);
+  const triggerId = useFieldControlId();
+  const triggerTextId = `${triggerId}-text`;
   const [ruleError, setRuleError] = react.useState("");
   const [pendingStart, setPendingStart] = react.useState(null);
   const hasValue = value != null && value[0] !== "" && value[1] !== "";
@@ -19987,6 +20063,7 @@ function SDateRangePicker({
   return /* @__PURE__ */ jsxRuntime.jsx(
     SField,
     {
+      controlId: triggerId,
       label,
       labelPosition,
       subLabel,
@@ -20022,8 +20099,10 @@ function SDateRangePicker({
             /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
+                id: triggerId,
                 role: "button",
                 "aria-disabled": disabled,
+                "aria-labelledby": label ? `${fieldLabelId(triggerId)} ${triggerTextId}` : void 0,
                 tabIndex: disabled ? -1 : 0,
                 "data-name": name,
                 onKeyDown: (event) => {
@@ -20051,6 +20130,7 @@ function SDateRangePicker({
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "span",
                     {
+                      id: triggerTextId,
                       className: cn(
                         "flex-1 items-center",
                         hasDisplay ? "flex" : "block truncate text-center"
@@ -20313,6 +20393,8 @@ function SFilePicker({
 }) {
   const autoId = react.useId();
   const resolvedName = name ?? autoId;
+  const triggerId = `${autoId}-trigger`;
+  const displayTextId = `${autoId}-text`;
   const inputRef = react.useRef(null);
   const contentBoxRef = react.useRef(null);
   const [ruleError, setRuleError] = react.useState("");
@@ -20413,10 +20495,12 @@ function SFilePicker({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
+            id: triggerId,
             type: "button",
             disabled,
             onClick: open,
             "aria-label": placeholder,
+            "aria-labelledby": label ? `${fieldLabelId(triggerId)} ${displayTextId}` : void 0,
             className: cn(
               "flex min-w-0 flex-1 items-center bg-transparent text-left",
               gapCls,
@@ -20434,6 +20518,7 @@ function SFilePicker({
               /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
+                  id: displayTextId,
                   className: cn(
                     "min-w-0 flex-1 truncate text-[12px]",
                     inlinePlaceholder && "text-[color:var(--cmp-filepicker-text-placeholder)] transition-colors group-hover/filepicker:text-[color:var(--cmp-filepicker-text-default)]"
@@ -20481,6 +20566,7 @@ function SFilePicker({
       {
         borderless: inline,
         label,
+        controlId: triggerId,
         labelPosition,
         subLabel,
         labelWidth,
@@ -25037,8 +25123,12 @@ var EditorBody = /* @__PURE__ */ react.forwardRef(function EditorBody2({
   bubbleMenu,
   onImageUpload,
   editorClassName,
-  editorStyle
+  editorStyle,
+  controlId,
+  labelled
 }, ref) {
+  const labelledRef = react.useRef(labelled);
+  labelledRef.current = labelled;
   const placeholderRef = react.useRef(placeholder);
   placeholderRef.current = placeholder;
   const handlers = react.useRef({ onInput, onFocusChange });
@@ -25053,6 +25143,10 @@ var EditorBody = /* @__PURE__ */ react.forwardRef(function EditorBody2({
     editable,
     // 소비 앱이 Next.js RSC 라면 첫 렌더가 서버에서 일어난다 — 즉시 렌더하면 하이드레이션이 어긋난다
     immediatelyRender: false,
+    // 본문은 contenteditable 이라 <label for> 가 닿지 않는다 — 레이블 id 로 이름을 잇는다
+    editorProps: {
+      attributes: () => labelledRef.current ? { "id": controlId, "aria-labelledby": fieldLabelId(controlId) } : { id: controlId }
+    },
     onUpdate: ({ editor: e }) => {
       const html = e.isEmpty ? "" : e.getHTML();
       htmlRef.current = html;
@@ -25271,6 +25365,7 @@ var SEditor = /* @__PURE__ */ react.forwardRef(function SEditor2({
 }, ref) {
   const [ruleError, setRuleError] = react.useState("");
   const [selfFocused, setSelfFocused] = react.useState(false);
+  const controlId = useFieldControlId();
   const htmlRef = react.useRef(value ?? defaultValue ?? "");
   const bodyRef = react.useRef(null);
   const pendingFocusRef = react.useRef(false);
@@ -25341,6 +25436,7 @@ var SEditor = /* @__PURE__ */ react.forwardRef(function SEditor2({
     {
       name,
       label,
+      controlId,
       labelPosition,
       subLabel,
       labelWidth,
@@ -25404,6 +25500,8 @@ var SEditor = /* @__PURE__ */ react.forwardRef(function SEditor2({
           toolbar: resolvedToolbar,
           bubbleMenu: resolvedBubbleMenu,
           onImageUpload,
+          controlId,
+          labelled: !!label,
           editorClassName,
           editorStyle
         }
@@ -25411,6 +25509,302 @@ var SEditor = /* @__PURE__ */ react.forwardRef(function SEditor2({
     }
   );
 });
+var TRACK = 6;
+var THUMB = 16;
+var PRESS_SCALE = 1.2;
+var PRESS_GROW = THUMB * (PRESS_SCALE - 1) / 2;
+var SHADOW_Y = 2;
+var SHADOW_BLUR = 4;
+var KNOB_BLEED = Math.ceil(PRESS_GROW + SHADOW_BLUR);
+var MARK_DOT = 4;
+var BUBBLE_HEIGHT = 18;
+var BUBBLE_GAP = 4;
+var ROW_HEIGHT = { sm: 28, md: 36 };
+var COLOR = {
+  track: "var(--sys-color-border-default)",
+  trackDisabled: "var(--sys-color-disabled-bg)",
+  range: "var(--sys-color-bg-accent)",
+  rangeDisabled: "var(--color-brilliantblue-40)",
+  thumbBg: "var(--sys-color-bg-frame)",
+  markOn: "var(--sys-color-bg-frame)",
+  markOff: "var(--sys-color-border-strong)",
+  markOffDisabled: "var(--sys-color-disabled-border)",
+  markLabel: "var(--sys-color-fg-tertiary)",
+  bubbleBg: "var(--sys-color-bg-deep)",
+  bubbleText: "var(--sys-color-fg-inverse)"
+};
+var thumbAlignedLeft = (pct) => `calc(${pct}% + ${THUMB / 2 * (1 - pct / 50)}px)`;
+var toPercent = (v, min, max) => max === min ? 0 : (v - min) / (max - min) * 100;
+var SSlider = /* @__PURE__ */ react.forwardRef(function SSlider2({
+  value,
+  onValueChange,
+  onValueCommit,
+  min = 0,
+  max = 100,
+  step = 1,
+  marks,
+  showValue = "drag",
+  formatValue = String,
+  size = "sm",
+  rules,
+  name,
+  status,
+  label,
+  labelPosition,
+  subLabel,
+  labelWidth,
+  icon,
+  iconColor,
+  labelTooltip,
+  labelTooltipProps,
+  hint,
+  error,
+  errorMessage,
+  width,
+  disabled = false,
+  readOnly = false,
+  className,
+  style
+}, ref) {
+  const isRange = Array.isArray(value);
+  const values = isRange ? value : [value ?? min];
+  const toOut = (v) => isRange ? [v[0], v[1]] : v[0];
+  const [ruleError, setRuleError] = react.useState("");
+  useFormField({
+    name,
+    validate: () => {
+      const msg = runRules(value, rules);
+      setRuleError(msg);
+      return msg === "";
+    },
+    resetValidation: () => setRuleError("")
+  });
+  const resolvedError = error || ruleError !== "";
+  const resolvedErrorMessage = ruleError !== "" ? ruleError : errorMessage;
+  const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
+  const [dragging, setDragging] = react.useState(false);
+  const [focusIndex, setFocusIndex] = react.useState(null);
+  const thumbId = useFieldControlId();
+  const wrapRef = react.useRef(null);
+  const bubbleRefs = react.useRef([]);
+  const layoutKey = `${values.join(",")}|${values.map(formatValue).join(",")}`;
+  react.useLayoutEffect(() => {
+    const wrap = wrapRef.current;
+    if (!wrap) return;
+    const layout = () => {
+      const outer = wrap.clientWidth;
+      const track = outer - KNOB_BLEED * 2;
+      bubbleRefs.current.forEach((el, i) => {
+        if (!el || values[i] === void 0) return;
+        const pct = toPercent(values[i], min, max);
+        const center = KNOB_BLEED + track * pct / 100 + THUMB / 2 * (1 - pct / 50);
+        const half = el.offsetWidth / 2;
+        const shift = center - half < 0 ? half - center : center + half > outer ? outer - half - center : 0;
+        el.style.transform = `translateX(calc(-50% + ${shift}px))`;
+      });
+    };
+    layout();
+    const ro = new ResizeObserver(layout);
+    ro.observe(wrap);
+    return () => ro.disconnect();
+  }, [layoutKey, min, max, showValue]);
+  const rowHeight = ROW_HEIGHT[size];
+  const rowGap = (rowHeight - THUMB) / 2;
+  const topSpace = Math.max(
+    0,
+    KNOB_BLEED - rowGap,
+    showValue === "none" ? 0 : BUBBLE_HEIGHT + BUBBLE_GAP + PRESS_GROW - rowGap
+  );
+  const bottomSpace = Math.max(0, KNOB_BLEED + SHADOW_Y - rowGap);
+  const markList = marks === true ? Array.from({ length: Math.floor((max - min) / step) + 1 }, (_, i) => ({
+    value: min + i * step
+  })) : Array.isArray(marks) ? marks.filter((m) => m.value >= min && m.value <= max) : [];
+  const hasMarkLabels = markList.some((m) => m.label);
+  const [rangeStart, rangeEnd] = isRange ? [values[0], values[1]] : [min, values[0]];
+  const interactive = !disabled && !readOnly;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SField,
+    {
+      name,
+      label,
+      controlId: thumbId,
+      labelPosition,
+      subLabel,
+      labelWidth,
+      labelHeight: topSpace > 0 ? rowHeight + topSpace * 2 : void 0,
+      icon,
+      iconColor,
+      labelTooltip,
+      labelTooltipProps,
+      hint,
+      size,
+      error: resolvedError,
+      status: resolvedStatus,
+      errorMessage: resolvedErrorMessage,
+      width,
+      disabled,
+      readOnly,
+      borderless: true,
+      multiline: true,
+      className,
+      style,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: wrapRef,
+          className: "flex w-full flex-col",
+          style: { padding: `${topSpace}px ${KNOB_BLEED}px ${bottomSpace}px` },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              RSlider__namespace.Root,
+              {
+                ref,
+                value: values,
+                min,
+                max,
+                step,
+                disabled,
+                minStepsBetweenThumbs: 0,
+                onValueChange: (v) => {
+                  if (!interactive) return;
+                  const next = toOut(v);
+                  onValueChange?.(next);
+                  if (ruleError !== "") setRuleError(runRules(next, rules));
+                },
+                onValueCommit: (v) => {
+                  if (!interactive) return;
+                  const next = toOut(v);
+                  onValueCommit?.(next);
+                  if (rules && rules.length > 0) setRuleError(runRules(next, rules));
+                },
+                onPointerDown: () => interactive && setDragging(true),
+                onPointerUp: () => setDragging(false),
+                onLostPointerCapture: () => setDragging(false),
+                className: cn(
+                  "relative flex w-full touch-none items-center select-none",
+                  // 읽기 전용은 포인터로 잡히지 않게 한다 — 키보드 포커스는 남겨 값을 읽을 수 있게 한다
+                  readOnly && "pointer-events-none"
+                ),
+                style: { height: rowHeight },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    RSlider__namespace.Track,
+                    {
+                      className: "relative grow overflow-hidden rounded-full",
+                      style: { height: TRACK, background: disabled ? COLOR.trackDisabled : COLOR.track },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        RSlider__namespace.Range,
+                        {
+                          className: "absolute h-full",
+                          style: { background: disabled ? COLOR.rangeDisabled : COLOR.range }
+                        }
+                      )
+                    }
+                  ),
+                  markList.map((m) => {
+                    const on = m.value >= rangeStart && m.value <= rangeEnd;
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "aria-hidden": true,
+                        className: "pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",
+                        style: {
+                          left: thumbAlignedLeft(toPercent(m.value, min, max)),
+                          width: MARK_DOT,
+                          height: MARK_DOT,
+                          background: on ? COLOR.markOn : disabled ? COLOR.markOffDisabled : COLOR.markOff
+                        }
+                      },
+                      m.value
+                    );
+                  }),
+                  values.map((v, i) => {
+                    const pressed = interactive && dragging && focusIndex === i;
+                    return /* @__PURE__ */ jsxRuntime.jsxs(
+                      RSlider__namespace.Thumb,
+                      {
+                        id: i === 0 ? thumbId : void 0,
+                        "aria-label": isRange ? `${label ?? ""} ${i === 0 ? "\uCD5C\uC19F\uAC12" : "\uCD5C\uB313\uAC12"}`.trim() : label,
+                        "aria-valuetext": formatValue(v),
+                        "aria-readonly": readOnly || void 0,
+                        onFocus: () => setFocusIndex(i),
+                        onBlur: () => setFocusIndex(null),
+                        className: cn(
+                          "group/thumb relative block rounded-full outline-none",
+                          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--sys-color-field-border-focus)",
+                          interactive ? "cursor-grab active:cursor-grabbing" : disabled && "cursor-not-allowed"
+                        ),
+                        style: { width: THUMB, height: THUMB },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              "aria-hidden": true,
+                              className: "absolute inset-0 rounded-full border-3 border-solid shadow-[0_2px_4px_rgba(0,0,0,0.16)] transition-transform duration-150 ease-out",
+                              style: {
+                                background: COLOR.thumbBg,
+                                borderColor: disabled ? COLOR.rangeDisabled : COLOR.range,
+                                transform: pressed ? `scale(${PRESS_SCALE})` : void 0
+                              }
+                            }
+                          ),
+                          showValue !== "none" && /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              ref: (el) => {
+                                bubbleRefs.current[i] = el;
+                              },
+                              "aria-hidden": true,
+                              className: cn(
+                                // 줄 높이로 가운데를 맞추면 줄 상자에 내림 획 자리가 들어 있어 숫자가 위로 1px 가까이 뜬다.
+                                // 글자 상자를 대문자 높이~기준선으로 잘라(text-box) 그 상자를 flex 로 가운데 둔다.
+                                "typo-body-xs-medium pointer-events-none absolute left-1/2 flex items-center rounded-[6px] px-[6px] whitespace-nowrap transition-opacity",
+                                showValue === "always" || pressed ? "opacity-100" : "opacity-0 group-hover/thumb:opacity-100 group-focus-visible/thumb:opacity-100",
+                                // 비활성·읽기 전용에서는 조작이 없으므로 drag 말풍선도 띄우지 않는다
+                                showValue === "drag" && !interactive && "hidden"
+                              ),
+                              style: {
+                                bottom: `calc(100% + ${BUBBLE_GAP + (pressed ? PRESS_GROW : 0)}px)`,
+                                height: BUBBLE_HEIGHT,
+                                transform: "translateX(-50%)",
+                                background: COLOR.bubbleBg,
+                                color: COLOR.bubbleText
+                              },
+                              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[text-box:trim-both_cap_alphabetic]", children: formatValue(v) })
+                            }
+                          )
+                        ]
+                      },
+                      i
+                    );
+                  })
+                ]
+              }
+            ),
+            hasMarkLabels && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full", style: { height: BUBBLE_HEIGHT }, children: markList.map((m) => {
+              if (!m.label) return null;
+              const pct = toPercent(m.value, min, max);
+              const align = pct <= 0 ? "translateX(0)" : pct >= 100 ? "translateX(-100%)" : "translateX(-50%)";
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "typo-body-xs-medium absolute top-0 whitespace-nowrap",
+                  style: {
+                    left: pct <= 0 ? 0 : pct >= 100 ? "100%" : thumbAlignedLeft(pct),
+                    transform: align,
+                    color: disabled ? "var(--sys-color-disabled-text)" : COLOR.markLabel
+                  },
+                  children: m.label
+                },
+                m.value
+              );
+            }) })
+          ]
+        }
+      )
+    }
+  );
+});
 var CHIPFILTER_LISTBOX_WIDTH = 240;
 var CHIPFILTER_DATE_PRESET_LISTBOX_WIDTH = 246;
 var EDITOR_LISTBOX_MAX_HEIGHT = "min(640px, var(--radix-popover-content-available-height))";
@@ -27291,6 +27685,24 @@ function EmptyItem({ children }) {
     }
   );
 }
+function splitBySeparators(text, separators) {
+  const seps = separators.filter((s) => s !== "");
+  if (seps.length === 0) return { parts: [], rest: text };
+  const pieces = [];
+  let from = 0;
+  for (let i = 0; i < text.length; ) {
+    const sep = seps.find((s) => text.startsWith(s, i));
+    if (sep) {
+      pieces.push(text.slice(from, i));
+      i += sep.length;
+      from = i;
+    } else {
+      i += 1;
+    }
+  }
+  const parts = pieces.map((p) => p.trim()).filter((p) => p !== "");
+  return { parts, rest: text.slice(from) };
+}
 var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
   values = [],
   onValueChange,
@@ -27301,7 +27713,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
   disabledChips = [],
   size = "sm",
   disabled = false,
-  placeholder = "\uD0DC\uADF8 \uC785\uB825 (Enter\uB85C \uB4F1\uB85D / \uCF64\uB9C8\uB85C \uAD6C\uBD84 / \uB744\uC5B4\uC4F0\uAE30 \uBD88\uAC00)",
+  placeholder: placeholderProp,
   name,
   rules,
   error,
@@ -27314,6 +27726,9 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
   recommendedItems = [],
   loadingRecommendedItems = false,
   dropdownMinWidth = 200,
+  commitOnBlur = false,
+  separators,
+  ariaLabel,
   label,
   labelPosition,
   subLabel,
@@ -27329,7 +27744,9 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
   className,
   style
 }, ref) {
+  const placeholder = placeholderProp ?? (separators?.includes(",") ? "\uD0DC\uADF8 \uC785\uB825 (Enter\xB7\uCF64\uB9C8\uB85C \uB4F1\uB85D)" : "\uD0DC\uADF8 \uC785\uB825 (Enter\uB85C \uB4F1\uB85D)");
   const autoId = react.useId();
+  const controlId = `${autoId}-input`;
   const resolvedName = name ?? autoId;
   const listboxId = `${autoId}-listbox`;
   const activeOptionId = `${autoId}-active-option`;
@@ -27376,12 +27793,17 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
   const isMax = maxCount != null && values.length >= maxCount;
   const resolvedDropdownMinWidth = dropdownMinWidth == null ? void 0 : typeof dropdownMinWidth === "number" ? `${dropdownMinWidth}px` : dropdownMinWidth;
   const commit = (next) => onValueChange?.(next);
+  const addChips = (vs, rest = "") => {
+    const room = maxCount == null ? vs.length : Math.max(maxCount - values.length, 0);
+    const added = vs.slice(0, room);
+    if (added.length > 0) commit([...values, ...added]);
+    setInputValue(rest);
+    setActiveIndex(-1);
+    onInput?.(rest);
+  };
   const addChip = (v) => {
     if (maxCount != null && values.length >= maxCount) return;
-    commit([...values, v]);
-    setInputValue("");
-    setActiveIndex(-1);
-    onInput?.("");
+    addChips([v]);
     inputRef.current?.focus();
   };
   const removeChip = (i) => {
@@ -27466,6 +27888,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
     SField,
     {
       label,
+      controlId,
       labelPosition,
       subLabel,
       labelWidth,
@@ -27564,7 +27987,9 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                     "input",
                     {
                       ref: inputRef,
+                      id: controlId,
                       name: resolvedName,
+                      "aria-label": ariaLabel,
                       size: 1,
                       role: "combobox",
                       "aria-expanded": showDropdown,
@@ -27588,8 +28013,24 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                       placeholder: values.length === 0 ? placeholder : "",
                       disabled,
                       value: inputValue,
+                      onPaste: (e) => {
+                        if (!separators) return;
+                        const pasted = e.clipboardData.getData("text");
+                        if (!separators.some((s) => s !== "" && pasted.includes(s))) return;
+                        e.preventDefault();
+                        const { parts, rest } = splitBySeparators(inputValue + pasted, separators);
+                        const tail = rest.trim();
+                        addChips(tail === "" ? parts : [...parts, tail]);
+                      },
                       onChange: (e) => {
                         const nextValue = e.target.value;
+                        if (separators && !isComposingRef.current) {
+                          const { parts, rest } = splitBySeparators(nextValue, separators);
+                          if (parts.length > 0 || rest !== nextValue) {
+                            addChips(parts, rest);
+                            return;
+                          }
+                        }
                         const wasEmpty = inputValue === "";
                         const isEmpty = nextValue === "";
                         if (wasEmpty !== isEmpty) {
@@ -27604,8 +28045,11 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                       onCompositionStart: () => {
                         isComposingRef.current = true;
                       },
-                      onCompositionEnd: () => {
+                      onCompositionEnd: (e) => {
                         isComposingRef.current = false;
+                        if (!separators) return;
+                        const { parts, rest } = splitBySeparators(e.currentTarget.value, separators);
+                        if (parts.length > 0 || rest !== e.currentTarget.value) addChips(parts, rest);
                       },
                       onFocus: () => {
                         setFocused(true);
@@ -27615,6 +28059,8 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                       onBlur: () => {
                         setFocused(false);
                         setActiveIndex(-1);
+                        if (commitOnBlur && inputValue.trim() !== "" && !isMax)
+                          addChips([inputValue.trim()]);
                         onBlur?.();
                       }
                     }
@@ -27808,6 +28254,7 @@ var SBarcodeInput = /* @__PURE__ */ react.forwardRef(
   }, ref) {
     const f = FONT3[size];
     const [ruleError, setRuleError] = react.useState("");
+    const controlId = useFieldControlId();
     const hasValue = value !== void 0 && value !== null && String(value) !== "";
     useFormField({
       name,
@@ -27828,6 +28275,7 @@ var SBarcodeInput = /* @__PURE__ */ react.forwardRef(
       SField,
       {
         label,
+        controlId,
         labelPosition,
         subLabel,
         labelWidth,
@@ -27853,16 +28301,21 @@ var SBarcodeInput = /* @__PURE__ */ react.forwardRef(
           ...style
         },
         children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "label",
+          "div",
           {
+            role: "presentation",
             className: "flex h-full w-full items-center",
             style: { gap: f.gap, padding: `0 ${f.paddingX}` },
+            onClick: (e) => {
+              if (e.target === e.currentTarget) e.currentTarget.querySelector("input")?.focus();
+            },
             children: [
               prefix,
               /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
                 {
                   ref: mergeRefs(ref, valueTooltip.valueRef),
+                  id: controlId,
                   name,
                   type: "text",
                   value: value ?? "",
@@ -27900,7 +28353,7 @@ var SBarcodeInput = /* @__PURE__ */ react.forwardRef(
                 {
                   icon: "close",
                   size: "xxs",
-                  ariaLabel: "clear",
+                  ariaLabel: "\uC9C0\uC6B0\uAE30",
                   onClick: () => {
                     onValueChange?.("");
                     setRuleError(runRules("", rules));
@@ -28217,6 +28670,8 @@ function STimePicker({
   const portalContainer = usePortalContainer();
   const triggerRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
+  const triggerId = useFieldControlId();
+  const triggerTextId = `${triggerId}-text`;
   const [popoverAlignOffset, setPopoverAlignOffset] = react.useState(0);
   const [focused, setFocused] = react.useState(false);
   const [ruleError, setRuleError] = react.useState("");
@@ -28254,6 +28709,7 @@ function STimePicker({
   return /* @__PURE__ */ jsxRuntime.jsx(
     SField,
     {
+      controlId: triggerId,
       label,
       labelPosition,
       subLabel,
@@ -28281,8 +28737,10 @@ function STimePicker({
           "div",
           {
             ref: triggerRef,
+            id: triggerId,
             role: "button",
             "aria-disabled": disabled,
+            "aria-labelledby": label ? `${fieldLabelId(triggerId)} ${triggerTextId}` : void 0,
             tabIndex: disabled ? -1 : 0,
             "data-name": name,
             onFocus: () => setFocused(true),
@@ -28312,6 +28770,7 @@ function STimePicker({
               /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
+                  id: triggerTextId,
                   className: "flex-1 truncate text-center",
                   style: {
                     minWidth: dims.minWidth,
@@ -28687,6 +29146,8 @@ function STimeRangePicker({
   const portalContainer = usePortalContainer();
   const triggerRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
+  const triggerId = useFieldControlId();
+  const triggerTextId = `${triggerId}-text`;
   const [popoverAlignOffset, setPopoverAlignOffset] = react.useState(0);
   const [focused, setFocused] = react.useState(false);
   const [ruleError, setRuleError] = react.useState("");
@@ -28726,6 +29187,7 @@ function STimeRangePicker({
   return /* @__PURE__ */ jsxRuntime.jsx(
     SField,
     {
+      controlId: triggerId,
       label,
       labelPosition,
       subLabel,
@@ -28753,8 +29215,10 @@ function STimeRangePicker({
           "div",
           {
             ref: triggerRef,
+            id: triggerId,
             role: "button",
             "aria-disabled": disabled,
+            "aria-labelledby": label ? `${fieldLabelId(triggerId)} ${triggerTextId}` : void 0,
             tabIndex: disabled ? -1 : 0,
             "data-name": name,
             onFocus: () => setFocused(true),
@@ -28784,6 +29248,7 @@ function STimeRangePicker({
               /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
+                  id: triggerTextId,
                   className: "flex-1 truncate text-center",
                   style: {
                     minWidth: dims.minWidth,
@@ -28990,6 +29455,7 @@ exports.SSearchInput = SSearchInput;
 exports.SSectionHeaderCard = SSectionHeaderCard2;
 exports.SSelect = SSelect2;
 exports.SSkeleton = SSkeleton;
+exports.SSlider = SSlider;
 exports.SSplitter = SSplitter2;
 exports.SStepper = SStepper;
 exports.SSwitch = SSwitch;
@@ -29023,6 +29489,7 @@ exports.TIMEPICKER_SIZES = TIMEPICKER_SIZES;
 exports.TIMEPICKER_SIZE_CONFIG = TIMEPICKER_SIZE_CONFIG;
 exports.buttonPreset = buttonPreset;
 exports.cn = cn;
+exports.fieldLabelId = fieldLabelId;
 exports.fieldWidthValue = fieldWidthValue;
 exports.fileExtension = fileExtension;
 exports.findGnbAncestors = findGnbAncestors;