@shoplflow/base 0.41.11 → 0.42.1

package/dist/index.cjs

@@ -1623,6 +1623,12 @@ var getStyleBySizeVar2 = (sizeVar) => {
         min-width: 54px;
         min-height: 32px;
       `;
+    case "XS":
+      return react$1.css`
+        gap: 2px;
+        padding: 4px 6px;
+        min-height: 24px;
+      `;
     default:
       return react$1.css`
         gap: 4px;
@@ -1695,6 +1701,12 @@ var Button = React3.forwardRef(
       "isLoading",
       "lineClamp"
     ]);
+    const getTypography = () => {
+      if (sizeVar === "XS") {
+        return "caption_400";
+      }
+      return sizeVar === "M" ? "body1_400" : "body2_400";
+    };
     return /* @__PURE__ */ jsxRuntime.jsxs(
       StyledButton,
       __spreadProps(__spreadValues({
@@ -1716,7 +1728,7 @@ var Button = React3.forwardRef(
               whiteSpace: "nowrap",
               wordBreak: "keep-all",
               color: styleVar === "PRIMARY" ? "neutral0" : "neutral700",
-              typography: sizeVar === "M" ? "body1_400" : "body2_400",
+              typography: getTypography(),
               children
             }
           ),
@@ -1731,7 +1743,8 @@ exports.Button = Button;
 // src/components/Buttons/Button/Button.types.ts
 exports.ButtonSizeVariants = {
   S: "S",
-  M: "M"
+  M: "M",
+  XS: "XS"
 };
 exports.ButtonStyleVariants = {
   PRIMARY: "PRIMARY",
@@ -6999,6 +7012,242 @@ var Slider = ({
   ] }) });
 };
 exports.Slider = Slider;
