@edu-tosel/design 1.0.17 → 1.0.19

package/html/widget/EmailInput.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { cn } from "../../util";
+const widthSize = {
+    xs: "w-28",
+    sm: "w-48",
+    md: "w-64",
+    lg: "w-96",
+    xl: "w-128",
+    "2xl": "w-144",
+    full: "w-full",
+};
+export default function EmailInput({ state, placeholder, options, }) {
+    const { width } = options ?? {};
+    const id = useId();
+    const [value, setValue] = state;
+    const [focused, setFocused] = useState(false);
+    const { text } = options ?? {};
+    const isValidEmail = (email) => {
+        return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email);
+    };
+    const emailCss = {
+        true: "rounded-md pl-4 pr-4 pt-2 pb-2 bg-slate-200 text-xs focus:outline-none focus:bg-white focus:text-black box-green-focus transition-all",
+        false: "rounded-md pl-4 pr-4 pt-2 pb-2 text-xs bg-[#F9E4E6] focus:outline-none text-[#FF8383] box-shadow-focus-red transition-all peer",
+        allTrue: "rounded-md pl-4 pr-4 pt-2 pb-2 bg-white text-xs focus:outline-none box-green focus:bg-white focus:text-black box-shadow-focus transition-all",
+        allTrueFocus: "rounded-md pl-4 pr-4 pt-2 pb-2 bg-white text-xs focus:outline-none transition-all box-green-focus",
+    };
+    const container = {
+        width: `${widthSize[width ?? "md"]} h-8`,
+    };
+    const handleBlur = () => {
+        setFocused(false);
+    };
+    const handleFocus = () => {
+        setFocused(true);
+    };
+    return (_jsxs("div", { className: "relative", children: [_jsx("input", { className: cn(container) +
+                    " " +
+                    (value === "" || isValidEmail(value)
+                        ? emailCss.true
+                        : emailCss.false) +
+                    (isValidEmail(value) && !focused ? emailCss.allTrue : ""), id: id, type: "text", placeholder: placeholder ?? "E-mail을 입력해주세요.", onChange: (e) => setValue(e.target.value), onBlur: handleBlur, onFocus: handleFocus }), value === "" ||
+                (!isValidEmail(value) && (_jsx("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3", children: _jsx("span", { className: "text-[#FF8383]", children: "!" }) }))), value.length > 5 && !isValidEmail(value) && (_jsx("div", { className: "absolute top-4 left-40 w-60 h-12 bg-black opacity-60 z-100 text-white p-2 text-xs rounded-md shadow-md invisible peer-hover:visible", children: text }))] }));
+}

package/html/widget/Input.js

@@ -11,12 +11,14 @@ const widthSize = {
     full: "w-full",
 };
 export default function Input({ state, placeholder, options, }) {
-    const [_, onChange] = state;
     const { width } = options ?? {};
     const id = useId();
+    const [value, setValue] = state;
     const container = {
-        width: `${widthSize[width ?? "md"]} h-10`,
-        styles: "rounded-full pl-4 border-4",
+        width: `${widthSize[width ?? "md"]} h-8`,
+        styles: "rounded-md pl-4 pr-4 pt-2 pb-2 bg-slate-200 text-xs",
+        pseudo: "focus:outline-none focus:bg-white focus:text-black box-shadow-focus",
+        effect: `transition-all`,
     };
-    return (_jsx("input", { className: cn(container), id: id, type: "text", placeholder: placeholder ?? "", onChange: (e) => onChange(e.target.value) }));
+    return (_jsx("input", { className: cn(container), id: id, type: "text", placeholder: placeholder ?? "ID를 입력해주세요", onChange: (e) => setValue(e.target.value) }));
 }

package/html/widget/Label.design.d.ts

@@ -0,0 +1,2 @@
+import { HTMLLabelElement } from "../../interface";
+export default function LabelDesign({ title, onClick, options, }: HTMLLabelElement): import("react/jsx-runtime").JSX.Element;

