@edu-tosel/design 1.0.63 → 1.0.65

package/asset/sizes.d.ts

@@ -0,0 +1 @@
+export declare const widthSizes: Record<string | number, string>;

package/asset/sizes.js

@@ -0,0 +1,202 @@
+export const widthSizes = {
+    1: "w-1/100",
+    2: "w-2/100",
+    3: "w-3/100",
+    4: "w-4/100",
+    5: "w-5/100",
+    6: "w-6/100",
+    7: "w-7/100",
+    8: "w-8/100",
+    9: "w-9/100",
+    10: "w-10/100",
+    11: "w-11/100",
+    12: "w-12/100",
+    13: "w-13/100",
+    14: "w-14/100",
+    15: "w-15/100",
+    16: "w-16/100",
+    17: "w-17/100",
+    18: "w-18/100",
+    19: "w-19/100",
+    20: "w-20/100",
+    21: "w-21/100",
+    22: "w-22/100",
+    23: "w-23/100",
+    24: "w-24/100",
+    25: "w-25/100",
+    26: "w-26/100",
+    27: "w-27/100",
+    28: "w-28/100",
+    29: "w-29/100",
+    30: "w-30/100",
+    31: "w-31/100",
+    32: "w-32/100",
+    33: "w-33/100",
+    34: "w-34/100",
+    35: "w-35/100",
+    36: "w-36/100",
+    37: "w-37/100",
+    38: "w-38/100",
+    39: "w-39/100",
+    40: "w-40/100",
+    41: "w-41/100",
+    42: "w-42/100",
+    43: "w-43/100",
+    44: "w-44/100",
+    45: "w-45/100",
+    46: "w-46/100",
+    47: "w-47/100",
+    48: "w-48/100",
+    49: "w-49/100",
+    50: "w-50/100",
+    51: "w-51/100",
+    52: "w-52/100",
+    53: "w-53/100",
+    54: "w-54/100",
+    55: "w-55/100",
+    56: "w-56/100",
+    57: "w-57/100",
+    58: "w-58/100",
+    59: "w-59/100",
+    60: "w-60/100",
+    61: "w-61/100",
+    62: "w-62/100",
+    63: "w-63/100",
+    64: "w-64/100",
+    65: "w-65/100",
+    66: "w-66/100",
+    67: "w-67/100",
+    68: "w-68/100",
+    69: "w-69/100",
+    70: "w-70/100",
+    71: "w-71/100",
+    72: "w-72/100",
+    73: "w-73/100",
+    74: "w-74/100",
+    75: "w-75/100",
+    76: "w-76/100",
+    77: "w-77/100",
+    78: "w-78/100",
+    79: "w-79/100",
+    80: "w-80/100",
+    81: "w-81/100",
+    82: "w-82/100",
+    83: "w-83/100",
+    84: "w-84/100",
+    85: "w-85/100",
+    86: "w-86/100",
+    87: "w-87/100",
+    88: "w-88/100",
+    89: "w-89/100",
+    90: "w-90/100",
+    91: "w-91/100",
+    92: "w-92/100",
+    93: "w-93/100",
+    94: "w-94/100",
+    95: "w-95/100",
+    96: "w-96/100",
+    97: "w-97/100",
+    98: "w-98/100",
+    99: "w-99/100",
+    100: "w-full",
+    "1%": "w-1/100",
+    "2%": "w-2/100",
+    "3%": "w-3/100",
+    "4%": "w-4/100",
+    "5%": "w-5/100",
+    "6%": "w-6/100",
+    "7%": "w-7/100",
+    "8%": "w-8/100",
+    "9%": "w-9/100",
+    "10%": "w-10/100",
+    "11%": "w-11/100",
+    "12%": "w-12/100",
+    "13%": "w-13/100",
+    "14%": "w-14/100",
+    "15%": "w-15/100",
+    "16%": "w-16/100",
+    "17%": "w-17/100",
+    "18%": "w-18/100",
+    "19%": "w-19/100",
+    "20%": "w-20/100",
+    "21%": "w-21/100",
+    "22%": "w-22/100",
+    "23%": "w-23/100",
+    "24%": "w-24/100",
+    "25%": "w-25/100",
+    "26%": "w-26/100",
+    "27%": "w-27/100",
+    "28%": "w-28/100",
+    "29%": "w-29/100",
+    "30%": "w-30/100",
+    "31%": "w-31/100",
+    "32%": "w-32/100",
+    "33%": "w-33/100",
+    "34%": "w-34/100",
+    "35%": "w-35/100",
+    "36%": "w-36/100",
+    "37%": "w-37/100",
+    "38%": "w-38/100",
+    "39%": "w-39/100",
+    "40%": "w-40/100",
+    "41%": "w-41/100",
+    "42%": "w-42/100",
+    "43%": "w-43/100",
+    "44%": "w-44/100",
+    "45%": "w-45/100",
+    "46%": "w-46/100",
+    "47%": "w-47/100",
+    "48%": "w-48/100",
+    "49%": "w-49/100",
+    "50%": "w-50/100",
+    "51%": "w-51/100",
+    "52%": "w-52/100",
+    "53%": "w-53/100",
+    "54%": "w-54/100",
+    "55%": "w-55/100",
+    "56%": "w-56/100",
+    "57%": "w-57/100",
+    "58%": "w-58/100",
+    "59%": "w-59/100",
+    "60%": "w-60/100",
+    "61%": "w-61/100",
+    "62%": "w-62/100",
+    "63%": "w-63/100",
+    "64%": "w-64/100",
+    "65%": "w-65/100",
+    "66%": "w-66/100",
+    "67%": "w-67/100",
+    "68%": "w-68/100",
+    "69%": "w-69/100",
+    "70%": "w-70/100",
+    "71%": "w-71/100",
+    "72%": "w-72/100",
+    "73%": "w-73/100",
+    "74%": "w-74/100",
+    "75%": "w-75/100",
+    "76%": "w-76/100",
+    "77%": "w-77/100",
+    "78%": "w-78/100",
+    "79%": "w-79/100",
+    "80%": "w-80/100",
+    "81%": "w-81/100",
+    "82%": "w-82/100",
+    "83%": "w-83/100",
+    "84%": "w-84/100",
+    "85%": "w-85/100",
+    "86%": "w-86/100",
+    "87%": "w-87/100",
+    "88%": "w-88/100",
+    "89%": "w-89/100",
+    "90%": "w-90/100",
+    "91%": "w-91/100",
+    "92%": "w-92/100",
+    "93%": "w-93/100",
+    "94%": "w-94/100",
+    "95%": "w-95/100",
+    "96%": "w-96/100",
+    "97%": "w-97/100",
+    "98%": "w-98/100",
+    "99%": "w-99/100",
+    "100%": "w-full",
+};

