@tripie-pyotato/design-system 0.0.0

package/dist/src/components/Text/text.stories.jsx

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SlidingText = exports.JumpingText = exports.Animated = exports.Accented = exports.Default = void 0;
+var react_1 = require("react");
+var hooks_1 = require("../../hooks");
+var Text_1 = require("./Text");
+var meta = {
+    title: 'tripie-ui/Typography/Text',
+    tags: ['autodocs'],
+    component: Text_1.default,
+    decorators: [
+        function (story, context) {
+            var _a = (0, hooks_1.useAppTheme)(), mode = _a.mode, setMode = _a.setMode;
+            var selectedTheme = context.globals.theme || mode;
+            (0, react_1.useEffect)(function () {
+                setMode(selectedTheme);
+            }, [selectedTheme]);
+            return <div className={"".concat(context.globals.theme)}>{story()}</div>;
+        },
+    ],
+};
+exports.default = meta;
+exports.Default = {
+    name: 'Default',
+    args: {
+        children: 'default 기본',
+    },
+};
+exports.Accented = {
+    name: 'Text.Accented',
+    render: function () { return <Text_1.default.Accented>accented text</Text_1.default.Accented>; },
+};
+exports.Animated = {
+    name: 'Text.Animated',
+    render: function () { return <Text_1.default.Animated otherChild={'other text'}>animated text</Text_1.default.Animated>; },
+};
+exports.JumpingText = {
+    name: 'Text.Jump',
+    render: function () { return <Text_1.default.Jump>jumping text</Text_1.default.Jump>; },
+};
+exports.SlidingText = {
+    name: 'Text.Slide',
+    render: function () { return <Text_1.default.Slide>sliding text</Text_1.default.Slide>; },
+};

package/dist/src/components/Text/variants.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VARIANTS = void 0;
+exports.VARIANTS = {
+    TEXT: {
+        rest: { opacity: 1, y: '105%', duration: 0.5 },
+        hover: {
+            opacity: 1,
+            y: '-105%',
+            transition: {
+                duration: 0.5,
+            },
+        },
+    },
+    TITLE: function (restY, hoverY) {
+        return ({
+            rest: { opacity: 1, y: restY, duration: 0.5 },
+            hover: {
+                opacity: 1,
+                y: hoverY,
+                transition: {
+                    duration: 0.5,
+                },
+            },
+        });
+    },
+    SLIDE: function (duration) {
+        return ({
+            rest: function () { return ({}); },
+            fly: function () { return ({
+                translateX: '100vw',
+                transition: {
+                    repeat: Infinity,
+                    duration: duration,
+                    bounce: 1,
+                },
+            }); },
+        });
+    },
+};

