@edu-tosel/design 1.0.65 → 1.0.66

package/asset/SVG.d.ts

@@ -14,6 +14,8 @@ declare const SVG: {
     Close: typeof Close;
     Direction: {
         Right: ({ className }: Direction) => import("react/jsx-runtime").JSX.Element;
+        Asc: () => import("react/jsx-runtime").JSX.Element;
+        Desc: () => import("react/jsx-runtime").JSX.Element;
     };
     Email: typeof Email;
     Icon: {

package/asset/svg/Direction.d.ts

@@ -2,7 +2,11 @@ interface Direction {
     className?: string;
 }
 declare function Right({ className }: Direction): import("react/jsx-runtime").JSX.Element;
+declare function Asc(): import("react/jsx-runtime").JSX.Element;
+declare function Desc(): import("react/jsx-runtime").JSX.Element;
 declare const Direction: {
     Right: typeof Right;
+    Asc: typeof Asc;
+    Desc: typeof Desc;
 };
 export default Direction;

package/asset/svg/Direction.js

@@ -1,8 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 function Right({ className }) {
     return (_jsxs("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [_jsx("path", { d: "M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z", fill: "#105652", stroke: "#105652", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M12.75 15L15.75 12M15.75 12L12.75 9M15.75 12H8.25", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
 }
+function Asc() {
+    const id = useId();
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7.15859 15.0437C6.7079 15.9134 7.27152 17 8.17239 17H15.8279C16.7282 17 17.2919 15.9134 16.8417 15.0437L13.0145 7.65229C12.5638 6.78257 11.4365 6.78257 10.9858 7.65229L7.15859 15.0437Z", fill: "#105652" }) }, id));
+}
+function Desc() {
+    const id = useId();
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M16.8414 8.95628C17.2921 8.08657 16.7285 7 15.8276 7L8.1721 7C7.27176 7 6.70813 8.08657 7.15831 8.95628L10.9855 16.3477C11.4362 17.2174 12.5635 17.2174 13.0142 16.3477L16.8414 8.95628Z", fill: "#105652" }) }, id));
+}
 const Direction = {
     Right,
+    Asc,
+    Desc,
 };
 export default Direction;

package/asset/svg/Direction.tsx

@@ -1,3 +1,4 @@
+import { useId } from "react";
 interface Direction {
   className?: string;
 }
@@ -30,7 +31,46 @@ function Right({ className }: Direction) {
   );
 }
 
+function Asc() {
+  const id = useId();
+  return (
+    <svg
+      key={id}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.15859 15.0437C6.7079 15.9134 7.27152 17 8.17239 17H15.8279C16.7282 17 17.2919 15.9134 16.8417 15.0437L13.0145 7.65229C12.5638 6.78257 11.4365 6.78257 10.9858 7.65229L7.15859 15.0437Z"
+        fill="#105652"
+      />
+    </svg>
+  );
+}
+function Desc() {
+  const id = useId();
+  return (
+    <svg
+      key={id}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16.8414 8.95628C17.2921 8.08657 16.7285 7 15.8276 7L8.1721 7C7.27176 7 6.70813 8.08657 7.15831 8.95628L10.9855 16.3477C11.4362 17.2174 12.5635 17.2174 13.0142 16.3477L16.8414 8.95628Z"
+        fill="#105652"
+      />
+    </svg>
+  );
+}
+
 const Direction = {
   Right,
+  Asc,
+  Desc,
 };
 export default Direction;

package/card/design/Card.design.js

@@ -15,18 +15,19 @@ const widthSize = {
     auto: "w-auto",
 };
 const heightSize = {
-    "4xs": "h-21",
-    "3xs": "h-30",
-    "2xs": "h-40",
-    xs: "h-45",
-    sm: "h-52.5",
-    md: "h-67.5",
-    lg: "h-112.5",
-    xl: "h-125.5",
-    "2xl": "h-127.5",
-    "3xl": "h-138.5",
-    full: "h-full",
-    auto: "h-auto min-h-80",
+    "5xs": "h-21", // 84px
+    "4xs": "h-30", // 120px
+    "3xs": "h-40", // 160px
+    "2xs": "h-45", // 180px
+    xs: "h-50", // 200px
+    sm: "h-52.5", // 210px
+    md: "h-67.5", // 270px
+    lg: "h-112.5", // 450px
+    xl: "h-125.5", // 502px
+    "2xl": "h-127.5", // 510px
+    "3xl": "h-138.5", // 554px
+    full: "h-full", // 100%
+    auto: "h-auto min-h-80", // 100%
 };
 export default function CardDesign({ header, children, option, debug, }) {
     const { setIsOwn } = useActionStore();

package/card/design/CustomCard.design.d.ts

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

package/card/design/CustomCard.design.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../util";
+import CardDesign from "./Card.design";
+export default function CustomCardDesign({ titles, option, children, }) {
+    const titleBox = {
+        positions: "relative z-10",
+        displays: "flex flex-col gap-3",
+    };
+    const titleStyle = {
+        fonts: "font-pretendard-bold leading-tight text-[16px]",
+        styles: titles.titleColor,
+    };
+    const subtitleStyle = {
+        fonts: "font-pretendard-medium leading-tight text-[12px]",
+        styles: titles.subtitleColor,
+    };
+    return (_jsxs(CardDesign, { option: {
+            ...option,
+            width: option?.width ?? "lg",
+            height: option?.height ?? "4xs",
+            className: option?.className ?? "p-5",
+        }, children: [_jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: cn(titleStyle), children: titles.title }), _jsx("div", { className: cn(subtitleStyle), children: titles.subtitle })] }), children ?? null] }));
+}

