@tripie-pyotato/design-system 0.0.0

package/dist/src/components/List/list.stories.jsx

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowList = exports.ListItem = exports.Default = void 0;
+var react_1 = require("react");
+var hooks_1 = require("../../hooks");
+var Card_1 = require("../TripieCard/Card");
+var List_1 = require("./List");
+var meta = {
+    title: 'tripie-ui/List',
+    component: List_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;
+var Children = function () {
+    return Array.from({ length: 6 }, function (_, index) { return (<Card_1.default.WithCoverImage src={'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg'} alt={'https://media.triple.guide/triple-cms/c_limit,f_auto,h_2048,w_2048/54e3594d-1087-43ff-b760-7231d4103edf.jpeg의 이미지일 수도 있음'} summary={'대자연부터 감성 카페까지, 인생샷을 남길 수 있는 곳'} withBorder={false} title={'여름 제주 인생샷 명소 BEST 7'} key={index}/>); });
+};
+exports.Default = {
+    name: 'Default',
+    args: {
+        children: Children(),
+    },
+};
+exports.ListItem = {
+    name: 'Default',
+    args: {
+        children: Children(),
+    },
+};
+exports.RowList = {
+    name: 'List.Row',
+    render: function () { return (<List_1.default rowView={true}>
+      <Children />
+    </List_1.default>); },
+};

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ACCORDIAN_VARIANTS = void 0;
+var colors_1 = require("../../shared/colors");
+exports.ACCORDIAN_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/MotionSlideUp/MotionSlideUp.jsx

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var framer_motion_1 = require("framer-motion");
+var react_intersection_observer_1 = require("react-intersection-observer");
+var cardMotion = {
+    hidden: { opacity: 0, y: 50 },
+    visible: { opacity: 1, y: 0 },
+};
+var MotionSlideUp = function (_a) {
+    var _b = _a.duration, duration = _b === void 0 ? 1 : _b, _c = _a.delay, delay = _c === void 0 ? 0 : _c, _d = _a.replays, replays = _d === void 0 ? true : _d, children = _a.children, className = _a.className;
+    return (<react_intersection_observer_1.InView>
+      {function (_a) {
+            var inView = _a.inView, ref = _a.ref;
+            return (<framer_motion_1.motion.div animate={inView ? 'visible' : 'hidden'} ref={ref} variants={cardMotion} transition={{ duration: duration, delay: delay, damping: 2, stiffness: 10, replays: replays }} className={className}>
+          {children}
+        </framer_motion_1.motion.div>);
+        }}
+    </react_intersection_observer_1.InView>);
+};
+exports.default = MotionSlideUp;

package/dist/src/components/MotionSlideUp/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("./MotionSlideUp"), exports);
+var MotionSlideUp_1 = require("./MotionSlideUp");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return MotionSlideUp_1.default; } });

package/dist/src/components/Particle/Background/ParticleBackground.jsx

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ParticleBackground;
+var bind_1 = require("classnames/bind");
+var TripieContainer_1 = require("../../TripieContainer");
+var ParticleField_1 = require("../Field/ParticleField");
+var particle_background_module_scss_1 = require("./particle-background.module.scss");
+var cx = bind_1.default.bind(particle_background_module_scss_1.default);
+function ParticleBackground(_a) {
+    var children = _a.children;
+    return (<TripieContainer_1.default className={cx('background')} margin="none">
+      <TripieContainer_1.default className={cx('gradient-bottom')} margin="none"></TripieContainer_1.default>
+      {children}
+      <ParticleField_1.default />
+    </TripieContainer_1.default>);
+}

package/dist/src/components/Particle/Background/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("./ParticleBackground"), exports);
+var ParticleBackground_1 = require("./ParticleBackground");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return ParticleBackground_1.default; } });

package/dist/src/components/Particle/Background/particle-background.stories.jsx

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var react_1 = require("react");
+var hooks_1 = require("../../../hooks");
+var ParticleBackground_1 = require("./ParticleBackground");
+var meta = {
+    title: 'tripie-ui/Particle/Background',
+    component: ParticleBackground_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: 'Default',
+    render: function () { return (<div style={{ height: '100vh', width: '100vw' }}>
+      <ParticleBackground_1.default>default</ParticleBackground_1.default>
+    </div>); },
+};

