@shoplflow/base 0.32.12 → 0.32.13

package/dist/index.d.cts

@@ -1001,14 +1001,26 @@ declare const StyledIcon: _emotion_styled.StyledComponent<{
     as?: React$1.ElementType<any> | undefined;
 } & IconOptionProps, React$1.SVGProps<SVGSVGElement>, {}>;
 
+declare const InputSizeVariants: {
+    readonly S: "S";
+    readonly M: "M";
+};
+declare type InputSizeVariantType = $Values<typeof InputSizeVariants>;
 interface InputProps extends InputOptionProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'width'>, DisableProps, RightElementProps {
 }
-interface InputOptionProps extends ErrorProps {
+interface InputOptionProps extends ErrorProps, SizeVariantProps<InputSizeVariantType> {
     width?: string;
     maxLength?: number;
+    /**
+     * 최소 넓이를 지정
+     * @description 64px;
+     */
+    minWidth?: string;
     borderRadius?: BorderRadiusTokens;
     customNumberInputHeight?: string;
     onClear?: () => void;
+    gap?: CSSStyleDeclaration['gap'];
+    initIsFocused?: boolean;
 }
 
 declare const Input: React__default.ForwardRefExoticComponent<InputProps & React__default.RefAttributes<HTMLInputElement>>;
@@ -1423,4 +1435,28 @@ declare type YearSelectProps = {
     }) => void;
 };
 
-export { AnnualDatepicker, AnnualDatepickerProps, 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, Dropdown, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, 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, useHandleModal, useModalValue, useTabs };
+declare const NumberComboboxSizeVariants: {
+    readonly S: "S";
+    readonly M: "M";
+};
+declare type NumberComboboxSizeVariantType = $Values<typeof NumberComboboxSizeVariants>;
+declare type NumberComboboxInputType = 'hours' | 'minutes';
+declare type NumberComboboxErrorType = 'range' | 'unit';
+declare type NumberComboboxOptionProps = ColorTokenProps & SizeVariantProps<NumberComboboxSizeVariantType>;
+declare type NumberComboboxProps = NumberComboboxOptionProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'width'> & {
+    disabled?: boolean;
+    onSelect?: (value: string | number | readonly string[]) => void;
+    width?: string;
+    items: Array<{
+        label: string;
+        value: string;
+    }>;
+    /**
+     * 에러 여부
+     */
+    isError?: boolean;
+};
+
+declare const NumberCombobox: ({ disabled, onSelect, onChange, value, width, onBlur, items, isError, sizeVar, placeholder, maxLength, className, ...rest }: NumberComboboxProps) => react_jsx_runtime.JSX.Element;
+
+export { AnnualDatepicker, AnnualDatepickerProps, 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, Dropdown, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, 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, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, 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, useHandleModal, useModalValue, useTabs };

package/dist/index.d.ts

@@ -1001,14 +1001,26 @@ declare const StyledIcon: _emotion_styled.StyledComponent<{
     as?: React$1.ElementType<any> | undefined;
 } & IconOptionProps, React$1.SVGProps<SVGSVGElement>, {}>;
 
+declare const InputSizeVariants: {
+    readonly S: "S";
+    readonly M: "M";
+};
+declare type InputSizeVariantType = $Values<typeof InputSizeVariants>;
 interface InputProps extends InputOptionProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'width'>, DisableProps, RightElementProps {
 }
-interface InputOptionProps extends ErrorProps {
+interface InputOptionProps extends ErrorProps, SizeVariantProps<InputSizeVariantType> {
     width?: string;
     maxLength?: number;
+    /**
+     * 최소 넓이를 지정
+     * @description 64px;
+     */
+    minWidth?: string;
     borderRadius?: BorderRadiusTokens;
     customNumberInputHeight?: string;
     onClear?: () => void;
+    gap?: CSSStyleDeclaration['gap'];
+    initIsFocused?: boolean;
 }
 
 declare const Input: React__default.ForwardRefExoticComponent<InputProps & React__default.RefAttributes<HTMLInputElement>>;
@@ -1423,4 +1435,28 @@ declare type YearSelectProps = {
     }) => void;
 };
 