+var SearchBarContext = React3.createContext({});
+var useSearchBarContext = () => React3.useContext(SearchBarContext);
+var SearchBarProvider = ({
+  children,
+  useFlexibleWidth,
+  isSelected
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(SearchBarContext.Provider, { value: { useFlexibleWidth, isSelected }, children });
+};
+var DEFAULT_DEBOUNCE_TIME = 300;
+var SearchBarInput = (_a) => {
+  var _b = _a, {
+    value,
+    defaultValue,
+    onChange,
+    onClear,
+    placeholder,
+    flexiblePlaceholder,
+    disabled,
+    type = "default",
+    onSearch,
+    debounceTime = type === "default" ? 0 : DEFAULT_DEBOUNCE_TIME,
+    icon = /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.SearchIcon, color: "neutral350", sizeVar: "S" })
+  } = _b, rest = __objRest(_b, [
+    "value",
+    "defaultValue",
+    "onChange",
+    "onClear",
+    "placeholder",
+    "flexiblePlaceholder",
+    "disabled",
+    "type",
+    "onSearch",
+    "debounceTime",
+    "icon"
+  ]);
+  const { useFlexibleWidth, isSelected } = useSearchBarContext();
+  const [text, setText] = React3.useState("");
+  const convertToString = React3.useCallback((value2) => {
+    if (typeof value2 !== "number") {
+      return typeof value2 === "string" ? value2 : value2.join("");
+    }
+    return String(value2);
+  }, []);
+  const debouncedOnChange = React3.useRef(
+    utils.debounce(
+      (event) => {
+        const newValue = event.target.value;
+        setText(newValue);
+        if (type === "real-time") {
+          onChange && onChange(event);
+          onSearch && onSearch(newValue);
+        }
+      },
+      debounceTime
+    )
+  ).current;
+  const handleOnChange = (event) => {
+    debouncedOnChange(event);
+  };
+  const handleOnClear = React3.useCallback(() => {
+    setText("");
+    onClear == null ? void 0 : onClear();
+  }, [onClear]);
+  const handleKeyDown = React3.useCallback(
+    (event) => {
+      if (type === "default" && event.key === "Enter") {
+        onSearch == null ? void 0 : onSearch(text);
+      }
+    },
+    [onSearch, text, type]
+  );
+  const handleIconClick = React3.useCallback(() => {
+    if (type === "default") {
+      onSearch == null ? void 0 : onSearch(text);
+    }
+  }, [onSearch, text, type]);
+  let _placeholder = placeholder;
+  if (useFlexibleWidth && !isSelected) {
+    _placeholder = flexiblePlaceholder;
+  }
+  const getInitialValue = React3.useCallback(() => {
+    if (value !== void 0) {
+      return convertToString(value);
+    }
+    if (defaultValue !== void 0) {
+      return convertToString(defaultValue);
+    }
+    return "";
+  }, [convertToString, defaultValue, value]);
+  React3.useEffect(() => {
+    const initialValue = getInitialValue();
+    setText(initialValue);
+  }, [getInitialValue]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    type === "default" && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { styleVar: "GHOST", sizeVar: "S", onClick: handleIconClick, "aria-label": "\uAC80\uC0C9", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.SearchIcon, color: text ? "neutral700" : "neutral350", sizeVar: "S" }) }),
+    type === "real-time" && icon,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      exports.Input,
+      __spreadValues({
+        placeholder: _placeholder,
+        onChange: handleOnChange,
+        onKeyDown: handleKeyDown,
+        value: text,
+        onClear: handleOnClear,
+        width: "100%",
+        disabled,
+        "aria-label": "\uAC80\uC0C9\uC5B4 \uC785\uB825"
+      }, rest)
+    )
+  ] });
+};
+var StyledStackContainer2 = styled6__default.default(exports.Stack.Horizontal)`
+  border: 1px solid ${exports.colorTokens.neutral100};
+  border-radius: ${exports.borderRadiusTokens.borderRadius06};
+  background-color: ${exports.colorTokens.neutral100};
+  justify-content: center;
+  align-items: center;
+  padding: 4px 8px;
+  transition: all 400ms ease-in-out;
+
+  label {
+    flex-grow: 1;
+    border: none;
+    border-radius: 0;
+    height: 32px;
+    background-color: ${exports.colorTokens.neutral100};
+    gap: 0px;
+
+    div {
+      padding: 0;
+    }
+
+    input {
+      padding: 0;
+    }
+  }
+
+  button {
+    background-color: ${exports.colorTokens.neutral100};
+  }
+`;
+var CategoriesButton = styled6__default.default(exports.Dropdown.Button)`
+  border-radius: 4px;
+  height: 24px;
+
+  &:hover {
+    background-color: ${exports.colorTokens.neutral200};
+  }
+`;
+var DEFAULT_DROPDOWN_WIDTH = "136px";
+var SearchBarCategory = ({
+  dropdownWidth = DEFAULT_DROPDOWN_WIDTH,
+  dropdownItems = [],
+  selectedDropdownItem,
+  onDropdownSelect
+}) => {
+  const { isSelected, useFlexibleWidth } = useSearchBarContext();
+  if (!isSelected && useFlexibleWidth) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    exports.Dropdown,
+    {
+      width: dropdownWidth,
+      trigger: /* @__PURE__ */ jsxRuntime.jsx(
+        CategoriesButton,
+        {
+          value: selectedDropdownItem && /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { lineClamp: 1, typography: "body2_700", children: selectedDropdownItem.label }),
+          "aria-label": "\uCE74\uD14C\uACE0\uB9AC \uC120\uD0DD"
+        }
+      ),
+      popper: /* @__PURE__ */ jsxRuntime.jsx(exports.Dropdown.Content, { type: "FILL", children: dropdownItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+        exports.Menu,
+        {
+          className: "search-bar",
+          onClick: () => onDropdownSelect == null ? void 0 : onDropdownSelect(item),
+          isSelected: (selectedDropdownItem == null ? void 0 : selectedDropdownItem.value) === item.value,
+          "aria-selected": (selectedDropdownItem == null ? void 0 : selectedDropdownItem.value) === item.value,
+          children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_500", children: item.label })
+        },
+        item.value
+      )) })
+    }
+  );
+};
+var DEFAULT_WIDTH = "100%";
+var DEFAULT_HEIGHT = "32px";
+var SearchBar = (_a) => {
+  var _b = _a, {
+    width = DEFAULT_WIDTH,
+    height = DEFAULT_HEIGHT,
+    useFlexibleWidth = false,
+    children
+  } = _b, rest = __objRest(_b, [
+    "width",
+    "height",
+    "useFlexibleWidth",
+    "children"
+  ]);
+  const [isSelected, setIsSelected] = utils.useOutsideClick({
+    selector: ".search-bar",
+    onClose: () => setIsSelected(false)
+  });
+  const handleContainerClick = React3.useCallback(() => {
+    setIsSelected(true);
+  }, [setIsSelected]);
+  const containerWidth = React3.useMemo(() => {
+    if (!useFlexibleWidth) {
+      return width;
+    }
+    return isSelected ? width : "140px";
+  }, [useFlexibleWidth, isSelected, width]);
+  return /* @__PURE__ */ jsxRuntime.jsx(SearchBarProvider, { useFlexibleWidth, isSelected, children: /* @__PURE__ */ jsxRuntime.jsx(
+    StyledStackContainer2,
+    __spreadProps(__spreadValues({
+      "data-shoplflow": "SearchBar",
+      width: containerWidth,
+      height,
+      className: "search-bar",
+      spacing: "spacing04",
+      onClick: handleContainerClick,
+      role: "search",
+      "aria-label": "\uAC80\uC0C9"
+    }, rest), {
+      children
+    })
+  ) });
+};
+SearchBar.Category = SearchBarCategory;
+SearchBar.Input = SearchBarInput;
+
+// src/components/SearchBar/index.ts
+exports.SearchBar = SearchBar;
+exports.SearchBar.Category = SearchBarCategory;
+exports.SearchBar.Input = SearchBarInput;
 var SpaceMarginWrapper = styled6__default.default(framerMotion.motion.div)`
   position: relative;
   display: flex;

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ElementType, ComponentPropsWithoutRef, ReactNode, ReactElement, ImgHTMLAttributes, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, CSSProperties, HTMLAttributes, ComponentPropsWithRef, ButtonHTMLAttributes, InputHTMLAttributes, MouseEvent, Ref } from 'react';
+import React__default, { ElementType, ComponentPropsWithoutRef, ReactNode, ReactElement, ImgHTMLAttributes, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, CSSProperties, HTMLAttributes, ComponentPropsWithRef, ButtonHTMLAttributes, InputHTMLAttributes, MouseEvent, Ref, ChangeEvent } from 'react';
 import { $Values } from '@shoplflow/utils';
 import { IconSource } from '@shoplflow/shopl-assets';
 import { IconSource as IconSource$1 } from '@shoplflow/hada-assets';
@@ -610,6 +610,7 @@ declare type PolymorphicComponentProps<T extends React__default.ElementType, Pro
 declare const ButtonSizeVariants: {
     readonly S: "S";
     readonly M: "M";
+    readonly XS: "XS";
 };
 declare type ButtonSizeVariantType = $Values<typeof ButtonSizeVariants>;
 declare const ButtonStyleVariants: {
@@ -1620,4 +1621,77 @@ declare const SLIDER_Z_INDEX: {
 
 declare const Slider: React__default.FC<SliderProps>;
 
-export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownOptionVariants, DropdownProps, DropdownSizeVariantType, DropdownTriggerButtonProps, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalBottomProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, ModalTopProps, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, SLIDER_Z_INDEX, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, Skeleton, SkeletonProps, Slider, SliderBounds, SliderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };
+/** 드롭다운 아이템 타입 */
+declare type DropdownItem = {
+    /** 표시되는 라벨 */
+    label: string;
+    /** 실제 값 */
+    value: string;
+};
+/** 검색바 타입 */
+declare type SearchType = 'default' | 'real-time';
+/** 검색바 기본 props */
+interface SearchBarBaseProps {
+    /** 검색바 너비 */
+    width?: string;
+    /** 검색바 높이 */
+    height?: string;
+    /** 유연한 너비 사용 여부 */
+    useFlexibleWidth?: boolean;
+    /** 자식 요소 */
+    children?: React.ReactNode;
+}
+/** 검색바 카테고리 props */
+interface SearchBarCategoryProps {
+    /** 카테고리 드롭다운 너비 */
+    dropdownWidth?: string;
+    /** 카테고리 드롭다운 아이템 목록 */
+    dropdownItems?: DropdownItem[];
+    /** 선택된 카테고리 아이템 */
+    selectedDropdownItem?: DropdownItem;
+    /** 카테고리 선택 핸들러 */
+    onDropdownSelect?: (item: DropdownItem) => void;
+    /** 선택 상태 */
+    isSelected: boolean;
+}
+/** 검색바 입력 props */
+interface SearchBarInputProps {
+    /** 검색바 값 */
+    value?: string | number | readonly string[];
+    /** 검색바 기본값 */
+    defaultValue?: string | number | readonly string[];
+    /** 검색어 변경 핸들러 */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /** 검색어 초기화 핸들러 */
+    onClear?: () => void;
+    /** 플레이스홀더 텍스트 */
+    placeholder?: string;
+    /** 너비 변경 시 플레이스홀더 텍스트 */
+    flexiblePlaceholder?: string;
+    /** 비활성화 여부 */
+    disabled?: boolean;
+    /** 검색 아이콘 */
+    icon?: React.ReactNode;
+    /** 검색 타입 */
+    type?: SearchType;
+    /** 검색 핸들러 */
+    onSearch?: (value: string) => void;
+    /** 디바운스 시간 (ms) */
+    debounceTime?: number;
+}
+/** 검색바 props */
+declare type SearchBarProps = SearchBarBaseProps;
+/** 검색바 컴포넌트 타입 */
+interface SearchBarComponent extends React.FC<SearchBarProps> {
+    Category: React.FC<SearchBarCategoryProps>;
+    Input: React.FC<SearchBarInputProps>;
+}
+/** 검색바 컴포넌트 타입 (memo) */
+interface MemoizedSearchBarComponent extends React.MemoExoticComponent<SearchBarComponent> {
+    Category: React.FC<SearchBarCategoryProps>;
+    Input: React.FC<SearchBarInputProps>;
+}
+
+declare const SearchBar: MemoizedSearchBarComponent;
+
+export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownItem, DropdownOptionProps, DropdownOptionVariantType, DropdownOptionVariants, DropdownProps, DropdownSizeVariantType, DropdownTriggerButtonProps, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MemoizedSearchBarComponent, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalBottomProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, ModalTopProps, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, SLIDER_Z_INDEX, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SearchBar, SearchBarBaseProps, SearchBarCategoryProps, SearchBarComponent, SearchBarInputProps, SearchBarProps, SearchType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, Skeleton, SkeletonProps, Slider, SliderBounds, SliderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ElementType, ComponentPropsWithoutRef, ReactNode, ReactElement, ImgHTMLAttributes, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, CSSProperties, HTMLAttributes, ComponentPropsWithRef, ButtonHTMLAttributes, InputHTMLAttributes, MouseEvent, Ref } from 'react';
+import React__default, { ElementType, ComponentPropsWithoutRef, ReactNode, ReactElement, ImgHTMLAttributes, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, CSSProperties, HTMLAttributes, ComponentPropsWithRef, ButtonHTMLAttributes, InputHTMLAttributes, MouseEvent, Ref, ChangeEvent } from 'react';
 import { $Values } from '@shoplflow/utils';
 import { IconSource } from '@shoplflow/shopl-assets';
 import { IconSource as IconSource$1 } from '@shoplflow/hada-assets';
@@ -610,6 +610,7 @@ declare type PolymorphicComponentProps<T extends React__default.ElementType, Pro
 declare const ButtonSizeVariants: {
     readonly S: "S";
     readonly M: "M";
+    readonly XS: "XS";
 };
 declare type ButtonSizeVariantType = $Values<typeof ButtonSizeVariants>;
 declare const ButtonStyleVariants: {
@@ -1620,4 +1621,77 @@ declare const SLIDER_Z_INDEX: {
 
 declare const Slider: React__default.FC<SliderProps>;
 
-export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownOptionVariants, DropdownProps, DropdownSizeVariantType, DropdownTriggerButtonProps, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalBottomProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, ModalTopProps, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, SLIDER_Z_INDEX, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, Skeleton, SkeletonProps, Slider, SliderBounds, SliderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };
+/** 드롭다운 아이템 타입 */
+declare type DropdownItem = {
+    /** 표시되는 라벨 */
+    label: string;
+    /** 실제 값 */
+    value: string;
+};
+/** 검색바 타입 */
+declare type SearchType = 'default' | 'real-time';
+/** 검색바 기본 props */
+interface SearchBarBaseProps {
+    /** 검색바 너비 */
+    width?: string;
+    /** 검색바 높이 */
+    height?: string;
+    /** 유연한 너비 사용 여부 */
+    useFlexibleWidth?: boolean;
+    /** 자식 요소 */
+    children?: React.ReactNode;
+}
+/** 검색바 카테고리 props */
+interface SearchBarCategoryProps {
+    /** 카테고리 드롭다운 너비 */
+    dropdownWidth?: string;
+    /** 카테고리 드롭다운 아이템 목록 */
+    dropdownItems?: DropdownItem[];
+    /** 선택된 카테고리 아이템 */
+    selectedDropdownItem?: DropdownItem;
+    /** 카테고리 선택 핸들러 */
+    onDropdownSelect?: (item: DropdownItem) => void;
+    /** 선택 상태 */
+    isSelected: boolean;
+}
+/** 검색바 입력 props */
+interface SearchBarInputProps {
+    /** 검색바 값 */
+    value?: string | number | readonly string[];
+    /** 검색바 기본값 */
+    defaultValue?: string | number | readonly string[];
+    /** 검색어 변경 핸들러 */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /** 검색어 초기화 핸들러 */
+    onClear?: () => void;
+    /** 플레이스홀더 텍스트 */
+    placeholder?: string;
+    /** 너비 변경 시 플레이스홀더 텍스트 */
+    flexiblePlaceholder?: string;
+    /** 비활성화 여부 */
+    disabled?: boolean;
+    /** 검색 아이콘 */
+    icon?: React.ReactNode;
+    /** 검색 타입 */
+    type?: SearchType;
+    /** 검색 핸들러 */
+    onSearch?: (value: string) => void;
+    /** 디바운스 시간 (ms) */
+    debounceTime?: number;
+}
+/** 검색바 props */
+declare type SearchBarProps = SearchBarBaseProps;
+/** 검색바 컴포넌트 타입 */
+interface SearchBarComponent extends React.FC<SearchBarProps> {
+    Category: React.FC<SearchBarCategoryProps>;
+    Input: React.FC<SearchBarInputProps>;
+}
+/** 검색바 컴포넌트 타입 (memo) */
+interface MemoizedSearchBarComponent extends React.MemoExoticComponent<SearchBarComponent> {
+    Category: React.FC<SearchBarCategoryProps>;
+    Input: React.FC<SearchBarInputProps>;
+}
+
+declare const SearchBar: MemoizedSearchBarComponent;
+
+export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownItem, DropdownOptionProps, DropdownOptionVariantType, DropdownOptionVariants, DropdownProps, DropdownSizeVariantType, DropdownTriggerButtonProps, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MemoizedSearchBarComponent, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalBottomProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, ModalTopProps, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, SLIDER_Z_INDEX, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SearchBar, SearchBarBaseProps, SearchBarCategoryProps, SearchBarComponent, SearchBarInputProps, SearchBarProps, SearchType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, Skeleton, SkeletonProps, Slider, SliderBounds, SliderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };

package/dist/index.js

@@ -5,13 +5,13 @@ import { motion, AnimatePresence, LayoutGroup, LazyMotion, domAnimation } from '
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { css, keyframes } from '@emotion/react';
-import { noop, useMergeRefs, useOutsideClick, OutSideClick, useSelect, useParentElementClick, isNullOrUndefined } from '@shoplflow/utils';
+import { noop, useMergeRefs, useOutsideClick, OutSideClick, debounce, useSelect, useParentElementClick, isNullOrUndefined } from '@shoplflow/utils';
 import Scrollbars from 'react-custom-scrollbars-2';
 import { FloatingPortal, autoUpdate, offset, autoPlacement } from '@floating-ui/react';
 export { arrow, flip, hide, inline, offset, shift, size } from '@floating-ui/react';
 import { useFloating } from '@floating-ui/react-dom';
 import * as ShoplAssets from '@shoplflow/shopl-assets';
-import { DownArrowSolidXsmallIcon, RightArrowSolidXsmallIcon, FirstPageIcon, LeftArrowIcon, RightArrowIcon, EndPageIcon } from '@shoplflow/shopl-assets';
+import { DownArrowSolidXsmallIcon, RightArrowSolidXsmallIcon, FirstPageIcon, LeftArrowIcon, RightArrowIcon, EndPageIcon, SearchIcon } from '@shoplflow/shopl-assets';
 import { shift, flip, offset as offset$1 } from '@floating-ui/core';
 import * as HadaAssets from '@shoplflow/hada-assets';
 import DatePicker2 from 'react-datepicker';
@@ -1596,6 +1596,12 @@ var getStyleBySizeVar2 = (sizeVar) => {
         min-width: 54px;
         min-height: 32px;
       `;
