@pfct/purple 1.4.0-rc.6 → 1.4.0-rc.7

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

@@ -0,0 +1,87 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Mobile = exports.Desktop = exports.IconWrapper = exports.Item = exports.ItemList = exports.ListBottomMargin = exports.ItemListWrapper = exports.Wrapper = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const utils_1 = require("../../utils");
+const TextStyles_1 = require("../../core/TextStyles");
+const Colors_1 = require("../../core/Colors");
+const style_constants_1 = require("../../constants/style.constants");
+exports.Wrapper = styled_1.default.div `
+	& > div > .select-box {
+		cursor: pointer;
+	}
+	position: relative;
+`;
+exports.ItemListWrapper = styled_1.default.div `
+	position: absolute;
+	z-index: ${style_constants_1.zIndex.basicLayer + 1};
+	width: 100%;
+	height: max-content;
+
+	${(0, utils_1.Larger)((0, react_1.css) `
+		top: 70px;
+	`)}
+`;
+exports.ListBottomMargin = styled_1.default.div `
+	height: 80px;
+	pointer-events: none;
+`;
+exports.ItemList = styled_1.default.div `
+	box-shadow: 0 2px 10px ${(0, Colors_1.generateHexWithAlphaInLightMode)(Colors_1.basicColors.black, '20%')};
+	background-color: ${Colors_1.basicColors.white};
+	border-radius: 10px;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	max-height: ${65 * 4.5}px;
+	overflow-y: scroll;
+`;
+exports.Item = styled_1.default.div `
+	width: 100%;
+	height: 50px;
+	padding: 15px 25px;
+	cursor: pointer;
+	${(0, TextStyles_1.title2)({ color: Colors_1.basicColors.gray400 })};
+	background-color: ${Colors_1.basicColors.white};
+
+	&:first-of-type {
+		border-top-right-radius: 10px;
+		border-top-left-radius: 10px;
+	}
+
+	&:last-of-type {
+		border-bottom-right-radius: 10px;
+		border-bottom-left-radius: 10px;
+	}
+
+	&:hover {
+		background-color: ${Colors_1.basicColors.gray25};
+	}
+
+	&:active {
+		background-color: ${Colors_1.basicColors.gray50};
+	}
+`;
+exports.IconWrapper = styled_1.default.div `
+	position: absolute;
+	z-index: 10;
+	right: 20px;
+	top: ${({ rotateArrow }) => (rotateArrow ? '18px' : '20px')};
+	cursor: pointer;
+	transform: ${({ rotateArrow }) => (rotateArrow ? 'rotate(180deg)' : 'rotate(0)')};
+	pointer-events: none;
+`;
+exports.Desktop = styled_1.default.div `
+	${(0, utils_1.Smaller)((0, react_1.css) `
+		display: none;
+	`)}
+`;
+exports.Mobile = styled_1.default.div `
+	${(0, utils_1.Larger)((0, react_1.css) `
+		display: none;
+	`)}
+`;

package/dist/components/Tabs/FillTabs/index.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { ColorType, SingleSelectProps } from '../../..';
 type FillTabsProps = SingleSelectProps & {
     colorType: ColorType;

package/dist/components/Tabs/FillTabs/index.js

@@ -0,0 +1,48 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.FillTabs = void 0;
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const FillTabs = (props) => {
+    return (react_1.default.createElement(Styled.OutterWrapper, null,
+        react_1.default.createElement(Styled.FillTabsListContainer, null, props.list.map((item, idx) => {
+            return (react_1.default.createElement(Styled.ItemWrapper, { key: idx, colorType: props.colorType, status: props.value.includes(item.value) ? 'on' : 'off', onClick: () => props.onChange(item.value) }, item.label));
+        }))));
+};
+exports.FillTabs = FillTabs;

package/dist/components/Tabs/FillTabs/index.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FillTabsProps } from '.';
+type Story = StoryObj<FillTabsProps>;
+declare const meta: Meta<FillTabsProps>;
+export default meta;
+export declare const FillTabsShortStory: Story;
+export declare const FillTabsLongStory: Story;

package/dist/components/Tabs/FillTabs/index.stories.js

