@edu-tosel/design 0.1.0

package/README.md

@@ -0,0 +1,32 @@
+# 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
+문자열 조작 컴포넌트 보관

package/asset/colors.d.ts

@@ -0,0 +1,7 @@
+export declare const colorsByLevel: {
+    PS: string;
+    ST: string;
+    BA: string;
+    JR: string;
+    HJ: string;
+};

package/asset/colors.js

@@ -0,0 +1,7 @@
+export var colorsByLevel = {
+    PS: "ps-pink",
+    ST: "st-orange",
+    BA: "ba-yellow",
+    JR: "jr-blue",
+    HJ: "hj-blue",
+};

package/asset/display.d.ts

@@ -0,0 +1,20 @@
+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;
+};
+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/asset/display.js

@@ -0,0 +1,44 @@
+export var row = function (gap) {
+    if (gap === void 0) { gap = 8; }
+    return "flex flex-row gap-".concat(gap, " ");
+};
+export var col = function (gap, width) {
+    if (gap === void 0) { gap = 8; }
+    return "flex flex-col gap-".concat(gap, " ").concat(width ? "w-".concat(width) : "w-full", " ");
+};
+export var between = {
+    row: "flex flex-row justify-between items-center ",
+    col: "flex flex-col justify-between items-center ",
+};
+export var center = {
+    col: function (gap) {
+        if (gap === void 0) { gap = 0; }
+        return "gap-".concat(gap, " flex flex-col items-center ");
+    },
+    row: function (gap) {
+        if (gap === void 0) { gap = 0; }
+        return "gap-".concat(gap, " flex flex-row items-center ");
+    },
+    colO: function (gap) {
+        if (gap === void 0) { gap = 0; }
+        return "gap-".concat(gap, " flex flex-col justify-center items-center ");
+    },
+    rowO: function (gap) {
+        if (gap === void 0) { gap = 0; }
+        return "gap-".concat(gap, " flex flex-row justify-center items-center ");
+    },
+};
+export var grid = {
+    col: function (col, gap) {
+        if (gap === void 0) { gap = 12; }
+        return "grid grid-cols-".concat(col, " gap-").concat(gap, " ");
+    },
+    row: function (row, gap) {
+        if (gap === void 0) { gap = 12; }
+        return "grid grid-rows-".concat(row, "  gap-").concat(gap);
+    },
+};
+export var box = {
+    row: function (height, gap) { return "h-".concat(height, " gap-").concat(gap, " flex flex-row "); },
+    col: function (width, gap) { return "w-".concat(width, " gap-").concat(gap, " flex flex-col "); },
+};

package/asset/displayResponsive.d.ts

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

package/asset/displayResponsive.js

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

package/asset/position.d.ts

@@ -0,0 +1,10 @@
+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, left?: number) => string;
+    tr: (top?: number, right?: number) => string;
+    br: (bottom?: number, right?: number) => string;
+    bl: (bottom?: number, left?: number) => string;
+};

package/asset/position.js

@@ -0,0 +1,28 @@
+export var fixed = {
+    tl: function (top, left) { return "fixed top-".concat(top, " left-").concat(left, " z-50 "); },
+    br: function (bottom, right) {
+        return "fixed bottom-".concat(bottom, " right-").concat(right, " z-50 ");
+    },
+};
+export var absolute = {
+    tl: function (top, left) {
+        if (top === void 0) { top = 0; }
+        if (left === void 0) { left = 0; }
+        return "absolute top-".concat(top, " left-").concat(left, " ");
+    },
+    tr: function (top, right) {
+        if (top === void 0) { top = 0; }
+        if (right === void 0) { right = 0; }
+        return "absolute top-".concat(top, " right-").concat(right, " ");
+    },
+    br: function (bottom, right) {
+        if (bottom === void 0) { bottom = 0; }
+        if (right === void 0) { right = 0; }
+        return "absolute bottom-".concat(bottom, " right-").concat(right, " ");
+    },
+    bl: function (bottom, left) {
+        if (bottom === void 0) { bottom = 0; }
+        if (left === void 0) { left = 0; }
+        return "absolute bottom-".concat(bottom, " left-").concat(left, " ");
+    },
+};

package/asset/shape.d.ts

@@ -0,0 +1 @@
+export declare const circle: (radius: number) => string;

package/asset/shape.js

@@ -0,0 +1,3 @@
+export var circle = function (radius) {
+    return "rounded-full w-".concat(radius, " h-").concat(radius, " overflow-hidden ");
+};

