@tripie-pyotato/design-system 0.0.0

package/dist/components/typography/text/_text.stories.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.SuperLongTextPreserveLin = exports.SuperLongText = exports.PreserveLine = exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("../../../hooks");
+const _text_1 = __importDefault(require("./_text"));
+const meta = {
+    title: "tripie-ui/Typography/Text",
+    tags: ["autodocs"],
+    component: _text_1.default,
+    decorators: [
+        (story, context) => {
+            const { mode, setMode, setControl } = (0, hooks_1.useAppTheme)();
+            const selectedTheme = context.globals.theme || mode;
+            (0, react_1.useEffect)(() => {
+                setMode(selectedTheme);
+                setControl("user");
+            }, [selectedTheme]);
+            return (0, jsx_runtime_1.jsx)("div", { className: `${context.globals.theme}`, children: story() });
+        },
+    ],
+};
+exports.default = meta;
+exports.Default = {
+    name: "Default",
+    args: {
+        children: "default 기본",
+    },
+};
+exports.PreserveLine = {
+    name: "PreserveLine",
+    args: {
+        children: "안녕하세요.\n줄바꿈이되나요?",
+    },
+};
+exports.SuperLongText = {
+    name: "SuperLongText/Ellipsis",
+    args: {
+        children: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ea libero itaque sunt corrupti, nulla asperiores nesciunt distinctio sint ad harum quia minus soluta eveniet eius vero ducimus? Eum, quae? orem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ea libero itaque sunt corrupti, nulla asperiores nesciunt distinctio sint ad harum quia minus soluta eveniet eius vero ducimus? Eum, quae? orem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ea libero itaque sunt corrupti, nulla asperiores nesciunt distinctio sint ad harum quia minus soluta eveniet eius vero ducimus? Eum, quae? orem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ea libero itaque sunt corrupti, nulla asperiores nesciunt distinctio sint ad harum quia minus soluta eveniet eius vero ducimus? Eum, quae? orem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ea libero itaque sunt corrupti, nulla asperiores nesciunt distinctio sint ad harum quia minus soluta eveniet eius vero ducimus? Eum, quae? orem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ea libero itaque sunt corrupti, nulla asperiores nesciunt distinctio sint ad harum quia minus soluta eveniet eius vero ducimus? Eum, quae? orem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ea libero itaque sunt corrupti, nulla asperiores nesciunt distinctio sint ad harum quia minus soluta eveniet eius vero ducimus? Eum, quae? orem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ea libero itaque sunt corrupti, nulla asperiores nesciunt distinctio sint ad harum quia minus soluta eveniet eius vero ducimus? Eum, quae?",
+    },
+};
+exports.SuperLongTextPreserveLin = {
+    name: "SuperLongText/PreserveLine",
+    args: {
+        children: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n Nihil ea libero itaque sunt corrupti, nulla asperiores nesciunt distinctio sint ad harum quia minus soluta eveniet eius vero ducimus? Eum, quae? orem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ea libero itaque sunt corrupti, nulla asperiores nesciunt distinctio sint ad harum quia minus soluta eveniet eius vero ducimus? Eum, quae? \n\n orem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ea libero itaque sunt corrupti, nulla asperiores nesciunt distinctio sint ad harum quia minus soluta eveniet eius vero ducimus? Eum, quae? \n orem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ea libero itaque sunt corrupti, nulla asperiores nesciunt distinctio sint ad harum quia minus soluta eveniet eius vero ducimus? Eum, quae? orem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ea libero itaque sunt corrupti, nulla asperiores nesciunt distinctio sint ad harum quia minus soluta eveniet eius vero ducimus? Eum, quae? orem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ea libero itaque sunt corrupti, nulla asperiores nesciunt distinctio sint ad harum quia minus soluta eveniet eius vero ducimus? Eum, quae? orem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ea libero itaque sunt corrupti, nulla asperiores nesciunt distinctio sint ad harum quia minus soluta eveniet eius vero ducimus? Eum, quae? orem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ea libero itaque sunt corrupti, nulla asperiores nesciunt distinctio sint ad harum quia minus soluta eveniet eius vero ducimus? Eum, quae?",
+    },
+    decorators: [
+        (story) => {
+            return story().type.Paragraph({
+                children: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n Nihil ea libero itaque sunt corrupti, nulla asperiores nesciunt distinctio sint ad harum quia minus soluta eveniet eius vero ducimus? Eum, quae? orem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ea libero itaque sunt corrupti, nulla asperiores nesciunt distinctio sint ad harum quia minus soluta eveniet eius vero ducimus? Eum, quae? \n\n orem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ea libero itaque sunt corrupti, nulla asperiores nesciunt distinctio sint ad harum quia minus soluta eveniet eius vero ducimus? Eum, quae? \n orem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ea libero itaque sunt corrupti, nulla asperiores nesciunt distinctio sint ad harum quia minus soluta eveniet eius vero ducimus? Eum, quae? orem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ea libero itaque sunt corrupti, nulla asperiores nesciunt distinctio sint ad harum quia minus soluta eveniet eius vero ducimus? Eum, quae? orem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ea libero itaque sunt corrupti, nulla asperiores nesciunt distinctio sint ad harum quia minus soluta eveniet eius vero ducimus? Eum, quae? orem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ea libero itaque sunt corrupti, nulla asperiores nesciunt distinctio sint ad harum quia minus soluta eveniet eius vero ducimus? Eum, quae? orem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ea libero itaque sunt corrupti, nulla asperiores nesciunt distinctio sint ad harum quia minus soluta eveniet eius vero ducimus? Eum, quae?",
+            });
+        },
+    ],
+};

