sellmate-design-system-react 0.6.0 → 0.7.0

package/dist/components/SScrollArea/SScrollArea.cjs

@@ -0,0 +1,64 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+var twMerge = tailwindMerge.extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [{ text: ["10", "11", "12", "13", "14", "16", "18", "20", "24", "28", "32"] }]
+    }
+  }
+});
+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]";
+var AXIS_CLASS = {
+  vertical: "overflow-x-hidden overflow-y-auto",
+  horizontal: "overflow-x-auto overflow-y-hidden",
+  both: "overflow-auto"
+};
+var SScrollArea = react.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__ */ jsxRuntime.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
+    }
+  );
+});
+
+exports.SScrollArea = SScrollArea;
+//# sourceMappingURL=SScrollArea.cjs.map
+//# sourceMappingURL=SScrollArea.cjs.map

package/dist/components/SScrollArea/SScrollArea.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/lib/scrollbar.ts","../../../src/components/SScrollArea/SScrollArea.tsx"],"names":["extendTailwindMerge","clsx","forwardRef","SScrollArea","jsx"],"mappings":";;;;;;;AAQA,IAAM,UAAUA,iCAAA,CAAoB;AAAA,EAClC,MAAA,EAAQ;AAAA,IACN,WAAA,EAAa;AAAA,MACX,aAAa,CAAC,EAAE,IAAA,EAAM,CAAC,MAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAI,GAAG;AAAA;AAC5F;AAEJ,CAAC,CAAA;AAMM,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;;;ACVA,IAAM,uBAAA,GACJ,qKAAA;AAIK,IAAM,eAAA,GACX,GAAG,uBAAuB,CAAA,gaAAA,CAAA;AAMrB,IAAM,wBAAA,GACX,kNAAA;AAUK,IAAM,4BAAA,GACX,2TAAA;ACzBF,IAAM,UAAA,GAA8C;AAAA,EAClD,QAAA,EAAU,mCAAA;AAAA,EACV,UAAA,EAAY,mCAAA;AAAA,EACZ,IAAA,EAAM;AACR,CAAA;AAqBO,IAAM,WAAA,GAAcC,gBAAA,CAA6C,SAASC,YAAAA,CAC/E;AAAA,EACE,IAAA,GAAO,MAAA;AAAA,EACP,UAAA,GAAa,KAAA;AAAA,EACb,QAAA,GAAW,KAAA;AAAA,EACX,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,WAAA,GAA6B,EAAE,GAAG,KAAA,EAAM;AAC9C,EAAA,IAAI,SAAA,cAAuB,SAAA,GAAY,SAAA;AACvC,EAAA,IAAI,QAAA,cAAsB,QAAA,GAAW,QAAA;AAErC,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,WAAW,IAAI,CAAA;AAAA,QACf,eAAA;AAAA,QACA,UAAA,IAAc,wBAAA;AAAA,QACd,QAAA,IAAY,4BAAA;AAAA,QACZ;AAAA,OACF;AAAA,MACA,KAAA,EAAO,WAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC","file":"SScrollArea.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * 공용 커스텀 스크롤바 클래스.\n * Stencil의 styles/scrollbar.scss mixin과 짝을 이루는 단일 기준이며,\n * 스크롤 영역을 가진 컴포넌트는 DOM을 감싸지 않고 이 클래스를 직접 붙여 쓴다.\n *\n * SVG 스펙: 트랙 12px / 썸 8px(grey-45, 2px 인셋, radius 4).\n * 인셋은 투명 테두리 + padding-box 클립으로 만들어, 트랙을 칠하든 안 칠하든 썸이 8px로 보인다.\n */\n\n// Chrome 121+/WebKit는 scrollbar-width·scrollbar-color의 계산값이 초기값(auto)이 아니면\n// ::-webkit-scrollbar-* 를 통째로 무시한다(CSSWG 결정). 표준 속성을 무조건 켜면 아래 트랙/썸이\n// 전부 죽으므로, webkit 유사요소가 없는 브라우저(Firefox)에서만 적용한다.\nconst FIREFOX_SCROLLBAR_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] ' +\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]';\n\n/** 스크롤 영역 기본 스크롤바. overflow 클래스는 각 컴포넌트가 따로 지정한다. */\nexport const SCROLLBAR_CLASS =\n  `${FIREFOX_SCROLLBAR_CLASS} ` +\n  '[&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent ' +\n  '[&::-webkit-scrollbar-track]:bg-transparent ' +\n  '[&::-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';\n\n/** background: 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다. */\nexport const SCROLLBAR_TRACK_BG_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] ' +\n  '[&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)]';\n\n/**\n * bordered: 스크롤바와 콘텐츠 사이 1px 구분선.\n * 단축 속성으로 한 변만 지정한다 — border-solid는 네 변에 걸려 트랙에 기본 3px 테두리를 만든다.\n * 썸과 트랙은 형제 박스라 트랙의 구분선이 썸을 밀어주지 않는다. 구분선이 인셋 2px 중 1px을\n * 차지해 좌우 여백이 1px/2px로 어긋나므로, 썸 인셋을 같은 만큼 키워 2px/2px로 되돌린다(썸 8px → 7px).\n * Firefox는 thin 스크롤바를 이 수준으로 커스터마이즈할 수 없어 적용되지 않는다.\n */\nexport const SCROLLBAR_TRACK_BORDER_CLASS =\n  '[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] ' +\n  '[&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]';\n","'use client';\n\nimport { forwardRef, type CSSProperties, type HTMLAttributes } from 'react';\nimport { cn } from '../../lib/cn';\nimport {\n  SCROLLBAR_CLASS,\n  SCROLLBAR_TRACK_BG_CLASS,\n  SCROLLBAR_TRACK_BORDER_CLASS,\n} from '../../lib/scrollbar';\nimport type { SScrollAreaAxis } from './scrollArea.config';\n\nconst AXIS_CLASS: Record<SScrollAreaAxis, string> = {\n  vertical: 'overflow-x-hidden overflow-y-auto',\n  horizontal: 'overflow-x-auto overflow-y-hidden',\n  both: 'overflow-auto',\n};\n\nexport interface SScrollAreaProps extends HTMLAttributes<HTMLDivElement> {\n  /** 스크롤 방향. vertical=세로만, horizontal=가로만, both=양방향 */\n  axis?: SScrollAreaAxis;\n  /** true면 스크롤바 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다. */\n  background?: boolean;\n  /** true면 스크롤바와 콘텐츠 사이에 1px 구분선을 그린다. 컨테이너 테두리가 아니다. */\n  bordered?: boolean;\n  /** viewport 최대 높이 (예: '400px'). 비우면 부모 크기를 따른다. */\n  maxHeight?: string;\n  /** viewport 최대 너비 (예: '480px'). 비우면 부모 크기를 따른다. */\n  maxWidth?: string;\n}\n\n/**\n * SScrollArea — sd-scroll-area 포팅.\n * 오버플로우 콘텐츠를 커스텀 네이티브 스크롤바로 감싸는 영역.\n * background·bordered는 컨테이너가 아니라 스크롤바에만 적용된다.\n * 크기는 소비자가 className/style 로 지정한다(호스트 오버라이드 가능).\n */\nexport const SScrollArea = forwardRef<HTMLDivElement, SScrollAreaProps>(function SScrollArea(\n  {\n    axis = 'both',\n    background = false,\n    bordered = false,\n    maxHeight,\n    maxWidth,\n    className,\n    style,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const mergedStyle: CSSProperties = { ...style };\n  if (maxHeight) mergedStyle.maxHeight = maxHeight;\n  if (maxWidth) mergedStyle.maxWidth = maxWidth;\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        AXIS_CLASS[axis],\n        SCROLLBAR_CLASS,\n        background && SCROLLBAR_TRACK_BG_CLASS,\n        bordered && SCROLLBAR_TRACK_BORDER_CLASS,\n        className,\n      )}\n      style={mergedStyle}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n"]}

