@edu-tosel/design 1.0.58 → 1.0.60

package/card/design/NavCard.design.js

@@ -6,7 +6,6 @@ import Card from "./Card.design";
 export default function NavCardDesign({ titles, options }) {
     const { title, subtitle, color, titleColor, subtitleColor } = titles;
     const { width, image, buttonInLay } = options ?? {};
-    const { path, size } = image ?? { size: "sub" };
     const flag = !buttonInLay && width === "xl";
     const textBox = {
         container: {
@@ -24,15 +23,15 @@ export default function NavCardDesign({ titles, options }) {
             styles: (!color && subtitleColor) ?? "text-gray-dim",
         },
     };
-    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";
+    const imageBox = {
+        default: "absolute",
+        positions: image?.position ?? "bottom-0 right-0",
+        sizes: image?.size,
     };
     return (_jsxs(Card, { options: options, children: [_jsxs("div", { className: cn(textBox.container), children: [_jsx("div", { className: cn(textBox.title), children: title }), _jsx(LineBreaks, { className: cn(textBox.subtitle), texts: subtitle ?? "" })] }), buttonInLay && (_jsx(Label.Button, { title: buttonInLay.title, onClick: buttonInLay.onClick, options: {
                     disabled: buttonInLay.disabled,
                     className: "absolute bottom-7.5 left-7.5",
                     background: buttonInLay?.background,
                     text: buttonInLay?.text,
-                } })), path ? (_jsx("img", { src: path, alt: "trump-image", loading: "lazy", className: imageClassNames() })) : null] }));
+                } })), image && (_jsx("img", { src: image.path, alt: "trump-image", loading: "lazy", className: cn(imageBox) }))] }));
 }

package/interface/Card.d.ts

@@ -1,4 +1,4 @@
-import { Button, DataField, DataSet, Disabled, ImageSize, OnClick, Size, State, Titles } from "./Property";
+import { Button, DataField, DataSet, Disabled, OnClick, Size, State, Titles } from "./Property";
 import { Flexify } from "./UtilityType";
 interface CardOptions {
     className?: string;
@@ -52,14 +52,16 @@ export interface ButtonInLay {
     background?: string;
     text?: string;
 }
+interface NavCardImage {
+    path: string;
+    size?: string;
+    position?: string;
+}
 export interface NavCardProps extends Omit<CardProps, "children"> {
     titles: Titles;
     options?: CardOptions & {
         buttonInLay?: ButtonInLay;
-        image?: {
-            path: string;
-            size?: ImageSize;
-        };
+        image?: NavCardImage;
     };
 }
 export interface NavCardBannerProps extends NavCardProps {

package/package.json

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

package/text/LineBreaks.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export function LineBreaks({ texts, className, }) {
-    return (_jsx("div", { className: className, children: typeof texts === "string"
-            ? texts
-            : texts?.map((text, index) => (_jsx("div", { className: "leading-tight", children: text }, index))) }));
+    const strings = typeof texts === "string"
+        ? texts.split("\n")
+        : texts?.map((text) => text.split("\n")).flat();
+    return (_jsx("div", { className: className, children: strings?.map((text, index) => (_jsx("div", { className: "leading-tight", children: text.length > 0 ? text : "\u00a0" }, index))) }));
 }

package/version.txt

@@ -1 +1 @@
-1.0.58
+1.0.60