-export { AnnualDatepicker, AnnualDatepickerProps, 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, Dropdown, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, 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, useHandleModal, useModalValue, useTabs };
+declare const NumberComboboxSizeVariants: {
+    readonly S: "S";
+    readonly M: "M";
+};
+declare type NumberComboboxSizeVariantType = $Values<typeof NumberComboboxSizeVariants>;
+declare type NumberComboboxInputType = 'hours' | 'minutes';
+declare type NumberComboboxErrorType = 'range' | 'unit';
+declare type NumberComboboxOptionProps = ColorTokenProps & SizeVariantProps<NumberComboboxSizeVariantType>;
+declare type NumberComboboxProps = NumberComboboxOptionProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'width'> & {
+    disabled?: boolean;
+    onSelect?: (value: string | number | readonly string[]) => void;
+    width?: string;
+    items: Array<{
+        label: string;
+        value: string;
+    }>;
+    /**
+     * 에러 여부
+     */
+    isError?: boolean;
+};
+
+declare const NumberCombobox: ({ disabled, onSelect, onChange, value, width, onBlur, items, isError, sizeVar, placeholder, maxLength, className, ...rest }: NumberComboboxProps) => react_jsx_runtime.JSX.Element;
+
+export { AnnualDatepicker, AnnualDatepickerProps, 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, Dropdown, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, 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, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, 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, useHandleModal, useModalValue, useTabs };

package/dist/index.js

@@ -5,15 +5,15 @@ import { motion, AnimatePresence, LayoutGroup, LazyMotion, domAnimation } from '
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { css } from '@emotion/react';
-import { useMergeRefs, noop, OutSideClick, useSelect, useParentElementClick, useOutsideClick, isNullOrUndefined } from '@shoplflow/utils';
+import { useMergeRefs, noop, OutSideClick, useSelect, useOutsideClick, 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, DownArrowIcon, FirstPageIcon, LeftArrowIcon, RightArrowIcon, EndPageIcon } from '@shoplflow/shopl-assets';
+import { DownArrowSolidXsmallIcon, DownArrowIcon, FirstPageIcon, LeftArrowIcon, RightArrowIcon, EndPageIcon, UpArrowSolidXsmallIcon } from '@shoplflow/shopl-assets';
 import * as HadaAssets from '@shoplflow/hada-assets';
-import { flip, shift } from '@floating-ui/core';
+import { flip, shift, offset as offset$1 } from '@floating-ui/core';
 import DatePicker2 from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import SimpleBarReact from 'simplebar-react';
