sellmate-design-system-react 9.0.0-beta.8 → 9.0.0-beta.9

package/AGENTS.md

@@ -27,7 +27,7 @@
 | 분류 | 컴포넌트 |
 | --- | --- |
 | **버튼·링크** | `SButton` `SGhostButton` `SDropdownButton` `STextLink` `SSwitch` `SToggle` |
-| **입력 (폼)** | `SForm` `SField` `SInput` `SNumberInput` `STextarea` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SChip` `SChipInput` `SBarcodeInput` `SFilePicker` |
+| **입력 (폼)** | `SForm` `SField` `SInput` `SSearchInput` `SNumberInput` `STextarea` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SChip` `SChipInput` `SBarcodeInput` `SFilePicker` |
 | **날짜·시간** | `SCalendar` `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` |
 | **표·목록** | `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SListItem` `SExpansionList` `SDraggableList` `SDraggableItem` `STree` |
 | **레이아웃** | `SLayout` `SGnb` `SPage`(제목 영역은 `header` prop) `SSectionHeaderCard` `SCard` `SDivider` `SSplitter` `SScrollArea` `SExpansionItem` |
@@ -60,6 +60,7 @@ AI 에이전트는 코드를 생성하기 전에 이 목록을 반드시 지킨
 | --- | --- |
 | `<button>` | `SButton`, `SGhostButton`, `SDropdownButton`, `STextLink` |
 | `<input type="text/password/...">` | `SInput` |
+| `<input type="search">` | `SSearchInput` |
 | `<input type="number">` | `SNumberInput` |
 | `<input type="checkbox">` | `SCheckbox`, `SToggle`, `SSwitch` |
 | `<input type="radio">` | `SRadio`, `SRadioButton` |
@@ -138,7 +139,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | --- | --- | --- |
 | **셸** | 앱 전체 뼈대. 페이지가 바뀌어도 남는다 | `SLayout` `SGnb` `SPage`(제목 영역은 `header` prop) |
 | **블록** | `SPage` 의 직계 자식. 페이지를 세로로 쌓는 단위 | `SSectionHeaderCard` `SCard` `SForm` `SSplitter` `SScrollArea` `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SExpansionList` `SDraggableList` `STree` `SCallout` `STabs` `SStepper` `SPagination` `SDivider` |
-| **요소** | 블록 **안에** 놓이는 컨트롤. 혼자 페이지에 서지 않는다 | `SButton` `SGhostButton` `SDropdownButton` `SField` `SInput` `SNumberInput` `STextarea` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SSwitch` `SToggle` `SChipInput` `SBarcodeInput` `SFilePicker` `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` `SCalendar` `SListItem` `SExpansionItem` `SDraggableItem` `SImage` `SLinearProgress` `SCircleProgress` |
+| **요소** | 블록 **안에** 놓이는 컨트롤. 혼자 페이지에 서지 않는다 | `SButton` `SGhostButton` `SDropdownButton` `SField` `SInput` `SSearchInput` `SNumberInput` `STextarea` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SSwitch` `SToggle` `SChipInput` `SBarcodeInput` `SFilePicker` `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` `SCalendar` `SListItem` `SExpansionItem` `SDraggableItem` `SImage` `SLinearProgress` `SCircleProgress` |
 | **인라인** | 텍스트 흐름·셀·라벨 안에 섞인다. 혼자 블록이 되지 않는다 | `STag` `SBadge` `SIcon` `STextLink` `SChip` |
 | **레이어** | 문서 흐름 **밖**에 떠서 그려진다. 어느 층에서 띄우든 레이아웃에 영향이 없다 | `SModal` `SActionModal` `SConfirmModal` `SPopup` `SDrawer` `SPopover` `STooltip` `SPortal` `SToast` `SLoadingModal` `SLoadingContainer` `SGuide` |
 
@@ -439,6 +440,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | --- | --- | --- |
 | 한 줄 텍스트를 받는다 | `SInput` | §3-7-1 |
 | 여러 줄 텍스트를 받는다 | `STextarea` | §3-7-1 |
+| 목록·결과를 검색어로 좁힌다 | `SSearchInput` | §3-7-1 |
 | 숫자(수량·금액)를 받는다 | `SNumberInput` | |
 | 바코드를 스캔해 받는다 | `SBarcodeInput` | |
 | 목록에서 하나 고르게 한다 | `SSelect` | §3-7-2 |