package/dist/src/components/Particle/Field/ParticleField.jsx

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var Particles_1 = require("../Particles/Particles");
+var bind_1 = require("classnames/bind");
+var particle_field_module_scss_1 = require("./particle-field.module.scss");
+var cx = bind_1.default.bind(particle_field_module_scss_1.default);
+var particles = Array.from({ length: 50 }, function () { return ({
+    x: Math.random() * 1000 - 500,
+    y: Math.random() * 1000 - 500,
+    duration: Math.random() * 10 + 5,
+}); });
+var ParticleField = function () {
+    return (<div className={cx('particle-field')}>
+      {particles.map(function (particle, index) { return (<Particles_1.default key={"".concat(index, "-").concat(particle.x, "-").concat(particle.y, "-").concat(particle.duration)} x={particle.x} y={particle.y} duration={particle.duration}/>); })}
+    </div>);
+};
+exports.default = ParticleField;

package/dist/src/components/Particle/Field/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("./ParticleField"), exports);
+var ParticleField_1 = require("./ParticleField");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return ParticleField_1.default; } });

package/dist/src/components/Particle/Field/particle-field.stories.jsx

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var react_1 = require("react");
+var hooks_1 = require("../../../hooks");
+var ParticleField_1 = require("./ParticleField");
+var meta = {
+    title: 'tripie-ui/Particle/Field',
+    component: ParticleField_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: 'Default',
+    render: function () {
+        return (<div style={{ height: '100vh' }}>
+        <ParticleField_1.default />
+      </div>);
+    },
+};

package/dist/src/components/Particle/Particles/Particles.jsx

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var bind_1 = require("classnames/bind");
+var framer_motion_1 = require("framer-motion");
+var particles_module_scss_1 = require("./particles.module.scss");
+var cx = bind_1.default.bind(particles_module_scss_1.default);
+var Particles = function (_a) {
+    var x = _a.x, y = _a.y, duration = _a.duration;
+    return (<framer_motion_1.motion.div initial={{ opacity: 0, x: 0, y: 0 }} animate={{ opacity: 1, x: x, y: y }} transition={{
+            repeat: Infinity,
+            repeatType: 'mirror',
+            duration: duration,
+        }} className={cx('particle')}/>);
+};
+exports.default = Particles;

package/dist/src/components/RotatingBlur/RotatingBlur.jsx

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var bind_1 = require("classnames/bind");
+var framer_motion_1 = require("framer-motion");
+var rotating_blur_module_scss_1 = require("./rotating-blur.module.scss");
+var cx = bind_1.default.bind(rotating_blur_module_scss_1.default);
+var RotatingBlur = function () {
+    return (<framer_motion_1.motion.div className={cx('pie', 'rotating-blur')} initial={{ rotate: 0 }} animate={{ scale: [1, 1.2, 1.5, 1.2, 1], rotate: 360 }} transition={{
+            duration: 5,
+            times: [0, 0.25, 0.5, 0.75, 1],
+            repeat: Infinity,
+            ease: 'linear',
+        }}>
+      <framer_motion_1.motion.div className={cx('segment', 'segment-1')}></framer_motion_1.motion.div>
+      <framer_motion_1.motion.div className={cx('segment', 'segment-2')}></framer_motion_1.motion.div>
+      <framer_motion_1.motion.div className={cx('segment', 'segment-3')}></framer_motion_1.motion.div>
+    </framer_motion_1.motion.div>);
+};
+exports.default = RotatingBlur;

package/dist/src/components/RotatingBlur/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("./RotatingBlur"), exports);
+var RotatingBlur_1 = require("./RotatingBlur");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return RotatingBlur_1.default; } });

package/dist/src/components/RotatingBlur/rotating-blur.stories.jsx

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var react_1 = require("react");
+var hooks_1 = require("../../hooks");
+var RotatingBlur_1 = require("./RotatingBlur");
+var meta = {
+    title: 'tripie-ui/RotatingBlur',
+    component: RotatingBlur_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 (<div style={{ height: '100vh' }}>
+        <RotatingBlur_1.default />
+      </div>);
+    },
+};

