@edu-tosel/design 1.0.60 → 1.0.61

package/interface/Action.d.ts

@@ -1,5 +1,6 @@
-import { HTMLLabelElement } from "./HTMLElement";
+import { LabelWidget } from "./widget";
 import { DataField, OnClick } from "./Property";
+import { Color } from "./Color";
 export interface ActionEvent {
     event: string;
     type: "view" | "modal";
@@ -38,8 +39,8 @@ export interface RowProps<T> {
     item: T;
     dataField?: DataField<T>;
     onClick?: OnClick<T>;
-    buttons?: HTMLLabelElement[];
-    flag?: boolean;
+    buttons?: LabelWidget[];
+    dot?: Color;
     options?: {
         height?: string;
         size?: string;

package/interface/Board.d.ts

@@ -1,6 +1,6 @@
 import { DataField, DataSet, Size, Titles } from "./Property";
 import { EventsProps } from "./Action";
-import { HTMLInput, HTMLLabelElement, HTMLSelectElement } from "./HTMLElement";
+import { InputWidget, LabelWidget, SelectWidget } from "./widget";
 interface OptionsProps {
     className?: string;
     width?: Size;
@@ -18,15 +18,15 @@ export interface BoardProps<B> {
     action?: EventsProps;
     options?: OptionsProps;
     debug?: string;
-    buttons?: HTMLLabelElement[];
+    buttons?: LabelWidget[];
 }
 export interface BoardHeaderProps<B> {
     titles?: Omit<Titles, "subtitle"> & {
         icon?: string;
     };
     tag?: {
-        selects?: HTMLSelectElement<B>[];
-        inputs?: HTMLInput[];
+        selects?: SelectWidget<B>[];
+        inputs?: InputWidget[];
     };
     options?: {
         titleBorder?: string;

package/interface/Color.d.ts

@@ -0,0 +1,3 @@
+export type Color = "red" | "green" | "blue" | "yellow";
+declare const ColorSet: Record<Color, string>;
+export { ColorSet };

package/interface/Color.js

@@ -0,0 +1,7 @@
+const ColorSet = {
+    red: "bg-red-500",
+    green: "bg-green-500",
+    blue: "bg-blue-500",
+    yellow: "bg-yellow-500",
+};
+export { ColorSet };

package/interface/Layout.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import { OnClick, State } from "./Property";
 import { ShowAction } from "./Action";
 interface Notification {
@@ -29,7 +30,7 @@ export interface MenuProps {
 }
 export interface DashboardHeaderProps {
     title: string;
-    logo?: React.ReactNode;
+    logo?: ReactNode;
     notification: NotificationProps;
     menu?: MenuProps;
     options?: {
@@ -40,8 +41,8 @@ export interface DashboardHeaderProps {
 }
 export interface DashboardProps {
     header: DashboardHeaderProps;
-    navigations: React.ReactNode[];
-    children: React.ReactNode;
+    navigations: ReactNode[];
+    children: ReactNode;
     options?: {
         background?: string;
     };

package/interface/Modal.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import { Button, Scripts, Size, State, Titles } from "./Property";
 import { ShowAction } from "./Action";
 interface Options {
@@ -12,7 +13,7 @@ interface Options {
 }
 interface ModalProps {
     titles: Titles;
-    children: React.ReactNode;
+    children: ReactNode;
     showAction?: ShowAction;
     className?: string;
     options?: Partial<Options>;

package/interface/Overlay.d.ts

@@ -1,4 +1,4 @@
-import { HTMLElementFrame, HTMLLabelElement } from "./HTMLElement";
+import { WidgetFrame, LabelWidget } from "./widget";
 import { Titles } from "./Property";
 import { ShowAction } from "./Action";
 export interface OverlayProps {
@@ -9,6 +9,6 @@ export interface OverlayProps {
 export interface InfoOverlayProps extends OverlayProps {
 }
 export interface ManageOverlayProps extends OverlayProps {
-    elements?: HTMLElementFrame[];
-    buttons?: HTMLLabelElement[];
+    elements?: WidgetFrame[];
+    buttons?: LabelWidget[];
 }

package/interface/Property.d.ts

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from "react";
 import { Replace } from "./Action";
-import { HTMLLabelElement } from "./HTMLElement";
+import { LabelWidget } from "./widget";
 /**
  * State type for the React component
  * @template T
@@ -37,7 +37,7 @@ export type Size = "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2
  * @property {"full"} full - Full size
  */
 export type OnClick<Request = unknown, Response = unknown> = (prop?: Request) => Response | ((prop?: Request) => Promise<Response>);
-export interface Button extends HTMLLabelElement {
+export interface Button extends LabelWidget {
 }
 export type FileRead = string | ArrayBuffer | null;
 export type Disabled = boolean | OnClick;

package/interface/index.d.ts

@@ -1,9 +1,9 @@
 export * from "./Action";
 export * from "./Card";
-export * from "./HTMLElement";
+export * from "./Color";
+export * from "./widget";
 export * from "./Layout";
 export * from "./Overlay";
 export * from "./Property";
 export * from "./Theme";
 export * from "./Shelf";
-export * from "./widget";

package/interface/index.js

@@ -1,9 +1,9 @@
 export * from "./Action";
 export * from "./Card";
-export * from "./HTMLElement";
+export * from "./Color";
+export * from "./widget";
 export * from "./Layout";
 export * from "./Overlay";
 export * from "./Property";
 export * from "./Theme";
 export * from "./Shelf";
-export * from "./widget";

package/interface/widget/index.d.ts

@@ -1,2 +1,57 @@
+import { Color } from "../Color";
+import { Disabled, OnClick, Size, State } from "../Property";
 export * from "./Carousel";
 export * from "./Switch";
+export declare const WidgetType: {
+    readonly TEXT: "text";
+    readonly BUTTON: "button";
+    readonly INPUT: "input";
+    readonly SELECT: "select";
+    readonly TOGGLE: "toggle";
+};
+export type WidgetType = (typeof WidgetType)[keyof typeof WidgetType];
+export interface Widget {
+    options?: {
+        className?: string;
+        width?: Size;
+        height?: Size;
+        background?: string;
+        text?: string;
+        disabled?: Disabled;
+        rounded?: string;
+    };
+}
+export interface LabelWidget extends Widget {
+    title: string;
+    hoverState?: State<boolean>;
+    onClick?: OnClick;
+}
+export type SelectOption<T> = [T, string];
+export interface SelectWidget<T> extends Widget {
+    state: State<T>;
+    selectOptions?: SelectOption<T>[];
+    placeholder?: string;
+}
+type InputType = "text" | "password" | "date" | "email" | "phone" | "number";
+export interface InputWidget extends Widget {
+    state: State<string> | State<string | undefined>;
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    placeholder?: string;
+    flag?: boolean;
+    type?: InputType;
+    label?: LabelWidget;
+}
+export interface CheckBoxWidget extends Widget {
+    state: State<boolean>;
+    labels: string;
+    color: Color;
+}
+export interface WidgetFrame {
+    title: string;
+    type: WidgetType;
+    state: State<any>;
+    selectOptions?: SelectOption<string | number>[];
+    labels?: [string | boolean, string][];
+    disabled?: Disabled;
+    onClick?: OnClick;
+}

package/interface/widget/index.js

@@ -1,2 +1,9 @@
 export * from "./Carousel";
 export * from "./Switch";
+export const WidgetType = {
+    TEXT: "text",
+    BUTTON: "button",
+    INPUT: "input",
+    SELECT: "select",
+    TOGGLE: "toggle",
+};

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

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

package/layout/design/Row.design.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
+import { ColorSet } from "../../interface";
 import { cn } from "../../util";
 import { Label } from "../../widget";
-export default function RowDesign({ item, dataField, options, onClick, buttons, flag, }) {
+export default function RowDesign({ item, dataField, options, onClick, buttons, dot, }) {
     const { size, padding, text, noHover, className, isPointer } = options ?? {};
     const id = useId();
     const container = {
@@ -18,13 +19,13 @@ export default function RowDesign({ item, dataField, options, onClick, buttons,
         styles: "truncate",
         className,
     };
-    const flagBox = (flag) => ({
+    const flagBox = {
         positions: "absolute left-3.5",
-        backgrounds: flag ? "bg-green-500" : "bg-red-500",
+        backgrounds: dot && ColorSet[dot],
         sizes: "w-2 h-2",
         styles: "rounded-full",
-    });
-    return (_jsxs("div", { className: cn(container), onClick: () => onClick?.(), children: [typeof flag !== "undefined" && _jsx("div", { className: cn(flagBox(flag)) }), dataField &&
+    };
+    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(`w-${dataField[key]?.size}/100`, itemBox), children: String(item[key]) }, id + key))), _jsx("div", { className: "absolute right-4 xl:right-8 flex gap-4", children: buttons?.map(({ title, onClick, options }) => (_jsx(Label.Button, { title: title, onClick: onClick, options: {
                         background: options?.background ?? "bg-crimson-dark",
                         text: options?.text ?? "text-white",

package/layout/template/Row.d.ts

@@ -1,11 +1,11 @@
 import { RowProps } from "../../interface";
-declare function Row<T>({ item, dataField, onClick, buttons, flag }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Row<T>({ item, dataField, onClick, buttons, dot }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace Row {
-    var Card: <T>({ item, dataField, onClick, buttons, height, noPadding, noHover, flag, }: Omit<RowProps<T>, "options"> & {
+    var Card: <T>({ item, dataField, onClick, buttons, height, noPadding, noHover, dot, }: Omit<RowProps<T>, "options"> & {
         height?: string | undefined;
         noPadding?: boolean | undefined;
         noHover?: boolean | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
-    var Board: <T>({ item, dataField, onClick, buttons, flag, options, }: RowProps<T>) => import("react/jsx-runtime").JSX.Element;
+    var Board: <T>({ item, dataField, onClick, buttons, dot, options, }: RowProps<T>) => import("react/jsx-runtime").JSX.Element;
 }
 export default Row;

package/layout/template/Row.js

@@ -1,26 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import RowDesign from "../design/Row.design";
-function Row({ item, dataField, onClick, buttons, flag }) {
-    return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, buttons: buttons, flag: flag, options: {
+function Row({ item, dataField, onClick, buttons, dot }) {
+    return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, buttons: buttons, dot: dot, options: {
             size: "w-full h-12",
             noHover: true,
             text: "text-xs",
             className: "text-center",
         } }));
 }
-function Board({ item, dataField, onClick, buttons, flag, options, }) {
+function Board({ item, dataField, onClick, buttons, dot, options, }) {
     const id = useId();
-    return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, buttons: buttons, flag: flag, options: {
+    return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, buttons: buttons, dot: dot, options: {
             ...options,
             size: "w-full h-12",
             padding: "px-2 xs:px-4 xl:px-7.5",
             text: "text-xl",
         } }, id));
 }
-function Card({ item, dataField, onClick, buttons, height, noPadding, noHover, flag, }) {
+function Card({ item, dataField, onClick, buttons, height, noPadding, noHover, dot, }) {
     const id = useId();
-    return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, buttons: buttons, flag: flag, options: {
+    return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, buttons: buttons, dot: dot, options: {
             size: `w-full ${height ?? "h-12"}`,
             padding: !noPadding ? "px-2 xs:px-4 xl:px-7.5" : "",
             text: "text-base",

package/layout/widget/sign/WithTitle.d.ts

@@ -1,5 +1,5 @@
-import { HTMLInput } from "../../../interface";
-interface InputWithTitleProps extends HTMLInput {
+import { InputWidget } from "../../../interface";
+interface InputWithTitleProps extends InputWidget {
     title: string;
 }
 declare function WithTitle({ title, placeholder, state, flag, type, }: InputWithTitleProps): import("react/jsx-runtime").JSX.Element;

package/modal/template/Confirm/Input.d.ts

@@ -1,7 +1,7 @@
 import { ConfirmModalProps } from "../../../interface/Modal";
-import { HTMLInput } from "../../../interface";
+import { InputWidget } from "../../../interface";
 interface InputProps extends Omit<ConfirmModalProps, "children"> {
-    inputs: (HTMLInput & {
+    inputs: (InputWidget & {
         title: string;
     })[];
 }

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.60
+1.0.61

package/widget/CheckBox.d.ts

@@ -1,2 +1,2 @@
-import { HTMLCheckBoxElement } from "../interface";
-export default function Checkbox({ state: [checked, setChecked], labels, options, color, }: HTMLCheckBoxElement): import("react/jsx-runtime").JSX.Element;
+import { CheckBoxWidget } from "../interface";
+export default function Checkbox({ state: [checked, setChecked], labels, options, color, }: CheckBoxWidget): import("react/jsx-runtime").JSX.Element;

package/widget/DatePicker.d.ts

@@ -1,3 +1,3 @@
-import { HTMLInput } from "../interface";
+import { InputWidget } from "../interface";
 import "react-datepicker/dist/react-datepicker.css";
-export default function DatePicker({ options }: HTMLInput): import("react/jsx-runtime").JSX.Element;
+export default function DatePicker({ options }: InputWidget): import("react/jsx-runtime").JSX.Element;

package/widget/EmailInput.d.ts

@@ -1,2 +1,2 @@
-import { HTMLInput } from "../interface";
-export default function EmailInput({ state, placeholder, options }: HTMLInput): import("react/jsx-runtime").JSX.Element;
+import { InputWidget } from "../interface";
+export default function EmailInput({ state, placeholder, options, }: InputWidget): import("react/jsx-runtime").JSX.Element;

package/widget/EmailInput.js

@@ -10,7 +10,7 @@ const widthSize = {
     "2xl": "w-144",
     full: "w-full",
 };
-export default function EmailInput({ state, placeholder, options }) {
+export default function EmailInput({ state, placeholder, options, }) {
     const { width } = options ?? {};
     const id = useId();
     const [value, setValue] = state;

package/widget/Toggle.d.ts

@@ -1,5 +1,5 @@
-import { HTMLElement, State } from "../interface";
-export interface HTMLToggleElement extends HTMLElement {
+import { Widget, State } from "../interface";
+export interface HTMLToggleElement extends Widget {
     state: State<boolean>;
     labels?: [[true, string], [false, string]];
 }

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

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

package/widget/template/Input.d.ts

@@ -1,6 +1,6 @@
-import { HTMLInput } from "../../interface";
-declare function Input({ state, onKeyDown, placeholder, options }: HTMLInput): import("react/jsx-runtime").JSX.Element;
+import { InputWidget } from "../../interface";
+declare function Input({ state, onKeyDown, placeholder, options }: InputWidget): import("react/jsx-runtime").JSX.Element;
 declare namespace Input {
-    var LG: ({ state, placeholder, flag, type, label }: HTMLInput) => import("react/jsx-runtime").JSX.Element;
+    var LG: ({ state, placeholder, flag, type, label }: InputWidget) => import("react/jsx-runtime").JSX.Element;
 }
 export default Input;

package/widget/template/Label.d.ts

@@ -1,7 +1,7 @@
-import { HTMLLabelElement } from "../../interface";
-declare function Label({ title, options }: Omit<HTMLLabelElement, "onClick">): import("react/jsx-runtime").JSX.Element;
+import { LabelWidget } from "../../interface";
+declare function Label({ title, options }: Omit<LabelWidget, "onClick">): import("react/jsx-runtime").JSX.Element;
 declare namespace Label {
-    var Button: ({ title, hoverTitle, onClick, options, }: Omit<HTMLLabelElement, "hoverState"> & {
+    var Button: ({ title, hoverTitle, onClick, options, }: Omit<LabelWidget, "hoverState"> & {
         hoverTitle?: string | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
 }

package/widget/template/Select/Select.LG.d.ts

@@ -1,2 +1,2 @@
-import { HTMLSelectElement } from "../../../interface";
-export default function SelectLG<T>({ state, selectOptions, placeholder, options, }: HTMLSelectElement<T>): import("react/jsx-runtime").JSX.Element;
+import { SelectWidget } from "../../../interface";
+export default function SelectLG<T>({ state, selectOptions, placeholder, options, }: SelectWidget<T>): import("react/jsx-runtime").JSX.Element;

package/widget/template/Select/Select.d.ts

@@ -1,2 +1,2 @@
-import { HTMLSelectElement } from "../../../interface";
-export default function Select<T>({ state, selectOptions, placeholder, options, }: HTMLSelectElement<T>): import("react/jsx-runtime").JSX.Element;
+import { SelectWidget } from "../../../interface";
+export default function Select<T>({ state, selectOptions, placeholder, options, }: SelectWidget<T>): import("react/jsx-runtime").JSX.Element;

package/widget/template/Switch/Switch.d.ts

@@ -1,3 +1,3 @@
-import { SwitchProps } from "../../../interface/widget";
+import { SwitchProps } from "../../../interface";
 declare function Switch<T>({ state, values, display, options }: SwitchProps<T>): import("react/jsx-runtime").JSX.Element;
 export default Switch;

package/interface/HTMLElement.d.ts

@@ -1,56 +0,0 @@
-import { Disabled, OnClick, Size, State } from "./Property";
-export declare const HTMLElementType: {
-    readonly TEXT: "text";
-    readonly BUTTON: "button";
-    readonly INPUT: "input";
-    readonly SELECT: "select";
-    readonly TOGGLE: "toggle";
-};
-export type HTMLElementType = (typeof HTMLElementType)[keyof typeof HTMLElementType];
-export interface HTMLElement {
-    options?: {
-        className?: string;
-        width?: Size;
-        height?: Size;
-        background?: string;
-        text?: string;
-        disabled?: Disabled;
-        rounded?: string;
-    };
-}
-export interface HTMLLabelElement extends HTMLElement {
-    title: string;
-    hoverState?: State<boolean>;
-    onClick?: OnClick;
-}
-export type SelectOption<T> = [T, string];
-export interface HTMLSelectElement<T> extends HTMLElement {
-    state: State<T>;
-    selectOptions?: SelectOption<T>[];
-    placeholder?: string;
-}
-type HTMLInputType = "text" | "password" | "date" | "email" | "phone" | "number";
-export interface HTMLInput extends HTMLElement {
-    state: State<string> | State<string | undefined>;
-    onKeyDown?: (e: React.KeyboardEvent) => void;
-    placeholder?: string;
-    flag?: boolean;
-    type?: HTMLInputType;
-    label?: HTMLLabelElement;
-}
-export type ColorType = "red" | "blue" | "green";
-export interface HTMLCheckBoxElement extends HTMLElement {
-    state: State<boolean>;
-    labels: string;
-    color: ColorType;
-}
-export interface HTMLElementFrame {
-    title: string;
-    type: HTMLElementType;
-    state: State<any>;
-    selectOptions?: SelectOption<string | number>[];
-    labels?: [string | boolean, string][];
-    disabled?: Disabled;
-    onClick?: OnClick;
-}
-export {};

package/interface/HTMLElement.js

@@ -1,7 +0,0 @@
-export const HTMLElementType = {
-    TEXT: "text",
-    BUTTON: "button",
-    INPUT: "input",
-    SELECT: "select",
-    TOGGLE: "toggle",
-};