@shoplflow/base 0.45.17 → 0.46.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.cts +109 -100
- package/dist/index.d.ts +109 -100
- package/package.json +15 -28
package/dist/index.d.cts
CHANGED
|
@@ -15,7 +15,7 @@ import { positionValues } from 'react-custom-scrollbars-2';
|
|
|
15
15
|
import { DatePickerProps, ReactDatePickerCustomHeaderProps } from 'react-datepicker';
|
|
16
16
|
import { Locale } from 'react-datepicker/dist/date_utils';
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
type DomainType = 'SHOPL' | 'HADA';
|
|
19
19
|
|
|
20
20
|
interface ShoplflowProviderProps {
|
|
21
21
|
domain?: DomainType;
|
|
@@ -25,9 +25,9 @@ declare const ShoplflowProvider: ({ children, domain }: ShoplflowProviderProps)
|
|
|
25
25
|
|
|
26
26
|
declare const ModalPortal: () => react_jsx_runtime.JSX.Element;
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
type UseDomainType = (domain?: DomainType) => [DomainType | undefined];
|
|
29
29
|
declare const useDomain: UseDomainType;
|
|
30
|
-
declare const getDomain: () =>
|
|
30
|
+
declare const getDomain: () => Lowercase<DomainType>;
|
|
31
31
|
|
|
32
32
|
declare const fontWeightTokens: {
|
|
33
33
|
fontWeightRegular: string;
|
|
@@ -136,18 +136,18 @@ declare const typographyTokens: {
|
|
|
136
136
|
paragraph2: string;
|
|
137
137
|
};
|
|
138
138
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
139
|
+
type ColorTokens = keyof typeof colorTokens;
|
|
140
|
+
type SpacingTokens = keyof typeof spacingTokens;
|
|
141
|
+
type BorderRadiusTokens = keyof typeof borderRadiusTokens;
|
|
142
|
+
type BoxShadowTokens = keyof typeof boxShadowTokens;
|
|
143
|
+
type FontWeightTokens = keyof typeof fontWeightTokens;
|
|
144
|
+
type TypographyTokens = keyof typeof typographyTokens;
|
|
145
145
|
|
|
146
146
|
/**
|
|
147
147
|
* HTML 태그에 대한 타입
|
|
148
148
|
*/
|
|
149
|
-
|
|
150
|
-
|
|
149
|
+
type StringElementType = ElementType;
|
|
150
|
+
type HTMLPropsWithoutRef<T extends StringElementType> = ComponentPropsWithoutRef<T>;
|
|
151
151
|
interface DisableProps {
|
|
152
152
|
/**
|
|
153
153
|
* 비활성화 여부를 설정합니다.
|
|
@@ -187,7 +187,7 @@ interface RadiusBooleanProps {
|
|
|
187
187
|
*/
|
|
188
188
|
radius?: boolean;
|
|
189
189
|
}
|
|
190
|
-
|
|
190
|
+
type RenderConfigProps = {
|
|
191
191
|
/**
|
|
192
192
|
* 랜더하려고 하는 HTML tag로 변환할 수 있습니다.
|
|
193
193
|
*
|
|
@@ -283,7 +283,7 @@ declare const AvatarSizeVariants: {
|
|
|
283
283
|
readonly L: "L";
|
|
284
284
|
readonly XL: "XL";
|
|
285
285
|
};
|
|
286
|
-
|
|
286
|
+
type AvatarSizeVariantType = $Values<typeof AvatarSizeVariants>;
|
|
287
287
|
interface AvatarProps extends AvatarOptionProps {
|
|
288
288
|
fallbackUrl?: string;
|
|
289
289
|
}
|
|
@@ -296,9 +296,9 @@ interface AvatarOptionProps extends SizeVariantProps<AvatarSizeVariantType>, Img
|
|
|
296
296
|
|
|
297
297
|
declare const Avatar: ({ src, badge, fallbackUrl, ...rest }: AvatarProps) => JSX.Element;
|
|
298
298
|
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
299
|
+
type StackGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackProps & HTMLPropsWithoutRef<T>;
|
|
300
|
+
type StackComponentType = ForwardRefExoticComponent<PropsWithoutRef<StackGenericProps> & RefAttributes<HTMLElement>>;
|
|
301
|
+
type MotionStackComponentType<T extends StringElementType = 'div'> = CustomDomComponent<RenderConfigProps & HTMLPropsWithoutRef<T> & StackProps>;
|
|
302
302
|
interface StackProps extends StackOptionProps, ChildrenProps {
|
|
303
303
|
}
|
|
304
304
|
interface StackOptionProps {
|
|
@@ -363,13 +363,13 @@ interface MotionStackType$1 extends MotionStackComponentType {
|
|
|
363
363
|
declare const MotionStack: MotionStackType$1;
|
|
364
364
|
|
|
365
365
|
declare const StyledStack: _emotion_styled.StyledComponent<{
|
|
366
|
-
theme?: _emotion_react.Theme
|
|
367
|
-
as?: React
|
|
366
|
+
theme?: _emotion_react.Theme;
|
|
367
|
+
as?: React.ElementType;
|
|
368
368
|
} & StackOptionProps, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
369
369
|
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
370
|
+
type StackContainerGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackContainerProps & HTMLPropsWithoutRef<T>;
|
|
371
|
+
type StackContainerComponentType = ForwardRefExoticComponent<PropsWithoutRef<StackContainerGenericProps> & RefAttributes<HTMLElement>>;
|
|
372
|
+
type MotionStackContainerComponentType<T extends StringElementType = 'div'> = CustomDomComponent<RenderConfigProps & HTMLPropsWithoutRef<T> & StackContainerProps>;
|
|
373
373
|
interface StackContainerProps extends StackContainerOptionProps, ChildrenProps {
|
|
374
374
|
}
|
|
375
375
|
interface StackContainerOptionProps {
|
|
@@ -437,8 +437,8 @@ interface MotionStackType extends MotionStackContainerComponentType {
|
|
|
437
437
|
declare const MotionStackContainer: MotionStackType;
|
|
438
438
|
|
|
439
439
|
declare const StyledStackContainer: _emotion_styled.StyledComponent<{
|
|
440
|
-
theme?: _emotion_react.Theme
|
|
441
|
-
as?: React
|
|
440
|
+
theme?: _emotion_react.Theme;
|
|
441
|
+
as?: React.ElementType;
|
|
442
442
|
} & StackContainerOptionProps, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
443
443
|
|
|
444
444
|
interface TextOptionProps {
|
|
@@ -475,7 +475,7 @@ declare const ModalSize: {
|
|
|
475
475
|
readonly XXXL: "XXXL";
|
|
476
476
|
readonly FULL: "FULL";
|
|
477
477
|
};
|
|
478
|
-
|
|
478
|
+
type ModalSizeType = $Values<typeof ModalSize>;
|
|
479
479
|
interface ModalContainerProps extends ModalContainerOptionProps, SizeVariantProps<ModalSizeType> {
|
|
480
480
|
children?: React.ReactNode | React.ReactNode[];
|
|
481
481
|
hasChangeAnimation?: boolean;
|
|
@@ -521,7 +521,7 @@ interface ModalTopProps extends ChildrenProps {
|
|
|
521
521
|
interface ModalBottomProps extends ChildrenProps {
|
|
522
522
|
}
|
|
523
523
|
|
|
524
|
-
|
|
524
|
+
type ModalStateType = {
|
|
525
525
|
component: ReactNode;
|
|
526
526
|
id?: string;
|
|
527
527
|
/**
|
|
@@ -529,16 +529,16 @@ declare type ModalStateType = {
|
|
|
529
529
|
*/
|
|
530
530
|
zIndex?: number;
|
|
531
531
|
};
|
|
532
|
-
|
|
532
|
+
type RemoveModalProps = {
|
|
533
533
|
id?: string;
|
|
534
534
|
deps?: number;
|
|
535
535
|
};
|
|
536
|
-
|
|
536
|
+
type ModalHandlerContext = {
|
|
537
537
|
addModal: (modal: ReactNode, id?: string, zIndex?: number) => void;
|
|
538
538
|
removeModal: (props?: RemoveModalProps) => void;
|
|
539
539
|
};
|
|
540
540
|
declare const ModalHandlerContext: React$1.Context<ModalHandlerContext>;
|
|
541
|
-
|
|
541
|
+
type ModalContext = ModalStateType[];
|
|
542
542
|
declare const ModalContext: React$1.Context<ModalContext>;
|
|
543
543
|
|
|
544
544
|
declare const useModalValue: () => {
|
|
@@ -546,8 +546,8 @@ declare const useModalValue: () => {
|
|
|
546
546
|
};
|
|
547
547
|
|
|
548
548
|
declare const useHandleModal: () => {
|
|
549
|
-
addModal: (modal: React$1.ReactNode, id?: string
|
|
550
|
-
removeModal: (props?: RemoveModalProps
|
|
549
|
+
addModal: (modal: React$1.ReactNode, id?: string, zIndex?: number) => void;
|
|
550
|
+
removeModal: (props?: RemoveModalProps) => void;
|
|
551
551
|
};
|
|
552
552
|
|
|
553
553
|
declare const Modal: {
|
|
@@ -569,7 +569,7 @@ declare const SwitchSizeVariants: {
|
|
|
569
569
|
readonly S: "S";
|
|
570
570
|
readonly M: "M";
|
|
571
571
|
};
|
|
572
|
-
|
|
572
|
+
type SwitchSizeVariantType = $Values<typeof SwitchSizeVariants>;
|
|
573
573
|
interface SwitchProps extends SwitchOptionProps, DisableProps, SelectedProps, DefaultSelectedProps, SizeVariantProps<SwitchSizeVariantType>, HTMLAttributes<HTMLInputElement> {
|
|
574
574
|
}
|
|
575
575
|
interface SwitchOptionProps {
|
|
@@ -585,8 +585,8 @@ declare const ChipToggleSizeVariants: {
|
|
|
585
585
|
readonly S: "S";
|
|
586
586
|
readonly XS: "XS";
|
|
587
587
|
};
|
|
588
|
-
|
|
589
|
-
|
|
588
|
+
type ChipToggleStyleVariantType = $Values<typeof ChipToggleStyleVariants>;
|
|
589
|
+
type ChipToggleSizeVariantType = $Values<typeof ChipToggleSizeVariants>;
|
|
590
590
|
interface ChipToggleProps extends ChipToggleOptionProps, SelectedProps, DefaultSelectedProps, ColorTokenProps, StyleVariantProps<ChipToggleStyleVariantType>, SizeVariantProps<ChipToggleSizeVariantType>, LeftAndRightElementProps, RadiusBooleanProps, TextProps$1, DisableProps, Omit<HTMLAttributes<HTMLButtonElement>, 'color'> {
|
|
591
591
|
}
|
|
592
592
|
interface ChipToggleOptionProps {
|
|
@@ -601,8 +601,8 @@ declare const ChipButtonSizeVariants: {
|
|
|
601
601
|
readonly S: "S";
|
|
602
602
|
readonly XS: "XS";
|
|
603
603
|
};
|
|
604
|
-
|
|
605
|
-
|
|
604
|
+
type ChipButtonStyleVariantType = $Values<typeof ChipButtonStyleVariants>;
|
|
605
|
+
type ChipButtonSizeVariantType = $Values<typeof ChipButtonSizeVariants>;
|
|
606
606
|
interface ChipButtonProps extends ChipButtonOptionProps, Omit<HTMLAttributes<HTMLButtonElement>, 'color'>, TextProps$1, DisableProps, LeftAndRightElementProps, SizeVariantProps<ChipButtonSizeVariantType>, StyleVariantProps<ChipButtonStyleVariantType>, ColorTokenProps, BackgroundColorProps {
|
|
607
607
|
}
|
|
608
608
|
interface ChipButtonOptionProps {
|
|
@@ -610,11 +610,11 @@ interface ChipButtonOptionProps {
|
|
|
610
610
|
|
|
611
611
|
declare const ChipButton: ({ styleVar, color, sizeVar, text, onClick, disabled, ...rest }: ChipButtonProps) => react_jsx_runtime.JSX.Element;
|
|
612
612
|
|
|
613
|
-
|
|
613
|
+
type AsProp<T extends React__default.ElementType> = {
|
|
614
614
|
as?: T;
|
|
615
615
|
};
|
|
616
|
-
|
|
617
|
-
|
|
616
|
+
type PolymorphicRef<T extends React__default.ElementType> = React__default.ComponentPropsWithRef<T>['ref'];
|
|
617
|
+
type PolymorphicComponentProps<T extends React__default.ElementType, Props = {}> = AsProp<T> & React__default.ComponentPropsWithoutRef<T> & Props & {
|
|
618
618
|
ref?: PolymorphicRef<T>;
|
|
619
619
|
};
|
|
620
620
|
|
|
@@ -623,20 +623,20 @@ declare const ButtonSizeVariants: {
|
|
|
623
623
|
readonly M: "M";
|
|
624
624
|
readonly XS: "XS";
|
|
625
625
|
};
|
|
626
|
-
|
|
626
|
+
type ButtonSizeVariantType = $Values<typeof ButtonSizeVariants>;
|
|
627
627
|
declare const ButtonStyleVariants: {
|
|
628
628
|
readonly PRIMARY: "PRIMARY";
|
|
629
629
|
readonly SECONDARY: "SECONDARY";
|
|
630
630
|
readonly SOLID: "SOLID";
|
|
631
631
|
readonly GHOST: "GHOST";
|
|
632
632
|
};
|
|
633
|
-
|
|
634
|
-
|
|
633
|
+
type ButtonStyleVariantType = $Values<typeof ButtonStyleVariants>;
|
|
634
|
+
type ButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & SizeVariantProps<ButtonSizeVariantType> & StyleVariantProps<ButtonStyleVariantType> & ColorTokenProps & DisableProps & LoadingProps & {
|
|
635
635
|
typography?: TypographyTokens;
|
|
636
636
|
lineClamp?: number;
|
|
637
637
|
};
|
|
638
|
-
|
|
639
|
-
|
|
638
|
+
type ButtonProps<T extends ElementType = 'button'> = PolymorphicComponentProps<T, ButtonOptionProps> & LeftAndRightNodeProps;
|
|
639
|
+
type ButtonComponent = <T extends ElementType = 'button'>(props: ButtonProps<T> & {
|
|
640
640
|
ref?: ComponentPropsWithRef<T>['ref'];
|
|
641
641
|
}) => React.ReactElement | null;
|
|
642
642
|
|
|
@@ -647,17 +647,17 @@ declare const IconButtonSizeVariants: {
|
|
|
647
647
|
readonly S: "S";
|
|
648
648
|
readonly M: "M";
|
|
649
649
|
};
|
|
650
|
-
|
|
650
|
+
type IconButtonSizeVariantType = $Values<typeof IconButtonSizeVariants>;
|
|
651
651
|
declare const IconButtonStyleVariants: {
|
|
652
652
|
readonly PRIMARY: "PRIMARY";
|
|
653
653
|
readonly SECONDARY: "SECONDARY";
|
|
654
654
|
readonly SOLID: "SOLID";
|
|
655
655
|
readonly GHOST: "GHOST";
|
|
656
656
|
};
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
657
|
+
type IconButtonStyleVariantType = $Values<typeof IconButtonStyleVariants>;
|
|
658
|
+
type IconButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & DisableProps & SizeVariantProps<IconButtonSizeVariantType> & IconSizeVariantProps<'XS' | 'S' | 'M'> & StyleVariantProps<IconButtonStyleVariantType> & ChildrenProps & ColorTokenProps & LoadingProps;
|
|
659
|
+
type IconButtonProps<T extends ElementType = 'button'> = PolymorphicComponentProps<T, IconButtonOptionProps>;
|
|
660
|
+
type IconButtonComponent = <T extends ElementType = 'button'>(props: IconButtonProps<T> & {
|
|
661
661
|
ref?: ComponentPropsWithRef<T>['ref'];
|
|
662
662
|
}) => React__default.ReactElement | null;
|
|
663
663
|
|
|
@@ -667,15 +667,15 @@ declare const DropdownButtonSizeVariants: {
|
|
|
667
667
|
readonly S: "S";
|
|
668
668
|
readonly M: "M";
|
|
669
669
|
};
|
|
670
|
-
|
|
670
|
+
type DropdownButtonSizeVariantType = $Values<typeof DropdownButtonSizeVariants>;
|
|
671
671
|
declare const DropdownButtonStyleVariants: {
|
|
672
672
|
readonly PRIMARY: "PRIMARY";
|
|
673
673
|
readonly SECONDARY: "SECONDARY";
|
|
674
674
|
};
|
|
675
|
-
|
|
675
|
+
type DropdownButtonStyleVariantType = $Values<typeof DropdownButtonStyleVariants>;
|
|
676
676
|
interface DropdownButtonProps extends DropdownButtonOptionProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
|
|
677
677
|
}
|
|
678
|
-
|
|
678
|
+
type DropdownButtonOptionProps = SizeVariantProps<DropdownButtonSizeVariantType> & StyleVariantProps<DropdownButtonStyleVariantType> & {
|
|
679
679
|
text: string;
|
|
680
680
|
} & {
|
|
681
681
|
placement?: Placement;
|
|
@@ -687,7 +687,7 @@ declare const MenuSizeVariants: {
|
|
|
687
687
|
readonly S: "S";
|
|
688
688
|
readonly M: "M";
|
|
689
689
|
};
|
|
690
|
-
|
|
690
|
+
type MenuSizeVariantType = $Values<typeof MenuSizeVariants>;
|
|
691
691
|
interface MenuProps extends MenuOptionProps, HTMLAttributes<HTMLLIElement> {
|
|
692
692
|
}
|
|
693
693
|
interface MenuOptionProps extends ChildrenProps, DisableProps, RightElementProps, LeftElementProps, SelectedProps, DefaultSelectedProps, SizeVariantProps<MenuSizeVariantType> {
|
|
@@ -700,7 +700,7 @@ declare const DropdownButton: {
|
|
|
700
700
|
Menu: ({ onClick, children, ...rest }: MenuProps) => react_jsx_runtime.JSX.Element;
|
|
701
701
|
};
|
|
702
702
|
|
|
703
|
-
|
|
703
|
+
type DropdownButtonContextType = {
|
|
704
704
|
isOpen: boolean;
|
|
705
705
|
setIsOpen: (isOpen: boolean) => void;
|
|
706
706
|
};
|
|
@@ -711,26 +711,26 @@ declare const SplitButtonSizeVariants: {
|
|
|
711
711
|
readonly S: "S";
|
|
712
712
|
readonly M: "M";
|
|
713
713
|
};
|
|
714
|
-
|
|
714
|
+
type SplitButtonSizeVariantType = $Values<typeof SplitButtonSizeVariants>;
|
|
715
715
|
declare const SplitButtonStyleVariants: {
|
|
716
716
|
readonly PRIMARY: "PRIMARY";
|
|
717
717
|
readonly SECONDARY: "SECONDARY";
|
|
718
718
|
};
|
|
719
|
-
|
|
719
|
+
type SplitButtonStyleVariantType = $Values<typeof SplitButtonStyleVariants>;
|
|
720
720
|
interface SplitButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'color' | 'disabled'>, SplitButtonOptionProps {
|
|
721
721
|
placement?: Placement;
|
|
722
722
|
floatingZIndex?: CSSProperties['zIndex'];
|
|
723
723
|
lineClamp?: number;
|
|
724
724
|
text: string;
|
|
725
725
|
}
|
|
726
|
-
|
|
726
|
+
type SplitButtonOptionProps = SizeVariantProps<SplitButtonSizeVariantType> & StyleVariantProps<SplitButtonStyleVariantType> & LeftAndRightNodeProps & DisableProps & ColorTokenProps;
|
|
727
727
|
|
|
728
728
|
declare const SplitButton: {
|
|
729
729
|
({ children, color, onClick, disabled, placement, floatingZIndex, leftSource, rightSource, styleVar, sizeVar, lineClamp, text, ...rest }: SplitButtonProps): react_jsx_runtime.JSX.Element;
|
|
730
730
|
Menu: ({ onClick, children, ...rest }: MenuProps) => react_jsx_runtime.JSX.Element;
|
|
731
731
|
};
|
|
732
732
|
|
|
733
|
-
|
|
733
|
+
type SplitButtonContextType = {
|
|
734
734
|
isOpen: boolean;
|
|
735
735
|
setIsOpen: (isOpen: boolean) => void;
|
|
736
736
|
};
|
|
@@ -741,7 +741,7 @@ declare const CalloutTypes: {
|
|
|
741
741
|
readonly INFORMATION: "INFORMATION";
|
|
742
742
|
readonly ALERT: "ALERT";
|
|
743
743
|
};
|
|
744
|
-
|
|
744
|
+
type CalloutType = $Values<typeof CalloutTypes>;
|
|
745
745
|
interface CalloutProps extends CalloutOptionProps, ChildrenProps, StyleVariantProps<CalloutType>, HTMLAttributes<HTMLDivElement> {
|
|
746
746
|
}
|
|
747
747
|
interface CalloutOptionProps {
|
|
@@ -936,7 +936,7 @@ declare const DropdownOptionVariants: {
|
|
|
936
936
|
readonly OUTSIDE_CLICK: "OUTSIDE_CLICK";
|
|
937
937
|
readonly NONE: "NONE";
|
|
938
938
|
};
|
|
939
|
-
|
|
939
|
+
type DropdownOptionVariantType = $Values<typeof DropdownOptionVariants>;
|
|
940
940
|
interface DropdownProps extends DropdownOptionProps {
|
|
941
941
|
}
|
|
942
942
|
interface DropdownOptionProps {
|
|
@@ -976,7 +976,7 @@ declare const dropdownSizeVariants: {
|
|
|
976
976
|
readonly M: "M";
|
|
977
977
|
readonly L: "L";
|
|
978
978
|
};
|
|
979
|
-
|
|
979
|
+
type DropdownSizeVariantType = $Values<typeof dropdownSizeVariants>;
|
|
980
980
|
interface DropdownTriggerButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'>, DisableProps, LeftElementProps, SizeVariantProps<DropdownSizeVariantType> {
|
|
981
981
|
/**
|
|
982
982
|
* placeholder를 설정합니다.
|
|
@@ -1023,8 +1023,8 @@ declare const TagSizeVariants: {
|
|
|
1023
1023
|
readonly S: "S";
|
|
1024
1024
|
readonly M: "M";
|
|
1025
1025
|
};
|
|
1026
|
-
|
|
1027
|
-
|
|
1026
|
+
type TagStyleVariantType = $Values<typeof TagStyleVariants>;
|
|
1027
|
+
type TagSizeVariantType = $Values<typeof TagSizeVariants>;
|
|
1028
1028
|
interface TagProps extends TagOptionProps {
|
|
1029
1029
|
}
|
|
1030
1030
|
interface TagOptionProps extends SizeVariantProps<TagSizeVariantType>, StyleVariantProps<TagStyleVariantType>, ColorTokenProps, LeftAndRightElementProps, ChildrenProps, BackgroundColorProps, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
|
|
@@ -1068,9 +1068,15 @@ declare const TREE_SYMBOL_KEY: unique symbol;
|
|
|
1068
1068
|
|
|
1069
1069
|
declare const Tree: {
|
|
1070
1070
|
({ children, ...rest }: TreeProps): react_jsx_runtime.JSX.Element | null;
|
|
1071
|
-
Item:
|
|
1071
|
+
Item: {
|
|
1072
|
+
({ children, label, leftSource, rightSource, depth, initialIsOpen, isOpen, disabled, onClick, ...rest }: TreeItemProps): react_jsx_runtime.JSX.Element;
|
|
1073
|
+
[TREE_SYMBOL_KEY]: boolean;
|
|
1074
|
+
};
|
|
1075
|
+
};
|
|
1076
|
+
declare const TreeItem: {
|
|
1077
|
+
({ children, label, leftSource, rightSource, depth, initialIsOpen, isOpen, disabled, onClick, ...rest }: TreeItemProps): react_jsx_runtime.JSX.Element;
|
|
1078
|
+
[TREE_SYMBOL_KEY]: boolean;
|
|
1072
1079
|
};
|
|
1073
|
-
declare const TreeItem: ({ children, label, leftSource, rightSource, depth, initialIsOpen, isOpen, disabled, onClick, ...rest }: TreeItemProps) => react_jsx_runtime.JSX.Element;
|
|
1074
1080
|
|
|
1075
1081
|
declare const IconSizeVariants: {
|
|
1076
1082
|
readonly XS: "XS";
|
|
@@ -1079,27 +1085,27 @@ declare const IconSizeVariants: {
|
|
|
1079
1085
|
readonly L: "L";
|
|
1080
1086
|
readonly XL: "XL";
|
|
1081
1087
|
};
|
|
1082
|
-
|
|
1088
|
+
type IconSizeVariantsType = $Values<typeof IconSizeVariants>;
|
|
1083
1089
|
interface IconProps extends IconOptionProps {
|
|
1084
1090
|
}
|
|
1085
1091
|
interface IconOptionProps extends SizeVariantProps<IconSizeVariantsType>, IconSourceProps, ColorTokenProps, Omit<HTMLAttributes<SVGSVGElement>, 'color'> {
|
|
1086
1092
|
}
|
|
1087
|
-
|
|
1093
|
+
type DangerouslySetInnerHTML = (string & {
|
|
1088
1094
|
__html: string | TrustedHTML;
|
|
1089
1095
|
}) | undefined;
|
|
1090
1096
|
|
|
1091
1097
|
declare const Icon: React__default.ForwardRefExoticComponent<IconProps & React__default.RefAttributes<SVGSVGElement>>;
|
|
1092
1098
|
|
|
1093
1099
|
declare const StyledIcon: _emotion_styled.StyledComponent<{
|
|
1094
|
-
theme?: _emotion_react.Theme
|
|
1095
|
-
as?: React
|
|
1100
|
+
theme?: _emotion_react.Theme;
|
|
1101
|
+
as?: React.ElementType;
|
|
1096
1102
|
} & IconOptionProps, React$1.SVGProps<SVGSVGElement>, {}>;
|
|
1097
1103
|
|
|
1098
1104
|
declare const InputSizeVariants: {
|
|
1099
1105
|
readonly S: "S";
|
|
1100
1106
|
readonly M: "M";
|
|
1101
1107
|
};
|
|
1102
|
-
|
|
1108
|
+
type InputSizeVariantType = $Values<typeof InputSizeVariants>;
|
|
1103
1109
|
interface InputProps extends InputOptionProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'width'>, DisableProps, LeftElementProps, RightElementProps {
|
|
1104
1110
|
}
|
|
1105
1111
|
interface InputOptionProps extends ErrorProps, SizeVariantProps<InputSizeVariantType> {
|
|
@@ -1186,10 +1192,10 @@ interface TextAreaOptionProps extends DisableProps, ErrorProps {
|
|
|
1186
1192
|
*/
|
|
1187
1193
|
rightSource?: ReactElement;
|
|
1188
1194
|
}
|
|
1189
|
-
|
|
1195
|
+
type TextAreaProps = ComponentPropsWithoutRef<'textarea'> & TextAreaOptionProps;
|
|
1190
1196
|
|
|
1191
1197
|
declare const MaxLength: () => react_jsx_runtime.JSX.Element | null;
|
|
1192
|
-
|
|
1198
|
+
type TextAreaComponent = React__default.ForwardRefExoticComponent<TextAreaProps & React__default.RefAttributes<HTMLTextAreaElement>> & {
|
|
1193
1199
|
MaxLength: typeof MaxLength;
|
|
1194
1200
|
};
|
|
1195
1201
|
declare const TextArea: TextAreaComponent;
|
|
@@ -1235,7 +1241,7 @@ declare const CheckboxStyleVariants: {
|
|
|
1235
1241
|
readonly PRIMARY: "PRIMARY";
|
|
1236
1242
|
readonly LINE: "LINE";
|
|
1237
1243
|
};
|
|
1238
|
-
|
|
1244
|
+
type CheckboxStyleVariantType = $Values<typeof CheckboxStyleVariants>;
|
|
1239
1245
|
interface CheckboxProps extends CheckboxOptionProps {
|
|
1240
1246
|
}
|
|
1241
1247
|
interface CheckboxOptionProps extends StyleVariantProps<CheckboxStyleVariantType>, SelectedProps, DefaultSelectedProps, DisableProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'onMouseLeave' | 'onMouseEnter' | 'onClick'>, Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onMouseLeave' | 'onMouseEnter' | 'onClick'> {
|
|
@@ -1250,7 +1256,10 @@ interface RadioOptionProps extends SelectedProps, DefaultSelectedProps, DisableP
|
|
|
1250
1256
|
}
|
|
1251
1257
|
|
|
1252
1258
|
declare const RADIO_SYMBOL_KEY: unique symbol;
|
|
1253
|
-
declare const Radio:
|
|
1259
|
+
declare const Radio: {
|
|
1260
|
+
({ isSelected, defaultSelected, disabled, onClick, onMouseEnter, onMouseLeave, ...rest }: RadioProps): react_jsx_runtime.JSX.Element;
|
|
1261
|
+
[RADIO_SYMBOL_KEY]: boolean;
|
|
1262
|
+
};
|
|
1254
1263
|
|
|
1255
1264
|
interface TooltipProps extends TooltipOptionProps, Omit<PopperProps, 'autoPlacement'> {
|
|
1256
1265
|
}
|
|
@@ -1278,8 +1287,8 @@ declare const TabSizeVariants: {
|
|
|
1278
1287
|
readonly M: "M";
|
|
1279
1288
|
readonly L: "L";
|
|
1280
1289
|
};
|
|
1281
|
-
|
|
1282
|
-
|
|
1290
|
+
type TabStyleVariantType = $Values<typeof TabStyleVariants>;
|
|
1291
|
+
type TabSizeVariantType = $Values<typeof TabSizeVariants>;
|
|
1283
1292
|
interface TabsProps extends TabsOptionProps {
|
|
1284
1293
|
/**
|
|
1285
1294
|
* Tab은 Controlled Component입니다. onChange를 꼭 넘겨주세요
|
|
@@ -1318,7 +1327,7 @@ declare const Tabs: {
|
|
|
1318
1327
|
Tab: ({ value, label, leftSource, rightSource, as, styleVar, sizeVar, clickable, onClick, activeColor, ...args }: TabProps) => react_jsx_runtime.JSX.Element;
|
|
1319
1328
|
};
|
|
1320
1329
|
|
|
1321
|
-
|
|
1330
|
+
type TabsContextType = {
|
|
1322
1331
|
activeTab: string | null;
|
|
1323
1332
|
setActiveTab: (tab: string) => void;
|
|
1324
1333
|
};
|
|
@@ -1384,7 +1393,7 @@ declare const ToggleButtonSizeVariants: {
|
|
|
1384
1393
|
readonly S: "S";
|
|
1385
1394
|
readonly M: "M";
|
|
1386
1395
|
};
|
|
1387
|
-
|
|
1396
|
+
type ToggleButtonSizeVariantType = $Values<typeof ToggleButtonSizeVariants>;
|
|
1388
1397
|
interface ToggleButtonProps extends ToggleButtonOptionProps, HTMLAttributes<HTMLDivElement> {
|
|
1389
1398
|
targetName: string;
|
|
1390
1399
|
onChange?: React.ChangeEventHandler<HTMLInputElement>;
|
|
@@ -1414,7 +1423,7 @@ declare const DayDatepickerSizeVariants: {
|
|
|
1414
1423
|
/**
|
|
1415
1424
|
* single, multiple, range union type (캘린더의 형태)
|
|
1416
1425
|
*/
|
|
1417
|
-
|
|
1426
|
+
type DayCalendarType = {
|
|
1418
1427
|
type: 'single';
|
|
1419
1428
|
handleDayChange: (date: Date | null) => void;
|
|
1420
1429
|
} | {
|
|
@@ -1424,9 +1433,9 @@ declare type DayCalendarType = {
|
|
|
1424
1433
|
type: 'range';
|
|
1425
1434
|
handleDayRangeChange: (dates: [Date | null, Date | null]) => void;
|
|
1426
1435
|
};
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1436
|
+
type DayDatepickerSizeVariantType = $Values<typeof DayDatepickerSizeVariants>;
|
|
1437
|
+
type DayDatepickerProps = Pick<DatePickerProps, 'highlightDates' | 'startDate' | 'endDate' | 'locale' | 'selectedDates' | 'selected' | 'children' | 'excludeDates' | 'calendarStartDay' | 'fixedHeight' | 'className' | 'onMonthChange' | 'onYearChange'> & DayDatepickerOptionProps;
|
|
1438
|
+
type DayDatepickerOptionProps = {
|
|
1430
1439
|
/**
|
|
1431
1440
|
* 캘린더 타입
|
|
1432
1441
|
*/
|
|
@@ -1435,7 +1444,7 @@ declare type DayDatepickerOptionProps = {
|
|
|
1435
1444
|
maxDate?: Date;
|
|
1436
1445
|
locale?: Locale;
|
|
1437
1446
|
} & SizeVariantProps<DayDatepickerSizeVariantType>;
|
|
1438
|
-
|
|
1447
|
+
type DayDatepickerHeaderCustomProps = ReactDatePickerCustomHeaderProps & {
|
|
1439
1448
|
minDate?: Date;
|
|
1440
1449
|
maxDate?: Date;
|
|
1441
1450
|
locale?: Locale;
|
|
@@ -1444,12 +1453,12 @@ declare type DayDatepickerHeaderCustomProps = ReactDatePickerCustomHeaderProps &
|
|
|
1444
1453
|
|
|
1445
1454
|
declare const DayDatepicker: ({ sizeVar, children, minDate, maxDate, calendarType, locale, fixedHeight, className, ...rest }: DayDatepickerProps) => react_jsx_runtime.JSX.Element;
|
|
1446
1455
|
|
|
1447
|
-
|
|
1456
|
+
type MonthClickDateInfo = {
|
|
1448
1457
|
startDate?: Date;
|
|
1449
1458
|
endDate?: Date;
|
|
1450
1459
|
selectedMonthRange: number;
|
|
1451
1460
|
};
|
|
1452
|
-
|
|
1461
|
+
type MonthDatepickerProps = {
|
|
1453
1462
|
/**
|
|
1454
1463
|
* 선택된 시작 날짜
|
|
1455
1464
|
*/
|
|
@@ -1472,7 +1481,7 @@ declare type MonthDatepickerProps = {
|
|
|
1472
1481
|
*/
|
|
1473
1482
|
onlySingleMonth?: boolean;
|
|
1474
1483
|
};
|
|
1475
|
-
|
|
1484
|
+
type MonthDatepickerStyleType = {
|
|
1476
1485
|
inRange: boolean;
|
|
1477
1486
|
isStart: boolean;
|
|
1478
1487
|
isEnd: boolean;
|
|
@@ -1481,7 +1490,7 @@ declare type MonthDatepickerStyleType = {
|
|
|
1481
1490
|
|
|
1482
1491
|
declare const MonthDatepicker: ({ handleMonthClick, initStartDate, initEndDate, minDate, maxDate, onlySingleMonth, }: MonthDatepickerProps) => react_jsx_runtime.JSX.Element;
|
|
1483
1492
|
|
|
1484
|
-
|
|
1493
|
+
type AnnualDatepickerProps = {
|
|
1485
1494
|
currentYear?: number;
|
|
1486
1495
|
startYear?: number;
|
|
1487
1496
|
endYear?: number;
|
|
@@ -1494,7 +1503,7 @@ declare type AnnualDatepickerProps = {
|
|
|
1494
1503
|
|
|
1495
1504
|
declare const AnnualDatepicker: ({ startYear, endYear, currentYear, handleYearClick, disabledYears, }: AnnualDatepickerProps) => react_jsx_runtime.JSX.Element;
|
|
1496
1505
|
|
|
1497
|
-
|
|
1506
|
+
type WeekClickDateInfo = {
|
|
1498
1507
|
startWeek?: number;
|
|
1499
1508
|
startYear?: number;
|
|
1500
1509
|
startDate?: Date;
|
|
@@ -1506,7 +1515,7 @@ declare type WeekClickDateInfo = {
|
|
|
1506
1515
|
*/
|
|
1507
1516
|
selectedWeeksRange: number;
|
|
1508
1517
|
};
|
|
1509
|
-
|
|
1518
|
+
type WeekDatepickerProps = {
|
|
1510
1519
|
/**
|
|
1511
1520
|
* 선택된 시작 날짜
|
|
1512
1521
|
*/
|
|
@@ -1532,7 +1541,7 @@ declare type WeekDatepickerProps = {
|
|
|
1532
1541
|
*/
|
|
1533
1542
|
onlySingleWeek?: boolean;
|
|
1534
1543
|
};
|
|
1535
|
-
|
|
1544
|
+
type WeekDatepickerStyleType = {
|
|
1536
1545
|
inRange: boolean;
|
|
1537
1546
|
isStart: boolean;
|
|
1538
1547
|
isEnd: boolean;
|
|
@@ -1541,7 +1550,7 @@ declare type WeekDatepickerStyleType = {
|
|
|
1541
1550
|
|
|
1542
1551
|
declare const WeekDatepicker: ({ handleWeekClick, initStartDate, initEndDate, minDate, maxDate, onlySingleWeek, }: WeekDatepickerProps) => react_jsx_runtime.JSX.Element;
|
|
1543
1552
|
|
|
1544
|
-
|
|
1553
|
+
type YearSelectProps = {
|
|
1545
1554
|
optionList: Array<{
|
|
1546
1555
|
value: number;
|
|
1547
1556
|
label: string;
|
|
@@ -1561,11 +1570,11 @@ declare const NumberComboboxSizeVariants: {
|
|
|
1561
1570
|
readonly S: "S";
|
|
1562
1571
|
readonly M: "M";
|
|
1563
1572
|
};
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1568
|
-
|
|
1573
|
+
type NumberComboboxSizeVariantType = $Values<typeof NumberComboboxSizeVariants>;
|
|
1574
|
+
type NumberComboboxInputType = 'hours' | 'minutes';
|
|
1575
|
+
type NumberComboboxErrorType = 'range' | 'unit';
|
|
1576
|
+
type NumberComboboxOptionProps = ColorTokenProps & SizeVariantProps<NumberComboboxSizeVariantType>;
|
|
1577
|
+
type NumberComboboxProps = NumberComboboxOptionProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'width'> & {
|
|
1569
1578
|
disabled?: boolean;
|
|
1570
1579
|
onSelect?: (value: string | number | readonly string[]) => void;
|
|
1571
1580
|
width?: string;
|
|
@@ -1582,7 +1591,7 @@ declare type NumberComboboxProps = NumberComboboxOptionProps & Omit<InputHTMLAtt
|
|
|
1582
1591
|
|
|
1583
1592
|
declare const NumberCombobox: ({ disabled, onSelect, onChange, value, width, onBlur, items, isError, sizeVar, placeholder, maxLength, className, floatingZIndex, ...rest }: NumberComboboxProps) => react_jsx_runtime.JSX.Element;
|
|
1584
1593
|
|
|
1585
|
-
|
|
1594
|
+
type SkeletonProps = {
|
|
1586
1595
|
styleVar?: 'circle' | 'rectangle';
|
|
1587
1596
|
width?: string;
|
|
1588
1597
|
height?: string;
|
|
@@ -1626,7 +1635,7 @@ interface SliderProps {
|
|
|
1626
1635
|
*/
|
|
1627
1636
|
selectedColor?: ColorTokens;
|
|
1628
1637
|
}
|
|
1629
|
-
|
|
1638
|
+
type SliderBounds = {
|
|
1630
1639
|
min: number;
|
|
1631
1640
|
max: number;
|
|
1632
1641
|
};
|
|
@@ -1637,14 +1646,14 @@ declare const SLIDER_Z_INDEX: {
|
|
|
1637
1646
|
declare const Slider: React__default.FC<SliderProps>;
|
|
1638
1647
|
|
|
1639
1648
|
/** 드롭다운 아이템 타입 */
|
|
1640
|
-
|
|
1649
|
+
type DropdownItem = {
|
|
1641
1650
|
/** 표시되는 라벨 */
|
|
1642
1651
|
label: string;
|
|
1643
1652
|
/** 실제 값 */
|
|
1644
1653
|
value: string;
|
|
1645
1654
|
};
|
|
1646
1655
|
/** 검색바 타입 */
|
|
1647
|
-
|
|
1656
|
+
type SearchType = 'default' | 'real-time';
|
|
1648
1657
|
/** 검색바 기본 props */
|
|
1649
1658
|
interface SearchBarBaseProps {
|
|
1650
1659
|
/** 검색바 너비 */
|
|
@@ -1697,7 +1706,7 @@ interface SearchBarInputProps {
|
|
|
1697
1706
|
maxLength?: number;
|
|
1698
1707
|
}
|
|
1699
1708
|
/** 검색바 props */
|
|
1700
|
-
|
|
1709
|
+
type SearchBarProps = SearchBarBaseProps;
|
|
1701
1710
|
/** 검색바 컴포넌트 타입 */
|
|
1702
1711
|
interface SearchBarComponent extends React.FC<SearchBarProps> {
|
|
1703
1712
|
Category: React.FC<SearchBarCategoryProps>;
|
package/dist/index.d.ts
CHANGED
|
@@ -15,7 +15,7 @@ import { positionValues } from 'react-custom-scrollbars-2';
|
|
|
15
15
|
import { DatePickerProps, ReactDatePickerCustomHeaderProps } from 'react-datepicker';
|
|
16
16
|
import { Locale } from 'react-datepicker/dist/date_utils';
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
type DomainType = 'SHOPL' | 'HADA';
|
|
19
19
|
|
|
20
20
|
interface ShoplflowProviderProps {
|
|
21
21
|
domain?: DomainType;
|
|
@@ -25,9 +25,9 @@ declare const ShoplflowProvider: ({ children, domain }: ShoplflowProviderProps)
|
|
|
25
25
|
|
|
26
26
|
declare const ModalPortal: () => react_jsx_runtime.JSX.Element;
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
type UseDomainType = (domain?: DomainType) => [DomainType | undefined];
|
|
29
29
|
declare const useDomain: UseDomainType;
|
|
30
|
-
declare const getDomain: () =>
|
|
30
|
+
declare const getDomain: () => Lowercase<DomainType>;
|
|
31
31
|
|
|
32
32
|
declare const fontWeightTokens: {
|
|
33
33
|
fontWeightRegular: string;
|
|
@@ -136,18 +136,18 @@ declare const typographyTokens: {
|
|
|
136
136
|
paragraph2: string;
|
|
137
137
|
};
|
|
138
138
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
139
|
+
type ColorTokens = keyof typeof colorTokens;
|
|
140
|
+
type SpacingTokens = keyof typeof spacingTokens;
|
|
141
|
+
type BorderRadiusTokens = keyof typeof borderRadiusTokens;
|
|
142
|
+
type BoxShadowTokens = keyof typeof boxShadowTokens;
|
|
143
|
+
type FontWeightTokens = keyof typeof fontWeightTokens;
|
|
144
|
+
type TypographyTokens = keyof typeof typographyTokens;
|
|
145
145
|
|
|
146
146
|
/**
|
|
147
147
|
* HTML 태그에 대한 타입
|
|
148
148
|
*/
|
|
149
|
-
|
|
150
|
-
|
|
149
|
+
type StringElementType = ElementType;
|
|
150
|
+
type HTMLPropsWithoutRef<T extends StringElementType> = ComponentPropsWithoutRef<T>;
|
|
151
151
|
interface DisableProps {
|
|
152
152
|
/**
|
|
153
153
|
* 비활성화 여부를 설정합니다.
|
|
@@ -187,7 +187,7 @@ interface RadiusBooleanProps {
|
|
|
187
187
|
*/
|
|
188
188
|
radius?: boolean;
|
|
189
189
|
}
|
|
190
|
-
|
|
190
|
+
type RenderConfigProps = {
|
|
191
191
|
/**
|
|
192
192
|
* 랜더하려고 하는 HTML tag로 변환할 수 있습니다.
|
|
193
193
|
*
|
|
@@ -283,7 +283,7 @@ declare const AvatarSizeVariants: {
|
|
|
283
283
|
readonly L: "L";
|
|
284
284
|
readonly XL: "XL";
|
|
285
285
|
};
|
|
286
|
-
|
|
286
|
+
type AvatarSizeVariantType = $Values<typeof AvatarSizeVariants>;
|
|
287
287
|
interface AvatarProps extends AvatarOptionProps {
|
|
288
288
|
fallbackUrl?: string;
|
|
289
289
|
}
|
|
@@ -296,9 +296,9 @@ interface AvatarOptionProps extends SizeVariantProps<AvatarSizeVariantType>, Img
|
|
|
296
296
|
|
|
297
297
|
declare const Avatar: ({ src, badge, fallbackUrl, ...rest }: AvatarProps) => JSX.Element;
|
|
298
298
|
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
299
|
+
type StackGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackProps & HTMLPropsWithoutRef<T>;
|
|
300
|
+
type StackComponentType = ForwardRefExoticComponent<PropsWithoutRef<StackGenericProps> & RefAttributes<HTMLElement>>;
|
|
301
|
+
type MotionStackComponentType<T extends StringElementType = 'div'> = CustomDomComponent<RenderConfigProps & HTMLPropsWithoutRef<T> & StackProps>;
|
|
302
302
|
interface StackProps extends StackOptionProps, ChildrenProps {
|
|
303
303
|
}
|
|
304
304
|
interface StackOptionProps {
|
|
@@ -363,13 +363,13 @@ interface MotionStackType$1 extends MotionStackComponentType {
|
|
|
363
363
|
declare const MotionStack: MotionStackType$1;
|
|
364
364
|
|
|
365
365
|
declare const StyledStack: _emotion_styled.StyledComponent<{
|
|
366
|
-
theme?: _emotion_react.Theme
|
|
367
|
-
as?: React
|
|
366
|
+
theme?: _emotion_react.Theme;
|
|
367
|
+
as?: React.ElementType;
|
|
368
368
|
} & StackOptionProps, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
369
369
|
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
370
|
+
type StackContainerGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackContainerProps & HTMLPropsWithoutRef<T>;
|
|
371
|
+
type StackContainerComponentType = ForwardRefExoticComponent<PropsWithoutRef<StackContainerGenericProps> & RefAttributes<HTMLElement>>;
|
|
372
|
+
type MotionStackContainerComponentType<T extends StringElementType = 'div'> = CustomDomComponent<RenderConfigProps & HTMLPropsWithoutRef<T> & StackContainerProps>;
|
|
373
373
|
interface StackContainerProps extends StackContainerOptionProps, ChildrenProps {
|
|
374
374
|
}
|
|
375
375
|
interface StackContainerOptionProps {
|
|
@@ -437,8 +437,8 @@ interface MotionStackType extends MotionStackContainerComponentType {
|
|
|
437
437
|
declare const MotionStackContainer: MotionStackType;
|
|
438
438
|
|
|
439
439
|
declare const StyledStackContainer: _emotion_styled.StyledComponent<{
|
|
440
|
-
theme?: _emotion_react.Theme
|
|
441
|
-
as?: React
|
|
440
|
+
theme?: _emotion_react.Theme;
|
|
441
|
+
as?: React.ElementType;
|
|
442
442
|
} & StackContainerOptionProps, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
443
443
|
|
|
444
444
|
interface TextOptionProps {
|
|
@@ -475,7 +475,7 @@ declare const ModalSize: {
|
|
|
475
475
|
readonly XXXL: "XXXL";
|
|
476
476
|
readonly FULL: "FULL";
|
|
477
477
|
};
|
|
478
|
-
|
|
478
|
+
type ModalSizeType = $Values<typeof ModalSize>;
|
|
479
479
|
interface ModalContainerProps extends ModalContainerOptionProps, SizeVariantProps<ModalSizeType> {
|
|
480
480
|
children?: React.ReactNode | React.ReactNode[];
|
|
481
481
|
hasChangeAnimation?: boolean;
|
|
@@ -521,7 +521,7 @@ interface ModalTopProps extends ChildrenProps {
|
|
|
521
521
|
interface ModalBottomProps extends ChildrenProps {
|
|
522
522
|
}
|
|
523
523
|
|
|
524
|
-
|
|
524
|
+
type ModalStateType = {
|
|
525
525
|
component: ReactNode;
|
|
526
526
|
id?: string;
|
|
527
527
|
/**
|
|
@@ -529,16 +529,16 @@ declare type ModalStateType = {
|
|
|
529
529
|
*/
|
|
530
530
|
zIndex?: number;
|
|
531
531
|
};
|
|
532
|
-
|
|
532
|
+
type RemoveModalProps = {
|
|
533
533
|
id?: string;
|
|
534
534
|
deps?: number;
|
|
535
535
|
};
|
|
536
|
-
|
|
536
|
+
type ModalHandlerContext = {
|
|
537
537
|
addModal: (modal: ReactNode, id?: string, zIndex?: number) => void;
|
|
538
538
|
removeModal: (props?: RemoveModalProps) => void;
|
|
539
539
|
};
|
|
540
540
|
declare const ModalHandlerContext: React$1.Context<ModalHandlerContext>;
|
|
541
|
-
|
|
541
|
+
type ModalContext = ModalStateType[];
|
|
542
542
|
declare const ModalContext: React$1.Context<ModalContext>;
|
|
543
543
|
|
|
544
544
|
declare const useModalValue: () => {
|
|
@@ -546,8 +546,8 @@ declare const useModalValue: () => {
|
|
|
546
546
|
};
|
|
547
547
|
|
|
548
548
|
declare const useHandleModal: () => {
|
|
549
|
-
addModal: (modal: React$1.ReactNode, id?: string
|
|
550
|
-
removeModal: (props?: RemoveModalProps
|
|
549
|
+
addModal: (modal: React$1.ReactNode, id?: string, zIndex?: number) => void;
|
|
550
|
+
removeModal: (props?: RemoveModalProps) => void;
|
|
551
551
|
};
|
|
552
552
|
|
|
553
553
|
declare const Modal: {
|
|
@@ -569,7 +569,7 @@ declare const SwitchSizeVariants: {
|
|
|
569
569
|
readonly S: "S";
|
|
570
570
|
readonly M: "M";
|
|
571
571
|
};
|
|
572
|
-
|
|
572
|
+
type SwitchSizeVariantType = $Values<typeof SwitchSizeVariants>;
|
|
573
573
|
interface SwitchProps extends SwitchOptionProps, DisableProps, SelectedProps, DefaultSelectedProps, SizeVariantProps<SwitchSizeVariantType>, HTMLAttributes<HTMLInputElement> {
|
|
574
574
|
}
|
|
575
575
|
interface SwitchOptionProps {
|
|
@@ -585,8 +585,8 @@ declare const ChipToggleSizeVariants: {
|
|
|
585
585
|
readonly S: "S";
|
|
586
586
|
readonly XS: "XS";
|
|
587
587
|
};
|
|
588
|
-
|
|
589
|
-
|
|
588
|
+
type ChipToggleStyleVariantType = $Values<typeof ChipToggleStyleVariants>;
|
|
589
|
+
type ChipToggleSizeVariantType = $Values<typeof ChipToggleSizeVariants>;
|
|
590
590
|
interface ChipToggleProps extends ChipToggleOptionProps, SelectedProps, DefaultSelectedProps, ColorTokenProps, StyleVariantProps<ChipToggleStyleVariantType>, SizeVariantProps<ChipToggleSizeVariantType>, LeftAndRightElementProps, RadiusBooleanProps, TextProps$1, DisableProps, Omit<HTMLAttributes<HTMLButtonElement>, 'color'> {
|
|
591
591
|
}
|
|
592
592
|
interface ChipToggleOptionProps {
|
|
@@ -601,8 +601,8 @@ declare const ChipButtonSizeVariants: {
|
|
|
601
601
|
readonly S: "S";
|
|
602
602
|
readonly XS: "XS";
|
|
603
603
|
};
|
|
604
|
-
|
|
605
|
-
|
|
604
|
+
type ChipButtonStyleVariantType = $Values<typeof ChipButtonStyleVariants>;
|
|
605
|
+
type ChipButtonSizeVariantType = $Values<typeof ChipButtonSizeVariants>;
|
|
606
606
|
interface ChipButtonProps extends ChipButtonOptionProps, Omit<HTMLAttributes<HTMLButtonElement>, 'color'>, TextProps$1, DisableProps, LeftAndRightElementProps, SizeVariantProps<ChipButtonSizeVariantType>, StyleVariantProps<ChipButtonStyleVariantType>, ColorTokenProps, BackgroundColorProps {
|
|
607
607
|
}
|
|
608
608
|
interface ChipButtonOptionProps {
|
|
@@ -610,11 +610,11 @@ interface ChipButtonOptionProps {
|
|
|
610
610
|
|
|
611
611
|
declare const ChipButton: ({ styleVar, color, sizeVar, text, onClick, disabled, ...rest }: ChipButtonProps) => react_jsx_runtime.JSX.Element;
|
|
612
612
|
|
|
613
|
-
|
|
613
|
+
type AsProp<T extends React__default.ElementType> = {
|
|
614
614
|
as?: T;
|
|
615
615
|
};
|
|
616
|
-
|
|
617
|
-
|
|
616
|
+
type PolymorphicRef<T extends React__default.ElementType> = React__default.ComponentPropsWithRef<T>['ref'];
|
|
617
|
+
type PolymorphicComponentProps<T extends React__default.ElementType, Props = {}> = AsProp<T> & React__default.ComponentPropsWithoutRef<T> & Props & {
|
|
618
618
|
ref?: PolymorphicRef<T>;
|
|
619
619
|
};
|
|
620
620
|
|
|
@@ -623,20 +623,20 @@ declare const ButtonSizeVariants: {
|
|
|
623
623
|
readonly M: "M";
|
|
624
624
|
readonly XS: "XS";
|
|
625
625
|
};
|
|
626
|
-
|
|
626
|
+
type ButtonSizeVariantType = $Values<typeof ButtonSizeVariants>;
|
|
627
627
|
declare const ButtonStyleVariants: {
|
|
628
628
|
readonly PRIMARY: "PRIMARY";
|
|
629
629
|
readonly SECONDARY: "SECONDARY";
|
|
630
630
|
readonly SOLID: "SOLID";
|
|
631
631
|
readonly GHOST: "GHOST";
|
|
632
632
|
};
|
|
633
|
-
|
|
634
|
-
|
|
633
|
+
type ButtonStyleVariantType = $Values<typeof ButtonStyleVariants>;
|
|
634
|
+
type ButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & SizeVariantProps<ButtonSizeVariantType> & StyleVariantProps<ButtonStyleVariantType> & ColorTokenProps & DisableProps & LoadingProps & {
|
|
635
635
|
typography?: TypographyTokens;
|
|
636
636
|
lineClamp?: number;
|
|
637
637
|
};
|
|
638
|
-
|
|
639
|
-
|
|
638
|
+
type ButtonProps<T extends ElementType = 'button'> = PolymorphicComponentProps<T, ButtonOptionProps> & LeftAndRightNodeProps;
|
|
639
|
+
type ButtonComponent = <T extends ElementType = 'button'>(props: ButtonProps<T> & {
|
|
640
640
|
ref?: ComponentPropsWithRef<T>['ref'];
|
|
641
641
|
}) => React.ReactElement | null;
|
|
642
642
|
|
|
@@ -647,17 +647,17 @@ declare const IconButtonSizeVariants: {
|
|
|
647
647
|
readonly S: "S";
|
|
648
648
|
readonly M: "M";
|
|
649
649
|
};
|
|
650
|
-
|
|
650
|
+
type IconButtonSizeVariantType = $Values<typeof IconButtonSizeVariants>;
|
|
651
651
|
declare const IconButtonStyleVariants: {
|
|
652
652
|
readonly PRIMARY: "PRIMARY";
|
|
653
653
|
readonly SECONDARY: "SECONDARY";
|
|
654
654
|
readonly SOLID: "SOLID";
|
|
655
655
|
readonly GHOST: "GHOST";
|
|
656
656
|
};
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
657
|
+
type IconButtonStyleVariantType = $Values<typeof IconButtonStyleVariants>;
|
|
658
|
+
type IconButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & DisableProps & SizeVariantProps<IconButtonSizeVariantType> & IconSizeVariantProps<'XS' | 'S' | 'M'> & StyleVariantProps<IconButtonStyleVariantType> & ChildrenProps & ColorTokenProps & LoadingProps;
|
|
659
|
+
type IconButtonProps<T extends ElementType = 'button'> = PolymorphicComponentProps<T, IconButtonOptionProps>;
|
|
660
|
+
type IconButtonComponent = <T extends ElementType = 'button'>(props: IconButtonProps<T> & {
|
|
661
661
|
ref?: ComponentPropsWithRef<T>['ref'];
|
|
662
662
|
}) => React__default.ReactElement | null;
|
|
663
663
|
|
|
@@ -667,15 +667,15 @@ declare const DropdownButtonSizeVariants: {
|
|
|
667
667
|
readonly S: "S";
|
|
668
668
|
readonly M: "M";
|
|
669
669
|
};
|
|
670
|
-
|
|
670
|
+
type DropdownButtonSizeVariantType = $Values<typeof DropdownButtonSizeVariants>;
|
|
671
671
|
declare const DropdownButtonStyleVariants: {
|
|
672
672
|
readonly PRIMARY: "PRIMARY";
|
|
673
673
|
readonly SECONDARY: "SECONDARY";
|
|
674
674
|
};
|
|
675
|
-
|
|
675
|
+
type DropdownButtonStyleVariantType = $Values<typeof DropdownButtonStyleVariants>;
|
|
676
676
|
interface DropdownButtonProps extends DropdownButtonOptionProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
|
|
677
677
|
}
|
|
678
|
-
|
|
678
|
+
type DropdownButtonOptionProps = SizeVariantProps<DropdownButtonSizeVariantType> & StyleVariantProps<DropdownButtonStyleVariantType> & {
|
|
679
679
|
text: string;
|
|
680
680
|
} & {
|
|
681
681
|
placement?: Placement;
|
|
@@ -687,7 +687,7 @@ declare const MenuSizeVariants: {
|
|
|
687
687
|
readonly S: "S";
|
|
688
688
|
readonly M: "M";
|
|
689
689
|
};
|
|
690
|
-
|
|
690
|
+
type MenuSizeVariantType = $Values<typeof MenuSizeVariants>;
|
|
691
691
|
interface MenuProps extends MenuOptionProps, HTMLAttributes<HTMLLIElement> {
|
|
692
692
|
}
|
|
693
693
|
interface MenuOptionProps extends ChildrenProps, DisableProps, RightElementProps, LeftElementProps, SelectedProps, DefaultSelectedProps, SizeVariantProps<MenuSizeVariantType> {
|
|
@@ -700,7 +700,7 @@ declare const DropdownButton: {
|
|
|
700
700
|
Menu: ({ onClick, children, ...rest }: MenuProps) => react_jsx_runtime.JSX.Element;
|
|
701
701
|
};
|
|
702
702
|
|
|
703
|
-
|
|
703
|
+
type DropdownButtonContextType = {
|
|
704
704
|
isOpen: boolean;
|
|
705
705
|
setIsOpen: (isOpen: boolean) => void;
|
|
706
706
|
};
|
|
@@ -711,26 +711,26 @@ declare const SplitButtonSizeVariants: {
|
|
|
711
711
|
readonly S: "S";
|
|
712
712
|
readonly M: "M";
|
|
713
713
|
};
|
|
714
|
-
|
|
714
|
+
type SplitButtonSizeVariantType = $Values<typeof SplitButtonSizeVariants>;
|
|
715
715
|
declare const SplitButtonStyleVariants: {
|
|
716
716
|
readonly PRIMARY: "PRIMARY";
|
|
717
717
|
readonly SECONDARY: "SECONDARY";
|
|
718
718
|
};
|
|
719
|
-
|
|
719
|
+
type SplitButtonStyleVariantType = $Values<typeof SplitButtonStyleVariants>;
|
|
720
720
|
interface SplitButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'color' | 'disabled'>, SplitButtonOptionProps {
|
|
721
721
|
placement?: Placement;
|
|
722
722
|
floatingZIndex?: CSSProperties['zIndex'];
|
|
723
723
|
lineClamp?: number;
|
|
724
724
|
text: string;
|
|
725
725
|
}
|
|
726
|
-
|
|
726
|
+
type SplitButtonOptionProps = SizeVariantProps<SplitButtonSizeVariantType> & StyleVariantProps<SplitButtonStyleVariantType> & LeftAndRightNodeProps & DisableProps & ColorTokenProps;
|
|
727
727
|
|
|
728
728
|
declare const SplitButton: {
|
|
729
729
|
({ children, color, onClick, disabled, placement, floatingZIndex, leftSource, rightSource, styleVar, sizeVar, lineClamp, text, ...rest }: SplitButtonProps): react_jsx_runtime.JSX.Element;
|
|
730
730
|
Menu: ({ onClick, children, ...rest }: MenuProps) => react_jsx_runtime.JSX.Element;
|
|
731
731
|
};
|
|
732
732
|
|
|
733
|
-
|
|
733
|
+
type SplitButtonContextType = {
|
|
734
734
|
isOpen: boolean;
|
|
735
735
|
setIsOpen: (isOpen: boolean) => void;
|
|
736
736
|
};
|
|
@@ -741,7 +741,7 @@ declare const CalloutTypes: {
|
|
|
741
741
|
readonly INFORMATION: "INFORMATION";
|
|
742
742
|
readonly ALERT: "ALERT";
|
|
743
743
|
};
|
|
744
|
-
|
|
744
|
+
type CalloutType = $Values<typeof CalloutTypes>;
|
|
745
745
|
interface CalloutProps extends CalloutOptionProps, ChildrenProps, StyleVariantProps<CalloutType>, HTMLAttributes<HTMLDivElement> {
|
|
746
746
|
}
|
|
747
747
|
interface CalloutOptionProps {
|
|
@@ -936,7 +936,7 @@ declare const DropdownOptionVariants: {
|
|
|
936
936
|
readonly OUTSIDE_CLICK: "OUTSIDE_CLICK";
|
|
937
937
|
readonly NONE: "NONE";
|
|
938
938
|
};
|
|
939
|
-
|
|
939
|
+
type DropdownOptionVariantType = $Values<typeof DropdownOptionVariants>;
|
|
940
940
|
interface DropdownProps extends DropdownOptionProps {
|
|
941
941
|
}
|
|
942
942
|
interface DropdownOptionProps {
|
|
@@ -976,7 +976,7 @@ declare const dropdownSizeVariants: {
|
|
|
976
976
|
readonly M: "M";
|
|
977
977
|
readonly L: "L";
|
|
978
978
|
};
|
|
979
|
-
|
|
979
|
+
type DropdownSizeVariantType = $Values<typeof dropdownSizeVariants>;
|
|
980
980
|
interface DropdownTriggerButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'>, DisableProps, LeftElementProps, SizeVariantProps<DropdownSizeVariantType> {
|
|
981
981
|
/**
|
|
982
982
|
* placeholder를 설정합니다.
|
|
@@ -1023,8 +1023,8 @@ declare const TagSizeVariants: {
|
|
|
1023
1023
|
readonly S: "S";
|
|
1024
1024
|
readonly M: "M";
|
|
1025
1025
|
};
|
|
1026
|
-
|
|
1027
|
-
|
|
1026
|
+
type TagStyleVariantType = $Values<typeof TagStyleVariants>;
|
|
1027
|
+
type TagSizeVariantType = $Values<typeof TagSizeVariants>;
|
|
1028
1028
|
interface TagProps extends TagOptionProps {
|
|
1029
1029
|
}
|
|
1030
1030
|
interface TagOptionProps extends SizeVariantProps<TagSizeVariantType>, StyleVariantProps<TagStyleVariantType>, ColorTokenProps, LeftAndRightElementProps, ChildrenProps, BackgroundColorProps, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
|
|
@@ -1068,9 +1068,15 @@ declare const TREE_SYMBOL_KEY: unique symbol;
|
|
|
1068
1068
|
|
|
1069
1069
|
declare const Tree: {
|
|
1070
1070
|
({ children, ...rest }: TreeProps): react_jsx_runtime.JSX.Element | null;
|
|
1071
|
-
Item:
|
|
1071
|
+
Item: {
|
|
1072
|
+
({ children, label, leftSource, rightSource, depth, initialIsOpen, isOpen, disabled, onClick, ...rest }: TreeItemProps): react_jsx_runtime.JSX.Element;
|
|
1073
|
+
[TREE_SYMBOL_KEY]: boolean;
|
|
1074
|
+
};
|
|
1075
|
+
};
|
|
1076
|
+
declare const TreeItem: {
|
|
1077
|
+
({ children, label, leftSource, rightSource, depth, initialIsOpen, isOpen, disabled, onClick, ...rest }: TreeItemProps): react_jsx_runtime.JSX.Element;
|
|
1078
|
+
[TREE_SYMBOL_KEY]: boolean;
|
|
1072
1079
|
};
|
|
1073
|
-
declare const TreeItem: ({ children, label, leftSource, rightSource, depth, initialIsOpen, isOpen, disabled, onClick, ...rest }: TreeItemProps) => react_jsx_runtime.JSX.Element;
|
|
1074
1080
|
|
|
1075
1081
|
declare const IconSizeVariants: {
|
|
1076
1082
|
readonly XS: "XS";
|
|
@@ -1079,27 +1085,27 @@ declare const IconSizeVariants: {
|
|
|
1079
1085
|
readonly L: "L";
|
|
1080
1086
|
readonly XL: "XL";
|
|
1081
1087
|
};
|
|
1082
|
-
|
|
1088
|
+
type IconSizeVariantsType = $Values<typeof IconSizeVariants>;
|
|
1083
1089
|
interface IconProps extends IconOptionProps {
|
|
1084
1090
|
}
|
|
1085
1091
|
interface IconOptionProps extends SizeVariantProps<IconSizeVariantsType>, IconSourceProps, ColorTokenProps, Omit<HTMLAttributes<SVGSVGElement>, 'color'> {
|
|
1086
1092
|
}
|
|
1087
|
-
|
|
1093
|
+
type DangerouslySetInnerHTML = (string & {
|
|
1088
1094
|
__html: string | TrustedHTML;
|
|
1089
1095
|
}) | undefined;
|
|
1090
1096
|
|
|
1091
1097
|
declare const Icon: React__default.ForwardRefExoticComponent<IconProps & React__default.RefAttributes<SVGSVGElement>>;
|
|
1092
1098
|
|
|
1093
1099
|
declare const StyledIcon: _emotion_styled.StyledComponent<{
|
|
1094
|
-
theme?: _emotion_react.Theme
|
|
1095
|
-
as?: React
|
|
1100
|
+
theme?: _emotion_react.Theme;
|
|
1101
|
+
as?: React.ElementType;
|
|
1096
1102
|
} & IconOptionProps, React$1.SVGProps<SVGSVGElement>, {}>;
|
|
1097
1103
|
|
|
1098
1104
|
declare const InputSizeVariants: {
|
|
1099
1105
|
readonly S: "S";
|
|
1100
1106
|
readonly M: "M";
|
|
1101
1107
|
};
|
|
1102
|
-
|
|
1108
|
+
type InputSizeVariantType = $Values<typeof InputSizeVariants>;
|
|
1103
1109
|
interface InputProps extends InputOptionProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'width'>, DisableProps, LeftElementProps, RightElementProps {
|
|
1104
1110
|
}
|
|
1105
1111
|
interface InputOptionProps extends ErrorProps, SizeVariantProps<InputSizeVariantType> {
|
|
@@ -1186,10 +1192,10 @@ interface TextAreaOptionProps extends DisableProps, ErrorProps {
|
|
|
1186
1192
|
*/
|
|
1187
1193
|
rightSource?: ReactElement;
|
|
1188
1194
|
}
|
|
1189
|
-
|
|
1195
|
+
type TextAreaProps = ComponentPropsWithoutRef<'textarea'> & TextAreaOptionProps;
|
|
1190
1196
|
|
|
1191
1197
|
declare const MaxLength: () => react_jsx_runtime.JSX.Element | null;
|
|
1192
|
-
|
|
1198
|
+
type TextAreaComponent = React__default.ForwardRefExoticComponent<TextAreaProps & React__default.RefAttributes<HTMLTextAreaElement>> & {
|
|
1193
1199
|
MaxLength: typeof MaxLength;
|
|
1194
1200
|
};
|
|
1195
1201
|
declare const TextArea: TextAreaComponent;
|
|
@@ -1235,7 +1241,7 @@ declare const CheckboxStyleVariants: {
|
|
|
1235
1241
|
readonly PRIMARY: "PRIMARY";
|
|
1236
1242
|
readonly LINE: "LINE";
|
|
1237
1243
|
};
|
|
1238
|
-
|
|
1244
|
+
type CheckboxStyleVariantType = $Values<typeof CheckboxStyleVariants>;
|
|
1239
1245
|
interface CheckboxProps extends CheckboxOptionProps {
|
|
1240
1246
|
}
|
|
1241
1247
|
interface CheckboxOptionProps extends StyleVariantProps<CheckboxStyleVariantType>, SelectedProps, DefaultSelectedProps, DisableProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'onMouseLeave' | 'onMouseEnter' | 'onClick'>, Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onMouseLeave' | 'onMouseEnter' | 'onClick'> {
|
|
@@ -1250,7 +1256,10 @@ interface RadioOptionProps extends SelectedProps, DefaultSelectedProps, DisableP
|
|
|
1250
1256
|
}
|
|
1251
1257
|
|
|
1252
1258
|
declare const RADIO_SYMBOL_KEY: unique symbol;
|
|
1253
|
-
declare const Radio:
|
|
1259
|
+
declare const Radio: {
|
|
1260
|
+
({ isSelected, defaultSelected, disabled, onClick, onMouseEnter, onMouseLeave, ...rest }: RadioProps): react_jsx_runtime.JSX.Element;
|
|
1261
|
+
[RADIO_SYMBOL_KEY]: boolean;
|
|
1262
|
+
};
|
|
1254
1263
|
|
|
1255
1264
|
interface TooltipProps extends TooltipOptionProps, Omit<PopperProps, 'autoPlacement'> {
|
|
1256
1265
|
}
|
|
@@ -1278,8 +1287,8 @@ declare const TabSizeVariants: {
|
|
|
1278
1287
|
readonly M: "M";
|
|
1279
1288
|
readonly L: "L";
|
|
1280
1289
|
};
|
|
1281
|
-
|
|
1282
|
-
|
|
1290
|
+
type TabStyleVariantType = $Values<typeof TabStyleVariants>;
|
|
1291
|
+
type TabSizeVariantType = $Values<typeof TabSizeVariants>;
|
|
1283
1292
|
interface TabsProps extends TabsOptionProps {
|
|
1284
1293
|
/**
|
|
1285
1294
|
* Tab은 Controlled Component입니다. onChange를 꼭 넘겨주세요
|
|
@@ -1318,7 +1327,7 @@ declare const Tabs: {
|
|
|
1318
1327
|
Tab: ({ value, label, leftSource, rightSource, as, styleVar, sizeVar, clickable, onClick, activeColor, ...args }: TabProps) => react_jsx_runtime.JSX.Element;
|
|
1319
1328
|
};
|
|
1320
1329
|
|
|
1321
|
-
|
|
1330
|
+
type TabsContextType = {
|
|
1322
1331
|
activeTab: string | null;
|
|
1323
1332
|
setActiveTab: (tab: string) => void;
|
|
1324
1333
|
};
|
|
@@ -1384,7 +1393,7 @@ declare const ToggleButtonSizeVariants: {
|
|
|
1384
1393
|
readonly S: "S";
|
|
1385
1394
|
readonly M: "M";
|
|
1386
1395
|
};
|
|
1387
|
-
|
|
1396
|
+
type ToggleButtonSizeVariantType = $Values<typeof ToggleButtonSizeVariants>;
|
|
1388
1397
|
interface ToggleButtonProps extends ToggleButtonOptionProps, HTMLAttributes<HTMLDivElement> {
|
|
1389
1398
|
targetName: string;
|
|
1390
1399
|
onChange?: React.ChangeEventHandler<HTMLInputElement>;
|
|
@@ -1414,7 +1423,7 @@ declare const DayDatepickerSizeVariants: {
|
|
|
1414
1423
|
/**
|
|
1415
1424
|
* single, multiple, range union type (캘린더의 형태)
|
|
1416
1425
|
*/
|
|
1417
|
-
|
|
1426
|
+
type DayCalendarType = {
|
|
1418
1427
|
type: 'single';
|
|
1419
1428
|
handleDayChange: (date: Date | null) => void;
|
|
1420
1429
|
} | {
|
|
@@ -1424,9 +1433,9 @@ declare type DayCalendarType = {
|
|
|
1424
1433
|
type: 'range';
|
|
1425
1434
|
handleDayRangeChange: (dates: [Date | null, Date | null]) => void;
|
|
1426
1435
|
};
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1436
|
+
type DayDatepickerSizeVariantType = $Values<typeof DayDatepickerSizeVariants>;
|
|
1437
|
+
type DayDatepickerProps = Pick<DatePickerProps, 'highlightDates' | 'startDate' | 'endDate' | 'locale' | 'selectedDates' | 'selected' | 'children' | 'excludeDates' | 'calendarStartDay' | 'fixedHeight' | 'className' | 'onMonthChange' | 'onYearChange'> & DayDatepickerOptionProps;
|
|
1438
|
+
type DayDatepickerOptionProps = {
|
|
1430
1439
|
/**
|
|
1431
1440
|
* 캘린더 타입
|
|
1432
1441
|
*/
|
|
@@ -1435,7 +1444,7 @@ declare type DayDatepickerOptionProps = {
|
|
|
1435
1444
|
maxDate?: Date;
|
|
1436
1445
|
locale?: Locale;
|
|
1437
1446
|
} & SizeVariantProps<DayDatepickerSizeVariantType>;
|
|
1438
|
-
|
|
1447
|
+
type DayDatepickerHeaderCustomProps = ReactDatePickerCustomHeaderProps & {
|
|
1439
1448
|
minDate?: Date;
|
|
1440
1449
|
maxDate?: Date;
|
|
1441
1450
|
locale?: Locale;
|
|
@@ -1444,12 +1453,12 @@ declare type DayDatepickerHeaderCustomProps = ReactDatePickerCustomHeaderProps &
|
|
|
1444
1453
|
|
|
1445
1454
|
declare const DayDatepicker: ({ sizeVar, children, minDate, maxDate, calendarType, locale, fixedHeight, className, ...rest }: DayDatepickerProps) => react_jsx_runtime.JSX.Element;
|
|
1446
1455
|
|
|
1447
|
-
|
|
1456
|
+
type MonthClickDateInfo = {
|
|
1448
1457
|
startDate?: Date;
|
|
1449
1458
|
endDate?: Date;
|
|
1450
1459
|
selectedMonthRange: number;
|
|
1451
1460
|
};
|
|
1452
|
-
|
|
1461
|
+
type MonthDatepickerProps = {
|
|
1453
1462
|
/**
|
|
1454
1463
|
* 선택된 시작 날짜
|
|
1455
1464
|
*/
|
|
@@ -1472,7 +1481,7 @@ declare type MonthDatepickerProps = {
|
|
|
1472
1481
|
*/
|
|
1473
1482
|
onlySingleMonth?: boolean;
|
|
1474
1483
|
};
|
|
1475
|
-
|
|
1484
|
+
type MonthDatepickerStyleType = {
|
|
1476
1485
|
inRange: boolean;
|
|
1477
1486
|
isStart: boolean;
|
|
1478
1487
|
isEnd: boolean;
|
|
@@ -1481,7 +1490,7 @@ declare type MonthDatepickerStyleType = {
|
|
|
1481
1490
|
|
|
1482
1491
|
declare const MonthDatepicker: ({ handleMonthClick, initStartDate, initEndDate, minDate, maxDate, onlySingleMonth, }: MonthDatepickerProps) => react_jsx_runtime.JSX.Element;
|
|
1483
1492
|
|
|
1484
|
-
|
|
1493
|
+
type AnnualDatepickerProps = {
|
|
1485
1494
|
currentYear?: number;
|
|
1486
1495
|
startYear?: number;
|
|
1487
1496
|
endYear?: number;
|
|
@@ -1494,7 +1503,7 @@ declare type AnnualDatepickerProps = {
|
|
|
1494
1503
|
|
|
1495
1504
|
declare const AnnualDatepicker: ({ startYear, endYear, currentYear, handleYearClick, disabledYears, }: AnnualDatepickerProps) => react_jsx_runtime.JSX.Element;
|
|
1496
1505
|
|
|
1497
|
-
|
|
1506
|
+
type WeekClickDateInfo = {
|
|
1498
1507
|
startWeek?: number;
|
|
1499
1508
|
startYear?: number;
|
|
1500
1509
|
startDate?: Date;
|
|
@@ -1506,7 +1515,7 @@ declare type WeekClickDateInfo = {
|
|
|
1506
1515
|
*/
|
|
1507
1516
|
selectedWeeksRange: number;
|
|
1508
1517
|
};
|
|
1509
|
-
|
|
1518
|
+
type WeekDatepickerProps = {
|
|
1510
1519
|
/**
|
|
1511
1520
|
* 선택된 시작 날짜
|
|
1512
1521
|
*/
|
|
@@ -1532,7 +1541,7 @@ declare type WeekDatepickerProps = {
|
|
|
1532
1541
|
*/
|
|
1533
1542
|
onlySingleWeek?: boolean;
|
|
1534
1543
|
};
|
|
1535
|
-
|
|
1544
|
+
type WeekDatepickerStyleType = {
|
|
1536
1545
|
inRange: boolean;
|
|
1537
1546
|
isStart: boolean;
|
|
1538
1547
|
isEnd: boolean;
|
|
@@ -1541,7 +1550,7 @@ declare type WeekDatepickerStyleType = {
|
|
|
1541
1550
|
|
|
1542
1551
|
declare const WeekDatepicker: ({ handleWeekClick, initStartDate, initEndDate, minDate, maxDate, onlySingleWeek, }: WeekDatepickerProps) => react_jsx_runtime.JSX.Element;
|
|
1543
1552
|
|
|
1544
|
-
|
|
1553
|
+
type YearSelectProps = {
|
|
1545
1554
|
optionList: Array<{
|
|
1546
1555
|
value: number;
|
|
1547
1556
|
label: string;
|
|
@@ -1561,11 +1570,11 @@ declare const NumberComboboxSizeVariants: {
|
|
|
1561
1570
|
readonly S: "S";
|
|
1562
1571
|
readonly M: "M";
|
|
1563
1572
|
};
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1568
|
-
|
|
1573
|
+
type NumberComboboxSizeVariantType = $Values<typeof NumberComboboxSizeVariants>;
|
|
1574
|
+
type NumberComboboxInputType = 'hours' | 'minutes';
|
|
1575
|
+
type NumberComboboxErrorType = 'range' | 'unit';
|
|
1576
|
+
type NumberComboboxOptionProps = ColorTokenProps & SizeVariantProps<NumberComboboxSizeVariantType>;
|
|
1577
|
+
type NumberComboboxProps = NumberComboboxOptionProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'width'> & {
|
|
1569
1578
|
disabled?: boolean;
|
|
1570
1579
|
onSelect?: (value: string | number | readonly string[]) => void;
|
|
1571
1580
|
width?: string;
|
|
@@ -1582,7 +1591,7 @@ declare type NumberComboboxProps = NumberComboboxOptionProps & Omit<InputHTMLAtt
|
|
|
1582
1591
|
|
|
1583
1592
|
declare const NumberCombobox: ({ disabled, onSelect, onChange, value, width, onBlur, items, isError, sizeVar, placeholder, maxLength, className, floatingZIndex, ...rest }: NumberComboboxProps) => react_jsx_runtime.JSX.Element;
|
|
1584
1593
|
|
|
1585
|
-
|
|
1594
|
+
type SkeletonProps = {
|
|
1586
1595
|
styleVar?: 'circle' | 'rectangle';
|
|
1587
1596
|
width?: string;
|
|
1588
1597
|
height?: string;
|
|
@@ -1626,7 +1635,7 @@ interface SliderProps {
|
|
|
1626
1635
|
*/
|
|
1627
1636
|
selectedColor?: ColorTokens;
|
|
1628
1637
|
}
|
|
1629
|
-
|
|
1638
|
+
type SliderBounds = {
|
|
1630
1639
|
min: number;
|
|
1631
1640
|
max: number;
|
|
1632
1641
|
};
|
|
@@ -1637,14 +1646,14 @@ declare const SLIDER_Z_INDEX: {
|
|
|
1637
1646
|
declare const Slider: React__default.FC<SliderProps>;
|
|
1638
1647
|
|
|
1639
1648
|
/** 드롭다운 아이템 타입 */
|
|
1640
|
-
|
|
1649
|
+
type DropdownItem = {
|
|
1641
1650
|
/** 표시되는 라벨 */
|
|
1642
1651
|
label: string;
|
|
1643
1652
|
/** 실제 값 */
|
|
1644
1653
|
value: string;
|
|
1645
1654
|
};
|
|
1646
1655
|
/** 검색바 타입 */
|
|
1647
|
-
|
|
1656
|
+
type SearchType = 'default' | 'real-time';
|
|
1648
1657
|
/** 검색바 기본 props */
|
|
1649
1658
|
interface SearchBarBaseProps {
|
|
1650
1659
|
/** 검색바 너비 */
|
|
@@ -1697,7 +1706,7 @@ interface SearchBarInputProps {
|
|
|
1697
1706
|
maxLength?: number;
|
|
1698
1707
|
}
|
|
1699
1708
|
/** 검색바 props */
|
|
1700
|
-
|
|
1709
|
+
type SearchBarProps = SearchBarBaseProps;
|
|
1701
1710
|
/** 검색바 컴포넌트 타입 */
|
|
1702
1711
|
interface SearchBarComponent extends React.FC<SearchBarProps> {
|
|
1703
1712
|
Category: React.FC<SearchBarCategoryProps>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shoplflow/base",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.46.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -48,39 +48,27 @@
|
|
|
48
48
|
"@emotion/is-prop-valid": "^1.2.1",
|
|
49
49
|
"@emotion/react": "11.10.8",
|
|
50
50
|
"@emotion/styled": "11.10.8",
|
|
51
|
+
"@mdx-js/react": "^3.0.0",
|
|
52
|
+
"@mdx-js/rollup": "^3.0.0",
|
|
51
53
|
"@rollup/plugin-commonjs": "^25.0.7",
|
|
52
54
|
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
53
|
-
"@storybook/addon-
|
|
54
|
-
"@storybook/addon-
|
|
55
|
-
"@storybook/addon-
|
|
56
|
-
"@storybook/addon-
|
|
57
|
-
"@storybook/addon-
|
|
58
|
-
"@storybook/
|
|
59
|
-
"@storybook/
|
|
60
|
-
"@storybook/addon-interactions": "^8.4.7",
|
|
61
|
-
"@storybook/addon-links": "^8.4.7",
|
|
62
|
-
"@storybook/addon-mdx-gfm": "^8.4.7",
|
|
63
|
-
"@storybook/addon-measure": "^8.4.7",
|
|
64
|
-
"@storybook/addon-outline": "^8.4.7",
|
|
65
|
-
"@storybook/addon-toolbars": "^8.4.7",
|
|
66
|
-
"@storybook/addon-viewport": "^8.4.7",
|
|
67
|
-
"@storybook/blocks": "^8.4.7",
|
|
68
|
-
"@storybook/manager-api": "^8.4.7",
|
|
69
|
-
"@storybook/preview-api": "^8.4.7",
|
|
70
|
-
"@storybook/react": "^8.4.7",
|
|
71
|
-
"@storybook/react-vite": "^8.4.7",
|
|
72
|
-
"@storybook/test": "^8.4.7",
|
|
73
|
-
"@storybook/theming": "^8.4.7",
|
|
55
|
+
"@storybook/addon-a11y": "^10.2.1",
|
|
56
|
+
"@storybook/addon-designs": "^11.1.1",
|
|
57
|
+
"@storybook/addon-docs": "^10.2.4",
|
|
58
|
+
"@storybook/addon-links": "^10.2.1",
|
|
59
|
+
"@storybook/addon-mcp": "^0.2.2",
|
|
60
|
+
"@storybook/jest": "^0.2.3",
|
|
61
|
+
"@storybook/react-vite": "^10.2.1",
|
|
74
62
|
"@types/node": "20.4.9",
|
|
75
63
|
"@types/react": "^18.2.0",
|
|
76
64
|
"@types/react-dom": "^18.2.1",
|
|
77
65
|
"classnames": "^2.3.2",
|
|
78
66
|
"eslint-plugin-storybook": "^0.6.13",
|
|
79
|
-
"storybook": "^
|
|
67
|
+
"storybook": "^10.2.1",
|
|
80
68
|
"ts-node": "^10.9.1",
|
|
81
69
|
"tslib": "^2.6.2",
|
|
82
70
|
"tsup": "7.2.0",
|
|
83
|
-
"typescript": "
|
|
71
|
+
"typescript": "^5.9.0"
|
|
84
72
|
},
|
|
85
73
|
"eslintConfig": {
|
|
86
74
|
"extends": [
|
|
@@ -99,8 +87,8 @@
|
|
|
99
87
|
"react-dom": "^18.2.0",
|
|
100
88
|
"simplebar-react": "^3.2.6",
|
|
101
89
|
"@shoplflow/hada-assets": "^0.1.10",
|
|
102
|
-
"@shoplflow/shopl-assets": "^0.12.
|
|
103
|
-
"@shoplflow/utils": "^0.
|
|
90
|
+
"@shoplflow/shopl-assets": "^0.12.37",
|
|
91
|
+
"@shoplflow/utils": "^0.8.0"
|
|
104
92
|
},
|
|
105
93
|
"homepage": "https://github.com/shopl/shoplflow#readme",
|
|
106
94
|
"scripts": {
|
|
@@ -111,8 +99,7 @@
|
|
|
111
99
|
"build:storybook": "storybook build",
|
|
112
100
|
"build": "pnpm run build:package && pnpm run build:storybook",
|
|
113
101
|
"dev:stories": "storybook dev -p 6007",
|
|
114
|
-
"dev": "tsup --watch"
|
|
115
|
-
"build-storybook": "storybook build"
|
|
102
|
+
"dev": "tsup --watch"
|
|
116
103
|
},
|
|
117
104
|
"module": "dist/index.js",
|
|
118
105
|
"types": "dist/index.d.ts"
|