@shoplflow/base 0.33.4 → 0.34.0
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.cjs +88 -0
- package/dist/index.d.cts +38 -1
- package/dist/index.d.ts +38 -1
- package/dist/index.js +88 -0
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -6581,6 +6581,94 @@ var Skeleton = ({ styleVar = "rectangle", width = "50px", height = "20px" }) =>
|
|
|
6581
6581
|
return /* @__PURE__ */ jsxRuntime.jsx(Container6, { styleVar, width, height, "data-shoplflow": "Skeleton" });
|
|
6582
6582
|
};
|
|
6583
6583
|
exports.Skeleton = Skeleton;
|
|
6584
|
+
|
|
6585
|
+
// src/components/Slider/Slider.types.ts
|
|
6586
|
+
var SLIDER_Z_INDEX = {
|
|
6587
|
+
THUMB_BUTTON: 10
|
|
6588
|
+
};
|
|
6589
|
+
|
|
6590
|
+
// src/components/Slider/Slider.styled.ts
|
|
6591
|
+
styled6__default.default.div`
|
|
6592
|
+
position: relative;
|
|
6593
|
+
width: 100%;
|
|
6594
|
+
padding: 0 12px;
|
|
6595
|
+
user-select: none;
|
|
6596
|
+
background-color: ${exports.colorTokens.neutral200};
|
|
6597
|
+
border-radius: 16px;
|
|
6598
|
+
|
|
6599
|
+
${({ isDisabled }) => isDisabled && react$1.css`
|
|
6600
|
+
opacity: 0.5;
|
|
6601
|
+
cursor: not-allowed;
|
|
6602
|
+
`}
|
|
6603
|
+
`;
|
|
6604
|
+
styled6__default.default.div`
|
|
6605
|
+
width: 100%; // SliderContainer의 padding 영역 내에서 100%
|
|
6606
|
+
height: 24px;
|
|
6607
|
+
position: relative;
|
|
6608
|
+
overflow: visible;
|
|
6609
|
+
margin: 0;
|
|
6610
|
+
`;
|
|
6611
|
+
styled6__default.default.div`
|
|
6612
|
+
position: absolute;
|
|
6613
|
+
height: 100%;
|
|
6614
|
+
border-radius: 16px;
|
|
6615
|
+
background-color: ${({ selectedColor }) => exports.colorTokens[selectedColor]};
|
|
6616
|
+
top: 0;
|
|
6617
|
+
left: ${({ startPosition }) => startPosition};
|
|
6618
|
+
width: ${({ width }) => width};
|
|
6619
|
+
`;
|
|
6620
|
+
styled6__default.default.div`
|
|
6621
|
+
position: absolute;
|
|
6622
|
+
top: 0;
|
|
6623
|
+
left: 0;
|
|
6624
|
+
width: 100%;
|
|
6625
|
+
height: 100%;
|
|
6626
|
+
display: flex;
|
|
6627
|
+
align-items: center;
|
|
6628
|
+
pointer-events: none;
|
|
6629
|
+
`;
|
|
6630
|
+
styled6__default.default.div`
|
|
6631
|
+
position: absolute;
|
|
6632
|
+
width: 8px;
|
|
6633
|
+
height: 8px;
|
|
6634
|
+
border-radius: 50%;
|
|
6635
|
+
background-color: transparent;
|
|
6636
|
+
|
|
6637
|
+
&[data-edge='true'] {
|
|
6638
|
+
width: 16px;
|
|
6639
|
+
height: 16px;
|
|
6640
|
+
}
|
|
6641
|
+
`;
|
|
6642
|
+
styled6__default.default.button`
|
|
6643
|
+
position: absolute;
|
|
6644
|
+
top: 50%;
|
|
6645
|
+
transform: translate(-50%, -50%);
|
|
6646
|
+
border: none;
|
|
6647
|
+
padding: 0;
|
|
6648
|
+
outline: none;
|
|
6649
|
+
z-index: ${SLIDER_Z_INDEX.THUMB_BUTTON}; // thumb를 track보다 위에 위치시킴
|
|
6650
|
+
`;
|
|
6651
|
+
styled6__default.default.div`
|
|
6652
|
+
width: 16px;
|
|
6653
|
+
height: 16px;
|
|
6654
|
+
border-radius: 50%;
|
|
6655
|
+
border: 0.5px solid transparent; // 자연스러운 transition을 위한 초기 border 설정
|
|
6656
|
+
background-color: ${exports.colorTokens.neutral0};
|
|
6657
|
+
transition:
|
|
6658
|
+
transform 0.15s ease,
|
|
6659
|
+
border 0.15s ease;
|
|
6660
|
+
cursor: ${({ isDisabled }) => isDisabled ? "not-allowed" : "grab"};
|
|
6661
|
+
|
|
6662
|
+
${({ isDisabled, selectedColor }) => !isDisabled && react$1.css`
|
|
6663
|
+
&:active {
|
|
6664
|
+
border: 3px solid ${exports.colorTokens[selectedColor]};
|
|
6665
|
+
}
|
|
6666
|
+
|
|
6667
|
+
&:hover {
|
|
6668
|
+
border: 3px solid ${exports.colorTokens[selectedColor]};
|
|
6669
|
+
}
|
|
6670
|
+
`}
|
|
6671
|
+
`;
|
|
6584
6672
|
var SpaceMarginWrapper = styled6__default.default(framerMotion.motion.div)`
|
|
6585
6673
|
position: relative;
|
|
6586
6674
|
display: flex;
|
package/dist/index.d.cts
CHANGED
|
@@ -1540,4 +1540,41 @@ declare type SkeletonProps = {
|
|
|
1540
1540
|
|
|
1541
1541
|
declare const Skeleton: ({ styleVar, width, height }: SkeletonProps) => react_jsx_runtime.JSX.Element;
|
|
1542
1542
|
|
|
1543
|
-
|
|
1543
|
+
interface SliderProps {
|
|
1544
|
+
/**
|
|
1545
|
+
* 선택 가능한 최소값
|
|
1546
|
+
*/
|
|
1547
|
+
min: number;
|
|
1548
|
+
/**
|
|
1549
|
+
* 선택 가능한 최대값
|
|
1550
|
+
*/
|
|
1551
|
+
max: number;
|
|
1552
|
+
/**
|
|
1553
|
+
* 증분 단위
|
|
1554
|
+
*/
|
|
1555
|
+
step?: number;
|
|
1556
|
+
/**
|
|
1557
|
+
* 초기 선택 범위
|
|
1558
|
+
*/
|
|
1559
|
+
defaultRange?: {
|
|
1560
|
+
min: number;
|
|
1561
|
+
max: number;
|
|
1562
|
+
};
|
|
1563
|
+
/**
|
|
1564
|
+
* 선택 범위가 변경될 때 실행할 함수
|
|
1565
|
+
*/
|
|
1566
|
+
handleRange?: (range: {
|
|
1567
|
+
min: number;
|
|
1568
|
+
max: number;
|
|
1569
|
+
}) => void;
|
|
1570
|
+
/**
|
|
1571
|
+
* 비활성화 여부
|
|
1572
|
+
*/
|
|
1573
|
+
isDisabled?: boolean;
|
|
1574
|
+
/**
|
|
1575
|
+
* 선택된 범위에 적용될 색상
|
|
1576
|
+
*/
|
|
1577
|
+
selectedColor?: ColorTokens;
|
|
1578
|
+
}
|
|
1579
|
+
|
|
1580
|
+
export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownOptionVariants, DropdownProps, DropdownSizeVariantType, DropdownTriggerButtonProps, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalBottomProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, ModalTopProps, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, Skeleton, SkeletonProps, SliderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };
|
package/dist/index.d.ts
CHANGED
|
@@ -1540,4 +1540,41 @@ declare type SkeletonProps = {
|
|
|
1540
1540
|
|
|
1541
1541
|
declare const Skeleton: ({ styleVar, width, height }: SkeletonProps) => react_jsx_runtime.JSX.Element;
|
|
1542
1542
|
|
|
1543
|
-
|
|
1543
|
+
interface SliderProps {
|
|
1544
|
+
/**
|
|
1545
|
+
* 선택 가능한 최소값
|
|
1546
|
+
*/
|
|
1547
|
+
min: number;
|
|
1548
|
+
/**
|
|
1549
|
+
* 선택 가능한 최대값
|
|
1550
|
+
*/
|
|
1551
|
+
max: number;
|
|
1552
|
+
/**
|
|
1553
|
+
* 증분 단위
|
|
1554
|
+
*/
|
|
1555
|
+
step?: number;
|
|
1556
|
+
/**
|
|
1557
|
+
* 초기 선택 범위
|
|
1558
|
+
*/
|
|
1559
|
+
defaultRange?: {
|
|
1560
|
+
min: number;
|
|
1561
|
+
max: number;
|
|
1562
|
+
};
|
|
1563
|
+
/**
|
|
1564
|
+
* 선택 범위가 변경될 때 실행할 함수
|
|
1565
|
+
*/
|
|
1566
|
+
handleRange?: (range: {
|
|
1567
|
+
min: number;
|
|
1568
|
+
max: number;
|
|
1569
|
+
}) => void;
|
|
1570
|
+
/**
|
|
1571
|
+
* 비활성화 여부
|
|
1572
|
+
*/
|
|
1573
|
+
isDisabled?: boolean;
|
|
1574
|
+
/**
|
|
1575
|
+
* 선택된 범위에 적용될 색상
|
|
1576
|
+
*/
|
|
1577
|
+
selectedColor?: ColorTokens;
|
|
1578
|
+
}
|
|
1579
|
+
|
|
1580
|
+
export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownOptionVariants, DropdownProps, DropdownSizeVariantType, DropdownTriggerButtonProps, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalBottomProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, ModalTopProps, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, Skeleton, SkeletonProps, SliderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };
|
package/dist/index.js
CHANGED
|
@@ -6554,6 +6554,94 @@ var Skeleton = ({ styleVar = "rectangle", width = "50px", height = "20px" }) =>
|
|
|
6554
6554
|
return /* @__PURE__ */ jsx(Container6, { styleVar, width, height, "data-shoplflow": "Skeleton" });
|
|
6555
6555
|
};
|
|
6556
6556
|
var Skeleton_default = Skeleton;
|
|
6557
|
+
|
|
6558
|
+
// src/components/Slider/Slider.types.ts
|
|
6559
|
+
var SLIDER_Z_INDEX = {
|
|
6560
|
+
THUMB_BUTTON: 10
|
|
6561
|
+
};
|
|
6562
|
+
|
|
6563
|
+
// src/components/Slider/Slider.styled.ts
|
|
6564
|
+
styled6.div`
|
|
6565
|
+
position: relative;
|
|
6566
|
+
width: 100%;
|
|
6567
|
+
padding: 0 12px;
|
|
6568
|
+
user-select: none;
|
|
6569
|
+
background-color: ${colorTokens.neutral200};
|
|
6570
|
+
border-radius: 16px;
|
|
6571
|
+
|
|
6572
|
+
${({ isDisabled }) => isDisabled && css`
|
|
6573
|
+
opacity: 0.5;
|
|
6574
|
+
cursor: not-allowed;
|
|
6575
|
+
`}
|
|
6576
|
+
`;
|
|
6577
|
+
styled6.div`
|
|
6578
|
+
width: 100%; // SliderContainer의 padding 영역 내에서 100%
|
|
6579
|
+
height: 24px;
|
|
6580
|
+
position: relative;
|
|
6581
|
+
overflow: visible;
|
|
6582
|
+
margin: 0;
|
|
6583
|
+
`;
|
|
6584
|
+
styled6.div`
|
|
6585
|
+
position: absolute;
|
|
6586
|
+
height: 100%;
|
|
6587
|
+
border-radius: 16px;
|
|
6588
|
+
background-color: ${({ selectedColor }) => colorTokens[selectedColor]};
|
|
6589
|
+
top: 0;
|
|
6590
|
+
left: ${({ startPosition }) => startPosition};
|
|
6591
|
+
width: ${({ width }) => width};
|
|
6592
|
+
`;
|
|
6593
|
+
styled6.div`
|
|
6594
|
+
position: absolute;
|
|
6595
|
+
top: 0;
|
|
6596
|
+
left: 0;
|
|
6597
|
+
width: 100%;
|
|
6598
|
+
height: 100%;
|
|
6599
|
+
display: flex;
|
|
6600
|
+
align-items: center;
|
|
6601
|
+
pointer-events: none;
|
|
6602
|
+
`;
|
|
6603
|
+
styled6.div`
|
|
6604
|
+
position: absolute;
|
|
6605
|
+
width: 8px;
|
|
6606
|
+
height: 8px;
|
|
6607
|
+
border-radius: 50%;
|
|
6608
|
+
background-color: transparent;
|
|
6609
|
+
|
|
6610
|
+
&[data-edge='true'] {
|
|
6611
|
+
width: 16px;
|
|
6612
|
+
height: 16px;
|
|
6613
|
+
}
|
|
6614
|
+
`;
|
|
6615
|
+
styled6.button`
|
|
6616
|
+
position: absolute;
|
|
6617
|
+
top: 50%;
|
|
6618
|
+
transform: translate(-50%, -50%);
|
|
6619
|
+
border: none;
|
|
6620
|
+
padding: 0;
|
|
6621
|
+
outline: none;
|
|
6622
|
+
z-index: ${SLIDER_Z_INDEX.THUMB_BUTTON}; // thumb를 track보다 위에 위치시킴
|
|
6623
|
+
`;
|
|
6624
|
+
styled6.div`
|
|
6625
|
+
width: 16px;
|
|
6626
|
+
height: 16px;
|
|
6627
|
+
border-radius: 50%;
|
|
6628
|
+
border: 0.5px solid transparent; // 자연스러운 transition을 위한 초기 border 설정
|
|
6629
|
+
background-color: ${colorTokens.neutral0};
|
|
6630
|
+
transition:
|
|
6631
|
+
transform 0.15s ease,
|
|
6632
|
+
border 0.15s ease;
|
|
6633
|
+
cursor: ${({ isDisabled }) => isDisabled ? "not-allowed" : "grab"};
|
|
6634
|
+
|
|
6635
|
+
${({ isDisabled, selectedColor }) => !isDisabled && css`
|
|
6636
|
+
&:active {
|
|
6637
|
+
border: 3px solid ${colorTokens[selectedColor]};
|
|
6638
|
+
}
|
|
6639
|
+
|
|
6640
|
+
&:hover {
|
|
6641
|
+
border: 3px solid ${colorTokens[selectedColor]};
|
|
6642
|
+
}
|
|
6643
|
+
`}
|
|
6644
|
+
`;
|
|
6557
6645
|
var SpaceMarginWrapper = styled6(motion.div)`
|
|
6558
6646
|
position: relative;
|
|
6559
6647
|
display: flex;
|