@edu-tosel/design 1.0.95 → 1.0.96

package/card/design/SubmitCard.design.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+import { LabelWidget } from "../../interface";
+export interface SubmitCardProps {
+    children?: ReactNode;
+    button?: LabelWidget;
+}
+export default function SubmitCardDesign({ children, button, }: SubmitCardProps): import("react/jsx-runtime").JSX.Element;

package/card/design/SubmitCard.design.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CardDesign from "./Card.design";
+import { Label } from "../../widget";
+export default function SubmitCardDesign({ children, button, }) {
+    return (_jsxs(CardDesign, { option: {
+            width: "lg",
+            height: "lg",
+            className: "p-5",
+        }, children: [children, button && (_jsx(Label.Button, { ...button, option: {
+                    className: "absolute bottom-5 right-5",
+                } }))] }));
+}

package/card/index.d.ts

@@ -7,3 +7,4 @@ export { default as NavCard } from "./template/NavCard";
 export { default as ProgressCard } from "./template/ProgressCard";
 export { default as RollCard } from "./template/RollCard";
 export { default as TableCard } from "./template/TableCard";
+export { default as SubmitCard } from "./template/SubmitCard";

package/card/index.js

@@ -7,3 +7,4 @@ export { default as NavCard } from "./template/NavCard";
 export { default as ProgressCard } from "./template/ProgressCard";
 export { default as RollCard } from "./template/RollCard";
 export { default as TableCard } from "./template/TableCard";
+export { default as SubmitCard } from "./template/SubmitCard";

package/card/template/ProgressCard/Small.d.ts

@@ -1,2 +1,2 @@
 import { ProgressCardProps } from "../../../interface";
-export default function ProgressCardSmall({ titles, displays, checks, nowFocus, theme, }: ProgressCardProps): import("react/jsx-runtime").JSX.Element;
+export default function ProgressCardSmall({ titles, displays, checks, nowFocus, theme, option, }: ProgressCardProps): import("react/jsx-runtime").JSX.Element;

package/card/template/ProgressCard/Small.js

@@ -10,7 +10,8 @@ const text = {
     green: "text-green-dark",
     blue: "text-blue-navy",
 };
-export default function ProgressCardSmall({ titles, displays, checks, nowFocus, theme = "green", }) {
+export default function ProgressCardSmall({ titles, displays, checks, nowFocus, theme = "green", option, }) {
+    const { size = "md" } = option ?? {};
     const progressBox = {
         positions: "absolute top-2.5 left-2.5",
         displays: "flex",
@@ -25,13 +26,21 @@ export default function ProgressCardSmall({ titles, displays, checks, nowFocus,
     });
     const titleBox = {
         positions: "absolute top-2.5 right-2.5",
-        sizes: "max-w-32.5 w-full h-16",
-        displays: "flex flex-col items-end gap-y-3",
+        sizes: "max-w-40 w-full h-16",
+        displays: "flex flex-col items-end",
         backgrounds: nowFocus === true ? bgLight[theme ?? "green"] : "bg-transparent",
-        boundaries: "rounded-[10px] pt-2 pr-3.5",
+        boundaries: "rounded-[10px]",
+        styles: titles.size === "md"
+            ? "pt-2 pr-3.5 gap-y-3"
+            : "justify-center gap-y-1.5 pr-2",
+    };
+    const titleStyle = {
+        texts: "leading-none",
+        sizes: titles.size === "sm" ? "text-[12px]" : "text-[20px] font-pretendard-bold",
+        styles: text[theme],
     };
     return (_jsxs(CardDesign, { option: {
-            width: "md",
+            width: size ?? "md",
             height: "5xs",
-        }, children: [_jsx("div", { className: cn(progressBox), children: displays.map(({ title, subtitle }, index) => (_jsxs("div", { className: cn(stepBox(index === nowFocus)), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "leading-none text-[12px] font-pretendard-bold", children: title }), _jsx(SVG.Operation.Checked, { flag: checks[index], size: 25, theme: "green" })] }), _jsx("div", { className: `text-[12px] ${text[theme]}`, children: subtitle })] }, title))) }), _jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: `text-[20px] leading-none font-pretendard-bold ${text[theme]}`, children: titles.title }), _jsx("div", { className: `text-[12px] leading-none ${text[theme]}`, children: titles.subtitle })] })] }));
+        }, children: [_jsx("div", { className: cn(progressBox), children: displays.map(({ title, subtitle }, index) => (_jsxs("div", { className: cn(stepBox(index === nowFocus)), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "leading-none text-[12px] font-pretendard-bold", children: title }), _jsx(SVG.Operation.Checked, { flag: checks[index], size: 25, theme: "green" })] }), _jsx("div", { className: `text-[12px] ${text[theme]}`, children: subtitle })] }, title))) }), _jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: cn(titleStyle), children: titles.title }), _jsx("div", { className: `text-[12px] leading-none ${text[theme]}`, children: titles.subtitle })] })] }));
 }

package/card/template/SubmitCard/index.d.ts

