@edu-tosel/design 1.0.310 → 1.0.311

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/version.txt +1 -1
  3. package/widget/template/Select/Toggle.js +11 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@edu-tosel/design",
3
- "version": "1.0.310",
3
+ "version": "1.0.311",
4
4
  "description": "UI components for International TOSEL Committee",
5
5
  "keywords": [
6
6
  "jsx",
package/version.txt CHANGED
@@ -1 +1 @@
1
- 1.0.310
1
+ 1.0.311
package/widget/template/Select/Toggle.js CHANGED
@@ -6,17 +6,21 @@ export default function SelectToggle({ state, selectOptions: selectOptionsInput,
6
6
  const [value, setValue] = state;
7
7
  const isOff = value === selectOptions[0].value;
8
8
  const container = {
9
- positions: "relative",
10
9
  displays: "flex items-center",
11
- sizes: "w-10 h-4.5",
10
+ sizes: "w-10 h-fit",
12
11
  backgrounds: isOff ? "bg-crimson-burgundy" : "bg-green-dark",
13
12
  boundaries: "rounded-full p-0.5",
13
+ animations: "duration-300",
14
14
  };
15
- const controller = {
15
+ const knobWrapper = {
16
+ displays: "relative",
17
+ sizes: "w-full h-4",
18
+ };
19
+ const knob = {
16
20
  positions: "absolute",
17
- locations: isOff ? "left-0.5" : "left-[calc(100%-1rem)]",
18
- sizes: "w-[14px] h-[14px]",
19
- backgrounds: "bg-white",
21
+ locations: isOff ? "left-0" : "left-[calc(100%-1rem)]",
22
+ sizes: "size-4",
23
+ backgrounds: "bg-white shadow-main",
20
24
  boundaries: "rounded-full",
21
25
  animations: "duration-200",
22
26
  };
@@ -26,5 +30,5 @@ export default function SelectToggle({ state, selectOptions: selectOptionsInput,
26
30
  return setValue(selectOptions[0].value);
27
31
  };
28
32
  const selectedTitle = selectOptions?.find((option) => option.value === value)?.title;
29
- 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) }) })] }));
33
+ 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(knobWrapper), children: _jsx("div", { className: cn(knob) }) }) })] }));
30
34
  }