@edu-tosel/design 1.0.283 → 1.0.285

package/board/design/Header.design.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cn } from "../../util";
-import { Input, Select } from "../../widget";
+import { Input, Label, Select } from "../../widget";
 export default function BoardHeader({ titles, tag, widgets, option, }) {
     const { title, icon, titleColor } = titles ?? {};
     const { selects, inputs } = tag ?? {};
@@ -23,8 +23,18 @@ function HeaderWidgetRender(props) {
     if (props.type === "select") {
         return _jsx(Select, { ...props.data });
     }
+    if (props.type === "button") {
+        return (_jsx(Label.Button, { ...props.data, option: {
+                ...props.data.option,
+                width: "xs",
+                height: "xs",
+            } }));
+    }
     if (props.type === "selectToggle") {
-        return _jsx(Select.Toggle, { ...props.data });
+        return (_jsx(Select.Toggle, { ...props.data, option: {
+                ...props.data.option,
+                isText: true,
+            } }));
     }
     return null;
 }

package/interface/Board.d.ts

@@ -35,7 +35,11 @@ interface HeaderSelectToggleWidget<T> {
     type: "selectToggle";
     data: SelectToggleProps<T>;
 }
-export type HeaderWidgetType<B> = HeaderInputWidget | HeaderSelectWidget<B> | HeaderSelectToggleWidget<B>;
+interface HeaderButtonWidget {
+    type: "button";
+    data: LabelWidget;
+}
+export type HeaderWidgetType<B> = HeaderInputWidget | HeaderSelectWidget<B> | HeaderSelectToggleWidget<B> | HeaderButtonWidget;
 export interface BoardHeaderProps<B> {
     titles?: Omit<Titles, "subtitle"> & {
         icon?: string;

package/interface/widget/Select.d.ts

@@ -53,6 +53,7 @@ export interface SelectToggleProps<T> {
     state: State<T>;
     selectOptions: [SelectOptionInput<T>, SelectOptionInput<T>];
     option?: {
+        isText?: boolean;
         className?: string;
     };
 }

package/layout/design/Row.design/index.js

@@ -22,7 +22,7 @@ export default function RowDesign({ item, stateAction, dataField, option, onClic
         className,
     };
     const flagBox = {
-        positions: "absolute left-3.5",
+        positions: "absolute left-2",
         backgrounds: dot && ColorSet[dot],
         sizes: "w-2 h-2",
         styles: "rounded-full",

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.283
+1.0.285

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

@@ -1,2 +1,2 @@
 import { SelectToggleProps } from "../../../interface";
-export default function SelectToggle<T>({ state, selectOptions: selectOptionsInput, }: SelectToggleProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function SelectToggle<T>({ state, selectOptions: selectOptionsInput, option, }: SelectToggleProps<T>): import("react/jsx-runtime").JSX.Element;

package/widget/template/Select/Toggle.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { toSelectOption } from "../../../interface";
 import { cn } from "../../../util";
-export default function SelectToggle({ state, selectOptions: selectOptionsInput, }) {
+export default function SelectToggle({ state, selectOptions: selectOptionsInput, option, }) {
     const selectOptions = selectOptionsInput?.map(toSelectOption);
     const [value, setValue] = state;
     const isOff = value === selectOptions[0].value;
@@ -25,5 +25,6 @@ export default function SelectToggle({ state, selectOptions: selectOptionsInput,
             return setValue(selectOptions[1].value);
         return setValue(selectOptions[0].value);
     };
-    return (_jsx("button", { onClick: toggle, className: cn(container), children: _jsx("div", { className: cn(controller) }) }));
+    const selectedTitle = selectOptions?.find((option) => option.value === value)?.title;
+    return (_jsxs("div", { className: "flex items-center gap-x-1.5 ", children: [selectedTitle && option?.isText && (_jsx("div", { className: "text-sm leading-none", children: selectedTitle })), _jsx("button", { onClick: toggle, className: cn(container), children: _jsx("div", { className: cn(controller) }) })] }));
 }