package/card/index.d.ts

@@ -1,6 +1,7 @@
 export { default as AddCard } from "./template/AddCard";
 export { default as ChartCard } from "./template/ChartCard";
 export { default as ConfirmCard } from "./template/ConfirmCard";
+export { default as CustomCard } from "./template/CustomCard";
 export { default as InfoCard } from "./template/InfoCard";
 export { default as NavCard } from "./template/NavCard";
 export { default as ProgressCard } from "./template/ProgressCard";

package/card/index.js

@@ -1,6 +1,7 @@
 export { default as AddCard } from "./template/AddCard";
 export { default as ChartCard } from "./template/ChartCard";
 export { default as ConfirmCard } from "./template/ConfirmCard";
+export { default as CustomCard } from "./template/CustomCard";
 export { default as InfoCard } from "./template/InfoCard";
 export { default as NavCard } from "./template/NavCard";
 export { default as ProgressCard } from "./template/ProgressCard";

package/card/template/CustomCard.d.ts

@@ -0,0 +1,3 @@
+import { CustomCardProps } from "./../../interface";
+declare function CustomCard(props: CustomCardProps): import("react/jsx-runtime").JSX.Element;
+export default CustomCard;

package/card/template/CustomCard.js

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

package/card/template/InfoCard/Academy.d.ts

@@ -13,7 +13,7 @@ interface StudentCardProps extends Omit<InfoCardProps, "titles" | "children"> {
         createdAt: string;
     };
 }
-declare function Academy({ titles, data, buttons }: AcademyCardProps): import("react/jsx-runtime").JSX.Element;
+declare function Academy({ titles, data, buttons, option }: AcademyCardProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Academy {
     var Digital: ({ image, data }: StudentCardProps) => import("react/jsx-runtime").JSX.Element;
 }

package/card/template/InfoCard/Academy.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InfoCardDesign } from "../../design/InfoCard.design";
 import SVG from "../../../asset/SVG";
 import { Label } from "../../../widget";
