@edu-tosel/design 0.1.4 → 0.1.6

package/README.md

@@ -1,32 +1,33 @@
-# TOSEL UI Library
-TOSEL 통합 디자인 시스템에 맞춘 UI 라이브러리
-
-## Tech Stack
-- tailwindcss 3.4.0
-- React 18
-
-## Getting Start
-```bash
-# 설치
-npm install @edu-tosel/ui@latest
-
-# 개발환경
-npm install # 의존성 설치
-npm start # React 환경에서 실행
-npm run test # jest 실행
-npm run build # 빌드
-npm run publish # npm 배포
-```
-
-## Folder Structure
-### asset
-tailwindcss를 조합한 커스텀 클래스 보관
-
-### board
-### card
-### deck
-### header
-### modal
-### navigation
-### text
+# TOSEL Design Library
+TOSEL 통합 디자인 시스템에 맞춘 UI 라이브러리
+
+## Tech Stack
+- tailwindcss 3.4.1
+- React 18
+- Vite 5
+
+## Getting Start
+```bash
+# 설치
+npm install @edu-tosel/ui@latest
+
+# 개발환경
+npm install # 의존성 설치
+npm run dev # 개발자 환경에서 실행
+npm run test # jest 실행
+npm run build # 빌드
+npm run publish # npm 배포
+```
+
+## Folder Structure
+### asset
+tailwindcss를 조합한 커스텀 클래스 보관
+
+### board
+### card
+### deck
+### header
+### modal
+### navigation
+### text
 문자열 조작 컴포넌트 보관