package/dist/components/SScrollArea/SScrollArea.d.ts

@@ -0,0 +1,21 @@
+import { type HTMLAttributes } from 'react';
+import type { SScrollAreaAxis } from './scrollArea.config';
+export interface SScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
+    /** 스크롤 방향. vertical=세로만, horizontal=가로만, both=양방향 */
+    axis?: SScrollAreaAxis;
+    /** true면 스크롤바 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다. */
+    background?: boolean;
+    /** true면 스크롤바와 콘텐츠 사이에 1px 구분선을 그린다. 컨테이너 테두리가 아니다. */
+    bordered?: boolean;
+    /** viewport 최대 높이 (예: '400px'). 비우면 부모 크기를 따른다. */
+    maxHeight?: string;
+    /** viewport 최대 너비 (예: '480px'). 비우면 부모 크기를 따른다. */
+    maxWidth?: string;
+}
+/**
+ * SScrollArea — sd-scroll-area 포팅.
+ * 오버플로우 콘텐츠를 커스텀 네이티브 스크롤바로 감싸는 영역.
+ * background·bordered는 컨테이너가 아니라 스크롤바에만 적용된다.
+ * 크기는 소비자가 className/style 로 지정한다(호스트 오버라이드 가능).
+ */
+export declare const SScrollArea: import("react").ForwardRefExoticComponent<SScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SScrollArea/SScrollArea.js