package/html/widget/Label.design.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../util";
+const widthSize = {
+    sm: "w-22.5",
+    md: "w-45",
+    lg: "w-50",
+};
+const heightSize = {
+    xs: "h-6.25",
+    sm: "h-11.25",
+};
+export default function LabelDesign({ title, onClick, options, }) {
+    const [hover, setHover] = useState(false);
+    const { width, height, text, background, className, disabled } = options ?? {};
+    const container = {
+        positions: "relative z-10",
+        sizes: `${widthSize[width ?? "sm"]} ${heightSize[height ?? "xs"]}`,
+    };
+    const body = {
+        positions: "absolute top-0 left-0",
+        displays: "flex justify-center items-center",
+        sizes: "w-full h-full",
+        clickable: onClick && "cursor-pointer",
+        background: background ?? "bg-gray-light",
+        texts: text ?? "text-gray-dim",
+        animation: "duration-500",
+        styles: height !== "xs" ? "rounded-xl" : "rounded-md text-xs",
+    };
+    const obstacle = {
+        positions: "absolute",
+        sizes: "w-full h-full",
+        background: "bg-white/80 rounded-xl",
+    };
+    return (_jsx("div", { className: className, children: _jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(body), onClick: onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: title }), disabled && (_jsx("div", { onClick: typeof disabled === "function" ? disabled : undefined, className: cn(obstacle) }))] }) }));
+}

package/html/widget/Select.js