+    case "XS":
+      return css`
+        gap: 2px;
+        padding: 4px 6px;
+        min-height: 24px;
+      `;
     default:
       return css`
         gap: 4px;
@@ -1668,6 +1674,12 @@ var Button = forwardRef(
       "isLoading",
       "lineClamp"
     ]);
+    const getTypography = () => {
+      if (sizeVar === "XS") {
+        return "caption_400";
+      }
+      return sizeVar === "M" ? "body1_400" : "body2_400";
+    };
     return /* @__PURE__ */ jsxs(
       StyledButton,
       __spreadProps(__spreadValues({
@@ -1689,7 +1701,7 @@ var Button = forwardRef(
               whiteSpace: "nowrap",
               wordBreak: "keep-all",
               color: styleVar === "PRIMARY" ? "neutral0" : "neutral700",
-              typography: sizeVar === "M" ? "body1_400" : "body2_400",
+              typography: getTypography(),
               children
             }
           ),
@@ -1704,7 +1716,8 @@ var Button_default = Button;
 // src/components/Buttons/Button/Button.types.ts
 var ButtonSizeVariants = {
   S: "S",
-  M: "M"
+  M: "M",
+  XS: "XS"
 };
 var ButtonStyleVariants = {
   PRIMARY: "PRIMARY",
@@ -6972,6 +6985,242 @@ var Slider = ({
   ] }) });
 };
 var Slider_default = Slider;
+var SearchBarContext = createContext({});
+var useSearchBarContext = () => useContext(SearchBarContext);
+var SearchBarProvider = ({
+  children,
+  useFlexibleWidth,
+  isSelected
+}) => {
+  return /* @__PURE__ */ jsx(SearchBarContext.Provider, { value: { useFlexibleWidth, isSelected }, children });
+};
+var DEFAULT_DEBOUNCE_TIME = 300;
+var SearchBarInput = (_a) => {
+  var _b = _a, {
+    value,
+    defaultValue,
+    onChange,
+    onClear,
+    placeholder,
+    flexiblePlaceholder,
+    disabled,
+    type = "default",
+    onSearch,
+    debounceTime = type === "default" ? 0 : DEFAULT_DEBOUNCE_TIME,
+    icon = /* @__PURE__ */ jsx(Icon_default, { iconSource: SearchIcon, color: "neutral350", sizeVar: "S" })
+  } = _b, rest = __objRest(_b, [
+    "value",
+    "defaultValue",
+    "onChange",
+    "onClear",
+    "placeholder",
+    "flexiblePlaceholder",
+    "disabled",
+    "type",
+    "onSearch",
+    "debounceTime",
+    "icon"
+  ]);
+  const { useFlexibleWidth, isSelected } = useSearchBarContext();
+  const [text, setText] = useState("");
+  const convertToString = useCallback((value2) => {
+    if (typeof value2 !== "number") {
+      return typeof value2 === "string" ? value2 : value2.join("");
+    }
+    return String(value2);
+  }, []);
+  const debouncedOnChange = useRef(
+    debounce(
+      (event) => {
+        const newValue = event.target.value;
+        setText(newValue);
+        if (type === "real-time") {
+          onChange && onChange(event);
+          onSearch && onSearch(newValue);
+        }
+      },
+      debounceTime
+    )
+  ).current;
+  const handleOnChange = (event) => {
+    debouncedOnChange(event);
+  };
+  const handleOnClear = useCallback(() => {
+    setText("");
+    onClear == null ? void 0 : onClear();
+  }, [onClear]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (type === "default" && event.key === "Enter") {
+        onSearch == null ? void 0 : onSearch(text);
+      }
+    },
+    [onSearch, text, type]
+  );
+  const handleIconClick = useCallback(() => {
+    if (type === "default") {
+      onSearch == null ? void 0 : onSearch(text);
+    }
+  }, [onSearch, text, type]);
+  let _placeholder = placeholder;
+  if (useFlexibleWidth && !isSelected) {
+    _placeholder = flexiblePlaceholder;
+  }
+  const getInitialValue = useCallback(() => {
+    if (value !== void 0) {
+      return convertToString(value);
+    }
+    if (defaultValue !== void 0) {
+      return convertToString(defaultValue);
+    }
+    return "";
+  }, [convertToString, defaultValue, value]);
+  useEffect(() => {
+    const initialValue = getInitialValue();
+    setText(initialValue);
+  }, [getInitialValue]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    type === "default" && /* @__PURE__ */ jsx(IconButton_default, { styleVar: "GHOST", sizeVar: "S", onClick: handleIconClick, "aria-label": "\uAC80\uC0C9", children: /* @__PURE__ */ jsx(Icon_default, { iconSource: SearchIcon, color: text ? "neutral700" : "neutral350", sizeVar: "S" }) }),
+    type === "real-time" && icon,
+    /* @__PURE__ */ jsx(
+      Input_default,
+      __spreadValues({
+        placeholder: _placeholder,
+        onChange: handleOnChange,
+        onKeyDown: handleKeyDown,
+        value: text,
+        onClear: handleOnClear,
+        width: "100%",
+        disabled,
+        "aria-label": "\uAC80\uC0C9\uC5B4 \uC785\uB825"
+      }, rest)
+    )
+  ] });
+};
+var StyledStackContainer2 = styled6(Stack_default.Horizontal)`
+  border: 1px solid ${colorTokens.neutral100};
+  border-radius: ${borderRadiusTokens.borderRadius06};
+  background-color: ${colorTokens.neutral100};
+  justify-content: center;
+  align-items: center;
+  padding: 4px 8px;
+  transition: all 400ms ease-in-out;
+
+  label {
+    flex-grow: 1;
+    border: none;
+    border-radius: 0;
+    height: 32px;
+    background-color: ${colorTokens.neutral100};
+    gap: 0px;
+
+    div {
+      padding: 0;
+    }
+
+    input {
+      padding: 0;
+    }
+  }
+
+  button {
+    background-color: ${colorTokens.neutral100};
+  }
+`;
+var CategoriesButton = styled6(Dropdown_default.Button)`
+  border-radius: 4px;
+  height: 24px;
+
+  &:hover {
+    background-color: ${colorTokens.neutral200};
+  }
+`;
+var DEFAULT_DROPDOWN_WIDTH = "136px";
+var SearchBarCategory = ({
+  dropdownWidth = DEFAULT_DROPDOWN_WIDTH,
+  dropdownItems = [],
+  selectedDropdownItem,
+  onDropdownSelect
+}) => {
+  const { isSelected, useFlexibleWidth } = useSearchBarContext();
+  if (!isSelected && useFlexibleWidth) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Dropdown_default,
+    {
+      width: dropdownWidth,
+      trigger: /* @__PURE__ */ jsx(
+        CategoriesButton,
+        {
+          value: selectedDropdownItem && /* @__PURE__ */ jsx(Text_default, { lineClamp: 1, typography: "body2_700", children: selectedDropdownItem.label }),
+          "aria-label": "\uCE74\uD14C\uACE0\uB9AC \uC120\uD0DD"
+        }
+      ),
+      popper: /* @__PURE__ */ jsx(Dropdown_default.Content, { type: "FILL", children: dropdownItems.map((item) => /* @__PURE__ */ jsx(
+        Menu_default,
+        {
+          className: "search-bar",
+          onClick: () => onDropdownSelect == null ? void 0 : onDropdownSelect(item),
+          isSelected: (selectedDropdownItem == null ? void 0 : selectedDropdownItem.value) === item.value,
+          "aria-selected": (selectedDropdownItem == null ? void 0 : selectedDropdownItem.value) === item.value,
+          children: /* @__PURE__ */ jsx(Text_default, { typography: "body1_500", children: item.label })
+        },
+        item.value
+      )) })
+    }
+  );
+};
+var DEFAULT_WIDTH = "100%";
+var DEFAULT_HEIGHT = "32px";
+var SearchBar = (_a) => {
+  var _b = _a, {
+    width = DEFAULT_WIDTH,
+    height = DEFAULT_HEIGHT,
+    useFlexibleWidth = false,
+    children
+  } = _b, rest = __objRest(_b, [
+    "width",
+    "height",
+    "useFlexibleWidth",
+    "children"
+  ]);
+  const [isSelected, setIsSelected] = useOutsideClick({
+    selector: ".search-bar",
+    onClose: () => setIsSelected(false)
+  });
+  const handleContainerClick = useCallback(() => {
+    setIsSelected(true);
+  }, [setIsSelected]);
+  const containerWidth = useMemo(() => {
+    if (!useFlexibleWidth) {
+      return width;
+    }
+    return isSelected ? width : "140px";
+  }, [useFlexibleWidth, isSelected, width]);
+  return /* @__PURE__ */ jsx(SearchBarProvider, { useFlexibleWidth, isSelected, children: /* @__PURE__ */ jsx(
+    StyledStackContainer2,
+    __spreadProps(__spreadValues({
+      "data-shoplflow": "SearchBar",
+      width: containerWidth,
+      height,
+      className: "search-bar",
+      spacing: "spacing04",
+      onClick: handleContainerClick,
+      role: "search",
+      "aria-label": "\uAC80\uC0C9"
+    }, rest), {
+      children
+    })
+  ) });
+};
+SearchBar.Category = SearchBarCategory;
+SearchBar.Input = SearchBarInput;
+
+// src/components/SearchBar/index.ts
+var SearchBar2 = SearchBar;
+SearchBar2.Category = SearchBarCategory;
+SearchBar2.Input = SearchBarInput;
 var SpaceMarginWrapper = styled6(motion.div)`
   position: relative;
   display: flex;
