@edu-tosel/design 1.0.15 → 1.0.17

package/README.md

@@ -20,11 +20,6 @@ Card 컴포넌트는 여러가지 요소를 담고 있는 컨테이너이다.
 
 일반적으로 가장 최소 단위의 컴포넌트로 사용되며, 다양한 요소를 담을 수 있다.
 
-### Deck
-
-Deck 컴포넌트는 여러가지 Card 컴포넌트를 담고 있는 컨테이너이다.
-
-Deck 컴포넌트는 담고있는 Card 컴포넌트들을 수평 정렬한다.
 
 ### Layout
 

package/board/widget/Header.js

@@ -12,7 +12,7 @@ export default function BoardHeader({ titles, tags, options, }) {
     const container = {
         positions: "fixed top-15 xl:top-0 left-0 z-20 xl:relative flex items-center",
         paddings: "px-7.5",
-        styles: `bg-${bgColor} text-${textColor}`,
+        styles: `${bgColor} ${textColor}`,
         sizes: "w-full h-19",
         border: "border-b-2 border-green-dark",
     };

package/card/template/AddCard.d.ts

@@ -1,2 +1,2 @@
 import { AddCardProps } from "../../interface";
-export default function AddCard({ onClick, options }: AddCardProps): import("react/jsx-runtime").JSX.Element;
+export default function AddCard({ title, icon, onClick, options, }: AddCardProps): import("react/jsx-runtime").JSX.Element;

package/card/template/AddCard.js

@@ -1,11 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../util";
 import { Card } from "../widget/Card";
-export default function AddCard({ onClick, options }) {
+export default function AddCard({ title, icon, onClick, options, }) {
     const { width } = options ?? {};
     const container = {
-        displays: "flex justify-center items-center",
-        text: "text-3xl",
+        displays: "flex flex-col justify-center items-center gap-2",
+        text: "text-xs",
+        styles: "duration-500 hover:bg-gray-light",
     };
-    return _jsx(Card, { options: { width, classNames: cn(container), onClick }, children: "+" });
+    const iconBody = {
+        displays: "flex items-center justify-center ",
+        sizes: "w-9 h-9",
+        styles: "bg-gray-light rounded-full",
+    };
+    return (_jsxs(Card, { options: { width, classNames: cn(container), onClick }, children: [icon && (_jsx("div", { className: cn(iconBody), children: _jsx("img", { src: icon }) })), title && _jsx("div", { children: title })] }));
 }

package/html/widget/Select.js

@@ -21,29 +21,39 @@ export default function Select({ state, selectOptions, options, }) {
             setIsActive(false);
         return setIsButton(false);
     }, [flag]);
+    const levelsKey = {
+        CoCoon: "CC",
+        "Pre-Starter": "PS",
+        Starter: "ST",
+        Basic: "BA",
+        Junior: "JR",
+        "High Junior": "HJ",
+    };
     const [isActive, setIsActive] = useState(false);
     const [isButton, setIsButton] = useState(false);
     const [selectedItem, setSelectedItem] = useState(null);
     const handleItemClick = (title) => {
         setSelectedItem(title);
         setIsActive(false);
+        const selectedValue = levelsKey[title] || title;
+        setValue(selectedValue);
     };
     // css
     const levels = [
         "CoCoon",
-        "PreStarter",
+        "Pre-Starter",
         "Starter",
         "Basic",
         "Junior",
-        "HighJunior",
+        "High Junior",
     ];
     const colorMap = {
         CoCoon: "bg-cocoon-green",
-        PreStarter: "bg-ps-pink",
+        "Pre-Starter": "bg-ps-pink",
         Starter: "bg-st-orange",
         Basic: "bg-ba-yellow",
         Junior: "bg-jr-blue",
-        HighJunior: "bg-hj-blue",
+        "High Junior": "bg-hj-blue",
     };
     const isActiveCss = () => {
         if (isActive)

package/index.d.ts

@@ -1,7 +1,6 @@
 import "./globals.css";
 export * from "./board";
 export * from "./card";
-export * from "./deck";
 export * from "./layout";
 export * from "./html";
 export * from "./interaction";

package/index.js

@@ -1,7 +1,6 @@
 import "./globals.css";
 export * from "./board";
 export * from "./card";
-export * from "./deck";
 export * from "./layout";
 export * from "./html";
 export * from "./interaction";

package/interaction/widget/LoadingWorm.js

@@ -18,6 +18,6 @@ function SubComponent({ index, ease, }) {
         `z-${50 - index}`,
     ].join(" ");
     const sizes = "w-25 h-20";
-    const styles = `duration-${timer} rounded-lg bg-${gradient.lab} opacity-40`;
+    const styles = `duration-${timer} rounded-lg bg-${gradient.bg.lab} opacity-40`;
     return (_jsxs("div", { className: cn(positions, sizes, styles), children: [_jsxs("div", { children: ["Index is ", index] }), _jsxs("div", { className: "text-xs", children: [timer, "ms \uB3D9\uC548 ", flag.toString()] })] }));
 }

package/interface/Card.d.ts

@@ -86,6 +86,8 @@ export interface InfoCardProps extends CardProps {
     } & CardOptions;
 }
 export interface AddCardProps extends Omit<CardProps, "children"> {
+    title?: string;
+    icon?: string;
     onClick: OnClick;
 }
 export interface RowCardProps<T> {

package/interface/Modal.d.ts

@@ -1,6 +1,7 @@
 import { Button, Scripts, Size } from "./Property";
 export interface ModalProps {
     isVisible?: boolean;
+    event?: string;
     children: React.ReactNode;
     classNames?: string;
     options?: {

package/layout/template/dashboard/Header.js

@@ -10,7 +10,7 @@ export function Header({ title, image, }) {
         positions: "fixed xl:static top-0 left-0 z-40",
         displays: "flex items-center justify-between ",
         sizes: "h-15 w-full",
-        background: !isDark ? `bg-${gradient.greenToRed}` : "bg-black",
+        background: !isDark ? `${gradient.bg.greenToRed}` : "bg-black",
         styles: "px-5 xl:px-8 2xl:px-16 ",
     };
     return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex h-12 items-center gap-8 xl:gap-24 2xl:gap-22", children: [src && href ? (_jsx("a", { href: href, children: _jsx("img", { src: src, alt: "logo", className: "h-6.25 w-28.78" }) })) : (_jsx("div", { className: "text-2xl", children: "TOSEL" })), _jsx("div", { className: "text-3xl font-bold text-white ", children: title })] }), _jsx("button", { onClick: setDark, className: "text-white", children: "DARK" })] }));

package/layout/template/dashboard/index.js

@@ -16,8 +16,8 @@ function Layout({ subject, colors, navigations, children, }) {
     }, [flag]);
     const container = {
         sizes: "min-h-screen h-screen xl:h-auto",
-        background: !isDark ? `bg-${bgColor}` : "bg-black/80",
-        styles: `text-${textColor} font-pretendard-medium`,
+        background: !isDark ? bgColor : "bg-black/80",
+        styles: `${textColor} font-pretendard-medium`,
         dark: isDark && "dark",
     };
     const body = {

package/modal/template/Alert.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { col } from "../../util";
 import ModalDesign from "../widget/Modal.design";
 export default function Alert({ isVisible, title, scripts, options, }) {
     const { script, subScript } = scripts ?? {};
     const { buttons } = options ?? {};
-    return (_jsx(ModalDesign, { isVisible: isVisible, classNames: "pt-18 px-25", options: { buttons, isCloseButton: true }, children: _jsx("div", { className: col(3), children: _jsxs("div", { className: col(6), children: [_jsx("div", { className: "text-3xl font-bold", children: title }), _jsx("div", { className: "h-2 w-14 rounded-full bg-pale-lavender" }), _jsx("div", { className: "text-xl font-bold", children: script })] }) }) }));
+    return (_jsx(ModalDesign, { isVisible: isVisible, classNames: "pt-18 px-25", options: { buttons, isCloseButton: true }, children: _jsx("div", { className: "flex flex-col gap-3", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsx("div", { className: "text-3xl font-bold", children: title }), _jsx("div", { className: "h-2 w-14 rounded-full bg-pale-lavender" }), _jsx("div", { className: "text-xl font-bold", children: script })] }) }) }));
 }