@@ -1019,16 +1021,19 @@ const columns: STableColumn[] = [
 
 > §3-0 라우팅에서 이 절을 가리키는 자리들이다. <!-- TODO(디자인): 전체 검수·확정 -->
 
-#### 3-7-1. SInput vs STextarea
+#### 3-7-1. SInput vs STextarea vs SSearchInput
 
-**줄 수가 아니라 값의 성격으로 고른다.** 값의 길이를 미리 알 수 있으면 `SInput`, 없으면 `STextarea` 다.
+**먼저 "그 값이 저장되는가"를 본다.** 저장되면 폼 필드(`SInput`·`STextarea`), 화면을 좁히기만 하고 사라지면 `SSearchInput` 이다.
 
 | 값 | 사용 |
 | --- | --- |
 | 이름·코드·전화번호·URL 처럼 형식이 정해진 값 | `SInput` |
 | 메모·사유·설명처럼 길이가 예측되지 않는 문장 | `STextarea` |
+| 지금 보이는 목록·결과를 좁히는 검색어 | `SSearchInput` |
 
-값이 길어질 수 있는데 `SInput` 을 쓰면 사용자가 자기가 쓴 것을 다시 읽지 못한다 — 한 줄 안에서 좌우로 스크롤해야 하기 때문이다. 반대로 짧은 값에 `STextarea` 를 쓰면 빈 공간이 남아 입력량을 잘못 기대하게 한다.
+폼 필드 둘은 **줄 수가 아니라 값의 성격으로** 갈린다. 값이 길어질 수 있는데 `SInput` 을 쓰면 사용자가 자기가 쓴 것을 다시 읽지 못한다 — 한 줄 안에서 좌우로 스크롤해야 하기 때문이다. 반대로 짧은 값에 `STextarea` 를 쓰면 빈 공간이 남아 입력량을 잘못 기대하게 한다.
+
+`SSearchInput` 은 폼 필드가 아니다 — 라벨·힌트·유효성 규칙·에러 메시지를 받지 않고, `SForm` 의 제출 검증 대상에도 들어가지 않는다. 돋보기 아이콘이 항상 앞에 붙어 "여기는 검색"임을 스스로 밝히므로 라벨을 따로 붙이지 않는다. 검색 실행은 `onSearch`(Enter) 로 받고, 값이 바뀔 때마다 좁히는 실시간 필터라면 `onValueChange` 만 쓴다. 반대로 검색어를 **저장하거나 검증해야 한다면** 그것은 폼 값이므로 `SInput` 이다.
 
 #### 3-7-2. 하나를 고르게 하는 다섯 — SSelect vs SRadioGroup vs SRadioButton vs STabs vs SRadio
 
@@ -1287,7 +1292,7 @@ import { SModalOutlet } from 'sellmate-design-system-react';
     topContent={
       /* 남는 폭 전체를 받는다 — 왼쪽은 그대로, 오른쪽 끝은 ml-auto */
       <div className="flex w-full items-center gap-sd-8">
-        <SInput value={keyword} onValueChange={setKeyword} placeholder="통합 검색" />
+        <SSearchInput value={keyword} onValueChange={setKeyword} onSearch={runSearch} placeholder="통합 검색" />
         <SButton size="sm" color="neutral" outline label="내 계정" className="ml-auto" onClick={openAccount} />
       </div>
     }
@@ -1304,7 +1309,7 @@ import { SModalOutlet } from 'sellmate-design-system-react';
 {/* 접히면 menuTop·menuFooter 가 함께 빠지므로, 폴드 레일에 남길 것만 foldedTop 으로 따로 준다 */}
 <SGnb
   items={MENU} value={current} onValueChange={navigate} useRail
-  menuTop={<SInput value={keyword} onValueChange={setKeyword} placeholder="메뉴 검색" />}
+  menuTop={<SSearchInput value={keyword} onValueChange={setKeyword} placeholder="메뉴 검색" />}
   menuFooter={<AccountRow />}
   foldedTop={<SGhostButton icon="search" size="sm" ariaLabel="메뉴 검색" onClick={openSearch} />}
 />

package/dist/components/SField/README.md

@@ -61,6 +61,7 @@
  - [SFilePicker](../SFilePicker)
  - [SInput](../SInput)
  - [SNumberInput](../SNumberInput)
+ - [SSearchInput](../SSearchInput)
  - [SSelect](../SSelect)
  - [STextarea](../STextarea)
  - [STimePicker](../STimePicker)
@@ -84,6 +85,7 @@ graph TD;
   SFilePicker --> SField
   SInput --> SField
   SNumberInput --> SField
+  SSearchInput --> SField
   SSelect --> SField
   STextarea --> SField
   STimePicker --> SField

package/dist/components/SGhostButton/README.md

@@ -44,6 +44,7 @@
  - [SOverlayHeader](../SOverlayHeader)
  - [SPage](../SPage)
  - [SPopover](../SPopover)
+ - [SSearchInput](../SSearchInput)
  - [SSelect](../SSelect)
  - [STimePicker](../STimePicker)
  - [STimeRangePicker](../STimeRangePicker)
@@ -75,6 +76,7 @@ graph TD;
   SOverlayHeader --> SGhostButton
   SPage --> SGhostButton
   SPopover --> SGhostButton
+  SSearchInput --> SGhostButton
   SSelect --> SGhostButton
   STimePicker --> SGhostButton
   STimeRangePicker --> SGhostButton

package/dist/components/SIcon/README.md

@@ -43,6 +43,7 @@
  - [SNumberInput](../SNumberInput)
  - [SPagination](../SPagination)
  - [SPopover](../SPopover)
+ - [SSearchInput](../SSearchInput)
  - [SSectionHeaderCard](../SSectionHeaderCard)
  - [SSelect](../SSelect)
  - [SStepper](../SStepper)
@@ -81,6 +82,7 @@ graph TD;
   SNumberInput --> SIcon
   SPagination --> SIcon
   SPopover --> SIcon
+  SSearchInput --> SIcon
   SSectionHeaderCard --> SIcon
   SSelect --> SIcon
   SStepper --> SIcon

package/dist/components/SSearchInput/README.md

@@ -0,0 +1,48 @@
+# SSearchInput
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SSearchInput
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value?` | `string \| number` | — | 값 (제어) |
+| `size?` | `SSearchInputSize` | `'sm'` | 크기 |
+| `placeholder?` | `string` | `'결과 내 검색'` | 플레이스홀더 |
+| `clearable?` | `boolean` | `false` | 지우기 버튼 — 값이 있을 때만 나타난다 |
+| `disabled?` | `boolean` | `false` | 비활성 |
+| `width?` | `number \| string` | — | 컨트롤 너비 (숫자=px). 미지정 시 부모 폭을 채운다 |
+| `focused?` | `boolean` | — | 포커스 상태 (제어/반영) |
+| `hovered?` | `boolean` | — | 호버 상태 (제어/반영) |
+| `inputClass?` | `string` | — | 내부 input 요소 className |
+| `inputStyle?` | `CSSProperties` | — | 내부 input 요소 style |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(value: string) => void` | 값 변경 — 문자열 전달 |
+| `onChange` | `InputHTMLAttributes<HTMLInputElement>['onChange']` | 네이티브 onChange (form-agnostic 연동용, RHF 등) |
+| `onSearch` | `(value: string) => void` | 검색 실행 — Enter 키에서 현재 값과 함께 호출된다. 한글 조합 중의 Enter(IME 확정)는 검색으로 치지 않는다. |
+
+## Dependencies
+
+### Depends on
+
+- [SField](../SField)
+- [SGhostButton](../SGhostButton)
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  SSearchInput --> SField
+  SSearchInput --> SGhostButton
+  SSearchInput --> SIcon
+  style SSearchInput fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SSearchInput/SSearchInput.d.ts

@@ -0,0 +1,46 @@
+import { type CSSProperties, type InputHTMLAttributes } from 'react';
+import { type SFieldSize } from '../SField';
+export type SSearchInputSize = SFieldSize;
+export interface SSearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'onChange' | 'type' | 'prefix' | 'suffix'> {
+    /** 값 (제어) */
+    value?: string | number;
+    /** 값 변경 — 문자열 전달 */
+    onValueChange?: (value: string) => void;
+    /** 네이티브 onChange (form-agnostic 연동용, RHF 등) */
+    onChange?: InputHTMLAttributes<HTMLInputElement>['onChange'];
+    /**
+     * 검색 실행 — Enter 키에서 현재 값과 함께 호출된다.
+     * 한글 조합 중의 Enter(IME 확정)는 검색으로 치지 않는다.
+     */
+    onSearch?: (value: string) => void;
+    /** 크기 */
+    size?: SSearchInputSize;
+    /** 플레이스홀더 */
+    placeholder?: string;
+    /** 지우기 버튼 — 값이 있을 때만 나타난다 */
+    clearable?: boolean;
+    /** 비활성 */
+    disabled?: boolean;
+    /** 컨트롤 너비 (숫자=px). 미지정 시 부모 폭을 채운다 */
+    width?: number | string;
+    /** 포커스 상태 (제어/반영) */
+    focused?: boolean;
+    /** 호버 상태 (제어/반영) */
+    hovered?: boolean;
+    /** 내부 input 요소 className */
+    inputClass?: string;
+    /** 내부 input 요소 style */
+    inputStyle?: CSSProperties;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * SSearchInput — 목록·결과를 검색어로 좁히는 한 줄 입력.
+ *
+ * 테두리 박스(border/radius/배경 + hover·focus 강조)는 `SField` 가 소유하고,
+ * 이 컴포넌트는 그 안의 돋보기 아이콘 + input 만 그린다.
+ * 좌측 아이콘은 **장식**이라 클릭 대상이 아니다 — 검색 실행은 Enter(`onSearch`) 다.
+ *
+ * 라벨·검증·에러 메시지가 필요한 폼 필드라면 `SInput` 을 쓴다.
+ */
+export declare const SSearchInput: import("react").ForwardRefExoticComponent<SSearchInputProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1 @@
+export { SSearchInput, type SSearchInputProps, type SSearchInputSize } from './SSearchInput';

package/dist/index.cjs

@@ -14492,6 +14492,119 @@ function SRadioButton({
     }
   );
 }
+var FONT2 = {
+  sm: {
+    fontSize: 12,
+    lineHeight: 20,
+    paddingX: "var(--cmp-textinput-sm-paddingX)",
+    gap: "var(--cmp-textinput-sm-gap)"
+  },
+  md: {
+    fontSize: 14,
+    lineHeight: 24,
+    paddingX: "var(--cmp-textinput-md-paddingX)",
+    gap: "var(--cmp-textinput-md-gap)"
+  }
+};
+var SSearchInput = /* @__PURE__ */ react.forwardRef(function SSearchInput2({
+  value,
+  onValueChange,
+  onChange,
+  onSearch,
+  size = "sm",
+  placeholder = "\uACB0\uACFC \uB0B4 \uAC80\uC0C9",
+  clearable = false,
+  disabled = false,
+  width,
+  focused,
+  hovered,
+  inputClass,
+  inputStyle,
+  className,
+  style,
+  onKeyDown,
+  ...rest
+}, ref) {
+  const f = FONT2[size];
+  const hasValue = value !== void 0 && value !== null && String(value) !== "";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SField,
+    {
+      size,
+      width,
+      focused,
+      hovered,
+      disabled,
+      className,
+      style,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "flex h-full w-full items-center",
+          style: {
+            gap: f.gap,
+            padding: `0 ${f.paddingX}`,
+            fontSize: f.fontSize,
+            lineHeight: `${f.lineHeight}px`
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SIcon,
+              {
+                name: "search",
+                size: 16,
+                color: disabled ? "var(--sys-color-disabled-icon)" : "var(--cmp-textinput-icon-default)",
+                className: "flex-shrink-0"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref,
+                type: "search",
+                value: value ?? "",
+                disabled,
+                placeholder,
+                onChange: (e) => {
+                  onChange?.(e);
+                  onValueChange?.(e.target.value);
+                },
+                onKeyDown: (e) => {
+                  onKeyDown?.(e);
+                  if (e.key === "Enter" && !e.nativeEvent.isComposing) {
+                    onSearch?.(e.currentTarget.value);
+                  }
+                },
+                className: cn(
+                  // type="search" 의 브라우저 기본 취소 버튼은 clearable 과 겹치므로 지운다
+                  "h-full min-w-0 flex-1 border-0 bg-transparent p-0 outline-none placeholder:text-[color:var(--sys-color-field-text-placeholder)] disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:hidden",
+                  AUTOFILL_RESET_CLASS,
+                  inputClass
+                ),
+                style: {
+                  // fontSize/lineHeight 는 컨테이너에서 상속 (원본 font-size: inherit)
+                  color: disabled ? "var(--cmp-textinput-text-disabled)" : "var(--sys-color-field-text-default)",
+                  ...inputStyle
+                },
+                ...rest
+              }
+            ),
+            clearable && hasValue && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+              SGhostButton,
+              {
+                icon: "close",
+                size: "xxs",
+                ariaLabel: "\uC9C0\uC6B0\uAE30",
+                className: "flex-shrink-0",
+                onClick: () => onValueChange?.("")
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
 var CHIPFILTER_LISTBOX_WIDTH = 240;
 var CHIPFILTER_DATE_PRESET_LISTBOX_WIDTH = 246;
 var CHIPFILTER = {
@@ -16375,7 +16488,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
     }
   );
 });
-var FONT2 = {
+var FONT3 = {
   sm: {
     fontSize: 12,
     paddingX: "var(--cmp-textinput-sm-paddingX)",
@@ -16423,7 +16536,7 @@ var SBarcodeInput = /* @__PURE__ */ react.forwardRef(
     className,
     style
   }, ref) {
-    const f = FONT2[size];
+    const f = FONT3[size];
     const [ruleError, setRuleError] = react.useState("");
     const hasValue = value !== void 0 && value !== null && String(value) !== "";
     useFormField({
@@ -17521,6 +17634,7 @@ exports.SRadioButton = SRadioButton;
 exports.SRadioGroup = SRadioGroup;
 exports.SSPLITTER_UNITS = SSPLITTER_UNITS;
 exports.SScrollArea = SScrollArea;
+exports.SSearchInput = SSearchInput;
 exports.SSectionHeaderCard = SSectionHeaderCard2;
 exports.SSelect = SSelect2;
 exports.SSplitter = SSplitter2;