@@ -0,0 +1,83 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FillTabsLongStory = exports.FillTabsShortStory = void 0;
+const react_1 = __importStar(require("react"));
+const _1 = require(".");
+const meta = {
+    title: 'Component/Tabs/FillTabs',
+    component: _1.FillTabs,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+const Component = (props) => {
+    const [value, setValue] = (0, react_1.useState)(props.list[1].value);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        "selected: ",
+        value,
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(_1.FillTabs, Object.assign({}, props, { value: value, onChange: setValue }))));
+};
+exports.FillTabsShortStory = {
+    render: (props) => (react_1.default.createElement("div", { style: { width: '360px', background: 'white', border: '1px solid black', paddingBottom: 25 } },
+        react_1.default.createElement(Component, Object.assign({}, props)))),
+    args: {
+        colorType: 'gray',
+        list: [
+            { label: '라벨1', value: '1' },
+            { label: '라벨2', value: '2' },
+            { label: '라벨3', value: '3' },
+        ],
+    },
+};
+exports.FillTabsShortStory.storyName = 'FillTabs (Short)';
+exports.FillTabsLongStory = {
+    render: (props) => (react_1.default.createElement("div", { style: { width: '360px', background: 'white', border: '1px solid black', paddingBottom: 25 } },
+        react_1.default.createElement(Component, Object.assign({}, props)))),
+    args: {
+        colorType: 'gray',
+        list: [
+            { label: '라벨1', value: '1' },
+            { label: '라벨2', value: '2' },
+            { label: '긴긴컨텐츠라벨3', value: '3' },
+            { label: '라벨4', value: '4' },
+            { label: '라벨5', value: '5' },
+            { label: '라벨6', value: '6' },
+            { label: '라벨7', value: '7' },
+        ],
+    },
+};
+exports.FillTabsLongStory.storyName = 'FillTabs (Long, Scrollable)';

package/dist/components/Tabs/FillTabs/index.styled.d.ts

@@ -1,16 +1,16 @@
 import { ColorType, StatusType } from '../../../utils/GenerateColorStyle';
-export declare const OutterWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const OutterWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const FillTabsListContainer: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FillTabsListContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ItemWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ItemWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     colorType: ColorType;
     status: StatusType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Tabs/FillTabs/index.styled.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemWrapper = exports.FillTabsListContainer = exports.OutterWrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+const TextStyles_1 = require("../../../core/TextStyles");
+const GenerateColorStyle_1 = require("../../../utils/GenerateColorStyle");
+const common_1 = require("../../../style/common");
+const utils_1 = require("../../../utils");
+exports.OutterWrapper = styled_1.default.div `
+	overflow: hidden;
+`;
+exports.FillTabsListContainer = styled_1.default.div `
+	${common_1.scrollStyle}
+
+	display: flex;
+	gap: 7px;
+
+	padding: 0 20px;
+	${(0, utils_1.Larger)((0, react_1.css) `
+		padding: 0;
+	`)}
+`;
+exports.ItemWrapper = styled_1.default.div `
+	cursor: pointer;
+	padding: 8px 12px;
+	min-width: fit-content;
+	border-radius: 8px;
+	${(0, TextStyles_1.title4)()}
+
+	${({ colorType, status }) => {
+    const { textColor, containerColor } = (0, GenerateColorStyle_1.fillTabColorStyle)(colorType)[status];
+    return (0, react_1.css) `
+			color: ${textColor};
+			background: ${containerColor};
+		`;
+}}
+`;

package/dist/components/Tabs/TextTabs/index.d.ts

@@ -1,7 +1,7 @@
-import { default as React } from 'react';
+import React from 'react';
+import * as Styled from './index.styled';
 import { ColorType } from '../../../utils/GenerateColorStyle';
 import { SingleSelectProps } from '../../../types';