@@ -0,0 +1,62 @@
+"use client";
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [{ text: ["10", "11", "12", "13", "14", "16", "18", "20", "24", "28", "32"] }]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(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]";
+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
+    }
+  );
+});
+
+export { SScrollArea };
+//# sourceMappingURL=SScrollArea.js.map
+//# sourceMappingURL=SScrollArea.js.map

package/dist/components/SScrollArea/SScrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/lib/scrollbar.ts","../../../src/components/SScrollArea/SScrollArea.tsx"],"names":["SScrollArea"],"mappings":";;;;;AAQA,IAAM,UAAU,mBAAA,CAAoB;AAAA,EAClC,MAAA,EAAQ;AAAA,IACN,WAAA,EAAa;AAAA,MACX,aAAa,CAAC,EAAE,IAAA,EAAM,CAAC,MAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAI,GAAG;AAAA;AAC5F;AAEJ,CAAC,CAAA;AAMM,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;;;ACVA,IAAM,uBAAA,GACJ,qKAAA;AAIK,IAAM,eAAA,GACX,GAAG,uBAAuB,CAAA,gaAAA,CAAA;AAMrB,IAAM,wBAAA,GACX,kNAAA;AAUK,IAAM,4BAAA,GACX,2TAAA;ACzBF,IAAM,UAAA,GAA8C;AAAA,EAClD,QAAA,EAAU,mCAAA;AAAA,EACV,UAAA,EAAY,mCAAA;AAAA,EACZ,IAAA,EAAM;AACR,CAAA;AAqBO,IAAM,WAAA,GAAc,UAAA,CAA6C,SAASA,YAAAA,CAC/E;AAAA,EACE,IAAA,GAAO,MAAA;AAAA,EACP,UAAA,GAAa,KAAA;AAAA,EACb,QAAA,GAAW,KAAA;AAAA,EACX,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,WAAA,GAA6B,EAAE,GAAG,KAAA,EAAM;AAC9C,EAAA,IAAI,SAAA,cAAuB,SAAA,GAAY,SAAA;AACvC,EAAA,IAAI,QAAA,cAAsB,QAAA,GAAW,QAAA;AAErC,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,WAAW,IAAI,CAAA;AAAA,QACf,eAAA;AAAA,QACA,UAAA,IAAc,wBAAA;AAAA,QACd,QAAA,IAAY,4BAAA;AAAA,QACZ;AAAA,OACF;AAAA,MACA,KAAA,EAAO,WAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC","file":"SScrollArea.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * 공용 커스텀 스크롤바 클래스.\n * Stencil의 styles/scrollbar.scss mixin과 짝을 이루는 단일 기준이며,\n * 스크롤 영역을 가진 컴포넌트는 DOM을 감싸지 않고 이 클래스를 직접 붙여 쓴다.\n *\n * SVG 스펙: 트랙 12px / 썸 8px(grey-45, 2px 인셋, radius 4).\n * 인셋은 투명 테두리 + padding-box 클립으로 만들어, 트랙을 칠하든 안 칠하든 썸이 8px로 보인다.\n */\n\n// Chrome 121+/WebKit는 scrollbar-width·scrollbar-color의 계산값이 초기값(auto)이 아니면\n// ::-webkit-scrollbar-* 를 통째로 무시한다(CSSWG 결정). 표준 속성을 무조건 켜면 아래 트랙/썸이\n// 전부 죽으므로, webkit 유사요소가 없는 브라우저(Firefox)에서만 적용한다.\nconst FIREFOX_SCROLLBAR_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] ' +\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]';\n\n/** 스크롤 영역 기본 스크롤바. overflow 클래스는 각 컴포넌트가 따로 지정한다. */\nexport const SCROLLBAR_CLASS =\n  `${FIREFOX_SCROLLBAR_CLASS} ` +\n  '[&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent ' +\n  '[&::-webkit-scrollbar-track]:bg-transparent ' +\n  '[&::-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';\n\n/** background: 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다. */\nexport const SCROLLBAR_TRACK_BG_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] ' +\n  '[&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)]';\n\n/**\n * bordered: 스크롤바와 콘텐츠 사이 1px 구분선.\n * 단축 속성으로 한 변만 지정한다 — border-solid는 네 변에 걸려 트랙에 기본 3px 테두리를 만든다.\n * 썸과 트랙은 형제 박스라 트랙의 구분선이 썸을 밀어주지 않는다. 구분선이 인셋 2px 중 1px을\n * 차지해 좌우 여백이 1px/2px로 어긋나므로, 썸 인셋을 같은 만큼 키워 2px/2px로 되돌린다(썸 8px → 7px).\n * Firefox는 thin 스크롤바를 이 수준으로 커스터마이즈할 수 없어 적용되지 않는다.\n */\nexport const SCROLLBAR_TRACK_BORDER_CLASS =\n  '[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] ' +\n  '[&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]';\n","'use client';\n\nimport { forwardRef, type CSSProperties, type HTMLAttributes } from 'react';\nimport { cn } from '../../lib/cn';\nimport {\n  SCROLLBAR_CLASS,\n  SCROLLBAR_TRACK_BG_CLASS,\n  SCROLLBAR_TRACK_BORDER_CLASS,\n} from '../../lib/scrollbar';\nimport type { SScrollAreaAxis } from './scrollArea.config';\n\nconst AXIS_CLASS: Record<SScrollAreaAxis, string> = {\n  vertical: 'overflow-x-hidden overflow-y-auto',\n  horizontal: 'overflow-x-auto overflow-y-hidden',\n  both: 'overflow-auto',\n};\n\nexport interface SScrollAreaProps extends HTMLAttributes<HTMLDivElement> {\n  /** 스크롤 방향. vertical=세로만, horizontal=가로만, both=양방향 */\n  axis?: SScrollAreaAxis;\n  /** true면 스크롤바 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다. */\n  background?: boolean;\n  /** true면 스크롤바와 콘텐츠 사이에 1px 구분선을 그린다. 컨테이너 테두리가 아니다. */\n  bordered?: boolean;\n  /** viewport 최대 높이 (예: '400px'). 비우면 부모 크기를 따른다. */\n  maxHeight?: string;\n  /** viewport 최대 너비 (예: '480px'). 비우면 부모 크기를 따른다. */\n  maxWidth?: string;\n}\n\n/**\n * SScrollArea — sd-scroll-area 포팅.\n * 오버플로우 콘텐츠를 커스텀 네이티브 스크롤바로 감싸는 영역.\n * background·bordered는 컨테이너가 아니라 스크롤바에만 적용된다.\n * 크기는 소비자가 className/style 로 지정한다(호스트 오버라이드 가능).\n */\nexport const SScrollArea = forwardRef<HTMLDivElement, SScrollAreaProps>(function SScrollArea(\n  {\n    axis = 'both',\n    background = false,\n    bordered = false,\n    maxHeight,\n    maxWidth,\n    className,\n    style,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const mergedStyle: CSSProperties = { ...style };\n  if (maxHeight) mergedStyle.maxHeight = maxHeight;\n  if (maxWidth) mergedStyle.maxWidth = maxWidth;\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        AXIS_CLASS[axis],\n        SCROLLBAR_CLASS,\n        background && SCROLLBAR_TRACK_BG_CLASS,\n        bordered && SCROLLBAR_TRACK_BORDER_CLASS,\n        className,\n      )}\n      style={mergedStyle}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n"]}

package/dist/components/SScrollArea/index.d.ts

@@ -0,0 +1,2 @@
+export { SScrollArea, type SScrollAreaProps } from './SScrollArea';
+export { SCROLL_AREA_AXES, type SScrollAreaAxis } from './scrollArea.config';

package/dist/components/SScrollArea/scrollArea.config.d.ts

@@ -0,0 +1,2 @@
+export declare const SCROLL_AREA_AXES: readonly ["vertical", "horizontal", "both"];
+export type SScrollAreaAxis = (typeof SCROLL_AREA_AXES)[number];

package/dist/components/SSelect/SSelect.cjs

@@ -37,6 +37,12 @@ var twMerge = tailwindMerge.extendTailwindMerge({
 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]";
 var PortalContainerContext = react.createContext(null);
 var InsideModalContext = react.createContext(false);
 PortalContainerContext.Provider;
@@ -3352,6 +3358,7 @@ var SField = react.forwardRef(function SField2({
   disabled = false,
   readOnly = false,
   width,
+  minWidth,
   multiline = false,
   borderless = false,
   children,
@@ -3448,6 +3455,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,
@@ -3900,7 +3908,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: [