@@ -0,0 +1,2 @@
+import { SubmitCardProps } from "../../design/SubmitCard.design";
+export default function SubmitCard(props: SubmitCardProps): import("react/jsx-runtime").JSX.Element;

package/card/template/SubmitCard/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SubmitCardDesign from "../../design/SubmitCard.design";
+export default function SubmitCard(props) {
+    return _jsx(SubmitCardDesign, { ...props });
+}

package/interface/Card.d.ts

@@ -144,5 +144,8 @@ export interface ProgressCardProps {
     nowFocus?: number | boolean;
     displays: Titles[];
     theme?: Theme;
+    option?: {
+        size?: Size;
+    };
 }
 export {};

package/interface/Property.d.ts

@@ -58,6 +58,7 @@ export type Titles = {
     color?: string;
     titleColor?: string;
     subtitleColor?: string;
+    size?: Size;
 };
 export interface Log<K extends string, T extends string | number> {
     prints: K[];

package/interface/TextBox.d.ts

@@ -0,0 +1,20 @@
+import { Size, Titles } from "./Property";
+export interface TextBoxDesignProps {
+    titles: Titles;
+    option?: {
+        isCenter?: boolean;
+        size?: Size;
+        className?: string;
+    };
+    children?: React.ReactNode;
+}
+export interface TextBoxProps extends Omit<TextBoxDesignProps, "children"> {
+}
+export interface TextBoxWithImageProps extends TextBoxProps {
+    image: {
+        src: string;
+        width?: string;
+        height?: string;
+        className?: string;
+    };
+}

package/interface/TextBox.js

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

package/interface/index.d.ts

@@ -9,3 +9,4 @@ export * from "./Overlay";
 export * from "./Property";
 export * from "./Theme";
 export * from "./Shelf";
+export * from "./TextBox";

package/interface/index.js

@@ -9,3 +9,4 @@ export * from "./Overlay";
 export * from "./Property";
 export * from "./Theme";
 export * from "./Shelf";
+export * from "./TextBox";

package/layout/design/TextBox.design.d.ts

@@ -0,0 +1,2 @@
+import { TextBoxDesignProps } from "../../interface";
+export default function TextBoxDesign({ titles, children, option, }: TextBoxDesignProps): import("react/jsx-runtime").JSX.Element;

package/layout/design/TextBox.design.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LineBreaks } from "../../text";
+import { cn } from "../../util";
+const titleSize = {
+    md: "text-[16px]",
+    lg: "text-[20px]",
+};
+const subtitleSize = {
+    md: "text-[12px]",
+    lg: "text-[16px]",
+};
+export default function TextBoxDesign({ titles, children, option, }) {
+    const { title, subtitle, titleColor, color, subtitleColor } = titles;
+    const { size, isCenter, className } = option ?? {};
+    console.log(isCenter);
+    const container = {
+        displays: "flex flex-col",
+        center: isCenter && "items-center",
+        styles: color,
+        className: className ?? "gap-y-2",
+    };
+    const titleBox = {
+        colors: titleColor ?? color ?? "text-gray-dark",
+        sizes: titleSize[size ?? "md"],
+        fonts: "font-pretendard-bold",
+        styles: "leading-tight",
+    };
+    const subtitleBox = {
+        colors: subtitleColor ?? color ?? "text-gray-medium",
+        sizes: subtitleSize[size ?? "md"],
+        center: isCenter && "text-center",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(titleBox), children: title }), children, _jsx(LineBreaks, { texts: subtitle, className: cn(subtitleBox) })] }));
+}

package/layout/index.d.ts

@@ -8,3 +8,4 @@ export { default as Gallery } from "./template/Gallery";
 export { default as Row } from "./template/Row";
 export { default as Shelf } from "./template/Shelf";
 export { default as Tab } from "./template/Tab";
+export { default as TextBox } from "./template/TextBox";

package/layout/index.js

@@ -8,3 +8,4 @@ export { default as Gallery } from "./template/Gallery";
 export { default as Row } from "./template/Row";
 export { default as Shelf } from "./template/Shelf";
 export { default as Tab } from "./template/Tab";
+export { default as TextBox } from "./template/TextBox";

package/layout/template/TextBox.d.ts

@@ -0,0 +1,7 @@
+import { TextBoxProps, TextBoxWithImageProps } from "../../interface";
+declare function TitleBox(props: TextBoxProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TitleBox {
+    var Image: typeof TitleBoxWithImage;
+}
+declare function TitleBoxWithImage({ titles, image, option }: TextBoxWithImageProps): import("react/jsx-runtime").JSX.Element;
+export default TitleBox;

package/layout/template/TextBox.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import TextBoxDesign from "../design/TextBox.design";
+function TitleBox(props) {
+    return _jsx(TextBoxDesign, { ...props });
+}
+function TitleBoxWithImage({ titles, image, option }) {
+    return (_jsx(TextBoxDesign, { titles: titles, option: { isCenter: true, size: "lg", className: "gap-y-8", ...option }, children: _jsx("img", { src: image.src, width: image.width, height: image.height, className: image.className }) }));
+}
+TitleBox.Image = TitleBoxWithImage;
+export default TitleBox;

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.95
+1.0.96