-function Academy({ titles, data, buttons }) {
+function Academy({ titles, data, buttons, option }) {
     return (_jsx(InfoCardDesign, { titles: titles, option: {
+            ...option,
             titleBorder: "border-green-dark",
             background: "",
-            boundary: "",
-            width: "xs",
-            height: "md",
+            width: option?.width ?? "xs",
+            height: option?.height ?? "md",
         }, children: _jsxs("div", { className: "mt-2.5 flex flex-col gap-2.5", children: [_jsx("div", { className: "w-full", children: data.address }), _jsx("div", { className: "flex gap-2.5", children: buttons.map(({ title, onClick }, index) => (_jsx(Label.Button, { title: title, onClick: onClick, option: {
                             background: !index ? "bg-gray-medium" : "bg-green-dark",
                             text: "text-white",

package/card/template/NavCard.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import NavCardDesign from "../design/NavCard.design";
 function Banner({ titles, option }) {
-    return (_jsx(NavCardDesign, { titles: titles, option: { ...option, width: option?.width ?? "xl", height: "sm" } }));
+    return (_jsx(NavCardDesign, { titles: titles, option: {
+            ...option,
+            width: option?.width ?? "xl",
+            height: option?.height ?? "sm",
+        } }));
 }
 function _Button({ titles, onClick, option }) {
     return (_jsx(NavCardDesign, { titles: titles, option: {

package/card/template/ProgressCard/Small.js

@@ -29,6 +29,6 @@ export default function ProgressCardSmall({ titles, steps, theme = "green", }) {
     };
     return (_jsxs(CardDesign, { option: {
             width: "md",
-            height: "4xs",
+            height: "5xs",
         }, children: [_jsx("div", { className: cn(progressBox), children: steps.map(([{ title, subtitle }, value]) => (_jsxs("div", { className: cn(stepBox(value)), 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: value, size: 25, theme: theme })] }), _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 })] })] }));
 }

package/interface/Action.d.ts

@@ -1,5 +1,6 @@
 import { LabelWidget } from "./widget";
-import { DataField, OnClick, Size } from "./Property";
+import { OnClick, Size } from "./Property";
+import { DataField, DataFieldType } from "./Data";
 import { Color } from "./Color";
 export interface ActionEvent {
     event: string;
@@ -44,4 +45,8 @@ export interface RowProps<T> {
         className?: string;
     };
 }
+export interface RowElementProps {
+    item: string;
+    data?: DataFieldType;
+}
 export {};

package/interface/Board.d.ts

@@ -1,4 +1,5 @@
-import { DataField, DataSet, Size, Titles } from "./Property";
+import { Size, Titles } from "./Property";
+import { DataSet, DataField } from "./Data";
 import { ActionProps } from "./Action";
 import { InputWidget, LabelWidget, SelectWidget } from "./widget";
 interface BoardOption {

package/interface/Card.d.ts

@@ -1,4 +1,5 @@
-import { Button, DataField, DataSet, Disabled, OnClick, Size, State, Step, Titles } from "./Property";
+import { Button, Disabled, OnClick, Size, State, Step, Titles } from "./Property";
+import { DataSet, DataField } from "./Data";
 import { Theme } from "./Theme";
 import { Flexify } from "./UtilityType";
 interface CardOption {
@@ -44,6 +45,9 @@ export interface ChartCardProps extends Omit<CardProps, "children"> {
         score: number;
     };
 }
+export interface CustomCardProps extends Flexify<CardProps, "children"> {
+    titles: Titles;
+}
 export interface ButtonInLay {
     title: string;
     onClick: OnClick;

package/interface/Data.d.ts

@@ -0,0 +1,41 @@
+import { Replace } from "./Action";
+import { OnClick, Titles } from "./Property";
+export interface DataPackage<T> {
+    dataField: DataField<T>;
+    dataSet: Omit<DataSet<T>, "renderItem">;
+}
+export type DataSet<T = any> = {
+    items?: T[];
+    renderItem: (item: T, index?: number) => React.ReactNode;
+    titles?: Titles;
+    interaction?: React.ReactNode;
+    onClick?: OnClick<T>;
+    replaces?: Replace[];
+};
+type DataFieldProps = {
+    title: string | number;
+    size: string | number;
+    data?: DataFieldType;
+};
+export type DataField<T = any> = Partial<{
+    [p in keyof T]: Partial<DataFieldProps>;
+}>;
+export type DataFieldType = DataFiledTypeText | DataSelectRoll;
+type DataFiledTypeText = {
+    type: "text";
+};
+interface SelectRollOption {
+    key: string;
+    value: string;
+    option?: {
+        text?: string;
+        background?: string;
+    };
+}
+type DataSelectRoll = {
+    type: "selectRoll";
+    options: SelectRollOption[];
+};
+declare function isDataSelectRoll(obj: any): obj is DataSelectRoll;
+export type { DataFiledTypeText, DataSelectRoll };
+export { isDataSelectRoll };

package/interface/Data.js

@@ -0,0 +1,4 @@
+function isDataSelectRoll(obj) {
+    return typeof obj === "object" && obj.type === "selectRoll";
+}
+export { isDataSelectRoll };

package/interface/Property.d.ts

@@ -1,5 +1,4 @@
 import { Dispatch, SetStateAction } from "react";
-import { Replace } from "./Action";
 import { LabelWidget } from "./widget";
 /**
  * State type for the React component
@@ -18,16 +17,21 @@ export type State<T> = [T, StateAction<T>];
  * @enum {string}
  * @readonly
  * @description - Size type for the component
+ * @property {"5xs"} 5xs - Five extra small size
+ * @property {"4xs"} 4xs - Four extra small size
+ * @property {"3xs"} 3xs - Three extra small size
+ * @property {"2xs"} 2xs - Double extra small size
  * @property {"xs"} xs - Extra small size
  * @property {"sm"} sm - Small size
  * @property {"md"} md - Medium size
  * @property {"lg"} lg - Large size
  * @property {"xl"} xl - Extra large size
  * @property {"2xl"} 2xl - Double extra large size
+ * @property {"3xl"} 3xl - Three extra large size
+ * @property {"full"} full - Full size
  * @property {"full"} full - Full size
  */
-export type ImageSize = "sub" | "full";
-export type Size = "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "auto";
+export type Size = "5xs" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "auto";
 /**
  * Image size type
  * @enum {string}
@@ -36,6 +40,7 @@ export type Size = "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2
  * @property {"sub"} sub - Sub size
  * @property {"full"} full - Full size
  */
+export type ImageSize = "sub" | "full";
 export type OnClick<Request = unknown, Response = unknown> = (prop?: Request) => Response | ((prop?: Request) => Promise<Response>);
 export interface Button extends LabelWidget {
 }
@@ -53,26 +58,6 @@ export type Titles = {
     titleColor?: string;
     subtitleColor?: string;
 };
-export type DataSet<T = any> = {
-    items?: T[];
-    renderItem: (item: T, index?: number) => React.ReactNode;
-    titles?: Titles;
-    interaction?: React.ReactNode;
-    onClick?: OnClick<T>;
-    replaces?: Replace[];
-};
-type DataFieldType = {
-    title: string | number;
-    type: string;
-    size: string | number;
-};
-export type DataField<T = any> = Partial<{
-    [p in keyof T]: Partial<DataFieldType>;
-}>;
-export interface DataPackage<T> {
-    dataField: DataField<T>;
-    dataSet: Omit<DataSet<T>, "renderItem">;
-}
 export interface Log<K extends string, T extends string | number> {
     prints: K[];
     logs: {
@@ -84,4 +69,3 @@ export interface Order {
     orderHow: "asc" | "desc" | "";
 }
 export type Step = [Titles, boolean];
-export {};

package/interface/index.d.ts

@@ -1,7 +1,8 @@
+export * from "./widget";
 export * from "./Action";
 export * from "./Card";
 export * from "./Color";
-export * from "./widget";
+export * from "./Data";
 export * from "./Layout";
 export * from "./Overlay";
 export * from "./Property";

package/interface/index.js

@@ -1,7 +1,8 @@
+export * from "./widget";
 export * from "./Action";
 export * from "./Card";
 export * from "./Color";
-export * from "./widget";
+export * from "./Data";
 export * from "./Layout";
 export * from "./Overlay";
 export * from "./Property";

package/interface/widget/index.d.ts

@@ -41,6 +41,7 @@ export interface InputWidget extends Widget {
     type?: InputType;
     label?: LabelWidget;
     maxLength?: number;
+    disabled?: Disabled;
 }
 export interface CheckBoxWidget extends Widget {
     state: State<boolean>;

package/layout/design/DataField.design.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cn } from "../../util";
 import { useActionStore } from "../../store";
+import { widthSizes } from "../../asset/sizes";
+import SVG from "../../asset/SVG";
 const heightSize = {
     sm: "h-10",
     md: "h-13.75",
@@ -21,14 +23,14 @@ export default function DataFieldDesign({ id, dataField, option, }) {
         sizes: container.sizes,
     };
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(container), children: dataField &&
-                    Object.keys(dataField).map((key) => (_jsx("div", { className: `w-${dataField[key]?.size}/100`, children: _jsxs("button", { onClick: () => setOrder(id, key), className: "flex items-center", children: [_jsx("div", { children: dataField[key]?.title }), _jsx("div", { className: "text-xs", children: orders?.map(({ orderBy, orderHow }) => {
+                    Object.keys(dataField).map((key) => (_jsx("div", { className: widthSizes[dataField[key]?.size], children: _jsxs("button", { onClick: () => setOrder(id, key), className: "flex items-center", children: [_jsx("div", { children: dataField[key]?.title }), _jsx("div", { className: "text-xs", children: orders?.map(({ orderBy, orderHow }) => {
                                         if (orderBy === key) {
                                             if (orderHow === "asc")
-                                                return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7.15859 15.0437C6.7079 15.9134 7.27152 17 8.17239 17H15.8279C16.7282 17 17.2919 15.9134 16.8417 15.0437L13.0145 7.65229C12.5638 6.78257 11.4365 6.78257 10.9858 7.65229L7.15859 15.0437Z", fill: "#105652" }) }, id + key + "asc"));
+                                                return _jsx(SVG.Direction.Asc, {});
                                             else if (orderHow === "desc")
-                                                return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M16.8414 8.95628C17.2921 8.08657 16.7285 7 15.8276 7L8.1721 7C7.27176 7 6.70813 8.08657 7.15831 8.95628L10.9855 16.3477C11.4362 17.2174 12.5635 17.2174 13.0142 16.3477L16.8414 8.95628Z", fill: "#105652" }) }, id + key + "asc"));
+                                                return _jsx(SVG.Direction.Desc, {});
                                             else
-                                                return "";
+                                                return null;
                                         }
                                     }) })] }) }, id + key))) }), position && _jsx("div", { className: cn(block) })] }));
 }

package/layout/design/Row.design/SelectRoll.d.ts

@@ -0,0 +1,7 @@
+import { DataSelectRoll } from "../../../interface";
+interface SelectRollProps {
+    item: string | number;
+    data: DataSelectRoll;
+}
+export default function SelectRoll({ item, data }: SelectRollProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/design/Row.design/SelectRoll.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../../util";
+export default function SelectRoll({ item, data }) {
+    const { options } = data ?? {};
+    const [isHover, setIsHover] = useState(false);
+    const keys = options?.map((option) => option.key);
+    const values = options?.map((option) => option.value);
+    const [index, setIndex] = useState(keys?.indexOf(String(item)) ?? 0);
+    const container = {
+        styles: "group cursor-default",
+        displays: "flex justify-center",
+        sizes: "w-[120px] ",
+    };
+    const body = {
+        positions: "relative",
+        displays: "flex justify-center items-center",
+        backgrounds: options[index].option?.background,
+        texts: options[index].option?.text,
+        sizes: "w-[120px] h-[30px]",
+        transitions: "duration-300",
+        hoverAct: isHover ? "w-[120px]" : "w-[100px]",
+        fonts: "text-[12px]",
+        styles: "rounded-[6px] leading-none overflow-hidden",
+    };
+    const toggle = {
+        positions: "absolute ",
+        displays: "flex justify-center items-center",
+        sizes: "w-[20px] h-full",
+        styles: "duration-300 text-gray-dark",
+    };
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), onMouseLeave: () => setIsHover(false), onMouseEnter: () => setIsHover(true), children: [values[index], _jsx("button", { onClick: () => {
+                        if (index > 0)
+                            setIndex(index - 1);
+                    }, className: cn(toggle, "-left-4 group-hover:left-1"), children: "-" }), _jsx("button", { onClick: () => {
+                        if (index < keys.length - 1)
+                            setIndex(index + 1);
+                    }, className: cn(toggle, "-right-4 group-hover:right-1"), children: "+" })] }) }));
+}

package/layout/design/{Row.design.d.ts → Row.design/index.d.ts}

@@ -1,2 +1,2 @@
-import { RowProps } from "../../interface";
+import { RowProps } from "../../../interface";
 export default function RowDesign<T>({ item, dataField, option, onClick, buttons, dot, }: RowProps<T>): import("react/jsx-runtime").JSX.Element;

package/layout/design/{Row.design.js → Row.design/index.js}

@@ -1,9 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useId } from "react";
-import { ColorSet } from "../../interface";
-import { cn } from "../../util";
-import { Label } from "../../widget";
-import { widthSizes } from "../../asset/sizes";
+import { ColorSet, isDataSelectRoll, } from "../../../interface";
+import { cn } from "../../../util";
+import { Label } from "../../../widget";
+import { widthSizes } from "../../../asset/sizes";
+import SelectRoll from "./SelectRoll";
 export default function RowDesign({ item, dataField, option, onClick, buttons, dot, }) {
     const { size, padding, text, noHover, className, isPointer } = option ?? {};
     const id = useId();
@@ -27,10 +28,16 @@ export default function RowDesign({ item, dataField, option, onClick, buttons, d
         styles: "rounded-full",
     };
     return (_jsxs("div", { className: cn(container), onClick: () => onClick?.(), children: [typeof dot !== "undefined" && _jsx("div", { className: cn(flagBox) }), dataField &&
-                Object.keys(dataField).map((key) => (_jsx("div", { className: cn(widthSizes[dataField[key]?.size], itemBox), children: String(item[key]) }, id + key))), _jsx("div", { className: "absolute right-4 xl:right-8 flex gap-4", children: buttons?.map(({ title, onClick, option }) => (_jsx(Label.Button, { title: title, onClick: onClick, option: {
+                Object.keys(dataField).map((key) => (_jsx("div", { className: cn(widthSizes[dataField[key]?.size], itemBox), children: _jsx(RowElement, { data: dataField[key]?.data, item: item[key] }) }, id + key))), _jsx("div", { className: "absolute right-4 xl:right-8 flex gap-4", children: buttons?.map(({ title, onClick, option }) => (_jsx(Label.Button, { title: title, onClick: onClick, option: {
                         background: option?.background ?? "bg-crimson-dark",
                         text: option?.text ?? "text-white",
                         width: "xs",
                         height: "xs",
                     } }, id + title))) })] }));
 }
+function RowElement(props) {
+    const { data } = props;
+    if (isDataSelectRoll(data))
+        return _jsx(SelectRoll, { item: props.item, data: data });
+    return _jsx(_Fragment, { children: props.item });
+}

package/layout/template/DataField.js

@@ -9,7 +9,7 @@ function Board({ id, dataField }) {
 function Card({ id, dataField }) {
     return (_jsx(DataFieldDesign, { id: id, dataField: dataField, option: {
             height: "sm",
-            padding: "px-2 xs:px-4 xl:px-7.5",
+            padding: "px-2 xs:px-4 xl:px-5",
         } }));
 }
 const DataField = {

package/layout/template/Gallery.d.ts

@@ -5,6 +5,8 @@ export default function Gallery({ action, children, option, }: {
     };
     children: React.ReactNode;
     option?: {
-        tabTextColor?: string;
+        text?: string;
+        background?: string;
+        boundary?: string;
     };
 }): import("react/jsx-runtime").JSX.Element;

package/layout/template/Gallery.js

@@ -3,12 +3,14 @@ import Action from "./Action";
 import Tab from "./Tab";
 import { cn } from "../../util";
 export default function Gallery({ action, children, option, }) {
-    const { tabTextColor } = option ?? {};
+    const { text, background, boundary } = option ?? {};
     const tabBox = {
         positions: "xl:absolute xl:-bottom-18 xl:left-0 z-5",
     };
     return (_jsxs("div", { className: "relative w-full flex", children: [_jsx(Action.Replace, { actions: action?.replaces, children: _jsx(Action.Show, { actions: action?.shows, children: children }) }), action?.tabs && (_jsx(Tab, { tabs: action?.tabs, option: {
                     className: cn(tabBox),
-                    text: tabTextColor,
+                    text,
+                    background,
+                    boundary,
                 } }))] }));
 }

package/layout/template/Row.js

@@ -22,7 +22,7 @@ function Card({ item, dataField, onClick, buttons, height, noPadding, noHover, d
     const id = useId();
     return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, buttons: buttons, dot: dot, option: {
             size: `w-full ${height ?? "h-15"}`,
-            padding: !noPadding ? "px-2 xs:px-4 xl:px-7.5" : "",
+            padding: !noPadding ? "px-2 xs:px-4 xl:px-5" : "",
             text: "text-base",
             noHover,
         } }, id));

package/layout/template/Tab.d.ts

@@ -5,6 +5,7 @@ interface Options {
     className?: string;
     width?: Size;
     height?: Size;
+    boundary?: string;
 }
 export default function Tab({ tabs, option, state, }: {
     tabs: (Button & {

package/layout/template/Tab.js

@@ -10,7 +10,7 @@ const heightSize = {
     lg: "h-9",
 };
 export default function Tab({ tabs, option, state, }) {
-    const { className, background, text, width, height } = option ?? {};
+    const { className, background, boundary, text, width, height } = option ?? {};
     const [tabsSelection, setTabsSelection] = state
         ? state
         : useState(tabs.map((_, i) => i === 0));
@@ -20,7 +20,7 @@ export default function Tab({ tabs, option, state, }) {
         displays: "hidden xl:flex xl:items-center xl:gap-2.5",
         sizes: "w-auto",
         paddings: "p-2.5",
-        backgrounds: background ?? "bg-white/30",
+        backgrounds: boundary ?? "bg-white/30",
         styles: "rounded-xl ",
     };
     const button = {
@@ -32,6 +32,8 @@ export default function Tab({ tabs, option, state, }) {
                 !isStatic &&
                     setTabsSelection(tabsSelection.map((_, i) => i === index));
                 return onClick && onClick();
-            }, className: cn(button, `${!isStatic && tabsSelection[index] && "bg-white rounded-2xl"}`, `${isStatic &&
+            }, className: cn(button, `${!isStatic &&
+                tabsSelection[index] &&
+                `${background ?? "bg-white"} rounded-2xl`}`, `${isStatic &&
                 `${option?.background ?? "bg-green-dark"} ${option?.text ?? "text-white"} `}`), children: title }, title))) }));
 }

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.65
+1.0.66

package/widget/design/Label.design.js

@@ -10,6 +10,7 @@ const widthSize = {
 const heightSize = {
     xs: "h-6.25",
     sm: "h-11.25",
+    md: "h-12.25",
 };
 export default function LabelDesign({ title, onClick, option, hoverState, }) {
     const [hover, setHover] = hoverState ?? [false, () => { }];

package/widget/template/Input/Form.d.ts

@@ -1,2 +1,2 @@
 import { InputWidget } from "../../../interface";
-export default function LG({ state, placeholder, isValid, type, label, maxLength, }: InputWidget): import("react/jsx-runtime").JSX.Element;
+export default function LG({ state, placeholder, isValid, type, label, maxLength, disabled, }: InputWidget): import("react/jsx-runtime").JSX.Element;

package/widget/template/Input/Form.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { cn, gradient } from "../../../util";
 import Label from "../Label";
-export default function LG({ state, placeholder, isValid, type, label, maxLength, }) {
+import Obstacle from "../Obstacle";
+export default function LG({ state, placeholder, isValid, type, label, maxLength, disabled, }) {
     const [value, setValue] = state;
     const [onFocus, setOnFocus] = useState(false);
     const ref = useRef(null);
@@ -44,5 +45,5 @@ export default function LG({ state, placeholder, isValid, type, label, maxLength
                     background: label.option?.background ?? gradient.bg.greenToRed,
                     text: label.option?.text ?? "text-white",
                     ...label.option,
-                } }))] }));
+                } })), _jsx(Obstacle, { disabled: disabled })] }));
 }

package/widget/template/Obstacle.js

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../util";
 export default function Obstacle({ disabled }) {
     const obstacle = {
-        positions: "absolute",
+        positions: "absolute top-0 left-0",
         sizes: "w-full h-full",
-        background: "bg-white/80 ",
+        background: "bg-white/30",
     };
     return (disabled && (_jsx("div", { onClick: typeof disabled === "function" ? disabled : undefined, className: cn(obstacle) })));
 }