@edu-tosel/design 1.0.1 → 1.0.3

package/tailwind.config.ts

@@ -56,57 +56,7 @@ export default {
         "hj-blue": "#385EAB",
         "hj-blue-light": "#A8BFE5",
       },
-      inset: {
-        "1/20": "5%",
-        "1/10": "10%",
-        "2/10": "5%",
-        "1/5": "20%",
-        "2/5": "40%",
-        "1/4": "25%",
-        "1/3": "33.3333333%",
-        "5/100": "5%",
-        "10/100": "10%",
-        "15/100": "15%",
-        "43/100": "43%",
-        "46/100": "46%",
-      },
-      width: {
-        "2/3": "66.6666667%",
-        "1/7": "14.2857143%",
-        "2/7": "28.5714286%",
-        "3/7": "42.8571429%",
-        "4/7": "57.1428571%",
-        "1/8": "12.5%",
-        "3/10": "30%",
-        "1/10": "10%",
-        "4/10": "40%",
-        "6/10": "60%",
-        "7/10": "70%",
-        "9/10": "90%",
-        "10/100": "10%",
-        "12/100": "12%",
-        "15/100": "15%",
-        "35/100": "35%",
-        "45/100": "45%",
-        "55/100": "55%",
-        "65/100": "65%",
-        "85/100": "85%",
-        90: "22.5rem",
-        120: "30rem",
-        176: "44rem",
-        478: "478px",
-      },
-      height: {
-        "4/7": "57.1428571%",
-        "3/7": "42.8571429%",
-        "5/12": "41.6666667%",
-        "1/10": "10%",
-        "3/10": "30%",
-        "4/10": "40%",
-        "6/10": "60%",
-        "7/10": "70%",
-        "9/10": "90%",
-      },
+
       maxHeight: {
         44: "11rem",
         "9/10": "90%",
@@ -115,17 +65,24 @@ export default {
         "sun-calc": "calc(50% - 6rem)",
         1: "0.25rem",
         7: "1.75rem",
+        7.5: "1.875rem",
+        8: "2rem",
+        9: "2.25rem",
         11: "2.75rem",
         12: "3rem",
+        14: "3.5rem",
         15: "3.75rem",
+        16: "4rem",
         18: "4.5rem",
         19: "4.75rem",
         22: "5.5rem",
+        23: "5.75rem",
         25: "6.25rem",
         26: "6.5rem",
         27: "6.75rem",
         30: "7.5rem",
         34: "8.5rem",
+        36: "9rem",
         38: "9.5rem",
         40: "10rem",
         42: "10.5rem",
@@ -160,11 +117,13 @@ export default {
         108: "27rem",
         110: "27.5rem",
         112: "28rem",
+        112.5: "28.125rem",
         116: "29rem",
         120: "30rem",
         122: "30.5rem",
         124: "31rem",
         126: "31.5rem",
+        127.5: "31.875rem",
         128: "32rem",
         132: "33rem",
         135: "33.75rem",
@@ -172,15 +131,21 @@ export default {
         140: "35rem",
         144: "36rem",
         148: "37rem",
+        158: "39.5rem",
         160: "40rem",
         164: "41rem",
         168: "42rem",
         172: "43rem",
         176: "44rem",
+        178: "44.5rem",
         180: "45rem",
         182: "45.5rem",
+        184: "46rem",
         186: "46.5rem",
+        187.5: "46.875rem",
+        188: "47rem",
         190: "47.5rem",
+        192: "48rem",
         200: "50rem",
         216: "54rem",
         220: "55rem",
@@ -189,6 +154,7 @@ export default {
         228: "57rem",
         232: "58rem",
         240: "60rem",
+        247.5: "61.875rem",
         248: "62rem",
         255: "63.75rem",
         256: "64rem",
@@ -243,6 +209,7 @@ export default {
       },
       transitionDuration: {
         300: "300ms",
+        1000: "1000ms",
         2000: "2000ms",
         60000: "60000ms",
         300000: "300000ms",
@@ -269,6 +236,21 @@ export default {
         30: ".3",
         40: ".4",
       },
+      fontSize: {
+        xs: "0.75rem",
+        sm: "0.875rem",
+        base: "1rem",
+        lg: "1.125rem",
+        xl: "1.25rem",
+        "2xl": "1.5rem",
+        "3xl": "1.875rem",
+        "4xl": "2.25rem",
+        "5xl": "3rem",
+        "6xl": "3.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6rem",
+        "9xl": "8rem",
+      },
       screens: {
         xxxs: "332px",
         xxs: "393px",
@@ -281,6 +263,149 @@ export default {
         xl: "1280px",
         "2xl": "1536px",
       },
+      inset: {
+        "1/20": "5%",
+        "1/10": "10%",
+        "2/10": "5%",
+        "1/5": "20%",
+        "2/5": "40%",
+        "1/4": "25%",
+        "1/3": "33.3333333%",
+        "5/100": "5%",
+        "10/100": "10%",
+        "15/100": "15%",
+        "43/100": "43%",
+        "46/100": "46%",
+      },
+      width: {
+        90: "22.5rem",
+        120: "30rem",
+        176: "44rem",
+        "2/3": "66.6666667%",
+        "1/7": "14.2857143%",
+        "2/7": "28.5714286%",
+        "3/7": "42.8571429%",
+        "4/7": "57.1428571%",
+        "1/8": "12.5%",
+        "3/10": "30%",
+        "1/10": "10%",
+        "4/10": "40%",
+        "6/10": "60%",
+        "7/10": "70%",
+        "9/10": "90%",
+        // percentile width
+        "1/100": "1%",
+        "2/100": "2%",
+        "3/100": "3%",
+        "4/100": "4%",
+        "5/100": "5%",
+        "6/100": "6%",
+        "7/100": "7%",
+        "8/100": "8%",
+        "9/100": "9%",
+        "10/100": "10%",
+        "11/100": "11%",
+        "12/100": "12%",
+        "13/100": "13%",
+        "14/100": "14%",
+        "15/100": "15%",
+        "16/100": "16%",
+        "17/100": "17%",
+        "18/100": "18%",
+        "19/100": "19%",
+        "20/100": "20%",
+        "21/100": "21%",
+        "22/100": "22%",
+        "23/100": "23%",
+        "24/100": "24%",
+        "25/100": "25%",
+        "26/100": "26%",
+        "27/100": "27%",
+        "28/100": "28%",
+        "29/100": "29%",
+        "30/100": "30%",
+        "31/100": "31%",
+        "32/100": "32%",
+        "33/100": "33%",
+        "34/100": "34%",
+        "35/100": "35%",
+        "36/100": "36%",
+        "37/100": "37%",
+        "38/100": "38%",
+        "39/100": "39%",
+        "40/100": "40%",
+        "41/100": "41%",
+        "42/100": "42%",
+        "43/100": "43%",
+        "44/100": "44%",
+        "45/100": "45%",
+        "46/100": "46%",
+        "47/100": "47%",
+        "48/100": "48%",
+        "49/100": "49%",
+        "50/100": "50%",
+        "51/100": "51%",
+        "52/100": "52%",
+        "53/100": "53%",
+        "54/100": "54%",
+        "55/100": "55%",
+        "56/100": "56%",
+        "57/100": "57%",
+        "58/100": "58%",
+        "59/100": "59%",
+        "60/100": "60%",
+        "61/100": "61%",
+        "62/100": "62%",
+        "63/100": "63%",
+        "64/100": "64%",
+        "65/100": "65%",
+        "66/100": "66%",
+        "67/100": "67%",
+        "68/100": "68%",
+        "69/100": "69%",
+        "70/100": "70%",
+        "71/100": "71%",
+        "72/100": "72%",
+        "73/100": "73%",
+        "74/100": "74%",
+        "75/100": "75%",
+        "76/100": "76%",
+        "77/100": "77%",
+        "78/100": "78%",
+        "79/100": "79%",
+        "80/100": "80%",
+        "81/100": "81%",
+        "82/100": "82%",
+        "83/100": "83%",
+        "84/100": "84%",
+        "85/100": "85%",
+        "86/100": "86%",
+        "87/100": "87%",
+        "88/100": "88%",
+        "89/100": "89%",
+        "90/100": "90%",
+        "91/100": "91%",
+        "92/100": "92%",
+        "93/100": "93%",
+        "94/100": "94%",
+        "95/100": "95%",
+        "96/100": "96%",
+        "97/100": "97%",
+        "98/100": "98%",
+        "99/100": "99%",
+        "100/100": "100%",
+      },
+      height: {
+        "4/7": "57.1428571%",
+        "3/7": "42.8571429%",
+        "5/12": "41.6666667%",
+        "1/10": "10%",
+        "3/10": "30%",
+        "4/10": "40%",
+        "6/10": "60%",
+        "7/10": "70%",
+        "9/10": "90%",
+      },
     },
   },
   safelist: [

package/version.txt

@@ -1 +1 @@
-1.0.1
+1.0.3

package/board/Board.d.ts

@@ -1,2 +0,0 @@
-import { BoardProps } from "../interface/Board";
-export declare function Board({ children, widget, options }: BoardProps): import("react/jsx-runtime").JSX.Element;

package/board/Board.js

@@ -1,14 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useWidgetStore } from "../store";
-export function Board({ children, widget, options }) {
-    const { events } = useWidgetStore();
-    const { height } = options ?? {};
-    const { widgets } = widget ?? {};
-    const classNames = [
-        `min-h-screen xl:min-h-0 xl:h-186 `,
-        "xl:rounded-xl bg-white/80 relative w-full ",
-    ].join(" ");
-    return (_jsxs("div", { className: classNames + "", children: [children, _jsx(_Fragment, { children: widgets?.map(([widgetEvent, Component]) => {
-                    return events?.some(({ event }) => event === widgetEvent) ? (_jsx(_Fragment, { children: Component })) : null;
-                }) })] }));
-}

package/board/CanvasBoard.d.ts

@@ -1,2 +0,0 @@
-import { BoardProps } from "../interface/Board";
-export declare function CanvasBoard({ children, widget, options }: BoardProps): import("react/jsx-runtime").JSX.Element;

package/board/CanvasBoard.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../util";
-import { Board } from "./Board";
-export function CanvasBoard({ children, widget, 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-8 xl:pr-2 pt-2 xs:pt-4 xl:pt-8";
-    const styles = "xl:overflow-y-scroll ";
-    return (_jsx(Board, { widget: widget, options: { height }, children: _jsx("div", { className: cn(layouts, sizes, paddings, styles), children: children }) }));
-}

package/board/Header.d.ts

@@ -1,6 +0,0 @@
-/// <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

@@ -1,12 +0,0 @@
-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

@@ -1,7 +0,0 @@
-/// <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

@@ -1,7 +0,0 @@
-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/card/Card.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "../globals.css";
-import { cn } from "../util";
-const widthSize = {
-    xs: "",
-    sm: "md:w-60",
-    md: "md:w-90",
-    lg: "md:w-135",
-    xl: "md:w-225",
-};
-const heightSize = {
-    xs: "",
-    sm: "h-72 sm:h-48",
-    md: "h-72 sm:h-48",
-    lg: "h-80",
-    xl: "h-125",
-};
-export function Card({ children, options }) {
-    const { height, width, text, onClick } = options ?? {};
-    const { size: textSize, color: textColor } = text ?? {};
-    const sizes = [
-        `${heightSize[height ?? "sm"]}`,
-        `w-full ${widthSize[width ?? "sm"]}`,
-    ].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/TrumpCard.js

@@ -1,19 +0,0 @@
-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] }));
-}