package/dist/src/components/TextFill/TextFillAnimation.jsx

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var bind_1 = require("classnames/bind");
+var framer_motion_1 = require("framer-motion");
+var react_intersection_observer_1 = require("react-intersection-observer");
+var colors_1 = require("../../shared/colors");
+var TripieContainer_1 = require("../TripieContainer/TripieContainer");
+var text_fill_animation_module_scss_1 = require("./text-fill-animation.module.scss");
+var cx = bind_1.default.bind(text_fill_animation_module_scss_1.default);
+var TextFillAnimation = function (_a) {
+    var text = _a.text, baseColor = _a.baseColor, _b = _a.endColor, endColor = _b === void 0 ? colors_1.default[0] : _b, _c = _a.duration, duration = _c === void 0 ? 1 : _c, _d = _a.delay, delay = _d === void 0 ? 0 : _d, _e = _a.replays, replays = _e === void 0 ? true : _e;
+    return (<react_intersection_observer_1.InView>
+      {function (_a) {
+            var inView = _a.inView, ref = _a.ref;
+            return (<TripieContainer_1.default margin="none" className={cx('animation', baseColor == null ? 'default' : '')} ref={ref}>
+          <span className={cx('wrap')}>
+            {text}
+            <framer_motion_1.motion.span className={cx('text')} style={{
+                    color: baseColor !== null && baseColor !== void 0 ? baseColor : endColor,
+                }} animate={inView ? 'visible' : 'hidden'} initial={{ width: '0%' }} variants={{
+                    visible: { width: '100%' },
+                    hidden: { width: '0%' },
+                }} transition={{ baseColor: baseColor, endColor: endColor, duration: duration, delay: delay, replays: replays }}>
+              {text}
+            </framer_motion_1.motion.span>
+          </span>
+        </TripieContainer_1.default>);
+        }}
+    </react_intersection_observer_1.InView>);
+};
+var TitleTextFillAnimation = function (_a) {
+    var children = _a.children, _b = _a.repeat, repeat = _b === void 0 ? 1 : _b, _c = _a.duration, duration = _c === void 0 ? 1 : _c;
+    return (<react_intersection_observer_1.InView>
+      {function (_a) {
+            var inView = _a.inView, ref = _a.ref;
+            return (<div className={cx('animation', 'pre-title', 'default')} ref={ref}>
+          <span className={cx('wrap')}>
+            {children}
+            <framer_motion_1.motion.span className={cx('text', 'title')} animate={inView ? 'visible' : 'hidden'} initial={{ width: '0%' }} variants={{
+                    visible: { width: '100%' },
+                    hidden: { width: '0%' },
+                }} transition={{ repeat: repeat, duration: duration }}>
+              {children}
+            </framer_motion_1.motion.span>
+          </span>
+        </div>);
+        }}
+    </react_intersection_observer_1.InView>);
+};
+TextFillAnimation.Title = TitleTextFillAnimation;
+exports.default = TextFillAnimation;

package/dist/src/components/TextFill/index.js

@@ -0,0 +1,20 @@
+"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 });
+exports.default = void 0;
+__exportStar(require("./TextFillAnimation"), exports);
+var TextFillAnimation_1 = require("./TextFillAnimation");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return TextFillAnimation_1.default; } });

package/dist/src/components/TextFill/text-fill-animation.stories.jsx

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TitleTextFillAnimation = exports.CustomStart_COLORS50End_COLOR40 = exports.CustomEnd_COLORS40 = exports.CustomStart_COLORS40 = exports.Default = void 0;
+var react_1 = require("react");
+var hooks_1 = require("../../hooks");
+var colors_1 = require("../../shared/colors");
+var TextFillAnimation_1 = require("./TextFillAnimation");
+var meta = {
+    title: 'tripie-ui/TextFillAnimation',
+    component: TextFillAnimation_1.default,
+    tags: ['autodocs'],
+    argTypes: {},
+    parameters: {
+        docs: {
+            description: {
+                component: '텍스트 색상이 채워지는 애니메이션 효과를 지닌 컴포넌트입니다.',
+            },
+        },
+    },
+    decorators: [
+        function (story, context) {
+            var _a = (0, hooks_1.useAppTheme)(), mode = _a.mode, setMode = _a.setMode;
+            var selectedTheme = context.globals.theme || mode;
+            (0, react_1.useEffect)(function () {
+                setMode(selectedTheme);
+            }, [selectedTheme]);
+            return <div className={"".concat(context.globals.theme)}>{story()}</div>;
+        },
+    ],
+};
+exports.default = meta;
+exports.Default = {
+    name: 'Default',
+    render: function () { return <TextFillAnimation_1.default text={'Text fill animation'}/>; },
+};
+exports.CustomStart_COLORS40 = {
+    name: 'TextFillAnimation.START_#858585',
+    render: function () { return <TextFillAnimation_1.default text={'Text fill animation'} baseColor={colors_1.default['40']}/>; },
+};
+exports.CustomEnd_COLORS40 = {
+    name: 'TextFillAnimation.END_#858585',
+    render: function () { return <TextFillAnimation_1.default text={'Text fill animation'} endColor={colors_1.default['40']}/>; },
+};
+exports.CustomStart_COLORS50End_COLOR40 = {
+    name: 'TextFillAnimation.START_#d3ffca.END_#858585',
+    render: function () { return <TextFillAnimation_1.default text={'Text fill animation'} baseColor={colors_1.default['50']} endColor={colors_1.default['40']}/>; },
+};
+exports.TitleTextFillAnimation = {
+    name: 'TextFillAnimation.Title',
+    render: function () { return <TextFillAnimation_1.default.Title repeat={Infinity}>Title text fill animation</TextFillAnimation_1.default.Title>; },
+};