package/dist/components/typography/text/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./_text";
+export { default } from "./_text";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/typography/text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/text/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/typography/text/index.js

@@ -0,0 +1,25 @@
+"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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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 __importDefault(_text_1).default; } });
+// export * from "./_typography";
+// export {default} from "./_typography";

package/dist/fonts/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./fonts";
+export { default } from "./fonts";
+//# sourceMappingURL=index.d.ts.map

package/dist/fonts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/fonts/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/dist/fonts/index.js

@@ -0,0 +1,23 @@
+"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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./fonts"), exports);
+var fonts_1 = require("./fonts");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(fonts_1).default; } });

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./useAppTheme";
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/hooks/index.js

@@ -0,0 +1,17 @@
+"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("./useAppTheme"), exports);

package/dist/hooks/useAppTheme.d.ts

@@ -0,0 +1,21 @@
+declare const THEME_MODE: {
+    readonly DARK: "dark";
+    readonly LIGHT: "light";
+};
+declare const CONTROL_MODE: {
+    readonly USER: "user";
+    readonly OS_DEFAULT: "os_default";
+};
+type ThemeMode = (typeof THEME_MODE)[keyof typeof THEME_MODE];
+type ControlMode = (typeof CONTROL_MODE)[keyof typeof CONTROL_MODE];
+type UseAppThemeOutput = {
+    mode: ThemeMode;
+    toggle: () => void;
+    setLight: () => void;
+    setDark: () => void;
+    setMode: (mode: ThemeMode) => void;
+    setControl: (control: ControlMode) => void;
+};
+export declare const useAppTheme: () => UseAppThemeOutput;
+export {};
+//# sourceMappingURL=useAppTheme.d.ts.map

package/dist/hooks/useAppTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAppTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useAppTheme.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,UAAU;;;CAGN,CAAC;AAEX,QAAA,MAAM,YAAY;;;CAGR,CAAC;AAEX,KAAK,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC;AAC9D,KAAK,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAEpE,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,WAAW,QAAO,iBAoC9B,CAAC"}

