sellmate-design-system-react 0.6.1 → 0.7.0

package/dist/components/STable/STable.cjs

@@ -40,6 +40,12 @@ function cn(...inputs) {
   return twMerge(clsx.clsx(inputs));
 }
 
+// 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_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]";
+
 // src/lib/color.ts
 var COLOR_KEYS = [
   "white",
@@ -3616,6 +3622,7 @@ var SField = react.forwardRef(function SField2({
   disabled = false,
   readOnly = false,
   width,
+  minWidth,
   multiline = false,
   borderless = false,
   children,
@@ -3712,6 +3719,7 @@ var SField = react.forwardRef(function SField2({
                 // focused/hovered prop이 명시된 경우 강조를 즉시 반영
                 ...interactive && !borderless && focused ? { boxShadow: "0px 0px 4px 0px #0071ff66" } : {},
                 ...multiline ? { minHeight: s.height } : { height: s.height },
+                "minWidth": cssLen(minWidth),
                 "width": cssLen(width),
                 "borderRadius": s.radius,
                 "background": bgColor,
@@ -4164,7 +4172,12 @@ var SSelect = react.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: [
@@ -4679,6 +4692,9 @@ var STable = react.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"