package/dist/src/components/TextUnderlineAnimation/TextUnderlineAnimation.jsx

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var bind_1 = require("classnames/bind");
+var framer_motion_1 = require("framer-motion");
+var Divider_1 = require("../Divider");
+var text_underline_module_scss_1 = require("./text-underline.module.scss");
+var variants_1 = require("./variants");
+var cx = bind_1.default.bind(text_underline_module_scss_1.default);
+var TextUnderLineAnimation = function (_a) {
+    var children = _a.children, onClick = _a.onClick, className = _a.className;
+    return (<framer_motion_1.motion.div className={cx('wrap', className)} onClick={onClick} variants={variants_1.TEXT_UNDERLINE_VARIANTS} whileHover={'open'} whileTap={'open'}>
+      {children}
+      <Divider_1.default variants={variants_1.TEXT_UNDERLINE_VARIANTS.DIVIDER} className={cx('divider')}/>
+    </framer_motion_1.motion.div>);
+};
+exports.default = TextUnderLineAnimation;

package/dist/src/components/TextUnderlineAnimation/index.js

@@ -0,0 +1,20 @@
+"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 });
+exports.default = void 0;
+__exportStar(require("./TextUnderlineAnimation"), exports);
+var TextUnderlineAnimation_1 = require("./TextUnderlineAnimation");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return TextUnderlineAnimation_1.default; } });

package/dist/src/components/TextUnderlineAnimation/text-underline-animation.stories.jsx

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var react_1 = require("react");
+var hooks_1 = require("../../hooks");
+var TextUnderlineAnimation_1 = require("./TextUnderlineAnimation");
+var meta = {
+    title: 'tripie-ui/TextUnderlineAnimation',
+    component: TextUnderlineAnimation_1.default,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: '호버 시 텍스트 밑줄 애니메이션이 동작하는 컴포넌트입니다.',
+            },
+        },
+    },
+    argTypes: {},
+    decorators: [
+        function (story, context) {
+            var _a = (0, hooks_1.useAppTheme)(), mode = _a.mode, setMode = _a.setMode;
+            var selectedTheme = context.globals.theme || mode;
+            (0, react_1.useEffect)(function () {
+                setMode(selectedTheme);
+            }, [selectedTheme]);
+            return <div className={"".concat(context.globals.theme)}>{story()}</div>;
+        },
+    ],
+};
+exports.default = meta;
+exports.Default = {
+    name: 'TextUnderlineAnimation',
+    args: { children: 'hover to activate text underline animation' },
+};

package/dist/src/components/TextUnderlineAnimation/variants.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TEXT_UNDERLINE_VARIANTS = void 0;
+var colors_1 = require("../../shared/colors");
+exports.TEXT_UNDERLINE_VARIANTS = {
+    DIVIDER: {
+        closed: function () { return ({
+            x: '0%',
+            width: '0%',
+            translateY: '-10px',
+            backgroundColor: 'transparent',
+        }); },
+        open: function () { return ({
+            x: '0%',
+            backgroundColor: colors_1.default[50],
+            width: '100%',
+            transition: {
+                damping: 10,
+                stiffness: 100,
+                duration: 0.5,
+            },
+        }); },
+    },
+};

package/dist/src/components/TripieButton/Animated/AnimateButton.spec.jsx

