@pfct/purple 1.3.4-npm-test.1

package/dist/components/Navigation/index.d.ts

@@ -0,0 +1,27 @@
+import { IconProps } from '../../Icon';
+import React from 'react';
+import { BaseNavigationProps } from './BaseNavigation';
+import { NavigationContentColor } from './constant';
+type NavigationProps = Pick<BaseNavigationProps, 'title' | 'zIndex'> & {
+    contentColor: NavigationContentColor;
+    hasBackgroundColor: boolean;
+    leftArea?: {
+        type: 'backIcon';
+        handleClickButton: () => void;
+    };
+    rightArea?: {
+        type: 'closeIcon';
+        handleClickButton: () => void;
+    } | {
+        type: 'icon';
+        children: React.FC<IconProps>;
+        handleClickButton: () => void;
+    } | {
+        type: 'text';
+        children: string;
+        handleClickButton: () => void;
+    };
+};
+declare const Navigation: React.FC<NavigationProps>;
+export type { NavigationProps };
+export { Navigation };

package/dist/components/Navigation/index.js

@@ -0,0 +1,82 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Navigation = void 0;
+const Icon_1 = require("../../Icon");
+const Typography_1 = require("../../core/Typography");
+const react_1 = __importStar(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const BaseNavigation_1 = require("./BaseNavigation");
+const constant_1 = require("./constant");
+const Navigation = (_a) => {
+    var { contentColor, hasBackgroundColor, leftArea, rightArea } = _a, commonProps = __rest(_a, ["contentColor", "hasBackgroundColor", "leftArea", "rightArea"]);
+    const iconColor = constant_1.CONTENT_COLOR_MAP[contentColor].icon;
+    const titleColor = constant_1.CONTENT_COLOR_MAP[contentColor].title;
+    const rightTextColor = constant_1.CONTENT_COLOR_MAP[contentColor].rightText;
+    const backgroundColor = constant_1.CONTENT_COLOR_MAP[contentColor].backgroundColor;
+    const leftChildren = (0, react_1.useMemo)(() => {
+        const handleClickButton = () => {
+            leftArea === null || leftArea === void 0 ? void 0 : leftArea.handleClickButton();
+        };
+        switch (leftArea === null || leftArea === void 0 ? void 0 : leftArea.type) {
+            case 'backIcon':
+                return (react_1.default.createElement(Styled.IconWrapper, { onClick: handleClickButton },
+                    react_1.default.createElement(Icon_1.ChevronLeftMIcon, { fillColor: titleColor })));
+            default:
+                return;
+        }
+    }, [leftArea, titleColor]);
+    const rightChildren = (0, react_1.useMemo)(() => {
+        const handleClickButton = () => {
+            rightArea === null || rightArea === void 0 ? void 0 : rightArea.handleClickButton();
+        };
+        switch (rightArea === null || rightArea === void 0 ? void 0 : rightArea.type) {
+            case 'closeIcon':
+                return (react_1.default.createElement(Styled.IconWrapper, { onClick: handleClickButton },
+                    react_1.default.createElement(Icon_1.CancelMIcon, { fillColor: iconColor })));
+            case 'icon':
+                return (react_1.default.createElement(Styled.IconWrapper, { onClick: handleClickButton },
+                    react_1.default.createElement(rightArea.children, { fillColor: titleColor })));
+            case 'text':
+                return (react_1.default.createElement(Styled.TextWrapper, { onClick: handleClickButton },
+                    react_1.default.createElement(Typography_1.Title3, { color: rightTextColor }, rightArea.children)));
+            default:
+                return;
+        }
+    }, [iconColor, titleColor, rightTextColor, rightArea]);
+    return (react_1.default.createElement(BaseNavigation_1.BaseNavigation, Object.assign({ backgroundColor: hasBackgroundColor ? backgroundColor : 'transparent', leftChildren: leftChildren, titleColor: titleColor, rightChildren: rightChildren }, commonProps)));
+};
+exports.Navigation = Navigation;

package/dist/components/Navigation/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Navigation/index.spec.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const _1 = require(".");
+const props = {
+    contentColor: 'gray',
+    hasBackgroundColor: true,
+};
+describe('<Navigation />', () => {
+    it('렌더링 체크', () => {
+        (0, react_2.render)(react_1.default.createElement(react_1.default.Fragment, null,
+            "\uD655\uC778",
+            react_1.default.createElement(_1.Navigation, Object.assign({}, props))));
+        expect(react_2.screen.getByText('확인')).toBeInTheDocument();
+    });
+});

package/dist/components/Navigation/index.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { NavigationProps } from '.';
+type Story = StoryObj<NavigationProps>;
+/**
+ * updated 230523
+ *
+ * 현재 사용자가 위치한 화면의 정보와 액션 기능을 담고 있는 컴포넌트입니다.
+ *
+ */
+declare const meta: Meta<NavigationProps>;
+export default meta;
+export declare const Story1: Story;
+export declare const Story2: Story;
+export declare const Story3: Story;
+export declare const Story4: Story;
+export declare const Story5: Story;
+export declare const Story6: Story;
+export declare const Story7: Story;

package/dist/components/Navigation/index.stories.js

@@ -0,0 +1,146 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Story7 = exports.Story6 = exports.Story5 = exports.Story4 = exports.Story3 = exports.Story2 = exports.Story1 = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+/**
+ * updated 230523
+ *
+ * 현재 사용자가 위치한 화면의 정보와 액션 기능을 담고 있는 컴포넌트입니다.
+ *
+ */
+const meta = {
+    title: 'Component/Navigation Bar',
+    component: _1.Navigation,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => react_1.default.createElement(_1.Navigation, Object.assign({}, props)),
+    args: {
+        contentColor: 'gray',
+        hasBackgroundColor: true,
+        title: '타이틀',
+        leftArea: {
+            type: 'backIcon',
+            handleClickButton: () => {
+                console.log('left button click');
+            },
+        },
+        rightArea: {
+            type: 'text',
+            children: '텍스트',
+            handleClickButton: () => {
+                console.log('right button click');
+            },
+        },
+    },
+};
+exports.Story1.storyName = '배경컬러 있음';
+exports.Story2 = {
+    render: (props) => (react_1.default.createElement("div", { style: { background: 'transparent' } },
+        react_1.default.createElement(_1.Navigation, Object.assign({}, props)))),
+    args: {
+        contentColor: 'gray',
+        hasBackgroundColor: false,
+        title: '타이틀',
+        leftArea: {
+            type: 'backIcon',
+            handleClickButton: () => {
+                console.log('left button click');
+            },
+        },
+        rightArea: {
+            type: 'text',
+            children: '텍스트',
+            handleClickButton: () => {
+                console.log('right button click');
+            },
+        },
+    },
+};
+exports.Story2.storyName = '배경컬러 없음';
+exports.Story3 = {
+    render: (props) => (react_1.default.createElement("div", { style: { background: 'transparent' } },
+        react_1.default.createElement(_1.Navigation, Object.assign({}, props)))),
+    args: {
+        contentColor: 'gray',
+        hasBackgroundColor: true,
+        title: '타이틀',
+    },
+};
+exports.Story3.storyName = 'leftArea / rightArea - 없음';
+exports.Story4 = {
+    render: (props) => (react_1.default.createElement("div", { style: { background: 'transparent' } },
+        react_1.default.createElement(_1.Navigation, Object.assign({}, props)))),
+    args: {
+        contentColor: 'gray',
+        hasBackgroundColor: true,
+        title: '타이틀',
+        rightArea: {
+            type: 'text',
+            children: '텍스트',
+            handleClickButton: () => {
+                console.log('right button click');
+            },
+        },
+    },
+};
+exports.Story4.storyName = 'rightArea - Text';
+exports.Story5 = {
+    render: (props) => (react_1.default.createElement("div", { style: { background: 'transparent' } },
+        react_1.default.createElement(_1.Navigation, Object.assign({}, props)))),
+    args: {
+        contentColor: 'gray',
+        hasBackgroundColor: true,
+        title: '타이틀',
+        rightArea: {
+            type: 'closeIcon',
+            handleClickButton: () => {
+                console.log('right button click');
+            },
+        },
+    },
+};
+exports.Story5.storyName = 'rightArea - 취소 아이콘';
+exports.Story6 = {
+    render: (props) => (react_1.default.createElement("div", { style: { background: 'transparent' } },
+        react_1.default.createElement(_1.Navigation, Object.assign({}, props)))),
+    args: {
+        contentColor: 'white',
+        hasBackgroundColor: true,
+        title: '타이틀',
+        rightArea: {
+            type: 'closeIcon',
+            handleClickButton: () => {
+                console.log('right button click');
+            },
+        },
+    },
+};
+exports.Story6.storyName = 'contentColor - white';
+exports.Story7 = {
+    render: (props) => (react_1.default.createElement("div", { style: { background: 'transparent' } },
+        react_1.default.createElement(_1.Navigation, Object.assign({}, props)))),
+    args: {
+        contentColor: 'gray',
+        hasBackgroundColor: true,
+        leftArea: {
+            type: 'backIcon',
+            handleClickButton: () => {
+                console.log('left button click');
+            },
+        },
+        rightArea: {
+            type: 'closeIcon',
+            handleClickButton: () => {
+                console.log('right button click');
+            },
+        },
+    },
+};
+exports.Story7.storyName = 'title 없음';

package/dist/components/Navigation/index.styled.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TextWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/dist/components/Navigation/index.styled.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextWrapper = exports.IconWrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const VerticalCenterizeWrapper = styled_1.default.div `
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+`;
+exports.IconWrapper = VerticalCenterizeWrapper;
+exports.TextWrapper = (0, styled_1.default)(VerticalCenterizeWrapper) `
+	margin-right: 5px;
+`;

package/dist/components/OverlayRoot/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PropsWithChildren } from '../../types/react';
+type OverlayRootProps = PropsWithChildren<{
+    className?: string;
+    visible: boolean;
+    onClick?: () => void;
+    zIndex?: number;
+}>;
+declare const OverlayRoot: React.FC<OverlayRootProps>;
+export type { OverlayRootProps };
+export { OverlayRoot };

