sellmate-design-system-react 0.6.1 → 0.8.0

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from './components/SIcon';
 export * from './components/SBadge';
 export * from './components/SCard';
 export * from './components/SDivider';
+export * from './components/SScrollArea';
 export * from './components/STag';
 export * from './components/SButton';
 export * from './components/SCallout';

package/dist/index.js

@@ -2909,6 +2909,52 @@ var SDivider = forwardRef(function SDivider2({ vertical = false, className, styl
   );
 });
 
+// src/lib/scrollbar.ts
+var FIREFOX_SCROLLBAR_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]";
+var SCROLLBAR_CLASS = `${FIREFOX_SCROLLBAR_CLASS} [&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding`;
+var SCROLLBAR_TRACK_BG_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] [&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)]";
+var SCROLLBAR_TRACK_BG_WHITE_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-white)] [&::-webkit-scrollbar]:bg-[var(--color-white)] [&::-webkit-scrollbar-track]:bg-[var(--color-white)]";
+var SCROLLBAR_TRACK_BORDER_CLASS = "[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] [&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]";
+var AXIS_CLASS = {
+  vertical: "overflow-x-hidden overflow-y-auto",
+  horizontal: "overflow-x-auto overflow-y-hidden",
+  both: "overflow-auto"
+};
+var SScrollArea = forwardRef(function SScrollArea2({
+  axis = "both",
+  background = false,
+  bordered = false,
+  maxHeight,
+  maxWidth,
+  className,
+  style,
+  children,
+  ...rest
+}, ref) {
+  const mergedStyle = { ...style };
+  if (maxHeight) mergedStyle.maxHeight = maxHeight;
+  if (maxWidth) mergedStyle.maxWidth = maxWidth;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        AXIS_CLASS[axis],
+        SCROLLBAR_CLASS,
+        background && SCROLLBAR_TRACK_BG_CLASS,
+        bordered && SCROLLBAR_TRACK_BORDER_CLASS,
+        className
+      ),
+      style: mergedStyle,
+      ...rest,
+      children
+    }
+  );
+});
+
+// src/components/SScrollArea/scrollArea.config.ts
+var SCROLL_AREA_AXES = ["vertical", "horizontal", "both"];
+
 // src/components/STag/tag.config.ts
 var TAG_SHAPES = ["square", "pill"];
 var TAG_SIZES = ["xs", "sm", "md"];
