bonkers-ui 2.0.24 → 2.0.25

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 (4) hide show
  1. package/components/UiSelect/UiSelect.js +40 -38
  2. package/components/UiSelect/UiSelect.js.map +1 -1
  3. package/index.d.ts +1 -0
  4. package/package.json +33 -33
package/components/UiSelect/UiSelect.js CHANGED
@@ -1,23 +1,23 @@
1
1
  import { jsxs as i, jsx as e } from "react/jsx-runtime";
2
- import v from "react";
2
+ import C, { useEffect as E } from "react";
3
3
  import m from "classnames";
4
- import { UiTypography as C } from "../UiTypography/UiTypography.js";
5
- import { ETypographySizes as g } from "../UiTypography/_types.js";
4
+ import { UiTypography as g } from "../UiTypography/UiTypography.js";
5
+ import { ETypographySizes as x } from "../UiTypography/_types.js";
6
6
  import { EColors as U } from "../../_types/colors.js";
7
7
  import "../UiInput/UiInput.base.js";
8
8
  import "../UiInput/UiInputText.js";
9
- import { UiInputStatusMessage as E } from "../UiInput/UiInputStatusMessage.js";
9
+ import { UiInputStatusMessage as M } from "../UiInput/UiInputStatusMessage.js";
10
10
  import { EInputKind as s } from "../UiInput/_types.js";
11
11
  import { ESelectSize as t } from "./_types.js";