@@ -7026,4 +7275,4 @@ classnames/index.js:
   *)
 */
 
-export { AnnualDatepicker_default as AnnualDatepicker, Avatar_default as Avatar, AvatarSizeVariants, Button_default as Button, ButtonSizeVariants, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, DayDatepicker_default as DayDatepicker, DayDatepickerSizeVariants, Dropdown_default as Dropdown, DropdownButton_default as DropdownButton, DropdownButtonContext, DropdownButtonSizeVariants, DropdownButtonStyleVariants, DropdownOptionVariants, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, InputSizeVariants, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalContext, ModalHandlerContext, ModalPortal_default as ModalProvider, ModalSize, MonthDatepicker_default as MonthDatepicker, MotionStack, MotionStackContainer, NumberCombobox_default as NumberCombobox, NumberComboboxSizeVariants, Pagination_default as Pagination, Popper_default as Popper, PopperPortal, PopperTrigger, RADIO_SYMBOL_KEY, Radio_default as Radio, SLIDER_Z_INDEX, ScrollArea_default as ScrollArea, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, Skeleton_default as Skeleton, Slider_default as Slider, SplitButton_default as SplitButton, SplitButtonContext, SplitButtonSizeVariants, SplitButtonStyleVariants, Stack_default as Stack, StackContainer_default as StackContainer, StyledIcon, StyledStack, StyledStackContainer, Switch_default as Switch, TREE_SYMBOL_KEY, TabSizeVariants, TabStyleVariants, Tabs_default as Tabs, TabsContext, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, ToggleButton_default as ToggleButton, ToggleButtonSizeVariants, Tooltip_default as Tooltip, Tree_default as Tree, TreeItem, WeekDatepicker_default as WeekDatepicker, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };
+export { AnnualDatepicker_default as AnnualDatepicker, Avatar_default as Avatar, AvatarSizeVariants, Button_default as Button, ButtonSizeVariants, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, DayDatepicker_default as DayDatepicker, DayDatepickerSizeVariants, Dropdown_default as Dropdown, DropdownButton_default as DropdownButton, DropdownButtonContext, DropdownButtonSizeVariants, DropdownButtonStyleVariants, DropdownOptionVariants, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, InputSizeVariants, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalContext, ModalHandlerContext, ModalPortal_default as ModalProvider, ModalSize, MonthDatepicker_default as MonthDatepicker, MotionStack, MotionStackContainer, NumberCombobox_default as NumberCombobox, NumberComboboxSizeVariants, Pagination_default as Pagination, Popper_default as Popper, PopperPortal, PopperTrigger, RADIO_SYMBOL_KEY, Radio_default as Radio, SLIDER_Z_INDEX, ScrollArea_default as ScrollArea, SearchBar2 as SearchBar, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, Skeleton_default as Skeleton, Slider_default as Slider, SplitButton_default as SplitButton, SplitButtonContext, SplitButtonSizeVariants, SplitButtonStyleVariants, Stack_default as Stack, StackContainer_default as StackContainer, StyledIcon, StyledStack, StyledStackContainer, Switch_default as Switch, TREE_SYMBOL_KEY, TabSizeVariants, TabStyleVariants, Tabs_default as Tabs, TabsContext, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, ToggleButton_default as ToggleButton, ToggleButtonSizeVariants, Tooltip_default as Tooltip, Tree_default as Tree, TreeItem, WeekDatepicker_default as WeekDatepicker, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.41.11",
+  "version": "0.42.1",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",