@@ -64,28 +64,28 @@ export default function Select({ state, selectOptions, options, }) {
     const { width } = options ?? {};
     const dropdown = {
         size: `w-40 h-6`,
-        styles: "cursor-pointer pt-4 pb-4 pl-4 pr-4 font-bold text-sm bg-white",
+        styles: "cursor-pointer pt-4 pb-4 pl-2 pr-4 font-bold text-xs bg-white",
         display: `flex items-center`,
         hover: `hover:rounded-md`,
         effect: `transition-all`,
         function: `${isActiveCss()}`,
-        etc: "asdfasdf",
+        etc: "box-inner-shadow",
     };
     const dropdownInput = {
         size: `w-40 h-6 `,
-        styles: "shadow-md text-sm p-4 font-bold bg-white text-left cursor-text border-1 rounded-md ",
+        styles: "shadow-md text-xs pt-4 pb-4 pl-2 pr-4 font-bold bg-white text-left cursor-text border-1 rounded-md ",
         display: "absolute top-12 flex items-center z-10 ",
         focus: "focus:outline-none focus:border-[#44C5F3] focus:border-1 ",
     };
     const dropdownContent = {
         size: `w-40 min-h-6 max-h-48 overflow-y-auto `,
-        styles: `text-sm mt-1 border-1 rounded-md shadow-md`,
+        styles: `text-xs mt-1 border-1 rounded-md shadow-md`,
         display: `absolute z-40`,
         function: `${dropdownTop}`,
     };
     const dropdownItem = {
         size: `${widthSize[width ?? "full"]} h-6 `,
-        styles: `text-sm text-left p-4 font-bold cursor-pointer `,
+        styles: `text-xs text-left pt-4 pb-4 pl-2 pr-4 font-bold cursor-pointer `,
         display: `flex items-center z-40`,
         hover: `hover:bg-slate-200 `,
         effect: `transition-all `,

package/html/widget/Toggle.d.ts

@@ -1,2 +1,2 @@
 import { HTMLToggleElement } from "../../interface";
-export default function Toggle({ state: [chekced, setChecked], isDisabled, labels, }: HTMLToggleElement): import("react/jsx-runtime").JSX.Element;
+export default function Toggle({ state: [chekced, setChecked], labels, options, }: HTMLToggleElement): import("react/jsx-runtime").JSX.Element;

package/html/widget/Toggle.js

@@ -8,6 +8,7 @@ const widthSize = {
     "2xl": "w-144",
     full: "w-full",
 };
-export default function Toggle({ state: [chekced, setChecked], isDisabled, labels, }) {
-    return (_jsxs("div", { className: "w-24 h-6 flex", children: [_jsx("label", { htmlFor: "", className: "inline-flex items-center gap-2 ", children: _jsx("input", { disabled: isDisabled, type: "checkbox", className: "bg-red-crimson appearance-none relative rounded-full w-10 h-5  cursor-pointer", checked: chekced, onChange: (e) => setChecked(e.target.checked) }) }), _jsx("div", { className: "ml-2 transition-all", children: labels.map(([status, label]) => (status === chekced ? label : "")) })] }));
+export default function Toggle({ state: [chekced, setChecked], labels, options, }) {
+    const { disabled } = options ?? {};
+    return (_jsxs("div", { className: "w-24 h-6 flex", children: [_jsx("label", { htmlFor: "", className: "inline-flex items-center gap-2 ", children: _jsx("input", { disabled: typeof disabled === "boolean" && disabled, type: "checkbox", className: "bg-red-crimson appearance-none relative rounded-full w-10 h-5  cursor-pointer", checked: chekced, onChange: (e) => setChecked(e.target.checked) }) }), _jsx("div", { className: "ml-2 transition-all", children: labels.map(([status, label]) => (status === chekced ? label : "")) })] }));
 }

package/interaction/index.d.ts

@@ -1,5 +1,2 @@
-export { default as Exception } from "./template/Exception";
-export { default as LoadingSpinner } from "./widget/LoadingSpinner";
-export { default as LoadingJumper } from "./widget/LoadingJumper";
-export { default as LoadingWorm } from "./widget/LoadingWorm";
-export { default as NoData } from "./widget/NoData";
+export { default as Loading } from "./template/Loading";
+export { default as NoData } from "./template/NoData";

package/interaction/index.js

@@ -1,5 +1,2 @@
-export { default as Exception } from "./template/Exception";
-export { default as LoadingSpinner } from "./widget/LoadingSpinner";
-export { default as LoadingJumper } from "./widget/LoadingJumper";
-export { default as LoadingWorm } from "./widget/LoadingWorm";
-export { default as NoData } from "./widget/NoData";
+export { default as Loading } from "./template/Loading";
+export { default as NoData } from "./template/NoData";

package/interaction/template/Loading.d.ts

@@ -0,0 +1,9 @@
+import Jumper from "../widget/Jumper.design";
+import Spinner from "../widget/Spinner.design";
+import Worm from "../widget/Worm.design";
+declare const Loading: {
+    Jumper: typeof Jumper;
+    Spinner: typeof Spinner;
+    Worm: typeof Worm;
+};
+export default Loading;

package/interaction/template/Loading.js

@@ -0,0 +1,9 @@
+import Jumper from "../widget/Jumper.design";
+import Spinner from "../widget/Spinner.design";
+import Worm from "../widget/Worm.design";
+const Loading = {
+    Jumper,
+    Spinner,
+    Worm,
+};
+export default Loading;

package/interaction/template/NoData.d.ts

@@ -0,0 +1,5 @@
+declare function Script(): import("react/jsx-runtime").JSX.Element;
+declare const NoData: {
+    Script: typeof Script;
+};
+export default NoData;

package/interaction/template/NoData.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ScriptDesign from "../widget/Script.design";
+function Script() {
+    return _jsx(ScriptDesign, { script: "No Data" });
+}
+const NoData = {
+    Script,
+};
+export default NoData;

package/interaction/widget/Jumper.design.d.ts

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

package/interaction/widget/{LoadingJumper.js → Jumper.design.js}

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function LoadingJumper() {
+export default function Jumper() {
     return (_jsxs("div", { className: "w-full h-full flex items-center justify-center mt-10", children: [_jsx("div", { className: "w-6 h-6 mx-2 bg-gradient-to-br from-[#9979F6] to-[#44C5F3] opacity-40 rounded-full animate-bounce" }), _jsx("div", { className: "w-6 h-6 mx-2 bg-gradient-to-br from-[#9979F6] to-[#44C5F3] opacity-40 rounded-full animate-bounce delay-100" }), _jsx("div", { className: "w-6 h-6 mx-2 bg-gradient-to-br from-[#9979F6] to-[#44C5F3] opacity-40 rounded-full animate-bounce delay-200" })] }));
 }

package/interaction/widget/Script.design.d.ts

@@ -0,0 +1,3 @@
+export default function Script({ script }: {
+    script: string;
+}): import("react/jsx-runtime").JSX.Element;

package/interaction/widget/{NoData.js → Script.design.js}

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export default function NoData() {
-    return (_jsx("div", { className: "w-full h-full flex items-center justify-center", children: "NoData" }));
+export default function Script({ script }) {
+    return (_jsx("div", { className: "w-full h-full flex items-center justify-center", children: script }));
 }

package/interaction/widget/Spinner.design.d.ts

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

package/interaction/widget/{LoadingSpinner.js → Spinner.design.js}

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // NOTE: This is Prototype code and should be replaced with a proper loading spinner
-export default function LoadingSpinner() {
+export default function Spinner() {
     return (_jsx("div", { className: "w-full h-full flex items-center justify-center", children: _jsx("div", { className: "w-30 h-30", children: _jsxs("svg", { "aria-hidden": "true", className: "inline w-20 h-20 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600", viewBox: "0 0 100 101", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z", fill: "currentColor" }), _jsx("path", { d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z", fill: "currentFill" })] }) }) }));
 }

package/interaction/widget/Worm.design.d.ts

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

package/interaction/widget/{LoadingWorm.js → Worm.design.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn, gradient, useEase } from "../../util";
-export default function LoadingWorm() {
+export default function Worm() {
     const numbers = [-2, -1, 0, 1, 2];
     const ease = useEase(1000, 500);
     return (_jsx("div", { className: "w-full h-full flex justify-center items-center", children: _jsx("div", { className: "relative  w-25 h-20 ", children: numbers.map((number) => (_jsx(SubComponent, { index: number, ease: ease }, number))) }) }));

package/interface/Card.d.ts

@@ -5,31 +5,14 @@ interface CardOptions {
     rounded?: string;
     height?: Size;
     width?: Size;
-    background?: {
-        color?: string;
-    };
-    text?: {
-        size?: string;
-        color?: string;
-    };
-    border?: {
-        color?: string;
-    };
-    onClick?: () => unknown | (() => Promise<unknown>);
+    background?: string;
+    text?: string;
+    border?: string;
+    onClick?: OnClick;
     overflow?: "hiden" | "y-scroll" | "auto";
+    noPadding?: boolean;
+    noShadow?: boolean;
 }
-/**
- * CardProps is an interface.
- * @interface CardProps
- * @property {React.ReactNode} children
- * @property {object} options
- * @property {Size} options.height
- * @property {Size} options.width
- * @property {object} options.text
- * @property {string} options.text.size
- * @property {string} options.text.color
- * @property {() => unknown | (() => Promise<unknown>)} options.onClick
- */
 export interface CardProps {
     children: React.ReactNode;
     header?: React.ReactNode;
@@ -57,44 +40,68 @@ export interface ChartCardProps extends Omit<CardProps, "children"> {
         score: number;
     };
 }
-export interface TableCardProps<T> extends Omit<CardProps, "children"> {
-    dataSets: T[];
-    dataField: {
-        [p in keyof T]: Partial<DataField>;
-    };
-    options?: CardOptions;
+interface ButtonInLay {
+    title: string;
+    onClick: OnClick;
+    disabled?: boolean | OnClick;
+    width?: Size;
+    height?: Size;
+    background?: string;
+    text?: string;
 }
-export interface TrumpCardProps {
+export interface NavCardProps extends Omit<CardProps, "children"> {
     titles: Titles;
-    options?: {
-        width?: Size;
+    options?: CardOptions & {
+        buttonInLay?: ButtonInLay;
         image?: {
             path: string;
             size?: ImageSize;
         };
-        onClick?: () => unknown | (() => Promise<unknown>);
-        subButton?: [string, string, () => unknown | (() => Promise<unknown>)];
     };
 }
+export interface NavCardBannerProps extends NavCardProps {
+}
+export interface NavCardButtonProps extends NavCardProps {
+    onClick: OnClick;
+}
+export interface NavCardButtonInLayProps extends NavCardProps {
+    buttonInLay: ButtonInLay;
+}
 export interface InfoCardProps extends CardProps {
     titles: Titles;
     button?: Button;
     options?: {
-        titleBorderColor?: string;
-        rightTextColor?: string;
-        buttonBackgroundColor?: string;
+        titleBorder?: string;
     } & CardOptions;
 }
+export interface InfoCardExamProps extends Omit<InfoCardProps, "children"> {
+    data: {
+        status: string;
+        examDate: string;
+        endDate: string;
+        manager: string;
+        isPublic: boolean;
+    };
+}
+export interface InfoCardProductProps extends Omit<InfoCardProps, "children"> {
+    data: {
+        date?: string;
+        status?: string;
+        receiver?: string | null;
+        requester?: string | null;
+        button?: Button;
+    };
+}
 export interface AddCardProps extends Omit<CardProps, "children"> {
     title?: string;
     icon?: string;
     onClick: OnClick;
 }
-export interface RowCardProps<T> {
-    onClick?: OnClick;
-    dataSet: T;
-    dataField?: {
+export interface TableCardProps<T> extends Omit<CardProps, "children"> {
+    dataSets: T[];
+    dataField: {
         [p in keyof T]?: Partial<DataField>;
     };
+    options?: CardOptions;
 }
 export {};

package/interface/HTMLElement.d.ts

@@ -9,12 +9,17 @@ export declare const HTMLElementType: {
 export type HTMLElementType = (typeof HTMLElementType)[keyof typeof HTMLElementType];
 export interface HTMLElement {
     options?: {
+        className?: string;
         width?: Size;
+        height?: Size;
+        background?: string;
+        text?: string;
+        disabled?: boolean | OnClick;
     };
 }
-export interface HTMLButtonElement extends HTMLElement {
+export interface HTMLLabelElement extends HTMLElement {
     title: string;
-    onClick: OnClick;
+    onClick?: OnClick;
 }
 export interface HTMLSelectElement extends HTMLElement {
     state: State<string>;
@@ -27,5 +32,4 @@ export interface HTMLInputElement extends HTMLElement {
 export interface HTMLToggleElement extends HTMLElement {
     state: State<boolean>;
     labels: [[true, string], [false, string]];
-    isDisabled?: boolean;
 }

package/interface/Layout.d.ts

@@ -0,0 +1,20 @@
+export interface DashboardHeaderProps {
+    title: string;
+    logo: {
+        image: string;
+        href?: string;
+    };
+    options?: {
+        background?: string;
+        text?: string;
+        className?: string;
+    };
+}
+export interface DashboardProps {
+    header: DashboardHeaderProps;
+    navigations: React.ReactNode[];
+    children: React.ReactNode;
+    options?: {
+        background?: string;
+    };
+}

package/interface/Layout.js

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

package/interface/Property.d.ts

@@ -24,6 +24,7 @@ export type State<T> = [T, StateAction<T>];
  * @property {"2xl"} 2xl - Double extra large size
  * @property {"full"} full - Full size
  */
+export type ImageSize = "sub" | "full";
 export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "auto";
 /**
  * Image size type
@@ -33,7 +34,6 @@ export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "auto";
  * @property {"sub"} sub - Sub size
  * @property {"full"} full - Full size
  */
-export type ImageSize = "sub" | "full";
 export type OnClick = () => unknown | (() => Promise<unknown>);
 export type Button = [string, OnClick];
 export type Scripts = {

package/interface/Widget.d.ts

@@ -1,3 +1,4 @@
+import { DataField, OnClick } from "./Property";
 export interface WidgetEvent {
     event: string;
     type: "view" | "modal";
@@ -20,4 +21,26 @@ export interface EventsProps {
     replaces?: Event<boolean | string | null | undefined>[];
     shows?: Event<boolean | string>[];
 }
+export interface DataFieldProps<T> {
+    id: string;
+    dataField: {
+        [p in keyof T]?: Partial<DataField>;
+    };
+    options?: {
+        position?: string;
+        padding?: string;
+    };
+}
+export interface RowProps<T> {
+    onClick?: OnClick;
+    dataSet: T;
+    dataField?: {
+        [p in keyof T]?: Partial<DataField>;
+    };
+    options?: {
+        size?: string;
+        padding?: string;
+        text?: string;
+    };
+}
 export {};

package/interface/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./Card";
 export * from "./HTMLElement";
+export * from "./Layout";
 export * from "./Overlay";
 export * from "./Property";
 export * from "./Shelf";

package/interface/index.js

@@ -1,5 +1,6 @@
 export * from "./Card";
 export * from "./HTMLElement";
+export * from "./Layout";
 export * from "./Overlay";
 export * from "./Property";
 export * from "./Shelf";

package/layout/index.d.ts

@@ -1,4 +1,6 @@
-export { default as Events } from "./widget/Events";
+export { default as Events } from "./template/Events";
 export { default as Dashboard } from "./template/dashboard";
+export { default as DataField } from "./template/DataField";
 export { default as Gallery } from "./template/Gallery";
+export { default as Row } from "./template/Row";
 export { default as Shelf } from "./template/Shelf";

package/layout/index.js

@@ -1,4 +1,6 @@
-export { default as Events } from "./widget/Events";
+export { default as Events } from "./template/Events";
 export { default as Dashboard } from "./template/dashboard";
+export { default as DataField } from "./template/DataField";
 export { default as Gallery } from "./template/Gallery";
+export { default as Row } from "./template/Row";
 export { default as Shelf } from "./template/Shelf";

package/layout/template/DataField.d.ts

@@ -0,0 +1,8 @@
+import { DataFieldProps } from "../../interface";
+declare function Board<T>({ id, dataField }: DataFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Card<T>({ id, dataField }: DataFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+declare const DataField: {
+    Board: typeof Board;
+    Card: typeof Card;
+};
+export default DataField;

package/layout/template/DataField.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DataFieldDesign from "../widget/DataField.design";
+function Board({ id, dataField }) {
+    return (_jsx(DataFieldDesign, { id: id, dataField: dataField, options: {
+            position: "fixed top-34 xl:top-0 left-0 xl:relative z-20",
+            padding: "px-2 xs:px-4 xl:px-7.5",
+        } }));
+}
+function Card({ id, dataField }) {
+    return (_jsx(DataFieldDesign, { id: id, dataField: dataField, options: { padding: "px-2 xs:px-4 xl:px-7.5" } }));
+}
+const DataField = {
+    Board,
+    Card,
+};
+export default DataField;

package/layout/{widget → template}/Events.d.ts

@@ -1,4 +1,4 @@
-import { ReplaceProps, ShowProps } from "./../../interface/Widget";
+import { ReplaceProps, ShowProps } from "../../interface/Widget";
 declare function Show({ widgets, children }: ShowProps): import("react/jsx-runtime").JSX.Element;
 declare function Replace({ widgets, children }: ReplaceProps): import("react/jsx-runtime").JSX.Element;
 declare const Events: {

package/layout/template/Gallery.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Events from "../widget/Events";
-import Tab from "../widget/Tab";
+import Events from "./Events";
+import Tab from "../widget/Tab.design";
 export default function Gallery({ widgets, children, }) {
     return (_jsxs("div", { className: "relative w-full flex", children: [_jsx(Events.Replace, { widgets: widgets?.replaces, children: _jsx(Events.Show, { widgets: widgets?.shows, children: children }) }), widgets?.tabs && _jsx(Tab, { tabs: widgets?.tabs })] }));
 }

package/layout/template/Row.d.ts

@@ -0,0 +1,8 @@
+import { RowProps } from "../../interface";
+declare function Board<T extends Record<string, any>>({ dataSet, dataField, onClick, }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Card<T extends Record<string, any>>({ dataSet, dataField, onClick, }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
+declare const Row: {
+    Board: typeof Board;
+    Card: typeof Card;
+};
+export default Row;

package/layout/template/Row.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import RowDesign from "../widget/Row.design";
+function Board({ dataSet, dataField, onClick, }) {
+    const id = useId();
+    return (_jsx(RowDesign, { onClick: onClick, dataSet: dataSet, dataField: dataField, options: {
+            size: "w-full h-12",
+            padding: "px-2 xs:px-4 xl:px-7.5",
+            text: "text-xl",
+        } }, id));
+}
+function Card({ dataSet, dataField, onClick, }) {
+    const id = useId();
+    return (_jsx(RowDesign, { onClick: onClick, dataSet: dataSet, dataField: dataField, options: {
+            size: "w-full h-10",
+            padding: "px-2 xs:px-4 xl:px-7.5",
+            text: "text-base",
+        } }, id));
+}
+const Row = {
+    Board,
+    Card,
+};
+export default Row;

package/layout/template/Shelf.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../util";
-import ShelfDesign from "../widget/Shelf";
+import ShelfDesign from "../widget/Shelf.design";
 function Shelf({ titles, debug, children }) {
     const container = {
         displays: "inline-flex flex-col gap-12 w-full",

package/layout/template/dashboard/Header.d.ts

@@ -1,4 +1,2 @@
-export declare function Header({ title, image, }: {
-    title: string;
-    image?: [string, string];
-}): import("react/jsx-runtime").JSX.Element;
+import { DashboardHeaderProps } from "../../../interface";
+export declare function Header({ title, logo, options }: DashboardHeaderProps): import("react/jsx-runtime").JSX.Element;