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

package/dist/index.d.ts

@@ -53,6 +53,7 @@ export * from './components/SCheckbox';
 export * from './components/SRadio';
 export * from './components/SRadioButton';
 export * from './components/SInput';
+export * from './components/SSearchInput';
 export * from './components/STextarea';
 export * from './components/SSelect';
 export * from './components/SNumberInput';

package/dist/index.js

@@ -14464,6 +14464,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__ */ 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__ */ jsx(
+    SField,
+    {
+      size,
+      width,
+      focused,
+      hovered,
+      disabled,
+      className,
+      style,
+      children: /* @__PURE__ */ 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__ */ jsx(
+              SIcon,
+              {
+                name: "search",
+                size: 16,
+                color: disabled ? "var(--sys-color-disabled-icon)" : "var(--cmp-textinput-icon-default)",
+                className: "flex-shrink-0"
+              }
+            ),
+            /* @__PURE__ */ 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__ */ 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 = {
@@ -16347,7 +16460,7 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
     }
   );
 });
-var FONT2 = {
+var FONT3 = {
   sm: {
     fontSize: 12,
     paddingX: "var(--cmp-textinput-sm-paddingX)",
@@ -16395,7 +16508,7 @@ var SBarcodeInput = /* @__PURE__ */ forwardRef(
     className,
     style
   }, ref) {
-    const f = FONT2[size];
+    const f = FONT3[size];
     const [ruleError, setRuleError] = useState("");
     const hasValue = value !== void 0 && value !== null && String(value) !== "";
     useFormField({
@@ -17416,6 +17529,6 @@ function STimeRangePicker({
   );
 }
 
-export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, ICONS, IMAGE_FITS, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, RangeCalendar, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCallout, SCard, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGuide, SIcon, SImage, SInput, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLayout, SLayoutContext, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SModal, SModalOutlet, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSplitter2 as SSplitter, SStepper, SSwitch, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, findGnbAncestors, findGnbRailValue, isColorKey, loading, resolveColor, useSLayout };
+export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, ICONS, IMAGE_FITS, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, RangeCalendar, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCallout, SCard, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGuide, SIcon, SImage, SInput, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLayout, SLayoutContext, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SModal, SModalOutlet, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSplitter2 as SSplitter, SStepper, SSwitch, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, findGnbAncestors, findGnbRailValue, isColorKey, loading, resolveColor, useSLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map