package/asset/sizes.ts

@@ -0,0 +1,202 @@
+export const widthSizes = {
+  1: "w-1/100",
+  2: "w-2/100",
+  3: "w-3/100",
+  4: "w-4/100",
+  5: "w-5/100",
+  6: "w-6/100",
+  7: "w-7/100",
+  8: "w-8/100",
+  9: "w-9/100",
+  10: "w-10/100",
+  11: "w-11/100",
+  12: "w-12/100",
+  13: "w-13/100",
+  14: "w-14/100",
+  15: "w-15/100",
+  16: "w-16/100",
+  17: "w-17/100",
+  18: "w-18/100",
+  19: "w-19/100",
+  20: "w-20/100",
+  21: "w-21/100",
+  22: "w-22/100",
+  23: "w-23/100",
+  24: "w-24/100",
+  25: "w-25/100",
+  26: "w-26/100",
+  27: "w-27/100",
+  28: "w-28/100",
+  29: "w-29/100",
+  30: "w-30/100",
+  31: "w-31/100",
+  32: "w-32/100",
+  33: "w-33/100",
+  34: "w-34/100",
+  35: "w-35/100",
+  36: "w-36/100",
+  37: "w-37/100",
+  38: "w-38/100",
+  39: "w-39/100",
+  40: "w-40/100",
+  41: "w-41/100",
+  42: "w-42/100",
+  43: "w-43/100",
+  44: "w-44/100",
+  45: "w-45/100",
+  46: "w-46/100",
+  47: "w-47/100",
+  48: "w-48/100",
+  49: "w-49/100",
+  50: "w-50/100",
+  51: "w-51/100",
+  52: "w-52/100",
+  53: "w-53/100",
+  54: "w-54/100",
+  55: "w-55/100",
+  56: "w-56/100",
+  57: "w-57/100",
+  58: "w-58/100",
+  59: "w-59/100",
+  60: "w-60/100",
+  61: "w-61/100",
+  62: "w-62/100",
+  63: "w-63/100",
+  64: "w-64/100",
+  65: "w-65/100",
+  66: "w-66/100",
+  67: "w-67/100",
+  68: "w-68/100",
+  69: "w-69/100",
+  70: "w-70/100",
+  71: "w-71/100",
+  72: "w-72/100",
+  73: "w-73/100",
+  74: "w-74/100",
+  75: "w-75/100",
+  76: "w-76/100",
+  77: "w-77/100",
+  78: "w-78/100",
+  79: "w-79/100",
+  80: "w-80/100",
+  81: "w-81/100",
+  82: "w-82/100",
+  83: "w-83/100",
+  84: "w-84/100",
+  85: "w-85/100",
+  86: "w-86/100",
+  87: "w-87/100",
+  88: "w-88/100",
+  89: "w-89/100",
+  90: "w-90/100",
+  91: "w-91/100",
+  92: "w-92/100",
+  93: "w-93/100",
+  94: "w-94/100",
+  95: "w-95/100",
+  96: "w-96/100",
+  97: "w-97/100",
+  98: "w-98/100",
+  99: "w-99/100",
+  100: "w-full",
+  "1%": "w-1/100",
+  "2%": "w-2/100",
+  "3%": "w-3/100",
+  "4%": "w-4/100",
+  "5%": "w-5/100",
+  "6%": "w-6/100",
+  "7%": "w-7/100",
+  "8%": "w-8/100",
+  "9%": "w-9/100",
+  "10%": "w-10/100",
+  "11%": "w-11/100",
+  "12%": "w-12/100",
+  "13%": "w-13/100",
+  "14%": "w-14/100",
+  "15%": "w-15/100",
+  "16%": "w-16/100",
+  "17%": "w-17/100",
+  "18%": "w-18/100",
+  "19%": "w-19/100",
+  "20%": "w-20/100",
+  "21%": "w-21/100",
+  "22%": "w-22/100",
+  "23%": "w-23/100",
+  "24%": "w-24/100",
+  "25%": "w-25/100",
+  "26%": "w-26/100",
+  "27%": "w-27/100",
+  "28%": "w-28/100",
+  "29%": "w-29/100",
+  "30%": "w-30/100",
+  "31%": "w-31/100",
+  "32%": "w-32/100",
+  "33%": "w-33/100",
+  "34%": "w-34/100",
+  "35%": "w-35/100",
+  "36%": "w-36/100",
+  "37%": "w-37/100",
+  "38%": "w-38/100",
+  "39%": "w-39/100",
+  "40%": "w-40/100",
+  "41%": "w-41/100",
+  "42%": "w-42/100",
+  "43%": "w-43/100",
+  "44%": "w-44/100",
+  "45%": "w-45/100",
+  "46%": "w-46/100",
+  "47%": "w-47/100",
+  "48%": "w-48/100",
+  "49%": "w-49/100",
+  "50%": "w-50/100",
+  "51%": "w-51/100",
+  "52%": "w-52/100",
+  "53%": "w-53/100",
+  "54%": "w-54/100",
+  "55%": "w-55/100",
+  "56%": "w-56/100",
+  "57%": "w-57/100",
+  "58%": "w-58/100",
+  "59%": "w-59/100",
+  "60%": "w-60/100",
+  "61%": "w-61/100",
+  "62%": "w-62/100",
+  "63%": "w-63/100",
+  "64%": "w-64/100",
+  "65%": "w-65/100",
+  "66%": "w-66/100",
+  "67%": "w-67/100",
+  "68%": "w-68/100",
+  "69%": "w-69/100",
+  "70%": "w-70/100",
+  "71%": "w-71/100",
+  "72%": "w-72/100",
+  "73%": "w-73/100",
+  "74%": "w-74/100",
+  "75%": "w-75/100",
+  "76%": "w-76/100",
+  "77%": "w-77/100",
+  "78%": "w-78/100",
+  "79%": "w-79/100",
+  "80%": "w-80/100",
+  "81%": "w-81/100",
+  "82%": "w-82/100",
+  "83%": "w-83/100",
+  "84%": "w-84/100",
+  "85%": "w-85/100",
+  "86%": "w-86/100",
+  "87%": "w-87/100",
+  "88%": "w-88/100",
+  "89%": "w-89/100",
+  "90%": "w-90/100",
+  "91%": "w-91/100",
+  "92%": "w-92/100",
+  "93%": "w-93/100",
+  "94%": "w-94/100",
+  "95%": "w-95/100",
+  "96%": "w-96/100",
+  "97%": "w-97/100",
+  "98%": "w-98/100",
+  "99%": "w-99/100",
+  "100%": "w-full",
+} as Record<number | string, string>;

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/design/Row.design.js