package/modal/template/Input.d.ts

@@ -1,6 +1,6 @@
 import { State } from "../../interface";
 import { ModalProps } from "../../interface/Modal";
-export default function Input<T>({ isVisible, title, options, state, }: Omit<ModalProps, "children"> & {
+export default function Input<T>({ isVisible, event, title, options, state, }: Omit<ModalProps, "children"> & {
     title?: string;
     state: State<T>;
 }): import("react/jsx-runtime").JSX.Element;

package/modal/template/Input.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ModalDesign from "../widget/Modal.design";
-export default function Input({ isVisible, title, options, state, }) {
+export default function Input({ isVisible, event, title, options, state, }) {
     const { buttons } = options ?? {};
-    return (_jsxs(ModalDesign, { isVisible: isVisible, classNames: "pt-18 px-25", options: { buttons, isCloseButton: true }, children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsx("input", { className: "border-2 border-black w-80 h-8", value: state[0], onChange: (e) => state[1](e.target.value) })] }));
+    return (_jsxs(ModalDesign, { isVisible: isVisible, event: event, classNames: "pt-18 px-25", options: { buttons, isCloseButton: true }, children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsx("input", { className: "border-2 border-black w-80 h-8", value: state[0], onChange: (e) => state[1](e.target.value) })] }));
 }

package/modal/widget/Modal.design.d.ts

@@ -1,2 +1,2 @@
 import { ModalProps } from "../../interface/Modal";
-export default function ModalDesign({ isVisible, children, options, debug, }: ModalProps): import("react").ReactPortal;
+export default function ModalDesign({ isVisible, event, children, options, debug, }: ModalProps): import("react").ReactPortal;

package/modal/widget/Modal.design.js

@@ -22,9 +22,9 @@ const heightSize = {
     "2xl": "w-2/3 min-w-76 max-w-176",
     full: "h-full",
 };
-export default function ModalDesign({ isVisible, children, options, debug, }) {
+export default function ModalDesign({ isVisible, event, children, options, debug, }) {
     const { buttons, width, height, closeButtonColor, isCloseButton } = options ?? {};
-    const { clearModal } = useWidgetStore();
+    const { setIsOwn, removeModal } = useWidgetStore();
     const background = {
         positions: "z-50 fixed top-0 left-0",
         displays: "flex items-center justify-center ",
@@ -60,5 +60,5 @@ export default function ModalDesign({ isVisible, children, options, debug, }) {
         leave: { opacity: 0 },
         config: { duration: 200 },
     });
-    return ReactDOM.createPortal(transitions((styles, item) => item && (_jsx(animated.div, { style: styles, className: cn(background), children: _jsxs("div", { className: cn(container), children: [children, buttons ? (_jsx("div", { className: cn(button.container), children: buttons.map(([text, onClick]) => (_jsx("button", { className: cn(button.body), onClick: onClick, children: text }, text))) })) : null, isCloseButton && (_jsx("button", { className: cn(closeButton), onClick: clearModal, children: _jsx("div", { className: "x-shape" }) }))] }) }))), document.body);
+    return ReactDOM.createPortal(transitions((styles, item) => item && (_jsx(animated.div, { style: styles, className: cn(background), onClick: () => setIsOwn(true), children: _jsxs("div", { className: cn(container), children: [children, buttons ? (_jsx("div", { className: cn(button.container), children: buttons.map(([text, onClick]) => (_jsx("button", { className: cn(button.body), onClick: onClick, children: text }, text))) })) : null, isCloseButton && event && (_jsx("button", { className: cn(closeButton), onClick: () => removeModal(event), children: _jsx("div", { className: "x-shape" }) }))] }) }))), document.body);
 }

package/navigation/Navigation.js

@@ -12,10 +12,10 @@ export const buttonClassNames = (href, nowPath, color) => {
     };
     const toggle = checkPathMatch(href, nowPath)
         ? !isDark
-            ? `bg-${bg} text-${selectedText}`
+            ? `${bg} ${selectedText}`
             : "bg-white text-black"
         : (!isDark ? "bg-white " : "bg-black ") +
-            `xl:bg-transparent xl:hover:bg-white/50 hover:text-green-dark text-${text} dark:text-white`;
+            `xl:bg-transparent xl:hover:bg-white/50 hover:text-green-dark ${text} dark:text-white`;
     return [cn(container), toggle].join(" ");
 };
 export function NavigationContainer({ children, }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/tailwind.config.ts

@@ -84,6 +84,7 @@ export default {
         "sun-calc": "calc(50% - 6rem)",
         1: "0.25rem",
         2.5: "0.625rem",
+        3.5: "0.875rem",
         3.75: "0.9375rem",
         4.75: "1.1875rem",
         6.25: "1.5625rem",
@@ -491,54 +492,7 @@ export default {
     },
   },
   safelist: [
-    {
-      pattern: /font-.*/,
-    },
-    {
-      pattern: /animate-.*/,
-    },
-    {
-      pattern: /shadow-.*/,
-    },
-
-    {
-      pattern: /flex-.*/,
-    },
-    {
-      pattern: /overflow-*./,
-    },
-    {
-      pattern: /col-.*/,
-    },
-    {
-      pattern: /row-.*/,
-    },
-    {
-      pattern: /flex-.*/,
-    },
-    {
-      pattern: /justify-.*/,
-    },
-    {
-      pattern: /items-.*/,
-    },
-    {
-      pattern: /grid-.*/,
-    },
-    {
-      pattern: /gap-.*/,
-    },
-    {
-      pattern: /border-.*/,
-    },
-    {
-      pattern: /min-.*/,
-    },
-    {
-      pattern: /max-.*/,
-    },
     { pattern: /w-.*/ },
-    { pattern: /h-.*/ },
     {
       pattern: /top-.*/,
     },
@@ -557,50 +511,9 @@ export default {
     {
       pattern: /right*.*/,
     },
-    { pattern: /bg-.*/ },
-    { pattern: /text-.*/ },
-    {
-      pattern: /p-.*/,
-    },
-    {
-      pattern: /px-.*/,
-    },
-    {
-      pattern: /pl-.*/,
-    },
-    {
-      pattern: /py-.*/,
-    },
-    {
-      pattern: /pb-.*/,
-    },
-    {
-      pattern: /m-.*/,
-    },
-    {
-      pattern: /mx-.*/,
-    },
-    {
-      pattern: /my-.*/,
-    },
-    {
-      pattern: /z-.*/,
-    },
-    {
-      pattern: /from-.*/,
-    },
-    {
-      pattern: /to-.*/,
-    },
-    {
-      pattern: /via-.*/,
-    },
     {
       pattern: /delay-.*/,
     },
-    {
-      pattern: /overflow-.*/,
-    },
     {
       pattern: /duration-.*/,
     },

package/text/Formatter.d.ts

@@ -1,3 +1,3 @@
-export declare function Formatter({ script }: {
+export default function Formatter({ script }: {
     script: string;
 }): import("react/jsx-runtime").JSX.Element;

package/text/Formatter.js

@@ -1,18 +1,81 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-export function Formatter({ script }) {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment, useId } from "react";
+export default function Formatter({ script }) {
+    const parses = parseType(script);
+    const results = parses.map(([type, content], index) => {
+        if (type === "code")
+            return (_jsx("div", { className: "bg-gray-500 p-2", children: parseCodeLines(content) }, index));
+        else
+            return _jsx("div", { children: parseTextLines(content) }, index);
+    });
+    return _jsx("div", { className: "flex flex-col", children: results });
+}
+function parseType(script) {
+    const segments = script.split("```");
+    return segments.reduce((acc, segment, index) => {
+        if (index % 2 === 0) {
+            acc.push(["text", segment]);
+        }
+        else {
+            acc.push(["code", segment]);
+        }
+        return acc;
+    }, []);
+}
+function parseCodeLines(script) {
+    const lines = script.split("\n");
+    return lines.map((line, index) => _jsx("div", { children: line }, index));
+}
+function parseTextLines(script) {
     const lines = script.split("\n");
-    const htmlRegex = /<div.*?>.*?<\/div>/gs;
-    const result = lines.map((line, index) => {
-        const htmlMatch = line.match(htmlRegex);
-        if (htmlMatch)
-            return (_jsx("div", { dangerouslySetInnerHTML: { __html: htmlMatch[0] } }, index));
-        if (line.startsWith("# "))
+    return lines.map((line, index) => {
+        if (line === "") {
+            return _jsx("br", {}, index);
+        }
+        else if (line.startsWith("# ")) {
             return (_jsx("div", { className: "text-3xl", children: line.replace("# ", "") }, index));
-        if (line.startsWith("## "))
+        }
+        else if (line.startsWith("## ")) {
             return (_jsx("div", { className: "text-2xl", children: line.replace("## ", "") }, index));
-        if (line.startsWith("```"))
-            return (_jsx("div", { className: "bg-gray-200 p-2", children: line.replace(/^```|```$/g, "") }, index));
-        return _jsx("div", { children: line }, index);
+        }
+        else if (line.startsWith("### ")) {
+            return (_jsx("div", { className: "text-xl", children: line.replace("### ", "") }, index));
+        }
+        else {
+            return (_jsx("div", { children: _jsx(Parse, { script: line }) }, index));
+        }
+    });
+}
+function Parse({ script }) {
+    const id = useId();
+    const arrs = [[[], script]];
+    const arrs2 = parseStyles("**", "bold", arrs);
+    const arrs3 = parseStyles("*", "italic", arrs2);
+    const parseFontType = (types) => {
+        if (types.length === 0)
+            return "";
+        const classNames = types.map((type) => {
+            if (type === "bold")
+                return "font-bold";
+            if (type === "italic")
+                return "italic";
+            return "";
+        });
+        return classNames.join(" ");
+    };
+    return (_jsx(Fragment, { children: arrs3.map(([types, script], index) => (_jsx("span", { className: parseFontType(types), children: script }, id + index))) }, id));
+}
+function parseStyles(trigger, type, props) {
+    const result = props.flatMap(([types, script]) => {
+        const segments = script.split(trigger);
+        return segments.map((segment, index) => {
+            if (index % 2 !== 0) {
+                return [[...types, type], segment];
+            }
+            else {
+                return [[...types], segment];
+            }
+        });
     });
-    return _jsx(_Fragment, { children: result });
+    return result;
 }

package/util/colors.d.ts

@@ -5,8 +5,15 @@ export declare const colorsByLevel: {
     JR: string;
     HJ: string;
 };
-export declare const gradient: {
+export declare const gradientBackground: {
     lab: string;
     greenToRed: string;
     greenToRedSoft: string;
 };
+export declare const gradient: {
+    bg: {
+        lab: string;
+        greenToRed: string;
+        greenToRedSoft: string;
+    };
+};

package/util/colors.js

@@ -5,8 +5,11 @@ export const colorsByLevel = {
     JR: "jr-blue",
     HJ: "hj-blue",
 };
+export const gradientBackground = {
+    lab: "bg-gradient-to-br from-violet-light/20 to-blue-sky/40 ",
+    greenToRed: "bg-gradient-to-r from-green-dark to-red-crimson",
+    greenToRedSoft: "bg-gradient-to-r from-green-dark/20 to-red-crimson/20",
+};
 export const gradient = {
-    lab: "gradient-to-br from-violet-light/20 to-blue-sky/40 ",
-    greenToRed: "gradient-to-r from-green-dark to-red-crimson",
-    greenToRedSoft: "gradient-to-r from-green-dark/20 to-red-crimson/20",
+    bg: gradientBackground,
 };

package/util/index.d.ts

@@ -2,11 +2,9 @@ export { default as cn } from "./classNames";
 export { default as unixToDate } from "./convertUnixTimestampToDate";
 export { default as isDebug } from "./isDebug";
 export { default as sortByOrder } from "./sortByOrder";
+export { default as checkPathMatch } from "./checkPathMatch";
 export * from "./colors";
-export * from "./display";
-export * from "./displayResponsive";
 export * from "./hooks";
 export * from "./pattern";
-export * from "./position";
 export * from "./shape";
 export * from "./hooks";

package/util/index.js

@@ -2,11 +2,9 @@ export { default as cn } from "./classNames";
 export { default as unixToDate } from "./convertUnixTimestampToDate";
 export { default as isDebug } from "./isDebug";
 export { default as sortByOrder } from "./sortByOrder";
+export { default as checkPathMatch } from "./checkPathMatch";
 export * from "./colors";
-export * from "./display";
-export * from "./displayResponsive";
 export * from "./hooks";
 export * from "./pattern";
-export * from "./position";
 export * from "./shape";
 export * from "./hooks";

package/version.txt

@@ -1 +1 @@
-1.0.15
+1.0.17

package/deck/index.d.ts

@@ -1 +0,0 @@
-export { default as Deck } from "./template/Deck";

package/deck/index.js

@@ -1 +0,0 @@
-export { default as Deck } from "./template/Deck";

package/deck/template/Deck.d.ts

@@ -1,6 +0,0 @@
-import { DeckProps } from "../../interface/Deck";
-declare function Deck<T extends string | number>(props: DeckProps<T>): import("react/jsx-runtime").JSX.Element;
-declare namespace Deck {
-    var Sub: <T extends string | number>({ titles, children, options, debug, }: DeckProps<T>) => import("react/jsx-runtime").JSX.Element;
-}
-export default Deck;

package/deck/template/Deck.design.d.ts

@@ -1,2 +0,0 @@
-import { DeckProps } from "../../interface/Deck";
-export default function DeckDesign<T extends string | number>({ children, titles, options, debug, }: DeckProps<T>): import("react/jsx-runtime").JSX.Element;

package/deck/template/Deck.design.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn, isDebug } from "../../util";
-import { Deck } from "./../widget/Deck";
-export default function DeckDesign({ children, titles, options, debug, }) {
-    const { title, subtitle, isSub } = titles ?? {};
-    const { height } = options ?? {};
-    const container = {
-        displays: "flex flex-col gap-4",
-        sizes: `w-full h-${height ?? "auto"} `,
-        debug: debug && isDebug(`border-2 border-${debug}`),
-    };
-    const titleBox = {
-        container: "flex flex-col gap-1",
-        title: {
-            text: isSub ? "text-base xl:text-lg" : "text-xl xl:text-2xl",
-            font: "font-bold",
-        },
-        subtitle: isSub ? "text-xs xl:text-sm" : "text-sm xl:text-base",
-    };
-    return (_jsxs("div", { className: cn(container), children: [titles && (_jsxs("div", { children: [_jsx("div", { className: cn(titleBox.title), children: title }), _jsx("div", { className: cn(titleBox.subtitle), children: subtitle })] })), _jsx(Deck, { children: children })] }));
-}

package/deck/template/Deck.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import DeckDesign from "./Deck.design";
-function Deck(props) {
-    return _jsx(DeckDesign, { ...props });
-}
-function Sub({ titles, children, options, debug, }) {
-    const { title, subtitle } = titles ?? { title: "" };
-    return (_jsx(DeckDesign, { titles: { title, subtitle, isSub: true }, debug: debug, ...options, children: children }));
-}
-Deck.Sub = Sub;
-export default Deck;

package/deck/widget/Deck.d.ts

@@ -1,2 +0,0 @@
-import { DeckProps } from "../../interface/Deck";
-export declare function Deck<T extends string | number>({ children, options, }: DeckProps<T>): import("react/jsx-runtime").JSX.Element;

package/deck/widget/Deck.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../util";
-export function Deck({ children, options, }) {
-    const { flex, justify, gapX, gapY, overflowScroll } = options ?? {};
-    const body = {
-        displays: `flex flex-col flex-wrap gap-y-${gapY ?? 5}`,
-        flex: flex === "col" ? "sm:flex-col" : "sm:flex-row",
-        justify: `justify-${justify ?? "start"}`,
-        gapX: `${`gap-x-${gapX ?? 7.5}`}`,
-        sizes: "sm:w-full ",
-        styles: `${overflowScroll ? "overflow-x-scroll" : ""} duration-500`,
-    };
-    return _jsx("div", { className: cn(body), children: children });
-}

package/interface/Deck.d.ts

@@ -1,15 +0,0 @@
-import { Titles } from "./Property";
-export interface DeckProps<T> {
-    children: React.ReactNode;
-    titles?: Titles;
-    options?: {
-        flex?: "col" | "row";
-        justify?: "between";
-        overflowScroll?: boolean;
-        width?: T;
-        height?: number;
-        gapX?: number;
-        gapY?: number;
-    };
-    debug?: string;
-}

package/interface/Deck.js

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

package/util/display.d.ts

@@ -1,25 +0,0 @@
-export declare const row: (gap?: number) => string;
-export declare const col: (gap?: number, width?: number | string) => string;
-export declare const between: {
-    row: string;
-    col: string;
-};
-export declare const center: {
-    col: (gap?: number) => string;
-    row: (gap?: number) => string;
-    colO: (gap?: number) => string;
-    rowO: (gap?: number) => string;
-    screen: {
-        default: string;
-        col: (gap?: number) => string;
-        row: (gap?: number) => string;
-    };
-};
-export declare const grid: {
-    col: (col: number, gap?: number) => string;
-    row: (row: number, gap?: number) => string;
-};
-export declare const box: {
-    row: (height: number, gap?: number) => string;
-    col: (width: number, gap?: number) => string;
-};

package/util/display.js

@@ -1,25 +0,0 @@
-export const row = (gap = 8) => `flex flex-row gap-${gap} `;
-export const col = (gap = 8, width) => `flex flex-col gap-${gap} ${width ? `w-${width}` : "w-full"} `;
-export const between = {
-    row: "flex flex-row justify-between items-center ",
-    col: "flex flex-col justify-between items-center ",
-};
-export const center = {
-    col: (gap = 0) => `gap-${gap} flex flex-col items-center `,
-    row: (gap = 0) => `gap-${gap} flex flex-row items-center `,
-    colO: (gap = 0) => `gap-${gap} flex flex-col justify-center items-center `,
-    rowO: (gap = 0) => `gap-${gap} flex flex-row justify-center items-center `,
-    screen: {
-        default: "flex justify-center items-center min-h-screen w-full overflow-hidden min-h-screen relative ",
-        col: (gap = 0) => `gap-${gap} flex flex-col justify-center items-center min-h-screen w-full `,
-        row: (gap = 0) => `gap-${gap} flex flex-row justify-center items-center min-h-screen w-full `,
-    },
-};
-export const grid = {
-    col: (col, gap = 12) => `grid grid-cols-${col} gap-${gap} `,
-    row: (row, gap = 12) => `grid grid-rows-${row}  gap-${gap}`,
-};
-export const box = {
-    row: (height, gap) => `h-${height} gap-${gap} flex flex-row `,
-    col: (width, gap) => `w-${width} gap-${gap} flex flex-col `,
-};

package/util/displayResponsive.d.ts

@@ -1,3 +0,0 @@
-export declare const responsiveColToRow: () => string;
-export declare const responsiveRowToCol: () => string;
-export declare const responsiveGridToCol: (gridCell: number) => string;

package/util/displayResponsive.js

@@ -1,15 +0,0 @@
-export const responsiveColToRow = () => {
-    const df = "flex flex-col";
-    const mark = "md:flex-row";
-    return [df, mark].join(" ");
-};
-export const responsiveRowToCol = () => {
-    const df = "flex flex-row";
-    const md = "md:flex-col";
-    return [df, md].join(" ");
-};
-export const responsiveGridToCol = (gridCell) => {
-    const df = `grid grid-cols-${gridCell}`;
-    const md = "md:flex md:flex-col";
-    return [df, md].join(" ");
-};

package/util/position.d.ts

@@ -1,14 +0,0 @@
-export declare const fixed: {
-    tl: (top: number | string, left: number | string) => string;
-    br: (bottom: number | string, right: number | string) => string;
-};
-export declare const absolute: {
-    tl: (top?: number | string, left?: number | string) => string;
-    tr: (top?: number | string, right?: number | string) => string;
-    br: (bottom?: number, right?: number) => string;
-    bl: (bottom?: number, left?: number) => string;
-    full: {
-        tl: (top?: number | string, left?: number | string) => string;
-        bl: (bottom?: number | string, left?: number | string) => string;
-    };
-};

package/util/position.js

@@ -1,44 +0,0 @@
-export const fixed = {
-    tl: (top, left) => `fixed top-${top} left-${left} z-50 `,
-    br: (bottom, right) => `fixed bottom-${bottom} right-${right} z-50 `,
-};
-export const absolute = {
-    tl: (top, left) => {
-        const topClass = () => {
-            if (typeof top === "number" && top < 0)
-                return `-top-${Math.abs(top)}`;
-            return `top-${top}`;
-        };
-        const leftClass = () => {
-            if (typeof left === "number" && left < 0)
-                return `-left-${Math.abs(left)}`;
-            return `left-${left}`;
-        };
-        return `absolute ${topClass()} ${leftClass()} `;
-    },
-    tr: (top, right) => {
-        const topClass = () => {
-            if (typeof top === "number" && top < 0)
-                return `-top-${Math.abs(top)} `;
-            return `top-${top}`;
-        };
-        const rightClass = () => {
-            if (typeof right === "number" && right < 0)
-                return `-right-${Math.abs(right)} `;
-            return `right-${right}`;
-        };
-        return `absolute ${topClass()} ${rightClass()} `;
-    },
-    br: (bottom = 0, right = 0) => `absolute bottom-${bottom} right-${right} `,
-    bl: (bottom = 0, left = 0) => `absolute bottom-${bottom} left-${left} `,
-    full: {
-        tl: (top, left) => {
-            if (!(typeof top === "number") || !(typeof left === "number"))
-                return `absolute top-${top} left-${left} w-full `;
-            const topClass = top >= 0 ? `top-${top}` : `-top-${Math.abs(top)}`;
-            const leftClass = left >= 0 ? `left-${left}` : `-left-${Math.abs(left)}`;
-            return `absolute w-full ${topClass} ${leftClass} `;
-        },
-        bl: (bottom, left) => `absolute bottom-${bottom ?? 0} left-${left ?? 0} w-full `,
-    },
-};