package/dist/hooks/useAppTheme.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAppTheme = void 0;
+const react_1 = require("react");
+const usehooks_ts_1 = require("usehooks-ts");
+const COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)";
+const THEME_MODE = {
+    DARK: "dark",
+    LIGHT: "light",
+};
+const CONTROL_MODE = {
+    USER: "user",
+    OS_DEFAULT: "os_default",
+};
+const useAppTheme = () => {
+    const isDarkOS = (0, usehooks_ts_1.useMediaQuery)(COLOR_SCHEME_QUERY);
+    const [osPrefersMode] = (0, react_1.useState)(isDarkOS ? THEME_MODE.DARK : THEME_MODE.LIGHT);
+    const [themeMode, setThemeMode] = (0, usehooks_ts_1.useLocalStorage)("app-theme", osPrefersMode);
+    const [themeControl, setThemeControl] = (0, usehooks_ts_1.useLocalStorage)("control-theme", CONTROL_MODE.OS_DEFAULT);
+    (0, react_1.useEffect)(() => {
+        const root = document?.documentElement;
+        if (themeControl === "os_default") {
+            setThemeMode(isDarkOS ? THEME_MODE.DARK : THEME_MODE.LIGHT);
+        }
+        root.dataset.theme = themeMode;
+    }, [isDarkOS, osPrefersMode, themeControl, themeMode]);
+    return {
+        mode: themeMode,
+        toggle: () => {
+            setThemeControl("user");
+            setThemeMode((previous) => previous === THEME_MODE.DARK ? THEME_MODE.LIGHT : THEME_MODE.DARK);
+        },
+        setLight: () => setThemeMode(THEME_MODE.LIGHT),
+        setDark: () => setThemeMode(THEME_MODE.DARK),
+        setMode: (mode) => setThemeMode(mode),
+        setControl: (control) => setThemeControl(control),
+    };
+};
+exports.useAppTheme = useAppTheme;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./components";
+export * from "./hooks";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/dist/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("./components"), exports);
+__exportStar(require("./hooks"), exports);

package/dist/my-button.d.ts

@@ -0,0 +1,4 @@
+export declare const MyButton: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=my-button.d.ts.map

package/dist/my-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"my-button.d.ts","sourceRoot":"","sources":["../src/my-button.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;cAA8B,MAAM,SAAS;6CAOjE,CAAC"}

package/dist/my-button.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MyButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const MyButton = ({ children }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { children: "MyButton Component" }), children] }));
+};
+exports.MyButton = MyButton;

package/dist/myButton/Button.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import MyButton from "./myButton";
+declare const meta: Meta<typeof MyButton>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+//# sourceMappingURL=Button.stories.d.ts.map

package/dist/myButton/Button.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../src/myButton/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAU/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AACF,eAAO,MAAM,SAAS,EAAE,KAcvB,CAAC"}

package/dist/myButton/Button.stories.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Secondary = exports.Primary = void 0;
+const myButton_1 = __importDefault(require("./myButton"));
+const meta = {
+    title: "Example/MyButton",
+    component: myButton_1.default,
+    tags: ["autodocs"],
+    argTypes: {
+        type: {
+            control: { type: "radio" },
+            options: ["button", "submit", "reset"],
+        },
+    },
+};
+exports.default = meta;
+exports.Primary = {
+    name: "Button",
+    args: {
+        appName: "Button",
+        children: "I am a primary button.",
+        type: "button",
+        style: {
+            color: "blue",
+            border: "1px solid gray",
+            padding: 10,
+            borderRadius: 10,
+        },
+    },
+};
+exports.Secondary = {
+    name: "Pink Button",
+    args: {
+        appName: "Pink Button",
+        children: "I am a Secondary button.",
+        type: "submit",
+        style: {
+            color: "pink",
+            border: "1px solid pink",
+            padding: 10,
+            backgroundColor: "#fefefe",
+            borderRadius: 10,
+        },
+    },
+};