@@ -3,6 +3,7 @@ import { useId } from "react";
 import { ColorSet } from "../../interface";
 import { cn } from "../../util";
 import { Label } from "../../widget";
+import { widthSizes } from "../../asset/sizes";
 export default function RowDesign({ item, dataField, option, onClick, buttons, dot, }) {
     const { size, padding, text, noHover, className, isPointer } = option ?? {};
     const id = useId();
@@ -26,7 +27,7 @@ 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(`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, option }) => (_jsx(Label.Button, { title: title, onClick: onClick, option: {
+                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: {
                         background: option?.background ?? "bg-crimson-dark",
                         text: option?.text ?? "text-white",
                         width: "xs",

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.63",
+  "version": "1.0.65",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/tailwind.config.ts

@@ -592,7 +592,6 @@ export default {
     },
   },
   safelist: [
-    { pattern: /w-.*/ },
     {
       pattern: /top-.*/,
     },

package/version.txt

@@ -1 +1 @@
-1.0.63
+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",

package/widget/template/Toggle.d.ts

@@ -1,6 +1,6 @@
 import { Widget, State } from "../../interface";
-export interface HTMLToggleElement extends Widget {
+export interface ToggleWidget extends Widget {
     state: State<boolean>;
     labels?: [[true, string], [false, string]];
 }
-export default function Toggle({ state: [chekced, setChecked], labels, option, }: HTMLToggleElement): import("react/jsx-runtime").JSX.Element;
+export default function Toggle({ state: [chekced, setChecked], labels, option, }: ToggleWidget): import("react/jsx-runtime").JSX.Element;