-import * as Styled from './index.styled';
 type TextTabsProps = SingleSelectProps & {
     colorType: ColorType;
     type: Styled.TextTabsType;

package/dist/components/Tabs/TextTabs/index.js

@@ -0,0 +1,52 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.TextTabs = void 0;
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const TextTabs = ({ colorType, type, list, value, onChange }) => {
+    switch (type) {
+        case 'fixed':
+            return (react_1.default.createElement(Styled.Fixed.Wrapper, null, list.map((item, idx) => (react_1.default.createElement(Styled.Fixed.Item, { key: idx, colorType: colorType, active: item.value === value, onClick: () => onChange(item.value) }, item.label)))));
+        case 'scroll':
+            return (react_1.default.createElement(Styled.Scroll.Wrapper, null, list.map((item, idx) => (react_1.default.createElement(Styled.Scroll.Item, { key: idx, colorType: colorType, active: item.value === value, onClick: () => onChange(item.value) }, item.label)))));
+        default:
+            return react_1.default.createElement(react_1.default.Fragment, null, "WARN: \uD0C0\uC785\uC744 \uCD94\uAC00\uD574\uC8FC\uC138\uC694");
+    }
+};
+exports.TextTabs = TextTabs;

package/dist/components/Tabs/TextTabs/index.spec.d.ts

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

package/dist/components/Tabs/TextTabs/index.spec.js

@@ -0,0 +1,27 @@
+"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 = {
+    colorType: 'gray',
+    type: 'fixed',
+    value: '1',
+    list: [
+        { label: '라벨1', value: '1' },
+        { label: '라벨2', value: '2' },
+        { label: '라벨3', value: '3' },
+    ],
+    onChange: () => {
+        console.log('onChange');
+    },
+};
+describe('<TextTabs />', () => {
+    it('렌더링 체크', () => {
+        (0, react_2.render)(react_1.default.createElement(_1.TextTabs, Object.assign({}, props)));
+        expect(react_2.screen.getByText('라벨1')).toBeInTheDocument();
+    });
+});

package/dist/components/Tabs/TextTabs/index.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TextTabsProps } from '.';
+type Story = StoryObj<TextTabsProps>;
+declare const meta: Meta<TextTabsProps>;
+export default meta;
+export declare const Story1: Story;
+export declare const Story2: Story;
+export declare const Story3: Story;

package/dist/components/Tabs/TextTabs/index.stories.js

@@ -0,0 +1,99 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Story3 = exports.Story2 = exports.Story1 = void 0;
+const react_1 = __importStar(require("react"));
+const _1 = require(".");
+const meta = {
+    title: 'Component/Tabs/TextTabs',
+    component: _1.TextTabs,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+const Component = (props) => {
+    const [value, setValue] = (0, react_1.useState)(props.list[1].value);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        "selected: ",
+        value,
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(_1.TextTabs, Object.assign({}, props, { value: value, onChange: setValue }))));
+};
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => (react_1.default.createElement("div", { style: { width: '600px', background: 'white', border: '1px solid black', paddingBottom: 25 } },
+        react_1.default.createElement(Component, Object.assign({}, props)))),
+    args: {
+        type: 'fixed',
+        colorType: 'gray',
+        list: [
+            { label: '라벨1', value: '1' },
+            { label: '라벨2', value: '2' },
+            { label: '라벨3', value: '3' },
+        ],
+    },
+};
+exports.Story1.storyName = 'TextTabs (Fixed)';
+exports.Story2 = {
+    render: (props) => (react_1.default.createElement("div", { style: { width: '360px', background: 'white', border: '1px solid black', paddingBottom: 25 } },
+        react_1.default.createElement(Component, Object.assign({}, props)))),
+    args: {
+        type: 'scroll',
+        colorType: 'gray',
+        list: [
+            { label: '라벨1', value: '1' },
+            { label: '라벨2', value: '2' },
+        ],
+    },
+};
+exports.Story2.storyName = 'TextTabs (Short)';
+exports.Story3 = {
+    render: (props) => (react_1.default.createElement("div", { style: { width: '360px', background: 'white', border: '1px solid black', paddingBottom: 25 } },
+        react_1.default.createElement(Component, Object.assign({}, props)))),
+    args: {
+        type: 'scroll',
+        colorType: 'gray',
+        list: [
+            { label: '라벨1', value: '1' },
+            { label: '라벨2', value: '2' },
+            { label: '긴긴컨텐츠라벨3', value: '3' },
+            { label: '라벨4', value: '4' },
+            { label: '라벨5', value: '5' },
+            { label: '라벨6', value: '6' },
+            { label: '라벨7', value: '7' },
+        ],
+    },
+};
+exports.Story3.storyName = 'TextTabs (Long Scrollable)';

