@shoplflow/base 0.33.3 → 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 +95 -3
- package/dist/index.d.cts +38 -1
- package/dist/index.d.ts +38 -1
- package/dist/index.js +95 -3
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -3322,11 +3322,15 @@ var StyledTree = styled6__default.default(framerMotion.motion.ul)`
|
|
|
3322
3322
|
flex-direction: column;
|
|
3323
3323
|
width: 100%;
|
|
3324
3324
|
`;
|
|
3325
|
+
var StyledTreeItemWrapper = styled6__default.default.div`
|
|
3326
|
+
background: ${({ hasBackground }) => hasBackground ? exports.colorTokens.neutral100 : "transparent"};
|
|
3327
|
+
border-radius: 8px;
|
|
3328
|
+
`;
|
|
3325
3329
|
var StyledTreeItem = styled6__default.default(framerMotion.motion.li)`
|
|
3326
3330
|
display: flex;
|
|
3327
3331
|
flex-direction: row;
|
|
3328
3332
|
width: 100%;
|
|
3329
|
-
height: 48px;
|
|
3333
|
+
min-height: 48px;
|
|
3330
3334
|
gap: 4px;
|
|
3331
3335
|
align-items: center;
|
|
3332
3336
|
justify-content: space-between;
|
|
@@ -3433,7 +3437,7 @@ exports.TreeItem = (_a) => {
|
|
|
3433
3437
|
}
|
|
3434
3438
|
}, [isOpen]);
|
|
3435
3439
|
const isLastTree = !children && depth > 0;
|
|
3436
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3440
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(StyledTreeItemWrapper, { hasBackground: isOpened || isLastTree, children: [
|
|
3437
3441
|
/* @__PURE__ */ React3.createElement(
|
|
3438
3442
|
StyledTreeItem,
|
|
3439
3443
|
__spreadValues(__spreadProps(__spreadValues({
|
|
@@ -3460,7 +3464,7 @@ exports.TreeItem = (_a) => {
|
|
|
3460
3464
|
) }),
|
|
3461
3465
|
isLastTree && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "24px", height: "24px", visibility: "hidden" } }),
|
|
3462
3466
|
LeftSourceClone && LeftSourceClone,
|
|
3463
|
-
/* @__PURE__ */ jsxRuntime.jsx(exports.StackContainer, { padding: "0 0 0 4px", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400",
|
|
3467
|
+
/* @__PURE__ */ jsxRuntime.jsx(exports.StackContainer, { padding: "0 0 0 4px", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", wordBreak: "break-all", color: disabled ? "neutral350" : "neutral700", children: label }) })
|
|
3464
3468
|
] }),
|
|
3465
3469
|
/* @__PURE__ */ jsxRuntime.jsx(RightElementWrapper, { children: rightSource })
|
|
3466
3470
|
),
|
|
@@ -6577,6 +6581,94 @@ var Skeleton = ({ styleVar = "rectangle", width = "50px", height = "20px" }) =>
|
|
|
6577
6581
|
return /* @__PURE__ */ jsxRuntime.jsx(Container6, { styleVar, width, height, "data-shoplflow": "Skeleton" });
|
|
6578
6582
|
};
|
|
6579
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
|
+
`;
|
|
6580
6672
|
var SpaceMarginWrapper = styled6__default.default(framerMotion.motion.div)`
|
|
6581
6673
|
position: relative;
|
|
6582
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
|
@@ -3295,11 +3295,15 @@ var StyledTree = styled6(motion.ul)`
|
|
|
3295
3295
|
flex-direction: column;
|
|
3296
3296
|
width: 100%;
|
|
3297
3297
|
`;
|
|
3298
|
+
var StyledTreeItemWrapper = styled6.div`
|
|
3299
|
+
background: ${({ hasBackground }) => hasBackground ? colorTokens.neutral100 : "transparent"};
|
|
3300
|
+
border-radius: 8px;
|
|
3301
|
+
`;
|
|
3298
3302
|
var StyledTreeItem = styled6(motion.li)`
|
|
3299
3303
|
display: flex;
|
|
3300
3304
|
flex-direction: row;
|
|
3301
3305
|
width: 100%;
|
|
3302
|
-
height: 48px;
|
|
3306
|
+
min-height: 48px;
|
|
3303
3307
|
gap: 4px;
|
|
3304
3308
|
align-items: center;
|
|
3305
3309
|
justify-content: space-between;
|
|
@@ -3406,7 +3410,7 @@ var TreeItem = (_a) => {
|
|
|
3406
3410
|
}
|
|
3407
3411
|
}, [isOpen]);
|
|
3408
3412
|
const isLastTree = !children && depth > 0;
|
|
3409
|
-
return /* @__PURE__ */ jsxs(
|
|
3413
|
+
return /* @__PURE__ */ jsxs(StyledTreeItemWrapper, { hasBackground: isOpened || isLastTree, children: [
|
|
3410
3414
|
/* @__PURE__ */ createElement(
|
|
3411
3415
|
StyledTreeItem,
|
|
3412
3416
|
__spreadValues(__spreadProps(__spreadValues({
|
|
@@ -3433,7 +3437,7 @@ var TreeItem = (_a) => {
|
|
|
3433
3437
|
) }),
|
|
3434
3438
|
isLastTree && /* @__PURE__ */ jsx("div", { style: { width: "24px", height: "24px", visibility: "hidden" } }),
|
|
3435
3439
|
LeftSourceClone && LeftSourceClone,
|
|
3436
|
-
/* @__PURE__ */ jsx(StackContainer_default, { padding: "0 0 0 4px", children: /* @__PURE__ */ jsx(Text_default, { typography: "body1_400",
|
|
3440
|
+
/* @__PURE__ */ jsx(StackContainer_default, { padding: "0 0 0 4px", children: /* @__PURE__ */ jsx(Text_default, { typography: "body1_400", wordBreak: "break-all", color: disabled ? "neutral350" : "neutral700", children: label }) })
|
|
3437
3441
|
] }),
|
|
3438
3442
|
/* @__PURE__ */ jsx(RightElementWrapper, { children: rightSource })
|
|
3439
3443
|
),
|
|
@@ -6550,6 +6554,94 @@ var Skeleton = ({ styleVar = "rectangle", width = "50px", height = "20px" }) =>
|
|
|
6550
6554
|
return /* @__PURE__ */ jsx(Container6, { styleVar, width, height, "data-shoplflow": "Skeleton" });
|
|
6551
6555
|
};
|
|
6552
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
|
+
`;
|
|
6553
6645
|
var SpaceMarginWrapper = styled6(motion.div)`
|
|
6554
6646
|
position: relative;
|
|
6555
6647
|
display: flex;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shoplflow/base",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.34.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
"react-dom": "^18.2.0",
|
|
92
92
|
"simplebar-react": "^3.2.6",
|
|
93
93
|
"@shoplflow/hada-assets": "^0.1.3",
|
|
94
|
-
"@shoplflow/shopl-assets": "^0.12.
|
|
94
|
+
"@shoplflow/shopl-assets": "^0.12.2",
|
|
95
95
|
"@shoplflow/utils": "^0.6.5"
|
|
96
96
|
},
|
|
97
97
|
"scripts": {
|