@@ -0,0 +1,106 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@testing-library/react");
+var user_event_1 = require("@testing-library/user-event");
+var vitest_1 = require("vitest");
+var AnimatedButton_1 = require("./AnimatedButton");
+(0, vitest_1.describe)('AnimatedButton Component', function () {
+    (0, vitest_1.it)('텍스트가 하나의 텍스트 "button"만 있다.', function () {
+        (0, react_1.render)(<AnimatedButton_1.default>button</AnimatedButton_1.default>);
+        var buttonElement = react_1.screen.getByRole('button', { name: /button/i });
+        (0, vitest_1.expect)(buttonElement).toBeInTheDocument();
+        (0, vitest_1.expect)(buttonElement).toHaveTextContent('button');
+    });
+    (0, vitest_1.it)('텍스트가 디폴트 텍스트 "button"와 "other child"가 있다.', function () {
+        (0, react_1.render)(<AnimatedButton_1.default otherChild={'other child'}>button</AnimatedButton_1.default>);
+        var buttonElement = react_1.screen.getByRole('button', { name: /button/i });
+        (0, vitest_1.expect)(buttonElement).toBeInTheDocument();
+        (0, vitest_1.expect)(buttonElement).toHaveTextContent('button');
+        (0, vitest_1.expect)(buttonElement).toHaveTextContent('other child');
+    });
+    (0, vitest_1.it)('버튼에 마우스를 올리면 otherChild와 original text가 translateY(-105%)로 이동한다.', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var buttonElement, hoveredOriginalText, hoveredChildText;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    (0, react_1.render)(<AnimatedButton_1.default otherChild="other child">original text</AnimatedButton_1.default>);
+                    buttonElement = react_1.screen.getByRole('button');
+                    // 버튼 호버 시
+                    return [4 /*yield*/, user_event_1.default.hover(buttonElement)];
+                case 1:
+                    // 버튼 호버 시
+                    _a.sent();
+                    hoveredOriginalText = react_1.screen.getByText(/original text/i);
+                    hoveredChildText = react_1.screen.getByText(/original text/i);
+                    (0, vitest_1.expect)(getComputedStyle(hoveredOriginalText).transform).toContain('translateY(105%)');
+                    (0, vitest_1.expect)(getComputedStyle(hoveredChildText).transform).toContain('translateY(105%)');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    (0, vitest_1.it)('disabled={true} 설정 시 비활성화된다.', function () {
+        (0, react_1.render)(<AnimatedButton_1.default disabled={true}>button</AnimatedButton_1.default>);
+        var buttonElement = react_1.screen.getByRole('button', { name: /button/i });
+        (0, vitest_1.expect)(buttonElement).toBeInTheDocument();
+        (0, vitest_1.expect)(buttonElement).toBeDisabled();
+    });
+    (0, vitest_1.it)('withBorder={true} 설정 시 버튼 테두리 스타일이 적용되어scss module이므로 className에 `with-border`가 포함된다.', function () {
+        (0, react_1.render)(<AnimatedButton_1.default withBorder={true}>button</AnimatedButton_1.default>);
+        var buttonElement = react_1.screen.getByRole('button', { name: /button/i });
+        (0, vitest_1.expect)(buttonElement).toBeInTheDocument();
+        (0, vitest_1.expect)(buttonElement.className).toMatch(/with-border/);
+    });
+    // ! 🤔 버튼 길이를 제한해야할듯, 텍스트가 너무 많으면 가독성도 안좋아지고 애니메이션도 깨진다. 어떻게 제한할까?
+    //   it('버튼이 긴 텍스트를 포함하고, 잘리지 않고, 크기가 조정된다.', () => {
+    //     const longText = 'Super long button text. max max max'.repeat(3); // 105자
+    //     render(<AnimatedButton>{longText}</AnimatedButton>);
+    //     const button = screen.getByRole('button');
+    //     // ✅ Ensure button contains full text
+    //     expect(button).toHaveTextContent(longText);
+    //     // ✅ Ensure button width expands (adjust 200px based on your design)
+    //     // expect(button.scrollWidth).toBeGreaterThan(200);
+    //     // ✅ Ensure text is not truncated (checks if scrollWidth > clientWidth)
+    //     // expect(button.scrollWidth).toBeGreaterThan(button.clientWidth);
+    //     expect(getComputedStyle(button).width).not.toBe('0px');
+    //     console.log(button.scrollWidth);
+    //     expect(button.textContent?.length).toBeGreaterThan(10);
+    //     // ✅ Optional: Ensure button text is under a reasonable limit (e.g., 30 chars)
+    //     expect(longText.length).toBeLessThanOrEqual(105);
+    //   });
+});

package/dist/src/components/TripieButton/Animated/AnimatedButton.jsx

@@ -0,0 +1,16 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var bind_1 = require("classnames/bind");
+var framer_motion_1 = require("framer-motion");
+var Text_1 = require("../../Text");
+var animated_button_module_scss_1 = require("./animated-button.module.scss");
+var cx = bind_1.default.bind(animated_button_module_scss_1.default);
+var AnimatedButton = function (_a) {
+    var children = _a.children, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.otherChild, otherChild = _c === void 0 ? children : _c, _d = _a.withBorder, withBorder = _d === void 0 ? false : _d, onClick = _a.onClick, _e = _a.animate, animate = _e === void 0 ? 'rest' : _e, _f = _a.withMinWidth, withMinWidth = _f === void 0 ? false : _f;
+    return (<framer_motion_1.motion.button disabled={disabled} onClick={onClick} className={cx('button', withBorder && 'with-border', withMinWidth && 'min', className)} initial="rest" whileHover={disabled ? 'rest' : 'hover'} whileTap={disabled ? 'rest' : 'hover'} animate={animate}>
+      <Text_1.default.Flick>{children}</Text_1.default.Flick>
+      <Text_1.default.Flick className={cx('hovered')}>{otherChild}</Text_1.default.Flick>
+    </framer_motion_1.motion.button>);
+};
+exports.default = AnimatedButton;

package/dist/src/components/TripieButton/Animated/animated-button.stories.jsx

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimatedButtonWithBorderWithSuperLongText = exports.AnimatedButtonWithBorderWithLongText = exports.AnimatedButtonWithBorder = exports.AnimatedButtonWithOtherChild = exports.Default = void 0;
+var react_1 = require("react");
+var _1 = require(".");
+var hooks_1 = require("../../../hooks");
+var meta = {
+    title: 'tripie-ui/Button/Animated',
+    component: _1.default,
+    tags: ['autodocs'],
+    argTypes: {},
+    decorators: [
+        function (story, context) {
+            var _a = (0, hooks_1.useAppTheme)(), mode = _a.mode, setMode = _a.setMode;
+            var selectedTheme = context.globals.theme || mode;
+            (0, react_1.useEffect)(function () {
+                setMode(selectedTheme);
+            }, [selectedTheme]);
+            return <div className={"".concat(context.globals.theme)}>{story()}</div>;
+        },
+    ],
+};
+exports.default = meta;
+exports.Default = {
+    name: 'AnimatedButton.Default',
+    args: {
+        children: 'Default',
+    },
+};
+exports.AnimatedButtonWithOtherChild = {
+    name: 'AnimatedButton.WithOtherChild',
+    args: {
+        children: 'Default',
+        otherChild: 'Other child',
+    },
+};
+exports.AnimatedButtonWithBorder = {
+    name: 'AnimatedButton.WithBorder',
+    args: {
+        children: 'AnimatedButton.WithBorder',
+        withBorder: true,
+    },
+};
+exports.AnimatedButtonWithBorderWithLongText = {
+    name: 'AnimatedButton.WithBorder.LongText',
+    args: {
+        children: 'super long button text. see how it looks like!',
+        withBorder: true,
+    },
+};
+var longText = 'Super long button text. max max max max max'.repeat(3);
+exports.AnimatedButtonWithBorderWithSuperLongText = {
+    name: 'AnimatedButton.WithBorder.Super.LongText',
+    args: {
+        children: longText,
+        withBorder: true,
+    },
+};

package/dist/src/components/TripieButton/Animated/index.js

@@ -0,0 +1,20 @@
+"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 });
+exports.default = void 0;
+__exportStar(require("./AnimatedButton"), exports);
+var AnimatedButton_1 = require("./AnimatedButton");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return AnimatedButton_1.default; } });