package/dist/myButton/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./myButton";
+export { default } from "./myButton";
+//# sourceMappingURL=index.d.ts.map

package/dist/myButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/myButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/dist/myButton/index.js

@@ -0,0 +1,23 @@
+"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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./myButton"), exports);
+var myButton_1 = require("./myButton");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(myButton_1).default; } });

package/dist/myButton/myButton.d.ts

@@ -0,0 +1,7 @@
+import { ButtonHTMLAttributes, ReactNode } from "react";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+}
+declare const MyButton: ({ children, className, ...others }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default MyButton;
+//# sourceMappingURL=myButton.d.ts.map

package/dist/myButton/myButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"myButton.d.ts","sourceRoot":"","sources":["../../src/myButton/myButton.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAIlE,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,QAAQ,uCAAwC,WAAW,4CAYhE,CAAC;AACF,eAAe,QAAQ,CAAC"}

package/dist/myButton/myButton.js

@@ -0,0 +1,16 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const bind_1 = __importDefault(require("classnames/bind"));
+const react_1 = require("react");
+const mybutton_module_scss_1 = __importDefault(require("./mybutton.module.scss"));
+const style = bind_1.default.bind(mybutton_module_scss_1.default);
+const MyButton = ({ children, className, ...others }) => {
+    const [clicked, setClicked] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", className: style(className, "button"), onClick: () => setClicked(!clicked), ...others, children: children }));
+};
+exports.default = MyButton;

package/dist/myButton/myButton.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import MyButton from "./myButton";
+declare const meta: Meta<typeof MyButton>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+//# sourceMappingURL=myButton.stories.d.ts.map

package/dist/myButton/myButton.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"myButton.stories.d.ts","sourceRoot":"","sources":["../../src/myButton/myButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAU/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC"}

package/dist/myButton/myButton.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+const myButton_1 = __importDefault(require("./myButton"));
+const meta = {
+    title: "tripie-ui/MyButton",
+    component: myButton_1.default,
+    tags: ["autodocs"],
+    argTypes: {
+        type: {
+            control: { type: "radio" },
+            options: ["button", "submit", "reset"],
+        },
+    },
+};
+exports.default = meta;
+exports.Primary = {
+    name: "Button",
+    args: {
+        children: "I am a primary button.",
+        type: "button",
+        style: {
+        // color: "blue",
+        // border: "1px solid gray",
+        // padding: 10,
+        // borderRadius: 10,
+        },
+    },
+};

package/dist/src/components/Accordian/Accordian.jsx

@@ -0,0 +1,61 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionBody = exports.AccordionIcon = exports.AccordionHeader = exports.AccordionDivider = void 0;
+var bind_1 = require("classnames/bind");
+var framer_motion_1 = require("framer-motion");
+var react_1 = require("react");
+var hooks_1 = require("../../hooks");
+var Divider_1 = require("../Divider/Divider");
+var Icon_1 = require("../TripieIcon/Icon");
+var accordian_module_scss_1 = require("./accordian.module.scss");
+var variants_1 = require("./variants");
+var cx = bind_1.default.bind(accordian_module_scss_1.default);
+var AccordionContext = (0, react_1.createContext)({
+    current: 'closed',
+    cycle: function () { return null; },
+});
+var Accordion = function (_a) {
+    var children = _a.children, className = _a.className;
+    var _b = (0, hooks_1.useCycle)('closed', 'open'), current = _b[0], cycle = _b[1];
+    // context provider에 넘겨지는 value prop 객체는 매 랜더때마다 바뀌므로 useMemo로 감싸주기
+    var value = (0, react_1.useMemo)(function () {
+        return { current: current, cycle: cycle };
+    }, [current]);
+    return (<AccordionContext.Provider value={value}>
+      <framer_motion_1.motion.div className={cx('accordion', className)}>{children}</framer_motion_1.motion.div>
+    </AccordionContext.Provider>);
+};
+var AccordionDivider = function (_a) {
+    var className = _a.className;
+    var current = (0, react_1.useContext)(AccordionContext).current;
+    return <Divider_1.default current={current} className={cx(className)}/>;
+};
+exports.AccordionDivider = AccordionDivider;
+var AccordionHeader = function (_a) {
+    var children = _a.children;
+    var cycle = (0, react_1.useContext)(AccordionContext).cycle;
+    return (<framer_motion_1.motion.div className={cx('accordion-header')} whileHover={{ cursor: 'pointer' }} onTapStart={function () { return cycle(); }}>
+      {children}
+    </framer_motion_1.motion.div>);
+};
+exports.AccordionHeader = AccordionHeader;
+var AccordionIcon = function (_a) {
+    var src = _a.src, className = _a.className, _b = _a.sizes, sizes = _b === void 0 ? 'icon' : _b;
+    var current = (0, react_1.useContext)(AccordionContext).current;
+    return (<Icon_1.default src={src} sizes={sizes} variants={variants_1.ACCORDIAN_VARIANTS.BUTTON} animate={current} className={cx(className)}/>);
+};
+exports.AccordionIcon = AccordionIcon;
+var AccordionBody = function (_a) {
+    var children = _a.children;
+    var current = (0, react_1.useContext)(AccordionContext).current;
+    return (<framer_motion_1.motion.div variants={variants_1.ACCORDIAN_VARIANTS.DETAILS} animate={current} className={cx('accordion-body')}>
+      {children}
+    </framer_motion_1.motion.div>);
+};
+exports.AccordionBody = AccordionBody;
+Accordion.Divider = exports.AccordionDivider;
+Accordion.Icon = exports.AccordionIcon;
+Accordion.Header = exports.AccordionHeader;
+Accordion.Body = exports.AccordionBody;
+exports.default = Accordion;

package/dist/src/components/Accordian/accordian.stories.jsx

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultipleAccordion = exports.Default = void 0;
+var react_1 = require("react");
+var __1 = require("..");
+var hooks_1 = require("../../hooks");
+var Accordian_1 = require("./Accordian");
+var meta = {
+    title: 'tripie-ui/Accordion',
+    component: Accordian_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 (<Accordian_1.default>
+        <Accordian_1.default.Header>
+          <__1.Container margin="m" applyMargin="top">
+            Default <Accordian_1.default.Icon />
+          </__1.Container>
+        </Accordian_1.default.Header>
+        <Accordian_1.default.Divider />
+        <__1.Container applyMargin="top-bottom">
+          <Accordian_1.default.Body>default content</Accordian_1.default.Body>
+        </__1.Container>
+      </Accordian_1.default>);
+    },
+};
+exports.MultipleAccordion = {
+    name: 'Multiple',
+    render: function () {
+        return (<>
+        <Accordian_1.default>
+          <Accordian_1.default.Header>
+            <__1.Container margin="m" applyMargin="top">
+              Accordion 1 <Accordian_1.default.Icon />
+            </__1.Container>
+          </Accordian_1.default.Header>
+          <Accordian_1.default.Divider />
+          <__1.Container applyMargin="top-bottom">
+            <Accordian_1.default.Body>Accordion content 1</Accordian_1.default.Body>
+          </__1.Container>
+        </Accordian_1.default>
+        <Accordian_1.default>
+          <Accordian_1.default.Header>
+            <__1.Container margin="m" applyMargin="top">
+              Accordion 2<Accordian_1.default.Icon />
+            </__1.Container>
+          </Accordian_1.default.Header>
+          <Accordian_1.default.Divider />
+          <__1.Container applyMargin="top-bottom">
+            <Accordian_1.default.Body>Accordion content 2</Accordian_1.default.Body>
+          </__1.Container>
+        </Accordian_1.default>
+      </>);
+    },
+};

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

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