@edu-tosel/design 1.0.64 → 1.0.65

package/interface/widget/index.d.ts

@@ -37,9 +37,10 @@ export interface InputWidget extends Widget {
     state: State<string> | State<string | undefined>;
     onKeyDown?: (e: React.KeyboardEvent) => void;
     placeholder?: string;
-    flag?: boolean;
+    isValid?: boolean;
     type?: InputType;
     label?: LabelWidget;
+    maxLength?: number;
 }
 export interface CheckBoxWidget extends Widget {
     state: State<boolean>;

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

@@ -2,5 +2,5 @@ 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;
+declare function WithTitle(props: InputWithTitleProps): import("react/jsx-runtime").JSX.Element;
 export default WithTitle;

package/layout/template/sign/WithTitle.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Input } from "../../../widget";
-function WithTitle({ title, placeholder, state, flag, type, }) {
-    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "leading-none", children: title }), _jsx(Input.Form, { placeholder: placeholder, state: state, flag: flag, type: type })] }));
+function WithTitle(props) {
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "leading-none", children: props.title }), _jsx(Input.Form, { ...props })] }));
 }
 export default WithTitle;

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.64
+1.0.65

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

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

package/widget/template/Input/Form.js

@@ -2,7 +2,7 @@ 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, flag, type, label, }) {
+export default function LG({ state, placeholder, isValid, type, label, maxLength, }) {
     const [value, setValue] = state;
     const [onFocus, setOnFocus] = useState(false);
     const ref = useRef(null);
@@ -23,17 +23,21 @@ export default function LG({ state, placeholder, flag, type, label, }) {
         return "bg-crimson-burgundy/10 text-crimson-burgundy border-crimson-burgundy";
     };
     const inputBox = {
-        styles: styleByFlag(flag),
+        styles: styleByFlag(isValid),
         sizes: "w-102.5 h-13.5",
         paddings: `${placeholder && "pt-3"} pl-5`,
         fonts: "text-sm",
         boundaries: "rounded-md outline-none",
         focuses: onFocus ? "border " : "border-0",
         shadows: onFocus &&
-            !(flag === false) &&
+            !(isValid === false) &&
             "shadow-[0px_0px_10px_0px_rgba(16,86,82,0.38)]",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { onClick: () => ref.current?.focus(), className: cn(placeholderBox), children: placeholder }), _jsx("input", { ref: ref, className: cn(inputBox), value: value, onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onChange: (e) => setValue(e.target.value), type: type ?? "text" }), label && (_jsx(Label.Button, { title: label.title, onClick: label.onClick, option: {
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { onClick: () => ref.current?.focus(), className: cn(placeholderBox), children: placeholder }), _jsx("input", { ref: ref, className: cn(inputBox), value: value, onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onChange: (e) => {
+                    if (maxLength && e.target.value.length > maxLength)
+                        return;
+                    setValue(e.target.value);
+                }, type: type ?? "text" }), label && (_jsx(Label.Button, { title: label.title, onClick: label.onClick, option: {
                     width: "sm",
                     height: "xs",
                     className: "absolute top-3.5 right-3.75",