package/board/index.d.ts

@@ -0,0 +1,19 @@
+/// <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;
+        bgColor?: string;
+        childrens?: React.ReactNode[];
+    };
+    options?: {
+        height?: number;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/board/index.js

@@ -0,0 +1,45 @@
+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 "../asset/display";
+function Header(_a) {
+    var title = _a.title, bgColor = _a.bgColor, childrens = _a.childrens;
+    var headerClassNames = [
+        center.row + between.row,
+        "bg-".concat(bgColor || "off-white"),
+        "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",
+    ].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, bgColor = header.bgColor, childrens = header.childrens;
+    var height = (options !== null && options !== void 0 ? options : {}).height;
+    var classNames = ["pt-8 px-12 overflow-y-scroll h-full pb-32"].join(" ");
+    return (_jsx(Board, __assign({ header: { title: title, bgColor: bgColor, childrens: childrens }, options: { height: height } }, { children: _jsx("div", __assign({ className: classNames }, { children: children })) })));
+}

package/card/index.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import "../style.css";
+type Level = "PS" | "ST" | "BA" | "JR" | "HJ";
+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;
+export declare function ProfileCard<T extends string | number>({ studentInfo, gradeData, }: {
+    studentInfo: {
+        name: string;
+        age: T;
+        birthday: string;
+        image?: [string, string];
+    };
+    gradeData: {
+        level?: Level;
+        score?: number;
+        grade?: number;
+    };
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/card/index.js

@@ -0,0 +1,40 @@
+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 "../asset/display";
+import { colorsByLevel } from "../asset/colors";
+function Header(_a) {
+    var title = _a.title, bgColor = _a.bgColor, childrens = _a.childrens;
+    var headerClassNames = [
+        center.row + between.row,
+        "".concat(bgColor || "bg-off-white"),
+        "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 }))] })));
+}
+export function ProfileCard(_a) {
+    var studentInfo = _a.studentInfo, gradeData = _a.gradeData;
+    var name = studentInfo.name, age = studentInfo.age, birthday = studentInfo.birthday, image = studentInfo.image;
+    var _b = image !== null && image !== void 0 ? image : [], src = _b[0], url = _b[1];
+    var level = gradeData.level, score = gradeData.score, grade = gradeData.grade;
+    return (_jsx(Card, __assign({ options: { width: 84 } }, { children: _jsxs("div", __assign({ className: "flex" }, { children: [_jsx("div", { className: "h-20 w-20 overflow-hidden rounded-full bg-black" }), _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-navy-blue pb-2" }, { children: [_jsx("div", __assign({ className: "text-xl font-bold" }, { children: name })), _jsxs("div", { children: [age, "\uC138"] }), _jsx("div", { children: birthday })] })), _jsxs("div", { children: [_jsx("div", { children: "\uD559\uC6D0\uC0DD" }), _jsx("div", { children: level ? colorsByLevel[level] : "" })] })] }))] })) })));
+}

package/deck/index.d.ts

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

package/deck/index.js

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

package/header/index.d.ts

@@ -0,0 +1,4 @@
+export declare function DashboardHeader({ title, image }: {
+    title: string;
+    image?: [string, string];
+}): import("react/jsx-runtime").JSX.Element;

package/header/index.js

@@ -0,0 +1,26 @@
+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 { useState } from "react";
+import { circle } from "../asset/shape";
+function Menu() {
+    var classNames = ["absolute -left-24 z-40 h-80 w-48 border-2 bg-white "].join(" ");
+    return (_jsxs("div", __assign({ className: classNames + " fade-in-100 animate-in" }, { children: [_jsx("div", { children: "\u314E\u3147" }), _jsx("div", { children: "\u314E\u3147" })] })));
+}
+export function DashboardHeader(_a) {
+    var title = _a.title, image = _a.image;
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var _c = image !== null && image !== void 0 ? image : [], src = _c[0], url = _c[1];
+    return (_jsxs("div", __assign({ className: "relative flex h-20 w-full items-center justify-between bg-white px-19 shadow-black/10 shadow-b-md" }, { children: [_jsxs("div", __assign({ className: "flex h-12 items-center gap-9" }, { children: [src && url ? (_jsx("button", __assign({ onClick: function () {
+                            window.location.href = url;
+                        } }, { children: _jsx("img", { src: src, alt: "logo", className: "h-12" }) }))) : (_jsx("div", { children: "TOSEL Lab" })), _jsx("div", __assign({ className: "text-3xl font-bold" }, { children: title }))] })), _jsxs("div", __assign({ className: "relative" }, { children: [_jsx("button", __assign({ onClick: function () { return setIsOpen(!isOpen); }, className: circle(9) + "border-2" }, { children: "+" })), isOpen ? _jsx(Menu, {}) : null] }))] })));
+}

package/modal/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import "../style.css";
+export declare function NoticeModal({ titles, children, buttons, close, }: {
+    titles?: string[];
+    children: React.ReactNode;
+    buttons?: [string, () => unknown | (() => Promise<unknown>)][];
+    close?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Alert(): import("react/jsx-runtime").JSX.Element;

package/modal/index.js

@@ -0,0 +1,36 @@
+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 { absolute } from "../asset/position";
+import { col } from "../asset/display";
+function Modal(_a) {
+    var children = _a.children;
+    var classNames = [
+        absolute.tl() +
+            "z-50 flex min-h-screen w-full items-center justify-center bg-black/10 backdrop-blur-sm",
+    ].join(" ");
+    var modalClassNames = ["h-100 w-2/3 min-w-76 max-w-176 rounded-xl bg-white relative"].join(" ");
+    return (_jsx("div", __assign({ className: classNames }, { children: _jsx("div", __assign({ className: modalClassNames }, { children: children })) })));
+}
+export function NoticeModal(_a) {
+    var titles = _a.titles, children = _a.children, buttons = _a.buttons, close = _a.close;
+    var _b = titles || ["", ""], title = _b[0], subTitle = _b[1];
+    var buttonClassNames = ["rounded-2xl bg-black px-8 py-2 text-lg font-bold text-white"].join(" ");
+    return (_jsxs(Modal, { children: [_jsxs("div", __assign({ className: col(3) + "px-25 pt-18 h-full pb-12" }, { children: [_jsxs("div", __assign({ className: col(6) }, { children: [_jsx("div", __assign({ className: "text-3xl font-bold" }, { children: title })), _jsx("div", { className: "h-2 w-14 rounded-full bg-pale-lavender" }), _jsx("div", __assign({ className: "text-xl font-bold" }, { children: subTitle }))] })), _jsx("div", { children: children }), buttons ? (_jsx("div", __assign({ className: "mt-auto flex justify-end gap-4" }, { children: buttons.map(function (_a) {
+                            var text = _a[0], onClick = _a[1];
+                            return (_jsx("button", __assign({ className: buttonClassNames, onClick: onClick }, { children: text })));
+                        }) }))) : null] })), _jsx("button", { className: absolute.tl(5, 7) + "bg-black rounded-full h-9 w-9", onClick: close })] }));
+}
+export function Alert() {
+    return (_jsx("div", { children: _jsx("div", {}) }));
+}

package/navigation/index.d.ts

@@ -0,0 +1 @@
+export default function Navigation(): import("react/jsx-runtime").JSX.Element;

package/navigation/index.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Navigation() {
+    return (_jsx("div", { children: _jsx("div", {}) }));
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@edu-tosel/design",
+  "version": "0.1.0",
+  "description": "UI components for International TOSEL Committee",
+  "keywords": [
+    "jsx",
+    "tailwindcss",
+    "ui"
+  ],
+  "author": "International TOSEL Committee",
+  "license": "MIT",
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.1",
+    "react-scripts": "5.0.1",
+    "tailwind-scrollbar-hide": "^1.1.7",
+    "tailwindcss": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
+    "tailwindcss-directional-shadows": "^0.0.6",
+    "tw-elements": "^1.1.0",
+    "typescript": "^4.9.5",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {},
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {}
+}

package/style.css

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.box-shadow {
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
+}

package/tailwind.config.js

@@ -0,0 +1,166 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./node_modules/tw-elements/dist/js/**/*.js", "./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {
+      screens: {
+        xxxs: "332px",
+        xxs: "393px",
+        xs: "480px",
+        sm: "640px",
+        md: "768px", // IPad Mini
+        ml: "964px", // IPad Air, IPad Pro 11.
+        lg: "1024px", // IPad Mini Horizontal Viewport
+        xl: "1280px",
+        "2xl": "1536px",
+      },
+      colors: {
+        "off-white": "#F5F5F5",
+        burgundy: "#933652",
+        "pale-silver": "#DFD8CA",
+        "cosmic-latte": "#FBF3E4",
+        "pale-lavender": "#E7E9F2",
+        "gray-light": "#F0F0F0",
+        "navy-blue": "#173A8B",
+        "pastel-blue": "#CED6E6",
+        "deep-red": "#760023",
+        "rose-velvet": "#AC647A",
+        "dark-shade-of-cyan": "#105652",
+        "dim-gray": "#4C4C4C",
+        "medium-gray": "#7F7F7F",
+
+        // Brabd Colors
+        "ps-pink": "#E3006E",
+        "ps-pink-light": "#FFBADB",
+        "st-orange": "#ED6A00",
+        "st-orange-light": "#F5D2B6",
+        "ba-yellow": "#FCCE30",
+        "ba-yellow-light": "#FFEFB7",
+        "jr-blue": "#52A2DA",
+        "jr-blue-light": "#D6EEFF",
+        "hj-blue": "#385EAB",
+        "hj-blue-light": "#A8BFE5",
+      },
+      spacing: {
+        1: "0.25rem",
+        7: "1.75rem",
+        12: "3rem",
+        15: "3.75rem",
+        18: "4.5rem",
+        19: "4.75rem",
+        22: "5.5rem",
+        25: "6.25rem",
+        27: "6.75rem",
+        30: "7.5rem",
+        34: "8.5rem",
+        38: "9.5rem",
+        40: "10rem",
+        42: "10.5rem",
+        49: "12.25rem",
+        50: "12.5rem",
+        52: "13rem",
+        56: "14rem",
+        64: "16rem",
+        68: "17rem",
+        69: "17.25rem",
+        72: "18rem",
+        73: "18.25rem",
+        76: "19rem",
+        78: "20rem",
+        84: "21rem",
+        85: "21.25rem",
+        88: "22rem",
+        90: "22.5rem",
+        92: "23rem",
+        96: "24rem",
+        98: "24.5rem",
+        100: "25rem",
+        104: "26rem",
+        106: "26.5rem",
+        108: "27rem",
+        110: "27.5rem",
+        112: "28rem",
+        116: "29rem",
+        120: "30rem",
+        122: "30.5rem",
+        124: "31rem",
+        126: "31.5rem",
+        128: "32rem",
+        132: "33rem",
+        136: "34rem",
+        140: "35rem",
+        144: "36rem",
+        148: "37rem",
+        160: "40rem",
+        176: "44rem",
+        180: "45rem",
+        182: "45.5rem",
+        186: "46.5rem",
+        200: "50rem",
+        220: "55rem",
+        228: "57rem",
+        232: "58rem",
+        240: "60rem",
+        248: "62rem",
+        255: "63.75rem",
+        256: "64rem",
+        260: "65rem",
+        272: "68rem",
+        280: "70rem",
+      },
+    },
+  },
+  safelist: [
+    {
+      pattern: /col-.*/,
+    },
+    {
+      pattern: /row-.*/,
+    },
+    {
+      pattern: /flex-.*/,
+      variants: ["md", "hover", "focus"],
+    },
+    {
+      pattern: /justify-.*/,
+    },
+    {
+      pattern: /items-.*/,
+    },
+    {
+      pattern: /grid-.*/,
+    },
+    {
+      pattern: /gap-.*/,
+      variants: ["md", "hover", "focus"],
+    },
+    {
+      pattern: /border-.*/,
+    },
+    { pattern: /w-.*/ },
+    { pattern: /h-.*/ },
+    {
+      pattern: /top*.*/,
+    },
+    {
+      pattern: /bottom*.*/,
+    },
+    {
+      pattern: /left*.*/,
+    },
+    {
+      pattern: /right*.*/,
+    },
+    { pattern: /bg-.*/ },
+    { pattern: /text-.*/ },
+    {
+      pattern: /p-.*/,
+    },
+  ],
+  plugins: [
+    require("tailwind-scrollbar-hide"),
+    require("tailwindcss-animate"),
+    require("tw-elements/dist/plugin"),
+    require("tailwindcss-directional-shadows"),
+  ],
+};

package/text/index.d.ts

@@ -0,0 +1,5 @@
+import "../style.css";
+export declare function LineBreaks({ texts, gap }: {
+    texts: string[];
+    gap?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/text/index.js

@@ -0,0 +1,18 @@
+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 } from "react/jsx-runtime";
+import "../style.css";
+import { col } from "../asset/display";
+export function LineBreaks(_a) {
+    var texts = _a.texts, gap = _a.gap;
+    return (_jsx("div", __assign({ className: col(gap) }, { children: texts.map(function (text) { return (_jsx("div", { children: text })); }) })));
+}

package/version.txt

@@ -0,0 +1 @@
+0.1.0