sellmate-design-system-react 2.1.2 → 3.0.0

package/dist/components/SList/SList.cjs

@@ -0,0 +1,38 @@
+"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));
+}
+var SList = react.forwardRef(function SList2({ className, children, useGap = false, usePadding = false, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        useGap && "flex flex-col gap-(--cmp-list-group-gap)",
+        usePadding && "p-(--cmp-list-group-padding)",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+SList.displayName = "SList";
+
+exports.SList = SList;
+//# sourceMappingURL=SList.cjs.map
+//# sourceMappingURL=SList.cjs.map

package/dist/components/SList/SList.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/SList/SList.tsx"],"names":["extendTailwindMerge","clsx","forwardRef","SList","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;ACRO,IAAM,KAAA,GAAQC,gBAAA,CAAuC,SAASC,MAAAA,CACnE,EAAE,SAAA,EAAW,QAAA,EAAU,MAAA,GAAS,KAAA,EAAO,UAAA,GAAa,KAAA,EAAO,GAAG,IAAA,IAC9D,GAAA,EACA;AACA,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,MAAA,IAAU,0CAAA;AAAA,QACV,UAAA,IAAc,8BAAA;AAAA,QACd;AAAA,OACF;AAAA,MACC,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;AAED,KAAA,CAAM,WAAA,GAAc,OAAA","file":"SList.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","'use client';\n\nimport { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '../../lib/cn';\n\nexport interface SListProps extends HTMLAttributes<HTMLDivElement> {\n  /** 리스트 컨테이너 내부에 렌더링할 내용 */\n  children?: ReactNode;\n  /** 리스트 아이템 사이 gap 토큰 적용 여부 */\n  useGap?: boolean;\n  /** 리스트 컨테이너 padding 토큰 적용 여부 */\n  usePadding?: boolean;\n}\n\nexport const SList = forwardRef<HTMLDivElement, SListProps>(function SList(\n  { className, children, useGap = false, usePadding = false, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        useGap && 'flex flex-col gap-(--cmp-list-group-gap)',\n        usePadding && 'p-(--cmp-list-group-padding)',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\nSList.displayName = 'SList';\n"]}

package/dist/components/SList/SList.d.ts

@@ -0,0 +1,10 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface SListProps extends HTMLAttributes<HTMLDivElement> {
+    /** 리스트 컨테이너 내부에 렌더링할 내용 */
+    children?: ReactNode;
+    /** 리스트 아이템 사이 gap 토큰 적용 여부 */
+    useGap?: boolean;
+    /** 리스트 컨테이너 padding 토큰 적용 여부 */
+    usePadding?: boolean;
+}
+export declare const SList: import("react").ForwardRefExoticComponent<SListProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SList/SList.js

@@ -0,0 +1,36 @@
+"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));
+}
+var SList = forwardRef(function SList2({ className, children, useGap = false, usePadding = false, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        useGap && "flex flex-col gap-(--cmp-list-group-gap)",
+        usePadding && "p-(--cmp-list-group-padding)",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+SList.displayName = "SList";
+
+export { SList };
+//# sourceMappingURL=SList.js.map
+//# sourceMappingURL=SList.js.map

package/dist/components/SList/SList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/SList/SList.tsx"],"names":["SList"],"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;ACRO,IAAM,KAAA,GAAQ,UAAA,CAAuC,SAASA,MAAAA,CACnE,EAAE,SAAA,EAAW,QAAA,EAAU,MAAA,GAAS,KAAA,EAAO,UAAA,GAAa,KAAA,EAAO,GAAG,IAAA,IAC9D,GAAA,EACA;AACA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,MAAA,IAAU,0CAAA;AAAA,QACV,UAAA,IAAc,8BAAA;AAAA,QACd;AAAA,OACF;AAAA,MACC,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;AAED,KAAA,CAAM,WAAA,GAAc,OAAA","file":"SList.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","'use client';\n\nimport { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '../../lib/cn';\n\nexport interface SListProps extends HTMLAttributes<HTMLDivElement> {\n  /** 리스트 컨테이너 내부에 렌더링할 내용 */\n  children?: ReactNode;\n  /** 리스트 아이템 사이 gap 토큰 적용 여부 */\n  useGap?: boolean;\n  /** 리스트 컨테이너 padding 토큰 적용 여부 */\n  usePadding?: boolean;\n}\n\nexport const SList = forwardRef<HTMLDivElement, SListProps>(function SList(\n  { className, children, useGap = false, usePadding = false, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        useGap && 'flex flex-col gap-(--cmp-list-group-gap)',\n        usePadding && 'p-(--cmp-list-group-padding)',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\nSList.displayName = 'SList';\n"]}

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

@@ -0,0 +1 @@
+export { SList, type SListProps } from './SList';

package/dist/components/SListItem/SListItem.cjs

@@ -0,0 +1,83 @@
+"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));
+}
+var SListItem = react.forwardRef(function SListItem2({
+  title,
+  depth = 1,
+  leading,
+  trailing,
+  bordered = false,
+  accentStripe = false,
+  dense = false,
+  disabled = false,
+  className,
+  onMouseEnter,
+  onMouseLeave,
+  ...rest
+}, ref) {
+  const [hovered, setHovered] = react.useState(false);
+  const renderState = { hovered, disabled };
+  const titleNode = typeof title === "function" ? title(renderState) : title;
+  const leadingNode = typeof leading === "function" ? leading(renderState) : leading;
+  const trailingNode = typeof trailing === "function" ? trailing(renderState) : trailing;
+  const handleMouseEnter = (event) => {
+    if (!disabled) setHovered(true);
+    onMouseEnter?.(event);
+  };
+  const handleMouseLeave = (event) => {
+    setHovered(false);
+    onMouseLeave?.(event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      "aria-disabled": disabled || void 0,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      className: cn(
+        "group/list-item relative flex w-full items-center justify-between bg-(--cmp-listItem-bg-default) text-left text-[14px] font-bold leading-[24px] text-(--cmp-listItem-text-default)",
+        disabled ? "pointer-events-none cursor-not-allowed text-(--sys-color-disabled-text)" : "hover:bg-(--cmp-listItem-bg-hover)",
+        dense ? "h-[32px] py-(--cmp-listItem-paddingY-dense)" : "h-[40px] py-(--cmp-listItem-paddingY-normal)",
+        "gap-(--cmp-listItem-gap)",
+        "pr-(--cmp-listItem-paddingX)",
+        depth === 2 ? "pl-[calc(var(--cmp-listItem-paddingX)+32px)]" : depth === 3 ? "pl-[calc(var(--cmp-listItem-paddingX)+64px)]" : "pl-(--cmp-listItem-paddingX)",
+        bordered ? "overflow-hidden rounded-(--cmp-listItem-radius-bordered) border border-(--cmp-listItem-border-default) hover:border-(--cmp-listItem-bordered-border-hover)" : "border-b border-(--cmp-listItem-border-default)",
+        className
+      ),
+      ...rest,
+      children: [
+        accentStripe && !bordered && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute bottom-[-1px] left-0 top-0 w-(--cmp-listItem-accentStripe-width) bg-(--cmp-listItem-accentStripe-color)"
+          }
+        ),
+        leadingNode,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex min-w-0 flex-1 flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: titleNode }) }),
+        trailingNode
+      ]
+    }
+  );
+});
+SListItem.displayName = "SListItem";
+
+exports.SListItem = SListItem;
+//# sourceMappingURL=SListItem.cjs.map
+//# sourceMappingURL=SListItem.cjs.map

package/dist/components/SListItem/SListItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/SListItem/SListItem.tsx"],"names":["extendTailwindMerge","clsx","forwardRef","SListItem","useState","jsxs","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;ACUO,IAAM,SAAA,GAAYC,gBAAA,CAA2C,SAASC,UAAAA,CAC3E;AAAA,EACE,KAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,OAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,YAAA,GAAe,KAAA;AAAA,EACf,KAAA,GAAQ,KAAA;AAAA,EACR,QAAA,GAAW,KAAA;AAAA,EACX,SAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,eAAS,KAAK,CAAA;AAC5C,EAAA,MAAM,WAAA,GAAc,EAAE,OAAA,EAAS,QAAA,EAAS;AACxC,EAAA,MAAM,YAAY,OAAO,KAAA,KAAU,UAAA,GAAa,KAAA,CAAM,WAAW,CAAA,GAAI,KAAA;AACrE,EAAA,MAAM,cAAc,OAAO,OAAA,KAAY,UAAA,GAAa,OAAA,CAAQ,WAAW,CAAA,GAAI,OAAA;AAC3E,EAAA,MAAM,eAAe,OAAO,QAAA,KAAa,UAAA,GAAa,QAAA,CAAS,WAAW,CAAA,GAAI,QAAA;AAE9E,EAAA,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAAsC;AAC9D,IAAA,IAAI,CAAC,QAAA,EAAU,UAAA,CAAW,IAAI,CAAA;AAC9B,IAAA,YAAA,GAAe,KAAK,CAAA;AAAA,EACtB,CAAA;AAEA,EAAA,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAAsC;AAC9D,IAAA,UAAA,CAAW,KAAK,CAAA;AAChB,IAAA,YAAA,GAAe,KAAK,CAAA;AAAA,EACtB,CAAA;AAEA,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,iBAAe,QAAA,IAAY,MAAA;AAAA,MAC3B,YAAA,EAAc,gBAAA;AAAA,MACd,YAAA,EAAc,gBAAA;AAAA,MACd,SAAA,EAAW,EAAA;AAAA,QACT,oLAAA;AAAA,QACA,WACI,yEAAA,GACA,oCAAA;AAAA,QACJ,QACI,6CAAA,GACA,8CAAA;AAAA,QACJ,0BAAA;AAAA,QACA,8BAAA;AAAA,QACA,KAAA,KAAU,CAAA,GACN,8CAAA,GACA,KAAA,KAAU,IACR,8CAAA,GACA,8BAAA;AAAA,QACN,WACI,4JAAA,GACA,iDAAA;AAAA,QACJ;AAAA,OACF;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,YAAA,IAAgB,CAAC,QAAA,oBAChBC,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAY,MAAA;AAAA,YACZ,SAAA,EAAU;AAAA;AAAA,SACZ;AAAA,QAED,WAAA;AAAA,uCACA,MAAA,EAAA,EAAK,SAAA,EAAU,gCACd,QAAA,kBAAAA,cAAA,CAAC,MAAA,EAAA,EAAM,qBAAU,CAAA,EACnB,CAAA;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ,CAAC;AAED,SAAA,CAAU,WAAA,GAAc,WAAA","file":"SListItem.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","'use client';\n\nimport { forwardRef, useState, type HTMLAttributes, type MouseEvent, type ReactNode } from 'react';\nimport { cn } from '../../lib/cn';\n\nexport interface SListItemRenderState {\n  hovered: boolean;\n  disabled: boolean;\n}\n\nexport type SListItemRenderProp = (state: SListItemRenderState) => ReactNode;\nexport type SListItemSlot = ReactNode | SListItemRenderProp;\n\nexport interface SListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {\n  /** 리스트 아이템 제목 */\n  title: SListItemSlot;\n  /** 중첩 단계. Figma 기준 1~3단계 */\n  depth?: 1 | 2 | 3;\n  /** 타이틀 앞에 표시할 아이콘/콘텐츠 */\n  leading?: SListItemSlot;\n  /** 타이틀 뒤에 표시할 태그/콘텐츠 */\n  trailing?: SListItemSlot;\n  /** 외곽 테두리 사용 여부 */\n  bordered?: boolean;\n  /** 아이템 왼쪽 accent stripe 표시 여부 */\n  accentStripe?: boolean;\n  /** 조밀한 높이 사용 여부 */\n  dense?: boolean;\n  /** 비활성 상태 여부 */\n  disabled?: boolean;\n}\n\nexport const SListItem = forwardRef<HTMLDivElement, SListItemProps>(function SListItem(\n  {\n    title,\n    depth = 1,\n    leading,\n    trailing,\n    bordered = false,\n    accentStripe = false,\n    dense = false,\n    disabled = false,\n    className,\n    onMouseEnter,\n    onMouseLeave,\n    ...rest\n  },\n  ref,\n) {\n  const [hovered, setHovered] = useState(false);\n  const renderState = { hovered, disabled };\n  const titleNode = typeof title === 'function' ? title(renderState) : title;\n  const leadingNode = typeof leading === 'function' ? leading(renderState) : leading;\n  const trailingNode = typeof trailing === 'function' ? trailing(renderState) : trailing;\n\n  const handleMouseEnter = (event: MouseEvent<HTMLDivElement>) => {\n    if (!disabled) setHovered(true);\n    onMouseEnter?.(event);\n  };\n\n  const handleMouseLeave = (event: MouseEvent<HTMLDivElement>) => {\n    setHovered(false);\n    onMouseLeave?.(event);\n  };\n\n  return (\n    <div\n      ref={ref}\n      aria-disabled={disabled || undefined}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={cn(\n        'group/list-item relative flex w-full items-center justify-between bg-(--cmp-listItem-bg-default) text-left text-[14px] font-bold leading-[24px] text-(--cmp-listItem-text-default)',\n        disabled\n          ? 'pointer-events-none cursor-not-allowed text-(--sys-color-disabled-text)'\n          : 'hover:bg-(--cmp-listItem-bg-hover)',\n        dense\n          ? 'h-[32px] py-(--cmp-listItem-paddingY-dense)'\n          : 'h-[40px] py-(--cmp-listItem-paddingY-normal)',\n        'gap-(--cmp-listItem-gap)',\n        'pr-(--cmp-listItem-paddingX)',\n        depth === 2\n          ? 'pl-[calc(var(--cmp-listItem-paddingX)+32px)]'\n          : depth === 3\n            ? 'pl-[calc(var(--cmp-listItem-paddingX)+64px)]'\n            : 'pl-(--cmp-listItem-paddingX)',\n        bordered\n          ? 'overflow-hidden rounded-(--cmp-listItem-radius-bordered) border border-(--cmp-listItem-border-default) hover:border-(--cmp-listItem-bordered-border-hover)'\n          : 'border-b border-(--cmp-listItem-border-default)',\n        className,\n      )}\n      {...rest}\n    >\n      {accentStripe && !bordered && (\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute bottom-[-1px] left-0 top-0 w-(--cmp-listItem-accentStripe-width) bg-(--cmp-listItem-accentStripe-color)\"\n        />\n      )}\n      {leadingNode}\n      <span className=\"flex min-w-0 flex-1 flex-col\">\n        <span>{titleNode}</span>\n      </span>\n      {trailingNode}\n    </div>\n  );\n});\n\nSListItem.displayName = 'SListItem';\n"]}

package/dist/components/SListItem/SListItem.d.ts

@@ -0,0 +1,26 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface SListItemRenderState {
+    hovered: boolean;
+    disabled: boolean;
+}
+export type SListItemRenderProp = (state: SListItemRenderState) => ReactNode;
+export type SListItemSlot = ReactNode | SListItemRenderProp;
+export interface SListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
+    /** 리스트 아이템 제목 */
+    title: SListItemSlot;
+    /** 중첩 단계. Figma 기준 1~3단계 */
+    depth?: 1 | 2 | 3;
+    /** 타이틀 앞에 표시할 아이콘/콘텐츠 */
+    leading?: SListItemSlot;
+    /** 타이틀 뒤에 표시할 태그/콘텐츠 */
+    trailing?: SListItemSlot;
+    /** 외곽 테두리 사용 여부 */
+    bordered?: boolean;
+    /** 아이템 왼쪽 accent stripe 표시 여부 */
+    accentStripe?: boolean;
+    /** 조밀한 높이 사용 여부 */
+    dense?: boolean;
+    /** 비활성 상태 여부 */
+    disabled?: boolean;
+}
+export declare const SListItem: import("react").ForwardRefExoticComponent<SListItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SListItem/SListItem.js

@@ -0,0 +1,81 @@
+"use client";
+import { forwardRef, useState } from 'react';
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsxs, 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));
+}
+var SListItem = forwardRef(function SListItem2({
+  title,
+  depth = 1,
+  leading,
+  trailing,
+  bordered = false,
+  accentStripe = false,
+  dense = false,
+  disabled = false,
+  className,
+  onMouseEnter,
+  onMouseLeave,
+  ...rest
+}, ref) {
+  const [hovered, setHovered] = useState(false);
+  const renderState = { hovered, disabled };
+  const titleNode = typeof title === "function" ? title(renderState) : title;
+  const leadingNode = typeof leading === "function" ? leading(renderState) : leading;
+  const trailingNode = typeof trailing === "function" ? trailing(renderState) : trailing;
+  const handleMouseEnter = (event) => {
+    if (!disabled) setHovered(true);
+    onMouseEnter?.(event);
+  };
+  const handleMouseLeave = (event) => {
+    setHovered(false);
+    onMouseLeave?.(event);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "aria-disabled": disabled || void 0,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      className: cn(
+        "group/list-item relative flex w-full items-center justify-between bg-(--cmp-listItem-bg-default) text-left text-[14px] font-bold leading-[24px] text-(--cmp-listItem-text-default)",
+        disabled ? "pointer-events-none cursor-not-allowed text-(--sys-color-disabled-text)" : "hover:bg-(--cmp-listItem-bg-hover)",
+        dense ? "h-[32px] py-(--cmp-listItem-paddingY-dense)" : "h-[40px] py-(--cmp-listItem-paddingY-normal)",
+        "gap-(--cmp-listItem-gap)",
+        "pr-(--cmp-listItem-paddingX)",
+        depth === 2 ? "pl-[calc(var(--cmp-listItem-paddingX)+32px)]" : depth === 3 ? "pl-[calc(var(--cmp-listItem-paddingX)+64px)]" : "pl-(--cmp-listItem-paddingX)",
+        bordered ? "overflow-hidden rounded-(--cmp-listItem-radius-bordered) border border-(--cmp-listItem-border-default) hover:border-(--cmp-listItem-bordered-border-hover)" : "border-b border-(--cmp-listItem-border-default)",
+        className
+      ),
+      ...rest,
+      children: [
+        accentStripe && !bordered && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute bottom-[-1px] left-0 top-0 w-(--cmp-listItem-accentStripe-width) bg-(--cmp-listItem-accentStripe-color)"
+          }
+        ),
+        leadingNode,
+        /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 flex-col", children: /* @__PURE__ */ jsx("span", { children: titleNode }) }),
+        trailingNode
+      ]
+    }
+  );
+});
+SListItem.displayName = "SListItem";
+
+export { SListItem };
+//# sourceMappingURL=SListItem.js.map
+//# sourceMappingURL=SListItem.js.map

package/dist/components/SListItem/SListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/SListItem/SListItem.tsx"],"names":["SListItem"],"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;ACUO,IAAM,SAAA,GAAY,UAAA,CAA2C,SAASA,UAAAA,CAC3E;AAAA,EACE,KAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,OAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,YAAA,GAAe,KAAA;AAAA,EACf,KAAA,GAAQ,KAAA;AAAA,EACR,QAAA,GAAW,KAAA;AAAA,EACX,SAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5C,EAAA,MAAM,WAAA,GAAc,EAAE,OAAA,EAAS,QAAA,EAAS;AACxC,EAAA,MAAM,YAAY,OAAO,KAAA,KAAU,UAAA,GAAa,KAAA,CAAM,WAAW,CAAA,GAAI,KAAA;AACrE,EAAA,MAAM,cAAc,OAAO,OAAA,KAAY,UAAA,GAAa,OAAA,CAAQ,WAAW,CAAA,GAAI,OAAA;AAC3E,EAAA,MAAM,eAAe,OAAO,QAAA,KAAa,UAAA,GAAa,QAAA,CAAS,WAAW,CAAA,GAAI,QAAA;AAE9E,EAAA,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAAsC;AAC9D,IAAA,IAAI,CAAC,QAAA,EAAU,UAAA,CAAW,IAAI,CAAA;AAC9B,IAAA,YAAA,GAAe,KAAK,CAAA;AAAA,EACtB,CAAA;AAEA,EAAA,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAAsC;AAC9D,IAAA,UAAA,CAAW,KAAK,CAAA;AAChB,IAAA,YAAA,GAAe,KAAK,CAAA;AAAA,EACtB,CAAA;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,iBAAe,QAAA,IAAY,MAAA;AAAA,MAC3B,YAAA,EAAc,gBAAA;AAAA,MACd,YAAA,EAAc,gBAAA;AAAA,MACd,SAAA,EAAW,EAAA;AAAA,QACT,oLAAA;AAAA,QACA,WACI,yEAAA,GACA,oCAAA;AAAA,QACJ,QACI,6CAAA,GACA,8CAAA;AAAA,QACJ,0BAAA;AAAA,QACA,8BAAA;AAAA,QACA,KAAA,KAAU,CAAA,GACN,8CAAA,GACA,KAAA,KAAU,IACR,8CAAA,GACA,8BAAA;AAAA,QACN,WACI,4JAAA,GACA,iDAAA;AAAA,QACJ;AAAA,OACF;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,YAAA,IAAgB,CAAC,QAAA,oBAChB,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAY,MAAA;AAAA,YACZ,SAAA,EAAU;AAAA;AAAA,SACZ;AAAA,QAED,WAAA;AAAA,4BACA,MAAA,EAAA,EAAK,SAAA,EAAU,gCACd,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAM,qBAAU,CAAA,EACnB,CAAA;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ,CAAC;AAED,SAAA,CAAU,WAAA,GAAc,WAAA","file":"SListItem.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","'use client';\n\nimport { forwardRef, useState, type HTMLAttributes, type MouseEvent, type ReactNode } from 'react';\nimport { cn } from '../../lib/cn';\n\nexport interface SListItemRenderState {\n  hovered: boolean;\n  disabled: boolean;\n}\n\nexport type SListItemRenderProp = (state: SListItemRenderState) => ReactNode;\nexport type SListItemSlot = ReactNode | SListItemRenderProp;\n\nexport interface SListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {\n  /** 리스트 아이템 제목 */\n  title: SListItemSlot;\n  /** 중첩 단계. Figma 기준 1~3단계 */\n  depth?: 1 | 2 | 3;\n  /** 타이틀 앞에 표시할 아이콘/콘텐츠 */\n  leading?: SListItemSlot;\n  /** 타이틀 뒤에 표시할 태그/콘텐츠 */\n  trailing?: SListItemSlot;\n  /** 외곽 테두리 사용 여부 */\n  bordered?: boolean;\n  /** 아이템 왼쪽 accent stripe 표시 여부 */\n  accentStripe?: boolean;\n  /** 조밀한 높이 사용 여부 */\n  dense?: boolean;\n  /** 비활성 상태 여부 */\n  disabled?: boolean;\n}\n\nexport const SListItem = forwardRef<HTMLDivElement, SListItemProps>(function SListItem(\n  {\n    title,\n    depth = 1,\n    leading,\n    trailing,\n    bordered = false,\n    accentStripe = false,\n    dense = false,\n    disabled = false,\n    className,\n    onMouseEnter,\n    onMouseLeave,\n    ...rest\n  },\n  ref,\n) {\n  const [hovered, setHovered] = useState(false);\n  const renderState = { hovered, disabled };\n  const titleNode = typeof title === 'function' ? title(renderState) : title;\n  const leadingNode = typeof leading === 'function' ? leading(renderState) : leading;\n  const trailingNode = typeof trailing === 'function' ? trailing(renderState) : trailing;\n\n  const handleMouseEnter = (event: MouseEvent<HTMLDivElement>) => {\n    if (!disabled) setHovered(true);\n    onMouseEnter?.(event);\n  };\n\n  const handleMouseLeave = (event: MouseEvent<HTMLDivElement>) => {\n    setHovered(false);\n    onMouseLeave?.(event);\n  };\n\n  return (\n    <div\n      ref={ref}\n      aria-disabled={disabled || undefined}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={cn(\n        'group/list-item relative flex w-full items-center justify-between bg-(--cmp-listItem-bg-default) text-left text-[14px] font-bold leading-[24px] text-(--cmp-listItem-text-default)',\n        disabled\n          ? 'pointer-events-none cursor-not-allowed text-(--sys-color-disabled-text)'\n          : 'hover:bg-(--cmp-listItem-bg-hover)',\n        dense\n          ? 'h-[32px] py-(--cmp-listItem-paddingY-dense)'\n          : 'h-[40px] py-(--cmp-listItem-paddingY-normal)',\n        'gap-(--cmp-listItem-gap)',\n        'pr-(--cmp-listItem-paddingX)',\n        depth === 2\n          ? 'pl-[calc(var(--cmp-listItem-paddingX)+32px)]'\n          : depth === 3\n            ? 'pl-[calc(var(--cmp-listItem-paddingX)+64px)]'\n            : 'pl-(--cmp-listItem-paddingX)',\n        bordered\n          ? 'overflow-hidden rounded-(--cmp-listItem-radius-bordered) border border-(--cmp-listItem-border-default) hover:border-(--cmp-listItem-bordered-border-hover)'\n          : 'border-b border-(--cmp-listItem-border-default)',\n        className,\n      )}\n      {...rest}\n    >\n      {accentStripe && !bordered && (\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute bottom-[-1px] left-0 top-0 w-(--cmp-listItem-accentStripe-width) bg-(--cmp-listItem-accentStripe-color)\"\n        />\n      )}\n      {leadingNode}\n      <span className=\"flex min-w-0 flex-1 flex-col\">\n        <span>{titleNode}</span>\n      </span>\n      {trailingNode}\n    </div>\n  );\n});\n\nSListItem.displayName = 'SListItem';\n"]}

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

@@ -0,0 +1 @@
+export { SListItem, type SListItemProps } from './SListItem';