@@ -4444,7 +4490,18 @@ var SPopup = forwardRef(function SPopup2({
             )
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto", children }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "min-h-0 flex-1 overflow-auto",
+              SCROLLBAR_CLASS,
+              SCROLLBAR_TRACK_BG_CLASS,
+              SCROLLBAR_TRACK_BORDER_CLASS
+            ),
+            children
+          }
+        ),
         useFooter && /* @__PURE__ */ jsxs(
           "footer",
           {
@@ -5505,14 +5562,24 @@ var SGnb = forwardRef(function SGnb2({
     }
   );
 });
-var SPage = forwardRef(function SPage2({ className, style, children, ...rest }, ref) {
+var BACKGROUND_CLASS = {
+  frame: `bg-[var(--sys-color-bg-frame)] ${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`,
+  neutral: `bg-[var(--sys-color-bg-neutralLight)] ${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_WHITE_CLASS}`,
+  screen: `bg-[var(--sys-color-bg-screen)] ${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`
+};
+var SPage = forwardRef(function SPage2({ background = "frame", className, style, children, ...rest }, ref) {
   const layout = useContext(SLayoutContext);
   const gridStyle = layout?.header === "full" ? { gridColumn: 2, gridRow: 2 } : void 0;
   return /* @__PURE__ */ jsx(
     "main",
     {
       ref,
-      className: cn("box-border min-h-0 min-w-0 flex-1 overflow-auto p-20", className),
+      className: cn(
+        "box-border min-h-0 min-w-0 flex-1 overflow-auto p-20",
+        SCROLLBAR_CLASS,
+        BACKGROUND_CLASS[background],
+        className
+      ),
       style: { ...gridStyle, ...style },
       ...rest,
       children
@@ -5520,6 +5587,9 @@ var SPage = forwardRef(function SPage2({ className, style, children, ...rest },
   );
 });
 
+// src/components/SPage/page.config.ts
+var PAGE_BACKGROUNDS = ["frame", "neutral", "screen"];
+
 // src/components/STabs/tabs.config.ts
 var TAB_MAIN_SIZE = {
   md: { height: 36, paddingX: 24 },
@@ -5882,7 +5952,7 @@ function SStepper({
                   "aria-hidden": true,
                   className: "inline-flex h-px shrink-0 items-center",
                   style: { width: STEPPER_LAYOUT.dashWidth, color: STEPPER_COLORS.dash },
-                  children: /* @__PURE__ */ jsx(
+                  children: /* @__PURE__ */ jsxs(
                     "svg",
                     {
                       width: "20",
@@ -5890,16 +5960,12 @@ function SStepper({
                       viewBox: "0 0 20 1",
                       fill: "none",
                       xmlns: "http://www.w3.org/2000/svg",
-                      children: /* @__PURE__ */ jsx(
-                        "line",
-                        {
-                          y1: "0.5",
-                          x2: "20",
-                          y2: "0.5",
-                          stroke: "#888888",
-                          strokeDasharray: "4 4"
-                        }
-                      )
+                      children: [
+                        /* @__PURE__ */ jsx("rect", { width: "1.6", height: "1", fill: "#888888" }),
+                        /* @__PURE__ */ jsx("rect", { x: "5", width: "3.3", height: "1", fill: "#888888" }),
+                        /* @__PURE__ */ jsx("rect", { x: "11.7", width: "3.3", height: "1", fill: "#888888" }),
+                        /* @__PURE__ */ jsx("rect", { x: "18.4", width: "1.6", height: "1", fill: "#888888" })
+                      ]
                     }
                   )
                 }
@@ -6040,6 +6106,7 @@ var SField = forwardRef(function SField2({
   disabled = false,
   readOnly = false,
   width,
+  minWidth,
   multiline = false,
   borderless = false,
   children,
@@ -6075,6 +6142,7 @@ var SField = forwardRef(function SField2({
   const resolvedSuccess = status === "pass";
   const showError = resolvedError && errorMessage !== "";
   const interactive = !disabled && !readOnly;
+  const hug = cssLen(width) !== void 0;
   const borderColor = borderless ? "transparent" : disabled ? "var(--color-grey-45)" : interactive && focused ? "var(--sys-color-field-border-focus)" : resolvedSuccess ? "var(--sys-color-field-border-success)" : resolvedError ? "var(--sys-color-field-border-danger)" : "var(--sys-color-field-border-default)";
   const bgColor = borderless ? "transparent" : disabled ? "var(--color-grey-30)" : readOnly ? "var(--sys-color-field-bg-readOnly)" : "var(--sys-color-field-bg-default)";
   const textColor = disabled ? "var(--color-grey-65)" : readOnly ? "var(--sys-color-field-text-readOnly)" : "var(--sys-color-field-text-default)";
@@ -6083,7 +6151,13 @@ var SField = forwardRef(function SField2({
     {
       ref: rootRef,
       "data-name": name || void 0,
-      className: cn("inline-flex h-fit w-full flex-col", className),
+      className: cn(
+        "h-fit flex-col",
+        // hug 시 inline-flex 를 유지하면 기존에 세로로 쌓여 있던 필드들이 한 줄에 붙어버리므로
+        // 블록 레벨(flex)로 두어 쌓임은 그대로 유지한다. 나란히 놓으려면 부모를 flex 로.
+        hug ? "flex w-fit max-w-full" : "inline-flex w-full",
+        className
+      ),
       style,
       onMouseEnter,
       onMouseLeave,
@@ -6121,54 +6195,60 @@ var SField = forwardRef(function SField2({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "relative box-border flex min-w-0 items-stretch overflow-hidden border border-solid border-(--field-bc)",
-                interactive && !borderless && "hover:border-(--sys-color-field-border-focus) hover:shadow-[0px_0px_4px_0px_#0071ff66] focus-within:border-(--sys-color-field-border-focus) focus-within:shadow-[0px_0px_4px_0px_#0071ff66]",
-                disabled && "cursor-not-allowed"
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("flex min-w-0 flex-col", !hug && "flex-1"),
+            style: { width: cssLen(width), minWidth: cssLen(minWidth) },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "relative box-border flex min-w-0 items-stretch overflow-hidden border border-solid border-(--field-bc)",
+                    interactive && !borderless && "hover:border-(--sys-color-field-border-focus) hover:shadow-[0px_0px_4px_0px_#0071ff66] focus-within:border-(--sys-color-field-border-focus) focus-within:shadow-[0px_0px_4px_0px_#0071ff66]",
+                    disabled && "cursor-not-allowed"
+                  ),
+                  style: {
+                    // @ts-expect-error CSS 변수
+                    "--field-bc": borderColor,
+                    // focused/hovered prop이 명시된 경우 강조를 즉시 반영
+                    ...interactive && !borderless && focused ? { boxShadow: "0px 0px 4px 0px #0071ff66" } : {},
+                    ...multiline ? { minHeight: s.height } : { height: s.height },
+                    "borderRadius": s.radius,
+                    "background": bgColor,
+                    "color": textColor
+                  },
+                  "data-focused": focused || void 0,
+                  "data-hovered": hovered || void 0,
+                  children: [
+                    effectiveAddonLabel !== "" && /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: "flex shrink-0 items-center gap-(--cmp-field-addonLabel-gap) whitespace-nowrap border-r border-solid px-(--cmp-field-addonLabel-paddingX) text-12 font-medium leading-20",
+                        style: {
+                          // 원본 sd-field: labelWidth가 addon 폭(--sd-field-addon-width)에도 적용됨
+                          width: cssLen(labelWidth),
+                          justifyContent: ALIGN[addonAlign],
+                          background: "var(--cmp-field-addonLabel-bg)",
+                          borderRightColor: disabled ? "var(--cmp-field-addonLabel-border-disabled)" : "var(--cmp-field-addonLabel-border-default)",
+                          borderTopLeftRadius: s.radius - 1,
+                          borderBottomLeftRadius: s.radius - 1
+                        },
+                        children: [
+                          icon && !label && /* @__PURE__ */ jsx(SIcon, { name: icon, size: s.icon, color: iconColor }),
+                          effectiveAddonLabel
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1", children })
+                  ]
+                }
               ),
-              style: {
-                // @ts-expect-error CSS 변수
-                "--field-bc": borderColor,
-                // focused/hovered prop이 명시된 경우 강조를 즉시 반영
-                ...interactive && !borderless && focused ? { boxShadow: "0px 0px 4px 0px #0071ff66" } : {},
-                ...multiline ? { minHeight: s.height } : { height: s.height },
-                "width": cssLen(width),
-                "borderRadius": s.radius,
-                "background": bgColor,
-                "color": textColor
-              },
-              "data-focused": focused || void 0,
-              "data-hovered": hovered || void 0,
-              children: [
-                effectiveAddonLabel !== "" && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: "flex shrink-0 items-center gap-(--cmp-field-addonLabel-gap) whitespace-nowrap border-r border-solid px-(--cmp-field-addonLabel-paddingX) text-12 font-medium leading-20",
-                    style: {
-                      // 원본 sd-field: labelWidth가 addon 폭(--sd-field-addon-width)에도 적용됨
-                      width: cssLen(labelWidth),
-                      justifyContent: ALIGN[addonAlign],
-                      background: "var(--cmp-field-addonLabel-bg)",
-                      borderRightColor: disabled ? "var(--cmp-field-addonLabel-border-disabled)" : "var(--cmp-field-addonLabel-border-default)",
-                      borderTopLeftRadius: s.radius - 1,
-                      borderBottomLeftRadius: s.radius - 1
-                    },
-                    children: [
-                      icon && !label && /* @__PURE__ */ jsx(SIcon, { name: icon, size: s.icon, color: iconColor }),
-                      effectiveAddonLabel
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1", children })
-              ]
-            }
-          ),
-          showError ? /* @__PURE__ */ jsx("div", { className: "mt-(--cmp-field-contents-gap) text-12 font-normal leading-20 text-(--cmp-field-errorMessage-color)", children: errorMessage }) : hint !== "" ? /* @__PURE__ */ jsx("div", { className: "mt-(--cmp-field-contents-gap) text-12 font-normal leading-20 text-(--cmp-field-hint-color)", children: hint }) : null
-        ] })
+              showError ? /* @__PURE__ */ jsx("div", { className: "mt-(--cmp-field-contents-gap) text-12 font-normal leading-20 text-(--cmp-field-errorMessage-color)", children: errorMessage }) : hint !== "" ? /* @__PURE__ */ jsx("div", { className: "mt-(--cmp-field-contents-gap) text-12 font-normal leading-20 text-(--cmp-field-hint-color)", children: hint }) : null
+            ]
+          }
+        )
       ] })
     }
   );
@@ -6517,7 +6597,12 @@ var SSelect = forwardRef(function SSelect2({
               "div",
               {
                 ref: listRef,
-                className: "overflow-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-[8px] [&::-webkit-scrollbar]:bg-[var(--color-grey-25)] [&::-webkit-scrollbar:horizontal]:h-[8px] [&::-webkit-scrollbar-thumb]:rounded-[4px] [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-25)]",
+                className: cn(
+                  "overflow-auto",
+                  SCROLLBAR_CLASS,
+                  SCROLLBAR_TRACK_BG_CLASS,
+                  SCROLLBAR_TRACK_BORDER_CLASS
+                ),
                 style: { maxHeight: dropdownHeight },
                 onMouseLeave: () => setFocusedIndex(-1),
                 children: [
@@ -7006,7 +7091,7 @@ var STable = forwardRef(function STable2({
       position: "sticky",
       left: isLeft ? "var(--sticky-left-offset)" : void 0,
       right: isRight ? "var(--sticky-right-offset)" : void 0,
-      zIndex: 3
+      zIndex: 6
     };
   };
   const stickyShadowClass = (i) => {
@@ -7032,6 +7117,9 @@ var STable = forwardRef(function STable2({
             onScroll: handleScroll,
             className: cn(
               "bg-white relative overflow-auto border border-solid border-[color:var(--cmp-table-border-color)]",
+              SCROLLBAR_CLASS,
+              SCROLLBAR_TRACK_BG_CLASS,
+              SCROLLBAR_TRACK_BORDER_CLASS,
               radiusClass,
               // 원본 sd-table__scroll-container--loading/--no-data: 로딩·데이터 없음 시 스크롤·인터랙션 차단
               (isLoading || rowCount === 0) && "overflow-hidden pointer-events-none"
@@ -7060,7 +7148,7 @@ var STable = forwardRef(function STable2({
                             {
                               className: cn(
                                 // 원본 .th--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
-                                "sticky left-0 z-[4] border-b border-solid border-[color:var(--cmp-table-border-color)] bg-[var(--cmp-table-header-bg)] text-center align-middle",
+                                "sticky left-0 z-[7] border-b border-solid border-[color:var(--cmp-table-border-color)] bg-[var(--cmp-table-header-bg)] text-center align-middle",
                                 stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
                               ),
                               style: {
@@ -7085,13 +7173,13 @@ var STable = forwardRef(function STable2({
                             {
                               className: cn(
                                 "relative border-b border-solid border-[color:var(--cmp-table-border-color)] bg-[var(--cmp-table-header-bg)] px-[16px] text-[12px] font-medium leading-[20px] text-[color:var(--sys-color-fg-primary)]",
-                                stickyInfo(i).isSticky && "z-[4]",
+                                stickyInfo(i).isSticky && "z-[6]",
                                 stickyShadowClass(i),
                                 col.thClass
                               ),
                               style: { textAlign: col.align ?? "left", ...cellStyle(i), ...col.thStyle },
                               children: [
-                                /* @__PURE__ */ jsxs(
+                                /* @__PURE__ */ jsx(
                                   "span",
                                   {
                                     className: cn(
@@ -7100,10 +7188,10 @@ var STable = forwardRef(function STable2({
                                       col.align === "center" && "justify-center",
                                       col.align === "right" && "justify-end"
                                     ),
-                                    children: [
+                                    children: col.renderHeader ? col.renderHeader(col, i) : /* @__PURE__ */ jsxs(Fragment, { children: [
                                       col.icon && /* @__PURE__ */ jsx(SIcon, { name: col.icon, size: 16, color: col.iconColor }),
                                       /* @__PURE__ */ jsx("span", { className: "truncate", children: col.label })
-                                    ]
+                                    ] })
                                   }
                                 ),
                                 resizable && !col.autoWidth && i < visibleCols.length - 1 && // 원본 th__resizer: 셀 우측 경계 안쪽 4px 그립(좌우 1px #CCCCCC 라인, 세로 16px).
@@ -10403,6 +10491,8 @@ function formatTimeDisplay(value, type) {
   const displayHour = hour % 12 === 0 ? 12 : hour % 12;
   return `${meridiem} ${padTimePart(displayHour)}:${padTimePart(minute)}`;
 }
+var TIME_SELECTOR_WIDTH = 136;
+var MERIDIEM_TIME_SELECTOR_WIDTH = 154;
 function TimeSelector({
   value,
   useMeridiem,
@@ -10641,7 +10731,9 @@ function STimePicker({
   style
 }) {
   const portalContainer = usePortalContainer();
+  const triggerRef = useRef(null);
   const [open, setOpen] = useState(false);
+  const [popoverAlignOffset, setPopoverAlignOffset] = useState(0);
   const [focused, setFocused] = useState(false);
   const [ruleError, setRuleError] = useState("");
   const dims = TIMEPICKER_SIZE_CONFIG[size] ?? TIMEPICKER_SIZE_CONFIG.sm;
@@ -10662,6 +10754,11 @@ function STimePicker({
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
   const commitOpen = (next) => {
     if (disabled) return;
+    if (next) {
+      const triggerWidth = triggerRef.current?.getBoundingClientRect().width ?? 0;
+      const selectorWidth = effectiveUseMeridiem ? MERIDIEM_TIME_SELECTOR_WIDTH : TIME_SELECTOR_WIDTH;
+      setPopoverAlignOffset(Math.max(0, (triggerWidth - selectorWidth) / 2));
+    }
     setOpen(next);
     onOpenChange?.(next);
     if (!next && rules && rules.length > 0) setRuleError(runRules(value, rules));
@@ -10688,19 +10785,32 @@ function STimePicker({
       focused: focused || open,
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
+      minWidth: dims.fieldMinWidth,
       disabled,
       className,
-      style: { minWidth: dims.fieldMinWidth, ...style },
+      style,
       children: /* @__PURE__ */ jsxs(RPopover2.Root, { open, onOpenChange: commitOpen, children: [
         /* @__PURE__ */ jsx(RPopover2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-          "button",
+          "div",
           {
-            type: "button",
-            name,
-            disabled,
+            ref: triggerRef,
+            role: "button",
+            "aria-disabled": disabled,
+            tabIndex: disabled ? -1 : 0,
+            "data-name": name,
             onFocus: () => setFocused(true),
             onBlur: () => setFocused(false),
-            className: "flex h-full w-full items-center overflow-hidden bg-transparent outline-none disabled:cursor-not-allowed",
+            onKeyDown: (event) => {
+              if (disabled) return;
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                commitOpen(!open);
+              }
+            },
+            className: cn(
+              "flex h-full w-full items-center overflow-hidden bg-transparent outline-none",
+              disabled ? "cursor-not-allowed" : "cursor-pointer"
+            ),
             style: { padding: `0 ${dims.paddingX}`, gap: dims.gap, borderRadius: dims.radius },
             children: [
               /* @__PURE__ */ jsx(
@@ -10746,6 +10856,7 @@ function STimePicker({
             side: "bottom",
             align: "start",
             sideOffset: 4,
+            alignOffset: popoverAlignOffset,
             className: cn("z-50", FLOATING_SLIDE_ANIM),
             children: /* @__PURE__ */ jsx(
               TimeSelector,
@@ -10783,6 +10894,11 @@ function formatTimeRangeDisplay(value, type) {
   if (value == null || value[0] === "" || value[1] === "") return "";
   return `${formatTimeDisplay(value[0], type)} ~ ${formatTimeDisplay(value[1], type)}`;
 }
+var TIME_RANGE_SELECTOR_WIDTH = 345;
+var MIDDAY_FIELD_MIN_WIDTH = {
+  sm: 178,
+  md: 216
+};
 function RangeTimeSelector({
   value,
   useMeridiem,
@@ -11072,7 +11188,9 @@ function STimeRangePicker({
   style
 }) {
   const portalContainer = usePortalContainer();
+  const triggerRef = useRef(null);
   const [open, setOpen] = useState(false);
+  const [popoverAlignOffset, setPopoverAlignOffset] = useState(0);
   const [focused, setFocused] = useState(false);
   const [ruleError, setRuleError] = useState("");
   const dims = TIMEPICKER_SIZE_CONFIG[size] ?? TIMEPICKER_SIZE_CONFIG.sm;
@@ -11096,6 +11214,10 @@ function STimeRangePicker({
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
   const commitOpen = (next) => {
     if (disabled) return;
+    if (next) {
+      const triggerWidth = triggerRef.current?.getBoundingClientRect().width ?? 0;
+      setPopoverAlignOffset(Math.max(0, (triggerWidth - TIME_RANGE_SELECTOR_WIDTH) / 2));
+    }
     setOpen(next);
     onOpenChange?.(next);
     if (!next && rules && rules.length > 0) setRuleError(runRules(value, rules));
@@ -11122,19 +11244,32 @@ function STimeRangePicker({
       focused: focused || open,
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
+      minWidth: effectiveUseMeridiem ? MIDDAY_FIELD_MIN_WIDTH[size] : dims.fieldMinWidth,
       disabled,
       className,
-      style: { minWidth: dims.fieldMinWidth, ...style },
+      style,
       children: /* @__PURE__ */ jsxs(RPopover2.Root, { open, onOpenChange: commitOpen, children: [
         /* @__PURE__ */ jsx(RPopover2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-          "button",
+          "div",
           {
-            type: "button",
-            name,
-            disabled,
+            ref: triggerRef,
+            role: "button",
+            "aria-disabled": disabled,
+            tabIndex: disabled ? -1 : 0,
+            "data-name": name,
             onFocus: () => setFocused(true),
             onBlur: () => setFocused(false),
-            className: "flex h-full w-full items-center overflow-hidden bg-transparent outline-none disabled:cursor-not-allowed",
+            onKeyDown: (event) => {
+              if (disabled) return;
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                commitOpen(!open);
+              }
+            },
+            className: cn(
+              "flex h-full w-full items-center overflow-hidden bg-transparent outline-none",
+              disabled ? "cursor-not-allowed" : "cursor-pointer"
+            ),
             style: { padding: `0 ${dims.paddingX}`, gap: dims.gap, borderRadius: dims.radius },
             children: [
               /* @__PURE__ */ jsx(
@@ -11180,6 +11315,7 @@ function STimeRangePicker({
             side: "bottom",
             align: "start",
             sideOffset: 4,
+            alignOffset: popoverAlignOffset,
             className: cn("z-50", FLOATING_SLIDE_ANIM),
             children: /* @__PURE__ */ jsx(
               RangeTimeSelector,
@@ -11198,6 +11334,6 @@ function STimeRangePicker({
   );
 }
 
-export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, ICONS, SActionModal, SBadge, SBarcodeInput, SButton, SCalendar, SCallout, SCard, SCheckbox, SChip, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDateRangePicker, SDivider, SDropdownButton, SField, SFilePicker, SForm, SGhostButton, SGnb, SGuide, SIcon, SInput, SKeyValueTable, SLayout, SLayoutContext, SLinearProgress, SLoadingContainer, SLoadingModal, SLoadingViewport, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioGroup, SSelect, SStepper, SSwitch, STEPPER_SIZES, STable, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, findGnbAncestors, findGnbRailValue, isColorKey, loading, resolveColor, useSLayout };
+export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, ICONS, PAGE_BACKGROUNDS, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCallout, SCard, SCheckbox, SChip, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDateRangePicker, SDivider, SDropdownButton, SField, SFilePicker, SForm, SGhostButton, SGnb, SGuide, SIcon, SInput, SKeyValueTable, SLayout, SLayoutContext, SLinearProgress, SLoadingContainer, SLoadingModal, SLoadingViewport, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioGroup, SScrollArea, SSelect, SStepper, SSwitch, STEPPER_SIZES, STable, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, findGnbAncestors, findGnbRailValue, isColorKey, loading, resolveColor, useSLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map