sellmate-design-system-react 0.1.9 → 0.1.10

package/dist/components/SSelect/SSelect.js

@@ -3127,7 +3127,7 @@ var STooltip = forwardRef(function STooltip2({
   if (disabled || body == null) return /* @__PURE__ */ jsx(Fragment, { children: triggerNode });
   const isHover = trigger === "hover";
   const contentClass = cn(
-    "z-50 max-w-xs rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]",
+    "z-50 max-w-xs rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px]",
     FLOATING_SLIDE_ANIM,
     className
   );
@@ -3729,7 +3729,7 @@ function ItemList({
             isDepth1 ? "border-t border-solid border-[color:var(--cmp-listItem-depth1-border-color)] bg-[var(--cmp-listItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listItem-depth2-middle-bg)] font-medium",
             // 하위가 전부 비활성이면(select.config 에서 bubble-up) 어미 그룹도 비활성 처리:
             // 텍스트는 회색(#888), depth1 그룹은 파란 배경 대신 회색(#EEE)으로 (depth2 는 #F6F6F6 유지)
-            o.disabled && "text-[color:var(--cmp-listItem-content-disabled)]",
+            o.disabled && "cursor-not-allowed text-[color:var(--cmp-listItem-content-disabled)]",
             o.disabled && isDepth1 && "bg-[var(--cmp-listItem-depth1-bg-disabled)]"
           ),
           style: { paddingLeft: padLeft },
@@ -3744,10 +3744,14 @@ function ItemList({
       {
         value: o.value,
         disabled: o.disabled,
+        accessibleWhenDisabled: true,
         className: cn(
           itemBase,
           isSelected && !multi && "font-bold text-[color:var(--cmp-listItem-content-selected)]",
-          activeClass
+          // Ariakit은 disabled 항목도 hover 시 active(data-active-item) 처리하므로,
+          // 비활성 항목에는 hover 하이라이트를 적용하지 않아 회색 비활성 스타일을 유지한다.
+          // (원본 Stencil의 `--focused...:not(--disabled)` 규칙과 동일한 의도)
+          !o.disabled && activeClass
         ),
         style: { paddingTop: 4, paddingBottom: 4, paddingRight: 12, paddingLeft: padLeft },
         render: useSearch ? /* @__PURE__ */ jsx(Ariakit.ComboboxItem, {}) : void 0,
@@ -3760,7 +3764,7 @@ function ItemList({
                 "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[2px] border border-solid",
                 o.disabled ? (
                   // 비활성: 회색 채움(#E1E1E1) + 회색 테두리(#CCCCCC)
-                  "border-[color:var(--cmp-checkbox-border-disabled)] bg-[var(--cmp-checkbox-bg-disabled)]"
+                  "cursor-not-allowed border-[color:var(--cmp-checkbox-border-disabled)] bg-[var(--cmp-checkbox-bg-disabled)]"
                 ) : cn(
                   "group-data-[active-item]:border-[color:var(--cmp-checkbox-checked-border-inverse)]",
                   isSelected ? "border-[color:var(--cmp-checkbox-checked-bg-default)] bg-[var(--cmp-checkbox-checked-bg-default)] group-data-[active-item]:bg-transparent" : "border-[color:var(--cmp-checkbox-unchecked-border-default)] bg-transparent"