package/dist/components/OverlayRoot/index.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverlayRoot = void 0;
+const react_1 = __importStar(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const hooks_1 = require("../../hooks");
+const style_constants_1 = require("../../constants/style.constants");
+const OverlayRoot = react_1.default.memo(({ className, visible, onClick, zIndex = style_constants_1.zIndex.modal, children }) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const onCloseEvent = (e) => {
+        if (e.target === e.currentTarget) {
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        let timeoutId;
+        if (visible) {
+            setOpen(true);
+        }
+        else {
+            timeoutId = setTimeout(() => setOpen(false), 400);
+        }
+        return () => {
+            if (timeoutId !== undefined) {
+                clearTimeout(timeoutId);
+            }
+        };
+    }, [visible]);
+    (0, hooks_1.useOverlayPreventScroll)(visible);
+    if (!open) {
+        return null;
+    }
+    return (react_1.default.createElement(Styled.Overlay, { className: className, visible: visible, zIndex: zIndex, onClick: onCloseEvent }, children));
+});
+exports.OverlayRoot = OverlayRoot;

package/dist/components/OverlayRoot/index.styled.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const modalSettings: (visible: boolean) => import("@emotion/react").SerializedStyles;
+export declare const Overlay: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    visible: boolean;
+    zIndex: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/OverlayRoot/index.styled.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Overlay = exports.modalSettings = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Colors_1 = require("../../core/Colors");
+const react_1 = require("@emotion/react");
+const fadeIn = (0, react_1.keyframes) `
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+const fadeOut = (0, react_1.keyframes) `
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+`;
+const modalSettings = (visible) => (0, react_1.css) `
+	visibility: ${visible ? 'visible' : 'hidden'};
+	animation: ${visible ? fadeIn : fadeOut} 0.4s ease-out;
+	transition: visibility 0.4s ease-out;
+`;
+exports.modalSettings = modalSettings;
+exports.Overlay = styled_1.default.div `
+	box-sizing: border-box;
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: ${(0, Colors_1.generateHexWithAlphaInLightMode)(Colors_1.basicColors.black, '60%')};
+	z-index: ${(el) => el.zIndex};
+
+	${({ visible }) => (0, exports.modalSettings)(visible)};
+`;

package/dist/components/Segment/BaseSegment/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type SegmentProps<T> = {
+    item: T[];
+    value: T;
+    onChange: (value: T) => void;
+};
+declare const Segment: <T extends string>({ item, value, onChange }: SegmentProps<T>) => React.JSX.Element;
+export type { SegmentProps };
+export { Segment };

package/dist/components/Segment/BaseSegment/index.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Segment = void 0;
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const Segment = ({ item, value, onChange }) => {
+    const width = 100 / item.length;
+    const control = () => {
+        const idx = item.findIndex((i) => i === value) * 100;
+        if (idx < 0) {
+            return 0;
+        }
+        else {
+            return idx / item.length;
+        }
+    };
+    return (react_1.default.createElement(Styled.Wrapper, null,
+        react_1.default.createElement(Styled.LabelWrapper, { width: width },
+            item.map((label, index) => {
+                return (react_1.default.createElement(react_1.default.Fragment, { key: index },
+                    react_1.default.createElement(Styled.Label, { className: Styled.className.segmentLabel, active: value === label },
+                        react_1.default.createElement(Styled.Input, { type: "radio", name: "radio", value: label, checked: value === label, onChange: (e) => onChange(e.target.value) }),
+                        label)));
+            }),
+            react_1.default.createElement(Styled.Control, { className: Styled.className.segmentControl, control: control(), width: width }))));
+};
+exports.Segment = Segment;

package/dist/components/Segment/BaseSegment/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Segment/BaseSegment/index.spec.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const _1 = require(".");
+const props = {
+    item: ['1', '2', '3'],
+    value: '1',
+    onChange: () => {
+        console.log('onChange');
+    },
+};
+describe('<Segment />', () => {
+    it('렌더링 체크', () => {
+        (0, react_2.render)(react_1.default.createElement(_1.Segment, Object.assign({}, props), "\uD655\uC778"));
+        expect(react_2.screen.getByText('확인')).toBeInTheDocument();
+    });
+});

package/dist/components/Segment/BaseSegment/index.styled.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+export declare const className: {
+    segmentControl: string;
+    segmentLabel: string;
+};
+export declare const Control: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    control: number;
+    width: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Label: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    active: boolean;
+}, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Input: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const LabelWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    width: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Segment/BaseSegment/index.styled.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LabelWrapper = exports.Input = exports.Wrapper = exports.Label = exports.Control = exports.className = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const TextStyles_1 = require("../../../core/TextStyles");
+const Colors_1 = require("../../../core/Colors");
+exports.className = {
+    segmentControl: 'segment-control',
+    segmentLabel: 'segment-label',
+};
+exports.Control = styled_1.default.div `
+	width: ${({ width }) => `${width}%`};
+	background-color: ${Colors_1.basicColors.white};
+	position: absolute;
+	left: ${({ control }) => `${control}%`};
+	transition: left 0.4s ease-out;
+	z-index: -10 !important;
+	border-radius: 8px;
+	box-shadow: 0px 2px 4px rgba(208, 208, 208, 0.5);
+`;
+exports.Label = styled_1.default.label `
+	${TextStyles_1.typography.h6};
+	font-weight: 700;
+	transition: all 0.4s ease-out;
+	color: ${({ active }) => (active ? Colors_1.basicColors.gray900 : Colors_1.basicColors.gray200)};
+`;
+exports.Wrapper = styled_1.default.div `
+	box-sizing: border-box;
+	width: 100%;
+	height: 48px;
+	position: relative;
+	background-color: ${Colors_1.semanticColors.segmentControlContainer};
+	z-index: 5;
+	border-radius: 10px;
+	padding: 4px;
+`;
+exports.Input = styled_1.default.input `
+	display: none;
+`;
+exports.LabelWrapper = styled_1.default.div `
+	width: calc(100% - 8px);
+	height: 40px;
+	box-sizing: border-box;
+	position: absolute;
+
+	& > .${exports.className.segmentControl}, .${exports.className.segmentLabel} {
+		width: ${({ width }) => `${width}%`};
+		height: 40px;
+		text-align: center;
+		display: inline-block;
+		z-index: 2;
+		line-height: 40px;
+		cursor: pointer;
+	}
+`;

package/dist/components/Segment/ExtendSegment/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type ExtendSegmentProps = {
+    item: {
+        children: React.ReactNode;
+        value: string;
+    }[];
+    value: string;
+    onChange: (value: string) => void;
+};
+declare const ExtendSegment: React.FC<ExtendSegmentProps>;
+export type { ExtendSegmentProps };
+export { ExtendSegment };