12
- import '../../assets/UiSelect.css';const M = "_UiSelect_1fbno_1", D = {
13
- UiSelect: M
14
- }, R = {
12
+ import '../../assets/UiSelect.css';const D = "_UiSelect_1fbno_1", R = {
13
+ UiSelect: D
14
+ }, L = {
15
15
  [s.DEFAULT]: "border-secondary-alt-600",
16
16
  [s.ERROR]: "border-error",
17
17
  [s.SUCCESS]: "border-primary-600",
18
18
  [s.WARNING]: "border-warning-600"
19
- }, K = ({
20
- children: x,
19
+ }, W = ({
20
+ children: f,
21
21
  heading: c,
22
22
  subLabel: d,
23
23
  disabled: p,
@@ -25,63 +25,65 @@ import '../../assets/UiSelect.css';const M = "_UiSelect_1fbno_1", D = {
25
25
  className: N,
26
26
  placeholder: h,
27
27
  prefixIcon: r,
28
- postfixIcon: S,
29
- statusMessage: y,
30
- kind: a,
31
- size: l = t.MD,
32
- ...n
28
+ postfixIcon: v,
29
+ statusMessage: S,
30
+ kind: n,
31
+ size: o = t.MD,
32
+ ...l
33
33
  }) => {
34
- const [o, f] = v.useState(n.value || n.defaultValue || ""), w = v.useCallback(
34
+ const [a, y] = C.useState(l.value || l.defaultValue || ""), w = C.useCallback(
35
35
  (b) => {
36
- f(b.target.value), u?.(b);
36
+ y(b.target.value), u?.(b);
37
37
  },
38
38
  [u]
39
39
  );
40
- return /* @__PURE__ */ i("div", { className: m("ui-select", N), children: [
40
+ return E(() => {
41
+ l.value !== void 0 && y(l.value);
42
+ }, [l.value]), /* @__PURE__ */ i("div", { className: m("ui-select", N), children: [
41
43
  c ? /* @__PURE__ */ e(
42
- C,
44
+ g,
43
45
  {
44
- size: g.MD,
46
+ size: x.MD,
45
47
  className: "mb-xxs",
46
48
  children: c
47
49
  }
48
50
  ) : null,
49
51
  /* @__PURE__ */ i("div", { className: m(
50
- D.UiSelect,
52
+ R.UiSelect,
51
53
  "flex items-center gap-sm",
52
54
  "relative",
53
55
  "rounded-xl",
54
56
  "border",
55
57
  "hover:border-secondary-alt-600",
56
- p ? ["pointer-events-none", "border-secondary-alt-300", "bg-secondary-alt-200"] : [a && R[a], "bg-white"]
58
+ p ? ["pointer-events-none", "border-secondary-alt-300", "bg-secondary-alt-200"] : [n && L[n], "bg-white"]
57
59
  ), children: [
58
60
  r ? /* @__PURE__ */ e("div", { className: "flex items-center pl-sm", children: r }) : null,
59
61
  /* @__PURE__ */ i(
60
62
  "select",
61
63
  {
62
- ...n,
64
+ ...l,
63
65
  className: m(
64
66
  "m-0 w-full cursor-pointer appearance-none border-0 bg-transparent outline-0",
65
67
  {
66
- "text-secondary-alt": o === "" || !o,
67
- "text-black": o,
68
- "py-xs": l === t.SM && r,
69
- "py-sm": l === t.MD && r,
70
- "px-sm py-xs": l === t.SM && !r,
71
- "p-sm": l === t.MD && !r
68
+ "text-secondary-alt": a === "" || !a,
69
+ "text-black": a,
70
+ "py-xs": o === t.SM && r,
71
+ "py-sm": o === t.MD && r,
72
+ "px-sm py-xs": o === t.SM && !r,
73
+ "p-sm": o === t.MD && !r
72
74
  },
73
75
  r ? "pr-xl" : "p-sm pr-xl"
74
76
  ),
75
77
  disabled: p,
76
- value: o,
78
+ value: a,
77
79
  onChange: w,
78
80
  children: [
79
81
  h ? /* @__PURE__ */ e("option", { value: "", disabled: !0, hidden: !0, children: h }) : null,
80
- x
82
+ f
81
83
  ]
82
84
  }
83
85
  ),
84
- /* @__PURE__ */ e("div", { className: "pointer-events-none absolute top-1/2 right-sm -translate-y-1/2", children: S || /* @__PURE__ */ e(
86
+ /* @__PURE__ */ e("div", { className: "pointer-events-none absolute top-1/2 right-sm -translate-y-1/2", children: v || /* @__PURE__ */ e(
85
87
  "svg",
86
88
  {
87
89
  width: "16",
@@ -100,24 +102,24 @@ import '../../assets/UiSelect.css';const M = "_UiSelect_1fbno_1", D = {
100
102
  ) })
101
103
  ] }),
102
104
  d ? /* @__PURE__ */ e(
103
- C,
105
+ g,
104
106
  {
105
- size: g.SM,
107
+ size: x.SM,
106
108
  color: U.SECONDARY_ALT,
107
109
  className: "mt-xxs",
108
110
  children: d
109
111
  }
110
112
  ) : null,
111
- y ? /* @__PURE__ */ e(
112
- E,
113
+ S ? /* @__PURE__ */ e(
114
+ M,
113
115
  {
114
- kind: a,
115
- children: y
116
+ kind: n,
117
+ children: S
116
118
  }
117
119
  ) : null
118
120
  ] });
119
121
  };
120
122
  export {
121
- K as UiSelect
123
+ W as UiSelect
122
124
  };
123
125
  //# sourceMappingURL=UiSelect.js.map
package/components/UiSelect/UiSelect.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"UiSelect.js","sources":["../../../src/components/UiSelect/UiSelect.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { UiTypography, ETypographySizes, EColors } from \"../UiTypography\";\nimport styles from \"./UiSelect.module.css\";\nimport { EInputKind, UiInputStatusMessage } from \"../UiInput\";\nimport { ESelectSize } from \"./_types\";\n\ntype TSelectProps = {\n\theading?: string\n\tsubLabel?: string;\n\tdisabled?: boolean;\n\tvalue?: string | number | readonly string[];\n\tplaceholder?: string;\n\tprefixIcon?: React.ReactNode;\n\tpostfixIcon?: React.ReactNode;\n\tclassName?: string;\n\tkind?: EInputKind;\n\tsize?: ESelectSize;\n\tstatusMessage?: string | React.ReactElement;\n\tonChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;\n} & React.SelectHTMLAttributes<HTMLSelectElement>\n\nconst stateClasses = {\n\t[EInputKind.DEFAULT]: \"border-secondary-alt-600\",\n\t[EInputKind.ERROR]: \"border-error\",\n\t[EInputKind.SUCCESS]: \"border-primary-600\",\n\t[EInputKind.WARNING]: \"border-warning-600\",\n};\n\nexport const UiSelect: React.FC<TSelectProps> = ({\n\tchildren,\n\theading,\n\tsubLabel,\n\tdisabled,\n\tonChange,\n\tclassName,\n\tplaceholder,\n\tprefixIcon,\n\tpostfixIcon,\n\tstatusMessage,\n\tkind,\n\tsize = ESelectSize.MD,\n\t...rest\n}) => {\n\tconst [value, setValue] = React.useState(rest.value || rest.defaultValue || \"\");\n\tconst handleChange = React.useCallback(\n\t\t(event: React.ChangeEvent<HTMLSelectElement>) => {\n\t\t\tsetValue(event.target.value);\n\t\t\tonChange?.(event);\n\t\t},\n\t\t[onChange],\n\t);\n\treturn (\n\t\t<div className={ cx(\"ui-select\", className) }>\n\t\t\t{ heading\n\t\t\t\t? <UiTypography\n\t\t\t\t\tsize={ ETypographySizes.MD }\n\t\t\t\t\tclassName=\"mb-xxs\">\n\t\t\t\t\t{ heading }\n\t\t\t\t</UiTypography>\n\t\t\t\t: null\n\t\t\t}\n\t\t\t<div className={ cx(styles.UiSelect,\n\t\t\t\t\"flex items-center gap-sm\",\n\t\t\t\t\"relative\",\n\t\t\t\t\"rounded-xl\",\n\t\t\t\t\"border\",\n\t\t\t\t\"hover:border-secondary-alt-600\",\n\t\t\t\tdisabled\n\t\t\t\t\t? [\"pointer-events-none\", \"border-secondary-alt-300\", \"bg-secondary-alt-200\"]\n\t\t\t\t\t: [kind && stateClasses[kind], \"bg-white\"]\n\t\t\t) }>\n\t\t\t\t{\n\t\t\t\t\tprefixIcon\n\t\t\t\t\t\t? <div className=\"flex items-center pl-sm\">{ prefixIcon }</div>\n\t\t\t\t\t\t: null\n\t\t\t\t}\n\t\t\t\t<select\n\t\t\t\t\t{ ...rest }\n\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\"m-0 w-full cursor-pointer appearance-none border-0 bg-transparent outline-0\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"text-secondary-alt\": value === \"\" || !value,\n\t\t\t\t\t\t\t\"text-black\": value,\n\n\t\t\t\t\t\t\t\"py-xs\": size === ESelectSize.SM && prefixIcon,\n\t\t\t\t\t\t\t\"py-sm\": size === ESelectSize.MD && prefixIcon,\n\n\t\t\t\t\t\t\t\"px-sm py-xs\": size === ESelectSize.SM && !prefixIcon,\n\t\t\t\t\t\t\t\"p-sm\": size === ESelectSize.MD && !prefixIcon\n\t\t\t\t\t\t},\n\t\t\t\t\t\tprefixIcon\n\t\t\t\t\t\t\t? \"pr-xl\"\n\t\t\t\t\t\t\t: \"p-sm pr-xl\"\n\t\t\t\t\t) }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t>\n\t\t\t\t\t{ placeholder\n\t\t\t\t\t\t? <option value={ \"\" } disabled hidden>{ placeholder }</option>\n\t\t\t\t\t\t: null }\n\t\t\t\t\t{ children }\n\t\t\t\t</select>\n\t\t\t\t<div className=\"pointer-events-none absolute top-1/2 right-sm -translate-y-1/2\">\n\t\t\t\t\t{ postfixIcon\n\t\t\t\t\t\t? postfixIcon\n\t\t\t\t\t\t: (<svg\n\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M13.25 6.8125L8.5 11.2812C8.34375 11.4375 8.15625 11.5 8 11.5C7.8125 11.5 7.625 11.4375 7.46875 11.3125L2.71875 6.8125C2.40625 6.53125 2.40625 6.0625 2.6875 5.75C2.96875 5.4375 3.4375 5.4375 3.75 5.71875L8 9.71875L12.2188 5.71875C12.5312 5.4375 13 5.4375 13.2812 5.75C13.5625 6.0625 13.5625 6.53125 13.25 6.8125Z\"\n\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>)\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ subLabel\n\t\t\t\t? (<UiTypography\n\t\t\t\t\tsize={ ETypographySizes.SM }\n\t\t\t\t\tcolor={ EColors.SECONDARY_ALT }\n\t\t\t\t\tclassName=\"mt-xxs\"\n\t\t\t\t>\n\t\t\t\t\t{ subLabel }\n\t\t\t\t</UiTypography>)\n\t\t\t\t: null\n\t\t\t}\n\n\t\t\t{ statusMessage\n\t\t\t\t? (\n\t\t\t\t\t<UiInputStatusMessage\n\t\t\t\t\t\tkind={ kind }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ statusMessage }\n\t\t\t\t\t</UiInputStatusMessage>\n\t\t\t\t)\n\t\t\t\t: null }\n\t\t</div>\n\t);\n};\n"],"names":["stateClasses","EInputKind","UiSelect","children","heading","subLabel","disabled","onChange","className","placeholder","prefixIcon","postfixIcon","statusMessage","kind","size","ESelectSize","rest","value","setValue","React","handleChange","event","cx","jsx","UiTypography","ETypographySizes","jsxs","styles","EColors","UiInputStatusMessage"],"mappings":"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"}
1
+ {"version":3,"file":"UiSelect.js","sources":["../../../src/components/UiSelect/UiSelect.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport cx from \"classnames\";\nimport { UiTypography, ETypographySizes, EColors } from \"../UiTypography\";\nimport styles from \"./UiSelect.module.css\";\nimport { EInputKind, UiInputStatusMessage } from \"../UiInput\";\nimport { ESelectSize } from \"./_types\";\n\ntype TSelectProps = {\n\theading?: string\n\tsubLabel?: string;\n\tdisabled?: boolean;\n\tvalue?: string | number | readonly string[];\n\tplaceholder?: string;\n\tprefixIcon?: React.ReactNode;\n\tpostfixIcon?: React.ReactNode;\n\tclassName?: string;\n\tkind?: EInputKind;\n\tsize?: ESelectSize;\n\tstatusMessage?: string | React.ReactElement;\n\tonChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;\n} & React.SelectHTMLAttributes<HTMLSelectElement>\n\nconst stateClasses = {\n\t[EInputKind.DEFAULT]: \"border-secondary-alt-600\",\n\t[EInputKind.ERROR]: \"border-error\",\n\t[EInputKind.SUCCESS]: \"border-primary-600\",\n\t[EInputKind.WARNING]: \"border-warning-600\",\n};\n\nexport const UiSelect: React.FC<TSelectProps> = ({\n\tchildren,\n\theading,\n\tsubLabel,\n\tdisabled,\n\tonChange,\n\tclassName,\n\tplaceholder,\n\tprefixIcon,\n\tpostfixIcon,\n\tstatusMessage,\n\tkind,\n\tsize = ESelectSize.MD,\n\t...rest\n}) => {\n\tconst [value, setValue] = React.useState(rest.value || rest.defaultValue || \"\");\n\n\tconst handleChange = React.useCallback(\n\t\t(event: React.ChangeEvent<HTMLSelectElement>) => {\n\t\t\tsetValue(event.target.value);\n\t\t\tonChange?.(event);\n\t\t},\n\t\t[onChange],\n\t);\n\n\tuseEffect(() => {\n\t\tif (rest.value !== undefined) {\n\t\t\tsetValue(rest.value);\n\t\t}\n\t}, [rest.value]);\n\n\treturn (\n\t\t<div className={ cx(\"ui-select\", className) }>\n\t\t\t{ heading\n\t\t\t\t? <UiTypography\n\t\t\t\t\tsize={ ETypographySizes.MD }\n\t\t\t\t\tclassName=\"mb-xxs\">\n\t\t\t\t\t{ heading }\n\t\t\t\t</UiTypography>\n\t\t\t\t: null\n\t\t\t}\n\t\t\t<div className={ cx(styles.UiSelect,\n\t\t\t\t\"flex items-center gap-sm\",\n\t\t\t\t\"relative\",\n\t\t\t\t\"rounded-xl\",\n\t\t\t\t\"border\",\n\t\t\t\t\"hover:border-secondary-alt-600\",\n\t\t\t\tdisabled\n\t\t\t\t\t? [\"pointer-events-none\", \"border-secondary-alt-300\", \"bg-secondary-alt-200\"]\n\t\t\t\t\t: [kind && stateClasses[kind], \"bg-white\"]\n\t\t\t) }>\n\t\t\t\t{\n\t\t\t\t\tprefixIcon\n\t\t\t\t\t\t? <div className=\"flex items-center pl-sm\">{ prefixIcon }</div>\n\t\t\t\t\t\t: null\n\t\t\t\t}\n\t\t\t\t<select\n\t\t\t\t\t{ ...rest }\n\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\"m-0 w-full cursor-pointer appearance-none border-0 bg-transparent outline-0\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"text-secondary-alt\": value === \"\" || !value,\n\t\t\t\t\t\t\t\"text-black\": value,\n\n\t\t\t\t\t\t\t\"py-xs\": size === ESelectSize.SM && prefixIcon,\n\t\t\t\t\t\t\t\"py-sm\": size === ESelectSize.MD && prefixIcon,\n\n\t\t\t\t\t\t\t\"px-sm py-xs\": size === ESelectSize.SM && !prefixIcon,\n\t\t\t\t\t\t\t\"p-sm\": size === ESelectSize.MD && !prefixIcon\n\t\t\t\t\t\t},\n\t\t\t\t\t\tprefixIcon\n\t\t\t\t\t\t\t? \"pr-xl\"\n\t\t\t\t\t\t\t: \"p-sm pr-xl\"\n\t\t\t\t\t) }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t>\n\t\t\t\t\t{ placeholder\n\t\t\t\t\t\t? <option value={ \"\" } disabled hidden>{ placeholder }</option>\n\t\t\t\t\t\t: null }\n\t\t\t\t\t{ children }\n\t\t\t\t</select>\n\t\t\t\t<div className=\"pointer-events-none absolute top-1/2 right-sm -translate-y-1/2\">\n\t\t\t\t\t{ postfixIcon\n\t\t\t\t\t\t? postfixIcon\n\t\t\t\t\t\t: (<svg\n\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M13.25 6.8125L8.5 11.2812C8.34375 11.4375 8.15625 11.5 8 11.5C7.8125 11.5 7.625 11.4375 7.46875 11.3125L2.71875 6.8125C2.40625 6.53125 2.40625 6.0625 2.6875 5.75C2.96875 5.4375 3.4375 5.4375 3.75 5.71875L8 9.71875L12.2188 5.71875C12.5312 5.4375 13 5.4375 13.2812 5.75C13.5625 6.0625 13.5625 6.53125 13.25 6.8125Z\"\n\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>)\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ subLabel\n\t\t\t\t? (<UiTypography\n\t\t\t\t\tsize={ ETypographySizes.SM }\n\t\t\t\t\tcolor={ EColors.SECONDARY_ALT }\n\t\t\t\t\tclassName=\"mt-xxs\"\n\t\t\t\t>\n\t\t\t\t\t{ subLabel }\n\t\t\t\t</UiTypography>)\n\t\t\t\t: null\n\t\t\t}\n\n\t\t\t{ statusMessage\n\t\t\t\t? (\n\t\t\t\t\t<UiInputStatusMessage\n\t\t\t\t\t\tkind={ kind }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ statusMessage }\n\t\t\t\t\t</UiInputStatusMessage>\n\t\t\t\t)\n\t\t\t\t: null }\n\t\t</div>\n\t);\n};\n"],"names":["stateClasses","EInputKind","UiSelect","children","heading","subLabel","disabled","onChange","className","placeholder","prefixIcon","postfixIcon","statusMessage","kind","size","ESelectSize","rest","value","setValue","React","handleChange","event","useEffect","cx","jsx","UiTypography","ETypographySizes","jsxs","styles","EColors","UiInputStatusMessage"],"mappings":"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"}
package/index.d.ts CHANGED
@@ -19,6 +19,7 @@ export * from './components/UiRadioFancy';
19
19
  export * from './components/UiSelect';
20
20
  export * from './components/UiSkeleton';
21
21
  export * from './components/UiSnackbar';
22
+ export * from './components/UiStars';
22
23
  export * from './components/UiTable';
23
24
  export * from './components/UiTabs';
24
25
  export * from './components/UiToggle';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bonkers-ui",
3
- "version": "v2.0.24",
3
+ "version": "v2.0.25",
4
4
  "type": "module",
5
5
  "description": "Bonkers ui library",
6
6
  "author": "cc6.magister@gmail.com",
@@ -18,51 +18,51 @@
18
18
  "prepare": "husky"
19
19
  },
20
20
  "dependencies": {
21
- "@tailwindcss/vite": "^4.2.1",
21
+ "@tailwindcss/vite": "^4.3.2",
22
+ "ajv": "^8.20.0",
22
23
  "classnames": "^2.5.1",
23
- "postcss": "^8.5.8",
24
- "react": "^19.2.4",
25
- "react-dom": "^19.2.4",
26
- "storybook": "^10.2.17",
27
- "tailwindcss": "^4.2.1",
28
- "typescript": "^5.9.3",
29
- "ajv": "^8.18.0",
30
- "vite": "^7.3.1"
24
+ "postcss": "^8.5.16",
25
+ "react": "^19.2.7",
26
+ "react-dom": "^19.2.7",
27
+ "storybook": "^10.4.6",
28
+ "tailwindcss": "^4.3.2",
29
+ "typescript": "^6.0.3",
30
+ "vite": "^7.3.6"
31
31
  },
32
32
  "devDependencies": {
33
- "@chromatic-com/storybook": "^5.0.1",
34
- "@eslint-react/eslint-plugin": "^2.13.0",
35
- "@storybook/addon-docs": "^10.2.17",
36
- "@storybook/addon-onboarding": "^10.2.17",
37
- "@storybook/react-vite": "^10.2.17",
33
+ "@chromatic-com/storybook": "^5.2.1",
34
+ "@eslint-react/eslint-plugin": "^5.10.0",
35
+ "@storybook/addon-docs": "^10.4.6",
36
+ "@storybook/addon-onboarding": "^10.4.6",
37
+ "@storybook/react-vite": "^10.4.6",
38
38
  "@stylistic/eslint-plugin": "^5.10.0",
39
- "@types/bun": "1.3.10",
40
- "@types/react": "^19.2.14",
39
+ "@types/bun": "1.3.14",
40
+ "@types/react": "^19.2.17",
41
41
  "@types/react-dom": "^19.2.3",
42
- "@vitejs/plugin-react": "^5.1.4",
43
- "eslint": "^10.0.3",
44
- "eslint-plugin-better-tailwindcss": "^4.3.2",
45
- "eslint-plugin-storybook": "^10.2.17",
46
- "eslint-plugin-tailwindcss": "^3.18.2",
42
+ "@vitejs/plugin-react": "^5.2.0",
43
+ "eslint": "^10.6.0",
44
+ "eslint-plugin-better-tailwindcss": "^4.6.0",
45
+ "eslint-plugin-storybook": "^10.4.6",
46
+ "eslint-plugin-tailwindcss": "^3.18.3",
47
47
  "gh-pages": "^6.3.0",
48
48
  "husky": "^9.1.7",
49
- "lint-staged": "^16.3.3",
50
- "prettier": "^3.8.1",
51
- "typescript-eslint": "^8.57.0",
52
- "vite-plugin-dts": "^4.5.4",
49
+ "lint-staged": "^16.4.0",
50
+ "prettier": "^3.9.4",
51
+ "typescript-eslint": "^8.62.1",
52
+ "vite-plugin-dts": "^5.0.3",
53
53
  "vite-plugin-lib-inject-css": "^2.2.2",
54
54
  "vite-tsconfig-paths": "^6.1.1"
55
55
  },
56
56
  "peerDependencies": {
57
- "@fortawesome/fontawesome-svg-core": "^7.2.0",
58
- "@fortawesome/free-brands-svg-icons": "^7.2.0",
59
- "@fortawesome/free-regular-svg-icons": "^7.2.0",
60
- "@fortawesome/free-solid-svg-icons": "^7.2.0",
57
+ "@fortawesome/fontawesome-svg-core": "^7.3.0",
58
+ "@fortawesome/free-brands-svg-icons": "^7.3.0",
59
+ "@fortawesome/free-regular-svg-icons": "^7.3.0",
60
+ "@fortawesome/free-solid-svg-icons": "^7.3.0",
61
61
  "@fortawesome/react-fontawesome": "^0.2.6",
62
62
  "classnames": "^2",
63
- "react": "^19.2.4",
64
- "react-dom": "^19.2.4",
65
- "tailwindcss": "^4.2.1"
63
+ "react": "^19.2.7",
64
+ "react-dom": "^19.2.7",
65
+ "tailwindcss": "^4.3.2"
66
66
  },
67
67
  "lint-staged": {
68
68
  "./src/**/*.css": [