package/dist/components/Tabs/TextTabs/index.styled.d.ts

@@ -5,23 +5,23 @@ type ItemProps = {
     colorType: ColorType;
 };
 export declare const Fixed: {
-    Item: import('@emotion/styled').StyledComponent<{
-        theme?: import('@emotion/react').Theme;
+    Item: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
         as?: React.ElementType;
-    } & ItemProps, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    Wrapper: import('@emotion/styled').StyledComponent<{
-        theme?: import('@emotion/react').Theme;
+    } & ItemProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Wrapper: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
         as?: React.ElementType;
-    }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 };
 export declare const Scroll: {
-    Item: import('@emotion/styled').StyledComponent<{
-        theme?: import('@emotion/react').Theme;
+    Item: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
         as?: React.ElementType;
-    } & ItemProps, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    Wrapper: import('@emotion/styled').StyledComponent<{
-        theme?: import('@emotion/react').Theme;
+    } & ItemProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Wrapper: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
         as?: React.ElementType;
-    }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 };
 export {};

package/dist/components/Tabs/TextTabs/index.styled.js

@@ -0,0 +1,85 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Scroll = exports.Fixed = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const common_1 = require("../../../style/common");
+const TextStyles_1 = require("../../../core/TextStyles");
+const utils_1 = require("../../../utils");
+const Colors_1 = require("../../../core/Colors");
+exports.Fixed = {
+    Item: styled_1.default.div `
+		display: inline-block;
+		padding-top: 15px;
+		padding-bottom: 11px;
+		cursor: pointer;
+		text-align: center;
+
+		flex-grow: 1;
+
+		position: relative;
+		${({ active, colorType }) => active
+        ? (0, react_1.css) `
+						${(0, TextStyles_1.headline6)({ color: (0, utils_1.textTabColorStyle)(colorType).on.textColor })};
+						border-bottom: 2px solid ${(0, utils_1.textTabColorStyle)(colorType).on.barColor};
+				  `
+        : (0, react_1.css) `
+						${(0, TextStyles_1.title3)({ color: (0, utils_1.textTabColorStyle)(colorType).off.textColor })};
+						border-bottom: 2px solid ${(0, utils_1.textTabColorStyle)(colorType).off.barColor};
+				  `};
+	`,
+    Wrapper: styled_1.default.div `
+		display: flex;
+		gap: 0px;
+
+		width: 100%;
+		background-color: transparent;
+
+		white-space: nowrap;
+
+		border-bottom: 1px solid ${Colors_1.basicColors.gray50};
+	`,
+};
+exports.Scroll = {
+    Item: styled_1.default.div `
+		display: inline-block;
+		padding: 16px 0;
+		cursor: pointer;
+		text-align: center;
+
+		min-width: max-content;
+
+		position: relative;
+		${({ active, colorType }) => active
+        ? (0, react_1.css) `
+						${(0, TextStyles_1.headline6)({ color: (0, utils_1.textTabColorStyle)(colorType).on.textColor })};
+						border-bottom: 2px solid ${(0, utils_1.textTabColorStyle)(colorType).on.barColor};
+				  `
+        : (0, react_1.css) `
+						${(0, TextStyles_1.title3)({ color: (0, utils_1.textTabColorStyle)(colorType).off.textColor })};
+						border-bottom: 2px solid ${(0, utils_1.textTabColorStyle)(colorType).off.barColor};
+				  `};
+	`,
+    Wrapper: styled_1.default.div `
+		${common_1.scrollStyle}
+
+		display: flex;
+		gap: 30px;
+
+		width: 100%;
+		background-color: transparent;
+
+		white-space: nowrap;
+
+		${(0, utils_1.Smaller)((0, react_1.css) `
+			/* Mobile) 에만 좌우 여백 추가  */
+			padding-left: 20px;
+			padding-right: 20px;
+		`)}
+
+		border-bottom: 1px solid ${Colors_1.basicColors.gray50};
+	`,
+};

package/dist/components/Tabs/index.js

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TextTabs"), exports);
+__exportStar(require("./FillTabs"), exports);

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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { PropsWithChildren } from '../../types/react';
 import * as Styled from './index.styled';
 type TagProps = PropsWithChildren<Styled.TagStyleProps>;