package/dist/src/components/SplashScreen/SplashScreen.jsx

@@ -0,0 +1,22 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var bind_1 = require("classnames/bind");
+var framer_motion_1 = require("framer-motion");
+var TripieContainer_1 = require("../TripieContainer/TripieContainer");
+var splash_screen_module_scss_1 = require("./splash-screen.module.scss");
+var cx = bind_1.default.bind(splash_screen_module_scss_1.default);
+var SplashScreen = function (_a) {
+    var children = _a.children;
+    return (<framer_motion_1.motion.section className={cx('section')} initial={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: '-120%' }} transition={{ duration: 0.8, delay: 1 }}>
+      <TripieContainer_1.default align="center">{children}</TripieContainer_1.default>
+    </framer_motion_1.motion.section>);
+};
+var ControlledSplashScreen = function (_a) {
+    var children = _a.children;
+    return (<framer_motion_1.motion.section className={cx('section')} initial={{ opacity: 1, y: 0 }}>
+      <TripieContainer_1.default align="center">{children}</TripieContainer_1.default>
+    </framer_motion_1.motion.section>);
+};
+SplashScreen.Controlled = ControlledSplashScreen;
+exports.default = SplashScreen;

package/dist/src/components/SplashScreen/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("./SplashScreen"), exports);
+var SplashScreen_1 = require("./SplashScreen");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return SplashScreen_1.default; } });

package/dist/src/components/SplashScreen/splash-screen.stories.jsx

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loading = exports.Default = void 0;
+var react_1 = require("react");
+var hooks_1 = require("../../hooks");
+var TextFillAnimation_1 = require("../TextFill/TextFillAnimation");
+var SplashScreen_1 = require("./SplashScreen");
+var meta = {
+    title: 'tripie-ui/SplashScreen',
+    component: SplashScreen_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: '로딩 시 화면 전체를 차지하며 스크롤업되는 splash screen 컴포넌트입니다.',
+            },
+        },
+    },
+    tags: ['autodocs'],
+    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 (<div style={{ height: '100vh' }}>
+      <SplashScreen_1.default>splash</SplashScreen_1.default>
+    </div>); },
+};
+exports.Loading = {
+    name: 'Loading',
+    render: function () { return (<div style={{ height: '100vh' }}>
+      <SplashScreen_1.default>
+        <TextFillAnimation_1.default.Title>Tripie.</TextFillAnimation_1.default.Title>
+      </SplashScreen_1.default>
+    </div>); },
+};

package/dist/src/components/Switch/Switch.jsx

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var bind_1 = require("classnames/bind");
+var framer_motion_1 = require("framer-motion");
+var switch_module_scss_1 = require("./switch.module.scss");
+var variants_1 = require("./variants");
+var cx = bind_1.default.bind(switch_module_scss_1.default);
+var Switch = function (_a) {
+    var current = _a.current, cycle = _a.cycle, className = _a.className, text = _a.text;
+    return (<framer_motion_1.motion.div className={cx('switch', className)} animate={current} onTapStart={function () { return cycle(); }}>
+      <framer_motion_1.motion.div className={cx('background')} variants={variants_1.SWITCH_VARIANTS.BACKGROUND} transition={{ ease: 'easeInOut' }}/>
+      <framer_motion_1.motion.div className={cx('button')} variants={variants_1.SWITCH_VARIANTS.BUTTON} transition={{ ease: 'easeInOut' }}/>
+      <framer_motion_1.motion.div className={cx('switch-text')} variants={variants_1.SWITCH_VARIANTS.TEXT} transition={{ ease: 'easeInOut' }}>
+        {text}
+      </framer_motion_1.motion.div>
+    </framer_motion_1.motion.div>);
+};
+exports.default = Switch;

package/dist/src/components/Switch/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("./Switch"), exports);
+var Switch_1 = require("./Switch");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return Switch_1.default; } });