package/board/Board.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare function Board({ children, options, }: {
+    children: React.ReactNode;
+    options: {
+        height?: number;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/board/Board.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Board({ children, options, }) {
+    const { height } = options ?? {};
+    const classNames = [
+        `min-h-screen xl:min-h-0 xl:h-186 `,
+        "xl:rounded-xl bg-white/80 relative w-full ",
+    ].join(" ");
+    return _jsx("div", { className: classNames + "", children: children });
+}

package/board/CanvasBoard.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare function CanvasBoard({ children, options, }: {
+    children: React.ReactNode;
+    options?: {
+        height?: number;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/board/CanvasBoard.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../util";
+import { Board } from "./Board";
+export function CanvasBoard({ children, options, }) {
+    const { height } = options ?? {};
+    const layouts = "flex flex-wrap gap-12 ";
+    const sizes = "h-full ";
+    const paddings = "pb-36 xl:pb-12 px-2 xs:px-4 xl:pl-10 xl:pr-2 pt-2 xs:pt-4 xl:pt-8";
+    const styles = "xl:overflow-y-scroll ";
+    return (_jsx(Board, { options: { height }, children: _jsx("div", { className: cn(layouts, sizes, paddings, styles), children: children }) }));
+}

package/board/Header.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function Header({ title, colors, childrens, }: {
+    title: string;
+    colors?: [string, string];
+    childrens?: React.ReactNode[];
+}): import("react/jsx-runtime").JSX.Element;

package/board/Header.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { between, center } from "../util";
+export function Header({ title, colors, childrens, }) {
+    const [bgColor, textColor] = colors ?? ["bg", "text"];
+    const headerClassNames = [
+        center.row + between.row,
+        `bg-${bgColor || "white-off"}`,
+        `text-${textColor || "black"}`,
+        "w-full h-22 px-12 ",
+    ].join(" ");
+    return (_jsxs("div", { className: headerClassNames, children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsx("div", { className: "flex", children: childrens?.map((children) => children) })] }));
+}

package/board/ListBoard.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare function ListBoard({ children, options, }: {
+    children: React.ReactNode;
+    options?: {
+        height?: number;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/board/ListBoard.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Board } from "./Board";
+export function ListBoard({ children, options, }) {
+    const { height } = options ?? {};
+    const classNames = ["pt-8 px-12 overflow-y-scroll h-full pb-32"].join(" ");
+    return (_jsx(Board, { options: { height }, children: _jsx("div", { className: classNames, children: children }) }));
+}

package/board/index.d.ts

@@ -1,19 +1,3 @@
-/// <reference types="react" />
-import "../style.css";
-export declare function CanvasBoard({ children, options, }: {
-    children: React.ReactNode;
-    options?: {
-        height?: number;
-    };
-}): import("react/jsx-runtime").JSX.Element;
-export declare function ListBoard({ children, header, options, }: {
-    children: React.ReactNode;
-    header: {
-        title: string;
-        colors?: [string, string];
-        childrens?: React.ReactNode[];
-    };
-    options?: {
-        height?: number;
-    };
-}): import("react/jsx-runtime").JSX.Element;
+import "../globals.css";
+export * from "./CanvasBoard";
+export * from "./ListBoard";

package/board/index.js

@@ -1,47 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "../style.css";
-import { center, between } from "../util";
-function Header(_a) {
-    var title = _a.title, colors = _a.colors, childrens = _a.childrens;
-    var _b = colors !== null && colors !== void 0 ? colors : ["bg", "text"], bgColor = _b[0], textColor = _b[1];
-    var headerClassNames = [
-        center.row + between.row,
-        "bg-".concat(bgColor || "white-off"),
-        "text-".concat(textColor || "black"),
-        "w-full h-22 px-12",
-    ].join(" ");
-    return (_jsxs("div", __assign({ className: headerClassNames }, { children: [_jsx("div", __assign({ className: "text-xl font-bold" }, { children: title })), _jsx("div", __assign({ className: "flex" }, { children: childrens === null || childrens === void 0 ? void 0 : childrens.map(function (children) { return children; }) }))] })));
-}
-function Board(_a) {
-    var children = _a.children, header = _a.header, options = _a.options;
-    var height = (options !== null && options !== void 0 ? options : {}).height;
-    var classNames = [
-        "h-".concat(height !== null && height !== void 0 ? height : 186, " ").concat(header ? "" : "pt-8"),
-        "rounded-xl bg-white/80 overflow-hidden relative w-full",
-    ].join(" ");
-    return (_jsxs("div", __assign({ className: classNames }, { children: [header ? _jsx(Header, __assign({}, header)) : null, _jsx("div", __assign({ className: "h-full" }, { children: children }))] })));
-}
-export function CanvasBoard(_a) {
-    var children = _a.children, options = _a.options;
-    var height = (options !== null && options !== void 0 ? options : {}).height;
-    var classNames = ["px-12"].join(" ");
-    return (_jsx(Board, __assign({ options: { height: height } }, { children: _jsx("div", __assign({ className: classNames }, { children: children })) })));
-}
-export function ListBoard(_a) {
-    var children = _a.children, header = _a.header, options = _a.options;
-    var title = header.title, colors = header.colors, childrens = header.childrens;
-    var height = (options !== null && options !== void 0 ? options : {}).height;
-    var classNames = ["scrollbar pt-8 px-12 overflow-y-scroll h-full pb-32"].join(" ");
-    return (_jsx(Board, __assign({ header: { title: title, colors: colors, childrens: childrens }, options: { height: height } }, { children: _jsx("div", __assign({ className: classNames }, { children: children })) })));
-}
+import "../globals.css";
+export * from "./CanvasBoard";
+export * from "./ListBoard";

package/card/Card.d.ts

@@ -1,14 +1,15 @@
-/// <reference types="react" />
-import "../style.css";
-export declare function Card<T extends string | number>({ children, header, options, }: {
-    children: React.ReactNode;
-    header?: {
-        title: string;
-        bgColor?: string;
-        childrens?: React.ReactNode[];
-    };
-    options?: {
-        height?: number;
-        width?: T;
-    };
-}): import("react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+import "../globals.css";
+export type Size = "small" | "medium" | "large" | "xLarge";
+export declare function Card({ children, options, }: {
+    children: React.ReactNode;
+    options?: {
+        height?: Size;
+        width?: Size;
+        text?: {
+            size?: string;
+            color?: string;
+        };
+        onClick?: () => unknown | (() => Promise<unknown>);
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/card/Card.js

@@ -1,32 +1,30 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "../style.css";
-import { center, between } from "../util";
-function Header(_a) {
-    var title = _a.title, bgColor = _a.bgColor, childrens = _a.childrens;
-    var headerClassNames = [
-        center.row + between.row,
-        "".concat(bgColor || "bg-white-off"),
-        "w-full h-12 px-12",
-    ].join(" ");
-    return (_jsxs("div", __assign({ className: headerClassNames }, { children: [_jsx("div", __assign({ className: "text-xl font-bold" }, { children: title })), _jsx("div", __assign({ className: "flex" }, { children: childrens === null || childrens === void 0 ? void 0 : childrens.map(function (children) { return children; }) }))] })));
-}
-export function Card(_a) {
-    var children = _a.children, header = _a.header, options = _a.options;
-    var _b = options !== null && options !== void 0 ? options : {}, height = _b.height, width = _b.width;
-    var classNames = [
-        "h-".concat(height !== null && height !== void 0 ? height : 48, " w-").concat(width !== null && width !== void 0 ? width : "full", " p-4 max-w-232 "),
-        "rounded-xl bg-white/80 overflow-hidden relative box-shadow duration-500",
-    ].join(" ");
-    return (_jsxs("div", __assign({ className: classNames }, { children: [header ? _jsx(Header, __assign({}, header)) : null, _jsx("div", __assign({ className: "h-full" }, { children: children }))] })));
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import "../globals.css";
+import { cn } from "../util";
+const widthSize = {
+    small: "md:w-60",
+    medium: "md:w-90",
+    large: "md:w-135",
+    xLarge: "md:w-225",
+};
+const heightSize = {
+    small: "h-72 sm:h-48",
+    medium: "h-72 sm:h-48",
+    large: "h-80",
+    xLarge: "h-80",
+};
+export function Card({ children, options, }) {
+    const { height, width, text, onClick } = options ?? {};
+    const { size: textSize, color: textColor } = text ?? {};
+    const sizes = [
+        `${heightSize[height ?? "small"]}`,
+        `w-full ${widthSize[width ?? "small"]}`,
+    ].join(" ");
+    const positions = "relative";
+    const styles = [
+        `${onClick ? "cursor-pointer" : ""}`,
+        `text-${textSize ?? "base"}`,
+        `rounded-xl bg-white/80 overflow-hidden box-shadow duration-500`,
+    ].join(" ");
+    return (_jsx("div", { onClick: onClick, className: cn(sizes, positions, styles), children: children }));
+}

package/card/ChartCard.d.ts

@@ -0,0 +1,20 @@
+import "../globals.css";
+interface ChartCardProps {
+    data: Record<string, string | number>[];
+    xAxis: string;
+    yAxis: string;
+    lines?: {
+        dataKey: string;
+        stroke: string;
+    }[];
+    bars?: {
+        dataKey: string;
+        fill: string;
+    }[];
+    areas?: {
+        dataKey: string;
+        fill: string;
+    }[];
+}
+export declare function ChartCard({ data, xAxis, yAxis, lines, bars, areas, }: ChartCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/card/ChartCard.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../globals.css";
+import { Area, Bar, ComposedChart, Line, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
+import { Card } from "./Card";
+export function ChartCard({ data, xAxis, yAxis, lines, bars, areas, }) {
+    return (_jsx(Card, { options: { width: "xLarge", height: "large", text: { size: "xs" } }, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ComposedChart, { data: data, children: [_jsx(XAxis, { dataKey: xAxis }), _jsx(YAxis, { dataKey: yAxis }), _jsx(Tooltip, {}), lines?.map((line) => (_jsx(Line, { ...line }, line.dataKey))), bars?.map((bar) => (_jsx(Bar, { ...bar }, bar.dataKey))), areas?.map((area) => (_jsx(Area, { ...area }, area.dataKey)))] }) }) }));
+}

package/card/ProfileCard.d.ts

@@ -1,14 +1,14 @@
-type Level = "PS" | "ST" | "BA" | "JR" | "HJ";
-export declare function ProfileCard<T extends string | number>({ info, gradeData, }: {
-    info: {
-        name: string;
-        birthday: string;
-        image?: string;
-    };
-    gradeData?: {
-        level?: Level;
-        score?: number;
-        grade?: number;
-    };
-}): import("react/jsx-runtime").JSX.Element;
-export {};
+type Level = "PS" | "ST" | "BA" | "JR" | "HJ";
+export declare function ProfileCard({ info, gradeData, }: {
+    info: {
+        name: string;
+        birthday: string;
+        image?: string;
+    };
+    gradeData?: {
+        level?: Level;
+        score?: number;
+        grade?: number;
+    };
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/card/ProfileCard.js

@@ -1,20 +1,8 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card } from "./Card";
-import { colorsByLevel } from "../util";
-export function ProfileCard(_a) {
-    var info = _a.info, gradeData = _a.gradeData;
-    var name = info.name, birthday = info.birthday, image = info.image;
-    var _b = gradeData !== null && gradeData !== void 0 ? gradeData : {}, level = _b.level, score = _b.score, grade = _b.grade;
-    return (_jsx(Card, __assign({ options: { width: 84 } }, { children: _jsxs("div", __assign({ className: "flex" }, { children: [_jsx("img", { src: image, alt: "profile", className: "h-20 w-20 overflow-hidden rounded-full object-cover " }), _jsxs("div", __assign({ className: "ml-auto flex flex-col gap-4" }, { children: [_jsxs("div", __assign({ className: "flex w-52 items-end gap-2 border-b-2 border-blue-navy pb-2" }, { children: [_jsx("div", __assign({ className: "text-xl font-bold" }, { children: name })), _jsx("div", { children: birthday })] })), _jsxs("div", { children: [_jsx("div", { children: "\uD559\uC6D0\uC0DD" }), _jsx("div", { children: level ? colorsByLevel[level] : "" })] })] }))] })) })));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from "./Card";
+import { colorsByLevel } from "../util";
+export function ProfileCard({ info, gradeData, }) {
+    const { name, birthday, image } = info;
+    const { level, score, grade } = gradeData ?? {};
+    return (_jsx(Card, { options: { width: "small" }, children: _jsxs("div", { className: "flex", children: [_jsx("img", { src: image, alt: "profile", className: "h-20 w-20 overflow-hidden rounded-full object-cover " }), _jsxs("div", { className: "ml-auto flex flex-col gap-4", children: [_jsxs("div", { className: "flex w-52 items-end gap-2 border-b-2 border-blue-navy pb-2", children: [_jsx("div", { className: "text-xl font-bold", children: name }), _jsx("div", { children: birthday })] }), _jsxs("div", { children: [_jsx("div", { children: "\uD559\uC6D0\uC0DD" }), _jsx("div", { children: level ? colorsByLevel[level] : "" })] })] })] }) }));
+}

package/card/TableCard.d.ts

@@ -0,0 +1,12 @@
+import "../globals.css";
+export declare function TableCard({ data, fields, sizes, options, }: {
+    data: Record<string, string>[];
+    fields: Record<string, string>;
+    sizes: Record<string, string>;
+    options?: {
+        color?: {
+            background: string;
+            text: string;
+        };
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/card/TableCard.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../globals.css";
+import { Card } from "./Card";
+export function TableCard({ data, fields, sizes, options, }) {
+    const { color } = options ?? {};
+    const { background: bgColor, text: textColor } = color ?? {};
+    const keys = Object.keys(fields);
+    const fieldsClassNames = [
+        `flex h-11 items-center  font-bold pl-4`,
+        `bg-${bgColor ?? "gray-300"} text-${textColor ?? "black"}`,
+    ].join(" ");
+    return (_jsx(Card, { options: { width: "large", height: "large" }, children: _jsxs("div", { className: "overflow-hidden text-xs xs:text-sm sm:text-base", children: [_jsx("div", { className: fieldsClassNames, children: keys.map((key) => (_jsx("div", { className: `w-${sizes[key]}`, children: fields[key] }, key))) }), data.map((row, index) => (_jsx("div", { className: "flex items-center pl-4 h-11 ", children: keys.map((key) => (_jsx("div", { className: `truncate w-${sizes[key] ?? "auto"}`, children: row[key] }, key))) }, index)))] }) }));
+}

package/card/TrumpCard.d.ts

@@ -0,0 +1,19 @@
+import { Size } from "./Card";
+type ImageSize = "sub" | "full";
+export declare function TrumpCard({ titles, options, }: {
+    titles: {
+        title: string;
+        subTitle?: string[];
+        color?: string;
+    };
+    options?: {
+        width?: Size;
+        image?: {
+            path: string;
+            size?: ImageSize;
+        };
+        onClick?: () => unknown | (() => Promise<unknown>);
+        subButton?: [string, string, () => unknown | (() => Promise<unknown>)];
+    };
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/card/TrumpCard.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LineBreaks } from "../text";
+import { Card } from "./Card";
+export function TrumpCard({ titles, options, }) {
+    const { title, subTitle, color: titleColor } = titles;
+    const { onClick, width, image, subButton } = options ?? {};
+    const [buttonText, buttonBgColor, buttonAction] = subButton ?? [
+        null,
+        "red-crimson",
+        () => { },
+    ];
+    const { path, size } = image ?? { size: "sub" };
+    const imageClassNames = () => {
+        if (size === "full")
+            return "w-full h-full object-cover";
+        return "absolute bottom-0 right-0 w-full xs:w-auto max-w-120 z-0 max-h-44 object-contain";
+    };
+    return (_jsxs(Card, { options: { width: width, onClick: onClick }, children: [_jsxs("div", { className: `absolute top-8 left-8 w-48 flex flex-col gap-2 z-10 text-${titleColor}`, children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsx(LineBreaks, { gap: 0, texts: subTitle ?? [""] }), subButton ? (_jsx("button", { className: `text-white rounded-md bg-${buttonBgColor} w-45 h-11 flex justify-center items-center`, onClick: buttonAction, children: buttonText })) : null] }), path ? (_jsx("img", { src: path, alt: "trump-image", loading: "lazy", className: imageClassNames() })) : null] }));
+}

package/card/index.d.ts

@@ -1 +1,4 @@
-export * from "./ProfileCard";
+export * from "./ProfileCard";
+export * from "./TrumpCard";
+export * from "./ChartCard";
+export * from "./TableCard";

package/card/index.js

@@ -1 +1,4 @@
-export * from "./ProfileCard";
+export * from "./ProfileCard";
+export * from "./TrumpCard";
+export * from "./ChartCard";
+export * from "./TableCard";

package/deck/Deck.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare function Deck<T extends string | number>({ children, titles, options, }: {
+    children: React.ReactNode;
+    titles?: {
+        title: string;
+        subTitle?: string;
+        gapTitle?: number;
+    };
+    options?: {
+        width?: T;
+        height?: number;
+        gapX?: number;
+        gapY?: number;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/deck/Deck.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Deck({ children, titles, options, }) {
+    const { title, subTitle, gapTitle } = titles ?? {};
+    const { height, gapX, gapY } = options ?? {};
+    const containerClassNames = [
+        `flex flex-col h-${height ?? "auto"} gap-${gapTitle ?? 4} `,
+    ].join(" ");
+    const bodyClassNames = [
+        `flex flex-col sm:flex-row `,
+        `gap-x-${gapX ?? 5} gap-y-${gapY ?? 5}`,
+        "duration-500",
+    ].join(" ");
+    return (_jsxs("div", { className: containerClassNames, children: [_jsxs("div", { className: "pl-1", children: [_jsx("div", { className: "text-xl xl:text-2xl font-bold", children: title }), _jsx("div", { className: "", children: subTitle })] }), _jsx("div", { className: bodyClassNames, children: children })] }));
+}

package/deck/index.d.ts

@@ -1,18 +1 @@
-/// <reference types="react" />
-import "../style.css";
-export declare function Deck<T extends string | number>({ children, titles, options, }: {
-    children: React.ReactNode;
-    titles?: {
-        title: string;
-        subTitle?: string;
-        gapTitle?: number;
-    };
-    options?: {
-        direction?: "row" | "col" | "wrap";
-        justify?: "start" | "end" | "center" | "between" | "around" | "evenly";
-        width?: T;
-        height?: number;
-        gapX?: number;
-        gapY?: number;
-    };
-}): import("react/jsx-runtime").JSX.Element;
+export * from "./Deck";

package/deck/index.js

@@ -1,28 +1 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "../style.css";
-export function Deck(_a) {
-    var children = _a.children, titles = _a.titles, options = _a.options;
-    var _b = titles !== null && titles !== void 0 ? titles : {}, title = _b.title, subTitle = _b.subTitle, gapTitle = _b.gapTitle;
-    var _c = options !== null && options !== void 0 ? options : {}, direction = _c.direction, height = _c.height, width = _c.width, gapX = _c.gapX, gapY = _c.gapY, justify = _c.justify;
-    var classNames = [
-        "flex flex-col",
-        "h-".concat(height !== null && height !== void 0 ? height : "auto", " w-").concat(width !== null && width !== void 0 ? width : "full", " gap-").concat(gapTitle !== null && gapTitle !== void 0 ? gapTitle : 4, " "),
-    ].join(" ");
-    var bodyClassNames = [
-        "flex-".concat(direction !== null && direction !== void 0 ? direction : "row", " justify-").concat(justify !== null && justify !== void 0 ? justify : "start"),
-        "gap-x-".concat(gapX !== null && gapX !== void 0 ? gapX : 5, " gap-y-").concat(gapY !== null && gapY !== void 0 ? gapY : 5),
-        "flex w-full duration-500",
-    ].join(" ");
-    return (_jsxs("div", __assign({ className: classNames }, { children: [_jsxs("div", __assign({ className: "pl-1" }, { children: [_jsx("div", __assign({ className: "text-2xl font-bold" }, { children: title })), _jsx("div", __assign({ className: "" }, { children: subTitle }))] })), _jsx("div", __assign({ className: bodyClassNames }, { children: children }))] })));
-}
+export * from "./Deck";