@@ -1632,6 +1632,10 @@ var getWidthAndHeightFromSizeVar = (sizeVar) => {
         min-width: 40px;
         height: 40px;
         min-height: 40px;
+        & > svg {
+          width: 24px;
+          height: 24px;
+        }
       `;
     case "S":
       return css`
@@ -1639,6 +1643,10 @@ var getWidthAndHeightFromSizeVar = (sizeVar) => {
         min-width: 32px;
         height: 32px;
         min-height: 32px;
+        & > svg {
+          width: 20px;
+          height: 20px;
+        }
       `;
     case "XS":
       return css`
@@ -1646,6 +1654,10 @@ var getWidthAndHeightFromSizeVar = (sizeVar) => {
         min-width: 24px;
         height: 24px;
         min-height: 24px;
+        & > svg {
+          width: 12px;
+          height: 12px;
+        }
       `;
     default:
       return css`
@@ -1653,6 +1665,10 @@ var getWidthAndHeightFromSizeVar = (sizeVar) => {
         min-width: 40px;
         height: 40px;
         min-height: 40px;
+        & > svg {
+          width: 20px;
+          height: 20px;
+        }
       `;
   }
 };
@@ -1714,10 +1730,6 @@ var StyledIconButton = styled6.button`
   ${({ styleVar, color, isHovered }) => getStyleByStyleVar2(styleVar, color, isHovered)};
   ${({ sizeVar }) => getWidthAndHeightFromSizeVar(sizeVar)};
   ${({ disabled }) => getDisabledStyle(disabled)};
-  & > svg {
-    width: 20px;
-    height: 20px;
-  }
 `;
 var IconButton = forwardRef(
   (_a, ref) => {
@@ -2108,7 +2120,7 @@ var InputWrapper = styled6.label`
   borderRadius
 })};
   justify-content: space-between;
-  gap: 8px;
+  gap: ${({ gap }) => gap || "8px"};
   border: 1px solid ${(props) => getBorderColorByStatus(props)};
   background-color: ${colorTokens.neutral0};
   overflow: hidden;
@@ -3008,7 +3020,7 @@ var StyledInput = styled6.input`
   padding: 4px 0 4px 12px;
   background-color: transparent;
   display: flex;
-  min-width: 64px;
+  min-width: ${({ minWidth }) => minWidth || "64px"};
   width: 100%;
   border: none;
   box-sizing: border-box;
@@ -3101,7 +3113,12 @@ var Input = forwardRef(
       width,
       borderRadius,
       customNumberInputHeight,
-      onKeyDown
+      onKeyDown,
+      sizeVar = "M",
+      rightSource,
+      minWidth,
+      gap,
+      initIsFocused
     } = _b, rest = __objRest(_b, [
       "onFocus",
       "onBlur",
@@ -3119,10 +3136,15 @@ var Input = forwardRef(
       "width",
       "borderRadius",
       "customNumberInputHeight",
-      "onKeyDown"
+      "onKeyDown",
+      "sizeVar",
+      "rightSource",
+      "minWidth",
+      "gap",
+      "initIsFocused"
     ]);
     const [text, setText] = useState("");
-    const [isFocused, setIsFocused] = useState(false);
+    const [isFocused, setIsFocused] = useState(Boolean(initIsFocused));
     const [type, setType] = useState(initialType);
     const [isHovered, setIsHovered] = useState(false);
     const uniqueId = useId();
@@ -3209,6 +3231,13 @@ var Input = forwardRef(
     useEffect(() => {
       setType(initialType);
     }, [initialType]);
+    const height = sizeVar === "M" ? "40px" : "32px";
+    useEffect(() => {
+      if (typeof initIsFocused === "undefined") {
+        return;
+      }
+      setIsFocused(initIsFocused);
+    }, [initIsFocused]);
     return /* @__PURE__ */ jsxs(
       InputWrapper,
       {
@@ -3221,11 +3250,12 @@ var Input = forwardRef(
         onMouseLeave: handleOnMouseLeave,
         type,
         width,
-        height: "40px",
-        maxHeight: "40px",
+        height,
+        maxHeight: height,
         "data-shoplflow": "input",
         borderRadius,
         customNumberInputHeight,
+        gap,
         children: [
           /* @__PURE__ */ jsx(
             StyledInput,
@@ -3240,6 +3270,7 @@ var Input = forwardRef(
               type,
               id: uniqueId,
               ref: refs,
+              minWidth,
               className: "body1_400" + (className ? ` ${className}` : "")
             }, rest)
           ),
@@ -3253,13 +3284,20 @@ var Input = forwardRef(
                 iconSource: assetFunction(type === "password" ? "ViewOffIcon" : "ViewOnIcon")
               }
             ) })
-          ] })
+          ] }),
+          rightSource && rightSource
         ]
       }
     );
   }
 );
 var Input_default = Input;
+
+// src/components/Inputs/Input/Input.types.ts
+var InputSizeVariants = {
+  S: "S",
+  M: "M"
+};
 var StyledInputButton = styled6.div`
   display: flex;
   flex-direction: row;
@@ -3629,7 +3667,7 @@ var Tooltip = (_a) => {
     trigger,
     popper,
     placement = "bottom-start",
-    offset: offset3 = 4,
+    offset: offset4 = 4,
     triggerRef,
     portalRef
   } = _b, popperProps = __objRest(_b, [
@@ -3655,7 +3693,7 @@ var Tooltip = (_a) => {
     }
     onOpenChange == null ? void 0 : onOpenChange(false);
   }, [open, onOpenChange]);
-  return /* @__PURE__ */ jsxs(Popper_default, __spreadProps(__spreadValues({ offset: offset3, placement, middlewares: [flip(), shift({ padding: 5 })] }, popperProps), { children: [
+  return /* @__PURE__ */ jsxs(Popper_default, __spreadProps(__spreadValues({ offset: offset4, placement, middlewares: [flip(), shift({ padding: 5 })] }, popperProps), { children: [
     /* @__PURE__ */ jsx(
       Popper_default.Trigger,
       {
@@ -5751,6 +5789,176 @@ var WeekDatepicker = ({
   ] });
 };
 var WeekDatepicker_default = WeekDatepicker;
+var StyledNumberCombobox = styled6.div``;
+var IconWrapper2 = styled6(motion.div)`
+  display: flex;
+  width: fit-content;
+  height: fit-content;
+`;
+var NumberCombobox = (_a) => {
+  var _b = _a, {
+    disabled,
+    onSelect,
+    onChange,
+    value,
+    width = "90px",
+    onBlur,
+    items,
+    isError,
+    sizeVar = "M",
+    placeholder = "Enter",
+    maxLength,
+    className
+  } = _b, rest = __objRest(_b, [
+    "disabled",
+    "onSelect",
+    "onChange",
+    "value",
+    "width",
+    "onBlur",
+    "items",
+    "isError",
+    "sizeVar",
+    "placeholder",
+    "maxLength",
+    "className"
+  ]);
+  const selector = useRef(`shoplflow-${crypto.randomUUID()}-number-combobox`).current;
+  const inputRef = useRef(null);
+  const [isOpen, setIsOpen] = useOutsideClick({
+    selector: `.${selector}`,
+    useOutsideScroll: true
+  });
+  let _className = `${selector}`;
+  if (className) {
+    _className += ` ${className}`;
+  }
+  return /* @__PURE__ */ jsx(StyledNumberCombobox, { "data-shoplflow": "NumberCombobox", color: "shopl300", className: _className, children: /* @__PURE__ */ jsxs(Popper_default, { middlewares: [offset$1(4)], children: [
+    /* @__PURE__ */ jsx(Popper_default.Trigger, { isOpen, className: _className, children: /* @__PURE__ */ jsx(
+      Input_default,
+      __spreadValues({
+        sizeVar,
+        width,
+        ref: inputRef,
+        type: "number",
+        style: { textAlign: "left", paddingRight: "0px" },
+        className: _className,
+        gap: "4px",
+        initIsFocused: isOpen,
+        value,
+        onChange,
+        onFocus: () => {
+          setIsOpen(true);
+        },
+        autoCapitalize: "off",
+        customNumberInputHeight: sizeVar === "S" ? "32px" : "40px",
+        isError,
+        minWidth: `calc(100% -32px)`,
+        autoComplete: "off",
+        autoCorrect: "off",
+        placeholder,
+        disabled,
+        onKeyDown: (event) => {
+          var _a2;
+          if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+            event.preventDefault();
+            return;
+          }
+          setIsOpen(true);
+          if (event.key === "Enter") {
+            const currentValue = event.currentTarget.value;
+            onSelect == null ? void 0 : onSelect(currentValue);
+            setIsOpen(false);
+            (_a2 = inputRef.current) == null ? void 0 : _a2.blur();
+            return;
+          }
+        },
+        maxLength,
+        onBlur: (event) => {
+          const target = event.target;
+          const isNested = Boolean(target.closest(`.${_className}`));
+          if (isNested) {
+            return;
+          }
+          onBlur == null ? void 0 : onBlur(event);
+        },
+        rightSource: /* @__PURE__ */ jsx(StackContainer_default.Horizontal, { padding: "0px 4px 0px 0px", children: /* @__PURE__ */ jsx(
+          IconButton_default,
+          {
+            sizeVar: "XS",
+            styleVar: "GHOST",
+            className: _className,
+            onClick: () => {
+              if (disabled) {
+                return;
+              }
+              setIsOpen((prev) => !prev);
+            },
+            style: { cursor: disabled ? "not-allowed" : "cursor" },
+            children: /* @__PURE__ */ jsx(
+              IconWrapper2,
+              {
+                animate: {
+                  rotate: isOpen ? 180 : 0,
+                  transition: {
+                    duration: 0.2
+                  }
+                },
+                children: /* @__PURE__ */ jsx(
+                  Icon_default,
+                  {
+                    iconSource: UpArrowSolidXsmallIcon,
+                    sizeVar: "XS",
+                    color: "neutral400",
+                    style: { cursor: disabled ? "not-allowed" : "cursor" }
+                  }
+                )
+              }
+            )
+          }
+        ) })
+      }, rest)
+    ) }),
+    /* @__PURE__ */ jsx(Popper_default.Portal, { children: /* @__PURE__ */ jsx(
+      SimpleBarReact,
+      {
+        className: _className,
+        style: {
+          height: "128px",
+          maxHeight: "128px",
+          width,
+          padding: "4px",
+          filter: "drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.12))",
+          boxShadow: "0px 8px 16px rgba(0, 0, 0, 0.12)",
+          borderRadius: "8px",
+          backgroundColor: colorTokens.neutral0
+        },
+        children: items.map((item) => /* @__PURE__ */ jsx(
+          Menu_default,
+          {
+            isSelected: value === item.value,
+            onClick: () => {
+              if (disabled) {
+                return;
+              }
+              onSelect == null ? void 0 : onSelect(item.value);
+              setIsOpen(false);
+            },
+            children: /* @__PURE__ */ jsx(Text_default, { typography: "body1_400", children: item.label })
+          },
+          item.value
+        ))
+      }
+    ) })
+  ] }) });
+};
+var NumberCombobox_default = NumberCombobox;
+
+// src/components/Comboboxs/NumberCombobox/NumberCombobox.types.ts
+var NumberComboboxSizeVariants = {
+  S: "S",
+  M: "M"
+};
 var SpaceMarginWrapper = styled6(motion.div)`
   position: relative;
   display: flex;
@@ -5805,6 +6013,6 @@ 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, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, 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, Pagination_default as Pagination, Popper_default as Popper, PopperPortal, PopperTrigger, RADIO_SYMBOL_KEY, Radio_default as Radio, ScrollArea_default as ScrollArea, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, 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, useHandleModal, useModalValue, 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, 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, ScrollArea_default as ScrollArea, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, 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, useHandleModal, useModalValue, useTabs };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map