package/dist/src/components/Switch/switch.stories.jsx

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var react_1 = require("react");
+var hooks_1 = require("../../hooks");
+var useCycle_1 = require("../../hooks/useCycle");
+var Switch_1 = require("./Switch");
+var meta = {
+    title: 'tripie-ui/Switch',
+    component: Switch_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: 'Particle',
+    render: function () {
+        var _a = (0, useCycle_1.useCycle)('off', 'on'), current = _a[0], cycle = _a[1];
+        return <Switch_1.default current={current} cycle={cycle} text={current}/>;
+    },
+};

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SWITCH_VARIANTS = void 0;
+var colors_1 = require("../../shared/colors");
+exports.SWITCH_VARIANTS = {
+    BACKGROUND: {
+        off: function () { return ({
+            backgroundColor: colors_1.default[40],
+            borderColor: colors_1.default[400],
+        }); },
+        on: function () { return ({
+            backgroundColor: colors_1.default[50],
+            borderColor: colors_1.default[50],
+        }); },
+    },
+    BUTTON: {
+        off: function () { return ({
+            x: '150%',
+            backgroundColor: colors_1.default[40],
+        }); },
+        on: function () { return ({
+            x: '30%',
+            backgroundColor: colors_1.default[50],
+        }); },
+    },
+    TEXT: {
+        off: function () { return ({
+            x: '0%',
+        }); },
+        on: function () { return ({
+            x: '200%',
+            color: colors_1.default[50],
+        }); },
+    },
+};

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

@@ -0,0 +1,72 @@
+"use strict";
+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 });
+var bind_1 = require("classnames/bind");
+var framer_motion_1 = require("framer-motion");
+var TripieContainer_1 = require("../TripieContainer/TripieContainer");
+var text_module_scss_1 = require("./text.module.scss");
+var variants_1 = require("./variants");
+var cx = bind_1.default.bind(text_module_scss_1.default);
+var Text = function (_a) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    var splitText = "".concat(children).split('\n').map(function (sentence, index) {
+        return (<span className={cx('text', className)} key={index + sentence} {...props}>
+        {sentence}
+      </span>);
+    });
+    return <>{splitText}</>;
+};
+var AccentedText = function (_a) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (<span className={cx('text', 'accented', className)} {...props}>
+      {children}
+    </span>);
+};
+var FlickText = function (_a) {
+    var children = _a.children, className = _a.className;
+    return (<framer_motion_1.motion.span className={cx('flick', className)} variants={variants_1.VARIANTS['TEXT']}>
+      {children}
+    </framer_motion_1.motion.span>);
+};
+var AnimatedText = 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, _e = _a.animate, animate = _e === void 0 ? 'rest' : _e;
+    return (<framer_motion_1.motion.div className={cx('button', withBorder && 'with-border', className)} initial="rest" whileHover={disabled ? 'rest' : 'hover'} whileTap={disabled ? 'rest' : 'hover'} animate={animate}>
+      <FlickText>{children}</FlickText>
+      <FlickText className={cx('hovered')}>{otherChild}</FlickText>
+    </framer_motion_1.motion.div>);
+};
+var JumpingText = function (_a) {
+    var children = _a.children, className = _a.className;
+    return (<TripieContainer_1.default className={cx('box')} margin="none">
+      {children.split('').map(function (item, index) { return (<framer_motion_1.motion.span key={index + item} className={cx('box', className)} animate={{ y: [-5, 0] }} transition={{
+                delay: index * 0.1,
+                duration: 0.5,
+                repeat: Infinity,
+                repeatType: 'reverse',
+            }}>
+          {item}
+        </framer_motion_1.motion.span>); })}
+    </TripieContainer_1.default>);
+};
+var SlidingText = function (_a) {
+    var children = _a.children, className = _a.className, transition = _a.transition, _b = _a.animate, animate = _b === void 0 ? 'fly' : _b, _c = _a.duration, duration = _c === void 0 ? 5 : _c;
+    return (<framer_motion_1.motion.div className={cx(className)} initial="rest" animate={animate} transition={transition} variants={variants_1.VARIANTS.SLIDE(duration)}>
+      {children}
+    </framer_motion_1.motion.div>);
+};
+Text.Accented = AccentedText;
+Text.Slide = SlidingText;
+Text.Animated = AnimatedText;
+Text.Flick = FlickText;
+Text.Jump = JumpingText;
+exports.default = Text;

package/dist/src/components/Text/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("./Text"), exports);
+var Text_1 = require("./Text");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return Text_1.default; } });