package/dist/src/components/TripieButton/Animated/variants.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BUTTON_VARIANTS = void 0;
+exports.BUTTON_VARIANTS = {
+    TEXT: {
+        rest: { opacity: 1, y: 15, duration: 0.5 },
+        hover: {
+            opacity: 1,
+            y: -15,
+            transition: {
+                duration: 0.5,
+            },
+        },
+    },
+};

package/dist/src/components/TripieButton/MenuToggle/MenuItem/index.jsx

@@ -0,0 +1,15 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var bind_1 = require("classnames/bind");
+var framer_motion_1 = require("framer-motion");
+var menu_item_module_scss_1 = require("./menu-item.module.scss");
+var variants_1 = require("./variants");
+var cx = bind_1.default.bind(menu_item_module_scss_1.default);
+var MenuItem = function (_a) {
+    var children = _a.children;
+    return (<framer_motion_1.motion.li className={cx('menu-item')} variants={variants_1.MENU_ITEM_VARIANT} whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }}>
+      {children}
+    </framer_motion_1.motion.li>);
+};
+exports.default = MenuItem;

package/dist/src/components/TripieButton/MenuToggle/MenuItem/menu-item.stories.jsx

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var react_1 = require("react");
+var _1 = require(".");
+var hooks_1 = require("../../../../hooks");
+var meta = {
+    title: 'tripie-ui/Button/Menu/Item',
+    component: _1.default,
+    tags: ['autodocs'],
+    argTypes: {},
+    parameters: {
+        docs: {
+            description: {
+                component: '네비게이션 토글 버튼이 열린 상태에서 보이는 메뉴 리스트의 아이템 컴포넌트. 호버 시 확대 애니메이션이 동작합니다.',
+            },
+        },
+    },
+    decorators: [
+        function (story, context) {
+            var _a = (0, hooks_1.useAppTheme)(), mode = _a.mode, setMode = _a.setMode;
+            var selectedTheme = context.globals.theme || mode;
+            (0, react_1.useEffect)(function () {
+                setMode(selectedTheme);
+            }, [selectedTheme]);
+            return <div className={"".concat(context.globals.theme)}>{story()}</div>;
+        },
+    ],
+};
+exports.default = meta;
+exports.Default = {
+    name: 'Default',
+    render: function () {
+        return <_1.default>아이템1</_1.default>;
+    },
+};

package/dist/src/components/TripieButton/MenuToggle/MenuItem/variants.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MENU_ITEM_VARIANT = void 0;
+exports.MENU_ITEM_VARIANT = {
+    open: {
+        y: 0,
+        opacity: 1,
+        transition: {
+            y: { stiffness: 1000, velocity: -100 },
+        },
+    },
+    closed: {
+        y: 50,
+        opacity: 0,
+        transition: {
+            y: { stiffness: 1000 },
+        },
+    },
+};

package/dist/src/components/TripieButton/MenuToggle/MenuList/index.jsx

@@ -0,0 +1,15 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var bind_1 = require("classnames/bind");
+var framer_motion_1 = require("framer-motion");
+var menu_list_module_scss_1 = require("./menu-list.module.scss");
+var variants_1 = require("./variants");
+var cx = bind_1.default.bind(menu_list_module_scss_1.default);
+var MenuList = function (_a) {
+    var children = _a.children;
+    return (<framer_motion_1.motion.ul className={cx('navigation')} variants={variants_1.NAVIGATION_VARIANT}>
+      {children}
+    </framer_motion_1.motion.ul>);
+};
+exports.default = MenuList;