bonkers-ui 2.0.5 → 2.0.6
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.
- package/components/UiButton/UiButton.js +26 -28
- package/components/UiButton/UiButton.js.map +1 -1
- package/components/UiButton/_types.d.ts +2 -1
- package/components/UiButton/_types.js +1 -1
- package/components/UiButton/_types.js.map +1 -1
- package/components/UiInput/UiInput.base.js +17 -13
- package/components/UiInput/UiInput.base.js.map +1 -1
- package/components/UiInput/UiInputText.d.ts +1 -1
- package/components/UiInput/UiInputText.js +8 -9
- package/components/UiInput/UiInputText.js.map +1 -1
- package/components/UiSelect/UiSelect.d.ts +3 -0
- package/components/UiSelect/UiSelect.js +76 -53
- package/components/UiSelect/UiSelect.js.map +1 -1
- package/package.json +23 -23
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx as p } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
import { EButtonTypes as r, EButtonSizes as
|
|
3
|
+
import { EButtonTypes as r, EButtonSizes as o, EButtonWeight as t } from "./_types.js";
|
|
4
4
|
import h from "classnames";
|
|
5
|
-
import '../../assets/UiButton.css';const g = "_UiButton_1dpbh_1",
|
|
5
|
+
import '../../assets/UiButton.css';const g = "_UiButton_1dpbh_1", x = {
|
|
6
6
|
UiButton: g
|
|
7
|
-
},
|
|
7
|
+
}, m = {
|
|
8
8
|
[r.PRIMARY_BRAND]: `
|
|
9
9
|
bg-primary-600
|
|
10
10
|
border
|
|
@@ -241,35 +241,34 @@ import '../../assets/UiButton.css';const g = "_UiButton_1dpbh_1", m = {
|
|
|
241
241
|
background: (e) => d(e) ? "focus-visible:before:bg-secondary-500" : "focus-visible:before:bg-white",
|
|
242
242
|
border: (e) => d(e) ? "focus-visible:before:border-secondary-alt-400" : "focus-visible:before:border-primary-600"
|
|
243
243
|
}, u = {
|
|
244
|
-
[
|
|
245
|
-
[
|
|
246
|
-
[
|
|
247
|
-
[
|
|
248
|
-
|
|
244
|
+
[o.SMALL]: "px-xs py-xxs rounded-lg focus-visible:before:rounded-xl text-sm",
|
|
245
|
+
[o.MEDIUM]: "p-sm rounded-lg focus-visible:before:rounded-xl text-md",
|
|
246
|
+
[o.LARGE]: "px-md py-sm rounded-xl focus-visible:before:rounded-2xl text-xl",
|
|
247
|
+
[o.XLARGE]: "px-lg py-md rounded-xl focus-visible:before:rounded-2xl text-2xl",
|
|
248
|
+
[o.DEFAULT]: "px-sm py-sm rounded-lg focus-visible:before:rounded-xl"
|
|
249
|
+
}, f = {
|
|
249
250
|
[t.DEFAULT]: "font-medium",
|
|
250
251
|
[t.BOLD]: "font-bold"
|
|
251
252
|
}, T = ({
|
|
252
253
|
kind: e = r.PRIMARY_BRAND,
|
|
253
|
-
size:
|
|
254
|
-
fullWidth:
|
|
255
|
-
disabled:
|
|
254
|
+
size: i = o.DEFAULT,
|
|
255
|
+
fullWidth: b = !1,
|
|
256
|
+
disabled: a = !1,
|
|
256
257
|
children: n,
|
|
257
|
-
weight:
|
|
258
|
-
className:
|
|
259
|
-
onClick:
|
|
260
|
-
...
|
|
258
|
+
weight: l = t.BOLD,
|
|
259
|
+
className: c,
|
|
260
|
+
onClick: v,
|
|
261
|
+
...y
|
|
261
262
|
}) => /* @__PURE__ */ p(
|
|
262
263
|
"button",
|
|
263
264
|
{
|
|
264
|
-
...
|
|
265
|
-
onClick:
|
|
265
|
+
...y,
|
|
266
|
+
onClick: v,
|
|
266
267
|
className: h(
|
|
267
|
-
|
|
268
|
-
"text-base",
|
|
268
|
+
x.UiButton,
|
|
269
269
|
"cursor-pointer",
|
|
270
270
|
"touch-manipulation",
|
|
271
271
|
"whitespace-nowrap",
|
|
272
|
-
"rounded-xl",
|
|
273
272
|
"leading-none",
|
|
274
273
|
"flex",
|
|
275
274
|
"gap-xs",
|
|
@@ -278,7 +277,6 @@ import '../../assets/UiButton.css';const g = "_UiButton_1dpbh_1", m = {
|
|
|
278
277
|
"relative",
|
|
279
278
|
"transition-all",
|
|
280
279
|
"focus-visible:before:border-2",
|
|
281
|
-
"focus-visible:before:rounded-2xl",
|
|
282
280
|
"focus-visible:before:absolute",
|
|
283
281
|
"focus-visible:before:-translate-x-1/2",
|
|
284
282
|
"focus-visible:before:-translate-y-1/2",
|
|
@@ -290,16 +288,16 @@ import '../../assets/UiButton.css';const g = "_UiButton_1dpbh_1", m = {
|
|
|
290
288
|
"focus-visible:before:h-[calc(100%+10px)]",
|
|
291
289
|
s.background(e),
|
|
292
290
|
s.border(e),
|
|
293
|
-
|
|
294
|
-
u[
|
|
295
|
-
|
|
291
|
+
m[e],
|
|
292
|
+
u[i],
|
|
293
|
+
f[l],
|
|
296
294
|
{
|
|
297
|
-
"w-full":
|
|
298
|
-
"pointer-events-none":
|
|
295
|
+
"w-full": b,
|
|
296
|
+
"pointer-events-none": a
|
|
299
297
|
},
|
|
300
|
-
|
|
298
|
+
c
|
|
301
299
|
),
|
|
302
|
-
disabled:
|
|
300
|
+
disabled: a,
|
|
303
301
|
children: n
|
|
304
302
|
}
|
|
305
303
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UiButton.js","sources":["../../../src/components/UiButton/UiButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { EButtonSizes, EButtonTypes, EButtonWeight } from \"./_types.ts\";\nimport cx from \"classnames\";\nimport css from \"./UiButton.module.css\";\n\ntype TButtonProps = {\n\tkind?: EButtonTypes;\n\tsize?: EButtonSizes;\n\tfullWidth?: boolean;\n\tweight?: EButtonWeight;\n\tclassName?: string;\n} & React.HTMLAttributes<HTMLElement> &\n\tReact.ButtonHTMLAttributes<HTMLElement> &\n\tReact.AnchorHTMLAttributes<HTMLElement>\n\nconst typeClasses = {\n\t[EButtonTypes.PRIMARY_BRAND]: `\n\t\tbg-primary-600\n\t\tborder\n\t\tborder-primary-600\n\t\tshadow-md\n\t\ttext-white\n\n\t\thover:bg-primary-700\n\t\thover:border-primary-700\n\t\tactive:bg-primary-800\n\t\tactive:border-primary-800\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.PRIMARY_ACCENT]: `\n\t\tbg-primary-800\n\t\tborder\n\t\tborder-primary-800\n\t\tshadow-md\n\t\ttext-white\n\n\t\thover:bg-primary-700\n\t\thover:border-primary-700\n\t\tactive:bg-primary-800\n\t\tactive:border-primary-800\n\t\tactive:text-primary-100\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.PRIMARY_NEUTRAL]: `\n\t\tbg-secondary-500\n\t\tborder\n\t\tborder-secondary-500\n\t\tshadow-md\n\t\ttext-white\n\n\t\thover:bg-secondary-400\n\t\thover:border-secondary-400\n\t\tactive:bg-secondary-500\n\t\tactive:border-secondary-500\n\t\tactive:text-secondary-alt-300\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.PRIMARY_DESTRUCTIVE]: `\n\t\tbg-error-500\n\t\tborder\n\t\tborder-error-500\n\t\tshadow-md\n\t\ttext-white\n\n\t\thover:bg-error-600\n\t\thover:border-error-600\n\t\tactive:bg-error-700\n\t\tactive:border-error-700\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.PRIMARY_INVERSE]: `\n\t\tbg-white\n\t\tborder\n\t\tborder-secondary-500\n\t\tshadow-md\n\t\ttext-secondary-500\n\n\t\thover:border-secondary-400\n\t\thover:text-secondary-400\n\t\tactive:bg-secondary-alt-300\n\t\tdisabled:bg-secondary-alt-700\n\t\tdisabled:border-secondary-alt-700\n\t`,\n\t[EButtonTypes.SECONDARY_BRAND]: `\n\t\tbg-white\n\t\tborder\n\t\tborder-primary-600\n\t\tshadow-md\n\t\ttext-primary-600\n\n\t\thover:bg-primary-50\n\t\thover:border-primary-700\n\t\thover:text-primary-700\n\t\tactive:bg-primary-100\n\t\tactive:border-primary-700\n\t\tactive:text-primary-700\n\t\tdisabled:bg-white\n\t\tdisabled:border-secondary-alt-300\n\t\tdisabled:shadow-none\n\t\tdisabled:text-secondary-alt-300\n\t`,\n\t[EButtonTypes.SECONDARY_ACCENT]: `\n\t\tbg-white\n\t\tborder\n\t\tborder-primary-800\n\t\tshadow-md\n\t\ttext-primary-800\n\n\t\thover:bg-primary-50\n\t\thover:border-primary-700\n\t\thover:text-primary-700\n\t\tactive:bg-primary-100\n\t\tactive:border-primary-800\n\t\tactive:text-primary-800\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.SECONDARY_NEUTRAL]: `\n\t\tbg-white\n\t\tborder\n\t\tborder-secondary-500\n\t\tshadow-md\n\t\ttext-secondary-500\n\n\t\thover:bg-secondary-alt-200\n\t\thover:border-secondary-400\n\t\thover:text-secondary-400\n\t\tactive:bg-secondary-alt-300\n\t\tactive:border-secondary-500\n\t\tactive:text-secondary-500\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.SECONDARY_DESTRUCTIVE]: `\n\t\tbg-white\n\t\tborder\n\t\tborder-error-500\n\t\tshadow-md\n\t\ttext-error-500\n\n\t\thover:bg-error-100\n\t\thover:border-error-600\n\t\thover:text-error-600\n\t\tactive:bg-error-200\n\t\tactive:border-error-700\n\t\tactive:text-error-700\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.SECONDARY_INVERSE]: `\n\t\tbg-transparent\n\t\tborder\n\t\tborder-white\n\t\tshadow-md\n\t\ttext-white\n\n\t\thover:bg-secondary-500\n\t\thover:border-secondary-alt-300\n\t\thover:text-secondary-alt-300\n\t\tactive:bg-secondary-400\n\t\tactive:border-white\n\t\tactive:text-white\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.TERTIARY_BRAND]: `\n\t\tbg-transparent\n\t\tborder\n\t\tborder-transparent\n\t\ttext-primary-600\n\t\tunderline\n\n\t\thover:bg-primary-50\n\t\thover:no-underline\n\t\tactive:bg-primary-100\n\t\tactive:text-primary-700\n\t\tdisabled:bg-transparent\n\t\tdisabled:text-secondary-alt-300\n\t\tdisabled:underline\n\t`,\n\t[EButtonTypes.TERTIARY_ACCENT]: `\n\t\tbg-transparent\n\t\tborder\n\t\tborder-transparent\n\t\ttext-primary-800\n\t\tunderline\n\n\t\thover:bg-primary-50\n\t\thover:no-underline\n\t\thover:text-primary-700\n\t\tactive:bg-primary-100\n\t\tactive:text-primary-800\n\t\tdisabled:bg-transparent\n\t\tdisabled:text-secondary-alt-300\n\t\tdisabled:underline\n\t`,\n\t[EButtonTypes.TERTIARY_NEUTRAL]: `\n\t\tbg-transparent\n\t\tborder\n\t\tborder-transparent\n\t\ttext-secondary-500\n\t\tunderline\n\n\t\thover:bg-secondary-alt-200\n\t\thover:no-underline\n\t\thover:text-secondary-400\n\t\tactive:bg-secondary-alt-300\n\t\tactive:text-secondary-500\n\t\tdisabled:bg-transparent\n\t\tdisabled:text-secondary-alt-300\n\t\tdisabled:underline\n\t`,\n\t[EButtonTypes.TERTIARY_DESTRUCTIVE]: `\n\t\tbg-transparent\n\t\tborder\n\t\tborder-transparent\n\t\ttext-error-500\n\t\tunderline\n\n\t\thover:bg-error-100\n\t\thover:no-underline\n\t\thover:text-error-600\n\t\tactive:bg-error-200\n\t\tactive:text-error-700\n\t\tdisabled:bg-transparent\n\t\tdisabled:text-secondary-alt-300\n\t\tdisabled:underline\n\t`,\n\t[EButtonTypes.TERTIARY_INVERSE]: `\n\t\tbg-transparent\n\t\tborder\n\t\tborder-transparent\n\t\ttext-white\n\t\tunderline\n\n\t\thover:bg-secondary-500\n\t\thover:no-underline\n\t\thover:text-secondary-alt-300\n\t\tactive:bg-secondary-400\n\t\tactive-text-white\n\t\tdisabled:bg-transparent\n\t\tdisabled:text-secondary-alt-700\n\t\tdisabled:underline\n\t`,\n};\n\nconst isInverseType = (type: EButtonTypes): boolean => {\n\treturn (\n\t\ttype === EButtonTypes.PRIMARY_INVERSE\n\t\t|| type === EButtonTypes.SECONDARY_INVERSE\n\t\t|| type === EButtonTypes.TERTIARY_INVERSE\n\t);\n};\n\nconst focusColorClasses = {\n\tbackground: (type: EButtonTypes) =>\n\t\tisInverseType(type)\n\t\t\t? \"focus-visible:before:bg-secondary-500\"\n\t\t\t: \"focus-visible:before:bg-white\",\n\tborder: (type: EButtonTypes) =>\n\t\tisInverseType(type)\n\t\t\t? \"focus-visible:before:border-secondary-alt-400\"\n\t\t\t: \"focus-visible:before:border-primary-600\"\n};\n\nconst sizeClasses = {\n\t[EButtonSizes.SMALL]: \"px-md py-xxs\",\n\t[EButtonSizes.MEDIUM]: \"p-sm\",\n\t[EButtonSizes.LARGE]: \"p-md\",\n\t[EButtonSizes.DEFAULT]: \"px-md py-sm\",\n};\n\nconst weightClasses = {\n\t[EButtonWeight.DEFAULT]: \"font-medium\",\n\t[EButtonWeight.BOLD]: \"font-bold\",\n};\n\nexport const UiButton: React.FC<TButtonProps> = ({\n\tkind = EButtonTypes.PRIMARY_BRAND,\n\tsize = EButtonSizes.DEFAULT,\n\tfullWidth = false,\n\tdisabled = false,\n\tchildren,\n\tweight = EButtonWeight.BOLD,\n\tclassName,\n\tonClick,\n\t...rest\n}) => {\n\treturn (\n\t\t<button\n\t\t\t{ ...rest }\n\t\t\tonClick={ onClick }\n\t\t\tclassName={ cx(\n\t\t\t\tcss.UiButton,\n\t\t\t\t\"text-base\",\n\t\t\t\t\"cursor-pointer\",\n\t\t\t\t\"touch-manipulation\",\n\t\t\t\t\"whitespace-nowrap\",\n\t\t\t\t\"rounded-xl\",\n\t\t\t\t\"leading-none\",\n\t\t\t\t\"flex\",\n\t\t\t\t\"gap-xs\",\n\t\t\t\t\"justify-center\",\n\t\t\t\t\"items-center\",\n\t\t\t\t\"relative\",\n\t\t\t\t\"transition-all\",\n\t\t\t\t\"focus-visible:before:border-2\",\n\t\t\t\t\"focus-visible:before:rounded-2xl\",\n\t\t\t\t\"focus-visible:before:absolute\",\n\t\t\t\t\"focus-visible:before:-translate-x-1/2\",\n\t\t\t\t\"focus-visible:before:-translate-y-1/2\",\n\t\t\t\t\"focus-visible:before:left-1/2\",\n\t\t\t\t\"focus-visible:before:top-1/2\",\n\t\t\t\t\"focus-visible:before:inset-0\",\n\t\t\t\t\"focus-visible:before:z-[-1]\",\n\t\t\t\t\"focus-visible:before:w-[calc(100%+12px)]\",\n\t\t\t\t\"focus-visible:before:h-[calc(100%+10px)]\",\n\t\t\t\tfocusColorClasses.background(kind),\n\t\t\t\tfocusColorClasses.border(kind),\n\t\t\t\ttypeClasses[kind],\n\t\t\t\tsizeClasses[size],\n\t\t\t\tweightClasses[weight],\n\t\t\t\t{\n\t\t\t\t\t\"w-full\": fullWidth,\n\t\t\t\t\t\"pointer-events-none\": disabled,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tdisabled={ disabled }\n\t\t>\n\t\t\t{ children }\n\t\t</button>\n\t);\n};\n"],"names":["typeClasses","EButtonTypes","isInverseType","type","focusColorClasses","sizeClasses","EButtonSizes","weightClasses","EButtonWeight","UiButton","kind","size","fullWidth","disabled","children","weight","className","onClick","rest","jsx","cx","css"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"UiButton.js","sources":["../../../src/components/UiButton/UiButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { EButtonSizes, EButtonTypes, EButtonWeight } from \"./_types.ts\";\nimport cx from \"classnames\";\nimport css from \"./UiButton.module.css\";\n\ntype TButtonProps = {\n\tkind?: EButtonTypes;\n\tsize?: EButtonSizes;\n\tfullWidth?: boolean;\n\tweight?: EButtonWeight;\n\tclassName?: string;\n} & React.HTMLAttributes<HTMLElement> &\n\tReact.ButtonHTMLAttributes<HTMLElement> &\n\tReact.AnchorHTMLAttributes<HTMLElement>\n\nconst typeClasses = {\n\t[EButtonTypes.PRIMARY_BRAND]: `\n\t\tbg-primary-600\n\t\tborder\n\t\tborder-primary-600\n\t\tshadow-md\n\t\ttext-white\n\n\t\thover:bg-primary-700\n\t\thover:border-primary-700\n\t\tactive:bg-primary-800\n\t\tactive:border-primary-800\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.PRIMARY_ACCENT]: `\n\t\tbg-primary-800\n\t\tborder\n\t\tborder-primary-800\n\t\tshadow-md\n\t\ttext-white\n\n\t\thover:bg-primary-700\n\t\thover:border-primary-700\n\t\tactive:bg-primary-800\n\t\tactive:border-primary-800\n\t\tactive:text-primary-100\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.PRIMARY_NEUTRAL]: `\n\t\tbg-secondary-500\n\t\tborder\n\t\tborder-secondary-500\n\t\tshadow-md\n\t\ttext-white\n\n\t\thover:bg-secondary-400\n\t\thover:border-secondary-400\n\t\tactive:bg-secondary-500\n\t\tactive:border-secondary-500\n\t\tactive:text-secondary-alt-300\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.PRIMARY_DESTRUCTIVE]: `\n\t\tbg-error-500\n\t\tborder\n\t\tborder-error-500\n\t\tshadow-md\n\t\ttext-white\n\n\t\thover:bg-error-600\n\t\thover:border-error-600\n\t\tactive:bg-error-700\n\t\tactive:border-error-700\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.PRIMARY_INVERSE]: `\n\t\tbg-white\n\t\tborder\n\t\tborder-secondary-500\n\t\tshadow-md\n\t\ttext-secondary-500\n\n\t\thover:border-secondary-400\n\t\thover:text-secondary-400\n\t\tactive:bg-secondary-alt-300\n\t\tdisabled:bg-secondary-alt-700\n\t\tdisabled:border-secondary-alt-700\n\t`,\n\t[EButtonTypes.SECONDARY_BRAND]: `\n\t\tbg-white\n\t\tborder\n\t\tborder-primary-600\n\t\tshadow-md\n\t\ttext-primary-600\n\n\t\thover:bg-primary-50\n\t\thover:border-primary-700\n\t\thover:text-primary-700\n\t\tactive:bg-primary-100\n\t\tactive:border-primary-700\n\t\tactive:text-primary-700\n\t\tdisabled:bg-white\n\t\tdisabled:border-secondary-alt-300\n\t\tdisabled:shadow-none\n\t\tdisabled:text-secondary-alt-300\n\t`,\n\t[EButtonTypes.SECONDARY_ACCENT]: `\n\t\tbg-white\n\t\tborder\n\t\tborder-primary-800\n\t\tshadow-md\n\t\ttext-primary-800\n\n\t\thover:bg-primary-50\n\t\thover:border-primary-700\n\t\thover:text-primary-700\n\t\tactive:bg-primary-100\n\t\tactive:border-primary-800\n\t\tactive:text-primary-800\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.SECONDARY_NEUTRAL]: `\n\t\tbg-white\n\t\tborder\n\t\tborder-secondary-500\n\t\tshadow-md\n\t\ttext-secondary-500\n\n\t\thover:bg-secondary-alt-200\n\t\thover:border-secondary-400\n\t\thover:text-secondary-400\n\t\tactive:bg-secondary-alt-300\n\t\tactive:border-secondary-500\n\t\tactive:text-secondary-500\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.SECONDARY_DESTRUCTIVE]: `\n\t\tbg-white\n\t\tborder\n\t\tborder-error-500\n\t\tshadow-md\n\t\ttext-error-500\n\n\t\thover:bg-error-100\n\t\thover:border-error-600\n\t\thover:text-error-600\n\t\tactive:bg-error-200\n\t\tactive:border-error-700\n\t\tactive:text-error-700\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.SECONDARY_INVERSE]: `\n\t\tbg-transparent\n\t\tborder\n\t\tborder-white\n\t\tshadow-md\n\t\ttext-white\n\n\t\thover:bg-secondary-500\n\t\thover:border-secondary-alt-300\n\t\thover:text-secondary-alt-300\n\t\tactive:bg-secondary-400\n\t\tactive:border-white\n\t\tactive:text-white\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.TERTIARY_BRAND]: `\n\t\tbg-transparent\n\t\tborder\n\t\tborder-transparent\n\t\ttext-primary-600\n\t\tunderline\n\n\t\thover:bg-primary-50\n\t\thover:no-underline\n\t\tactive:bg-primary-100\n\t\tactive:text-primary-700\n\t\tdisabled:bg-transparent\n\t\tdisabled:text-secondary-alt-300\n\t\tdisabled:underline\n\t`,\n\t[EButtonTypes.TERTIARY_ACCENT]: `\n\t\tbg-transparent\n\t\tborder\n\t\tborder-transparent\n\t\ttext-primary-800\n\t\tunderline\n\n\t\thover:bg-primary-50\n\t\thover:no-underline\n\t\thover:text-primary-700\n\t\tactive:bg-primary-100\n\t\tactive:text-primary-800\n\t\tdisabled:bg-transparent\n\t\tdisabled:text-secondary-alt-300\n\t\tdisabled:underline\n\t`,\n\t[EButtonTypes.TERTIARY_NEUTRAL]: `\n\t\tbg-transparent\n\t\tborder\n\t\tborder-transparent\n\t\ttext-secondary-500\n\t\tunderline\n\n\t\thover:bg-secondary-alt-200\n\t\thover:no-underline\n\t\thover:text-secondary-400\n\t\tactive:bg-secondary-alt-300\n\t\tactive:text-secondary-500\n\t\tdisabled:bg-transparent\n\t\tdisabled:text-secondary-alt-300\n\t\tdisabled:underline\n\t`,\n\t[EButtonTypes.TERTIARY_DESTRUCTIVE]: `\n\t\tbg-transparent\n\t\tborder\n\t\tborder-transparent\n\t\ttext-error-500\n\t\tunderline\n\n\t\thover:bg-error-100\n\t\thover:no-underline\n\t\thover:text-error-600\n\t\tactive:bg-error-200\n\t\tactive:text-error-700\n\t\tdisabled:bg-transparent\n\t\tdisabled:text-secondary-alt-300\n\t\tdisabled:underline\n\t`,\n\t[EButtonTypes.TERTIARY_INVERSE]: `\n\t\tbg-transparent\n\t\tborder\n\t\tborder-transparent\n\t\ttext-white\n\t\tunderline\n\n\t\thover:bg-secondary-500\n\t\thover:no-underline\n\t\thover:text-secondary-alt-300\n\t\tactive:bg-secondary-400\n\t\tactive-text-white\n\t\tdisabled:bg-transparent\n\t\tdisabled:text-secondary-alt-700\n\t\tdisabled:underline\n\t`,\n};\n\nconst isInverseType = (type: EButtonTypes): boolean => {\n\treturn (\n\t\ttype === EButtonTypes.PRIMARY_INVERSE\n\t\t|| type === EButtonTypes.SECONDARY_INVERSE\n\t\t|| type === EButtonTypes.TERTIARY_INVERSE\n\t);\n};\n\nconst focusColorClasses = {\n\tbackground: (type: EButtonTypes) =>\n\t\tisInverseType(type)\n\t\t\t? \"focus-visible:before:bg-secondary-500\"\n\t\t\t: \"focus-visible:before:bg-white\",\n\tborder: (type: EButtonTypes) =>\n\t\tisInverseType(type)\n\t\t\t? \"focus-visible:before:border-secondary-alt-400\"\n\t\t\t: \"focus-visible:before:border-primary-600\"\n};\n\nconst sizeClasses = {\n\t[EButtonSizes.SMALL]: \"px-xs py-xxs rounded-lg focus-visible:before:rounded-xl text-sm\",\n\t[EButtonSizes.MEDIUM]: \"p-sm rounded-lg focus-visible:before:rounded-xl text-md\",\n\t[EButtonSizes.LARGE]: \"px-md py-sm rounded-xl focus-visible:before:rounded-2xl text-xl\",\n\t[EButtonSizes.XLARGE]: \"px-lg py-md rounded-xl focus-visible:before:rounded-2xl text-2xl\",\n\t[EButtonSizes.DEFAULT]: \"px-sm py-sm rounded-lg focus-visible:before:rounded-xl\",\n};\n\nconst weightClasses = {\n\t[EButtonWeight.DEFAULT]: \"font-medium\",\n\t[EButtonWeight.BOLD]: \"font-bold\",\n};\n\nexport const UiButton: React.FC<TButtonProps> = ({\n\tkind = EButtonTypes.PRIMARY_BRAND,\n\tsize = EButtonSizes.DEFAULT,\n\tfullWidth = false,\n\tdisabled = false,\n\tchildren,\n\tweight = EButtonWeight.BOLD,\n\tclassName,\n\tonClick,\n\t...rest\n}) => {\n\treturn (\n\t\t<button\n\t\t\t{ ...rest }\n\t\t\tonClick={ onClick }\n\t\t\tclassName={ cx(\n\t\t\t\tcss.UiButton,\n\t\t\t\t\"cursor-pointer\",\n\t\t\t\t\"touch-manipulation\",\n\t\t\t\t\"whitespace-nowrap\",\n\t\t\t\t\"leading-none\",\n\t\t\t\t\"flex\",\n\t\t\t\t\"gap-xs\",\n\t\t\t\t\"justify-center\",\n\t\t\t\t\"items-center\",\n\t\t\t\t\"relative\",\n\t\t\t\t\"transition-all\",\n\t\t\t\t\"focus-visible:before:border-2\",\n\t\t\t\t\"focus-visible:before:absolute\",\n\t\t\t\t\"focus-visible:before:-translate-x-1/2\",\n\t\t\t\t\"focus-visible:before:-translate-y-1/2\",\n\t\t\t\t\"focus-visible:before:left-1/2\",\n\t\t\t\t\"focus-visible:before:top-1/2\",\n\t\t\t\t\"focus-visible:before:inset-0\",\n\t\t\t\t\"focus-visible:before:z-[-1]\",\n\t\t\t\t\"focus-visible:before:w-[calc(100%+12px)]\",\n\t\t\t\t\"focus-visible:before:h-[calc(100%+10px)]\",\n\t\t\t\tfocusColorClasses.background(kind),\n\t\t\t\tfocusColorClasses.border(kind),\n\t\t\t\ttypeClasses[kind],\n\t\t\t\tsizeClasses[size],\n\t\t\t\tweightClasses[weight],\n\t\t\t\t{\n\t\t\t\t\t\"w-full\": fullWidth,\n\t\t\t\t\t\"pointer-events-none\": disabled,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tdisabled={ disabled }\n\t\t>\n\t\t\t{ children }\n\t\t</button>\n\t);\n};\n"],"names":["typeClasses","EButtonTypes","isInverseType","type","focusColorClasses","sizeClasses","EButtonSizes","weightClasses","EButtonWeight","UiButton","kind","size","fullWidth","disabled","children","weight","className","onClick","rest","jsx","cx","css"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var R = /* @__PURE__ */ ((r) => (r.PRIMARY_BRAND = "primary-brand", r.PRIMARY_ACCENT = "primary-accent", r.PRIMARY_NEUTRAL = "primary-neutral", r.PRIMARY_DESTRUCTIVE = "primary-destructive", r.PRIMARY_INVERSE = "primary-inverse", r.SECONDARY_BRAND = "secondary-brand", r.SECONDARY_ACCENT = "secondary-accent", r.SECONDARY_NEUTRAL = "secondary-neutral", r.SECONDARY_DESTRUCTIVE = "secondary-destructive", r.SECONDARY_INVERSE = "secondary-inverse", r.TERTIARY_BRAND = "tertiary-brand", r.TERTIARY_ACCENT = "tertiary-accent", r.TERTIARY_NEUTRAL = "tertiary-neutral", r.TERTIARY_DESTRUCTIVE = "tertiary-destructive", r.TERTIARY_INVERSE = "tertiary-inverse", r))(R || {}), a = /* @__PURE__ */ ((r) => (r.DEFAULT = "default", r.SMALL = "sm", r.MEDIUM = "md", r.LARGE = "lg", r))(a || {}), A = /* @__PURE__ */ ((r) => (r.DEFAULT = "default", r.BOLD = "bold", r))(A || {});
|
|
1
|
+
var R = /* @__PURE__ */ ((r) => (r.PRIMARY_BRAND = "primary-brand", r.PRIMARY_ACCENT = "primary-accent", r.PRIMARY_NEUTRAL = "primary-neutral", r.PRIMARY_DESTRUCTIVE = "primary-destructive", r.PRIMARY_INVERSE = "primary-inverse", r.SECONDARY_BRAND = "secondary-brand", r.SECONDARY_ACCENT = "secondary-accent", r.SECONDARY_NEUTRAL = "secondary-neutral", r.SECONDARY_DESTRUCTIVE = "secondary-destructive", r.SECONDARY_INVERSE = "secondary-inverse", r.TERTIARY_BRAND = "tertiary-brand", r.TERTIARY_ACCENT = "tertiary-accent", r.TERTIARY_NEUTRAL = "tertiary-neutral", r.TERTIARY_DESTRUCTIVE = "tertiary-destructive", r.TERTIARY_INVERSE = "tertiary-inverse", r))(R || {}), a = /* @__PURE__ */ ((r) => (r.DEFAULT = "default", r.SMALL = "sm", r.MEDIUM = "md", r.LARGE = "lg", r.XLARGE = "xl", r))(a || {}), A = /* @__PURE__ */ ((r) => (r.DEFAULT = "default", r.BOLD = "bold", r))(A || {});
|
|
2
2
|
export {
|
|
3
3
|
a as EButtonSizes,
|
|
4
4
|
R as EButtonTypes,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_types.js","sources":["../../../src/components/UiButton/_types.ts"],"sourcesContent":["export enum EButtonTypes {\n\tPRIMARY_BRAND = \"primary-brand\",\n\tPRIMARY_ACCENT = \"primary-accent\",\n\tPRIMARY_NEUTRAL = \"primary-neutral\",\n\tPRIMARY_DESTRUCTIVE = \"primary-destructive\",\n\tPRIMARY_INVERSE = \"primary-inverse\",\n\tSECONDARY_BRAND = \"secondary-brand\",\n\tSECONDARY_ACCENT = \"secondary-accent\",\n\tSECONDARY_NEUTRAL = \"secondary-neutral\",\n\tSECONDARY_DESTRUCTIVE = \"secondary-destructive\",\n\tSECONDARY_INVERSE = \"secondary-inverse\",\n\tTERTIARY_BRAND = \"tertiary-brand\",\n\tTERTIARY_ACCENT = \"tertiary-accent\",\n\tTERTIARY_NEUTRAL = \"tertiary-neutral\",\n\tTERTIARY_DESTRUCTIVE = \"tertiary-destructive\",\n\tTERTIARY_INVERSE = \"tertiary-inverse\"\n}\n\nexport enum EButtonSizes {\n\tDEFAULT = \"default\",\n\tSMALL = \"sm\",\n\tMEDIUM = \"md\",\n\tLARGE = \"lg\"\n}\n\nexport enum EButtonWeight {\n\tDEFAULT = \"default\",\n\tBOLD = \"bold\",\n}\n"],"names":["EButtonTypes","EButtonSizes","EButtonWeight"],"mappings":"AAAY,IAAAA,sBAAAA,OACXA,EAAA,gBAAgB,iBAChBA,EAAA,iBAAiB,kBACjBA,EAAA,kBAAkB,mBAClBA,EAAA,sBAAsB,uBACtBA,EAAA,kBAAkB,mBAClBA,EAAA,kBAAkB,mBAClBA,EAAA,mBAAmB,oBACnBA,EAAA,oBAAoB,qBACpBA,EAAA,wBAAwB,yBACxBA,EAAA,oBAAoB,qBACpBA,EAAA,iBAAiB,kBACjBA,EAAA,kBAAkB,mBAClBA,EAAA,mBAAmB,oBACnBA,EAAA,uBAAuB,wBACvBA,EAAA,mBAAmB,oBAfRA,IAAAA,KAAA,CAAA,CAAA,GAkBAC,sBAAAA,OACXA,EAAA,UAAU,WACVA,EAAA,QAAQ,MACRA,EAAA,SAAS,MACTA,EAAA,QAAQ,
|
|
1
|
+
{"version":3,"file":"_types.js","sources":["../../../src/components/UiButton/_types.ts"],"sourcesContent":["export enum EButtonTypes {\n\tPRIMARY_BRAND = \"primary-brand\",\n\tPRIMARY_ACCENT = \"primary-accent\",\n\tPRIMARY_NEUTRAL = \"primary-neutral\",\n\tPRIMARY_DESTRUCTIVE = \"primary-destructive\",\n\tPRIMARY_INVERSE = \"primary-inverse\",\n\tSECONDARY_BRAND = \"secondary-brand\",\n\tSECONDARY_ACCENT = \"secondary-accent\",\n\tSECONDARY_NEUTRAL = \"secondary-neutral\",\n\tSECONDARY_DESTRUCTIVE = \"secondary-destructive\",\n\tSECONDARY_INVERSE = \"secondary-inverse\",\n\tTERTIARY_BRAND = \"tertiary-brand\",\n\tTERTIARY_ACCENT = \"tertiary-accent\",\n\tTERTIARY_NEUTRAL = \"tertiary-neutral\",\n\tTERTIARY_DESTRUCTIVE = \"tertiary-destructive\",\n\tTERTIARY_INVERSE = \"tertiary-inverse\"\n}\n\nexport enum EButtonSizes {\n\tDEFAULT = \"default\",\n\tSMALL = \"sm\",\n\tMEDIUM = \"md\",\n\tLARGE = \"lg\",\n\tXLARGE = \"xl\"\n}\n\nexport enum EButtonWeight {\n\tDEFAULT = \"default\",\n\tBOLD = \"bold\",\n}\n"],"names":["EButtonTypes","EButtonSizes","EButtonWeight"],"mappings":"AAAY,IAAAA,sBAAAA,OACXA,EAAA,gBAAgB,iBAChBA,EAAA,iBAAiB,kBACjBA,EAAA,kBAAkB,mBAClBA,EAAA,sBAAsB,uBACtBA,EAAA,kBAAkB,mBAClBA,EAAA,kBAAkB,mBAClBA,EAAA,mBAAmB,oBACnBA,EAAA,oBAAoB,qBACpBA,EAAA,wBAAwB,yBACxBA,EAAA,oBAAoB,qBACpBA,EAAA,iBAAiB,kBACjBA,EAAA,kBAAkB,mBAClBA,EAAA,mBAAmB,oBACnBA,EAAA,uBAAuB,wBACvBA,EAAA,mBAAmB,oBAfRA,IAAAA,KAAA,CAAA,CAAA,GAkBAC,sBAAAA,OACXA,EAAA,UAAU,WACVA,EAAA,QAAQ,MACRA,EAAA,SAAS,MACTA,EAAA,QAAQ,MACRA,EAAA,SAAS,MALEA,IAAAA,KAAA,CAAA,CAAA,GAQAC,sBAAAA,OACXA,EAAA,UAAU,WACVA,EAAA,OAAO,QAFIA,IAAAA,KAAA,CAAA,CAAA;"}
|
|
@@ -1,35 +1,39 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as s, jsx as d } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
3
|
import { UiTypography as p } from "../UiTypography/UiTypography.js";
|
|
4
4
|
import { EInputKind as e } from "./_types.js";
|
|
5
|
-
import
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
[e.DEFAULT]: "border-secondary-alt-600
|
|
5
|
+
import i from "classnames";
|
|
6
|
+
const h = ({ postIcon: o, preIcon: t, className: l, kind: a = e.DEFAULT, ...r }) => {
|
|
7
|
+
const n = {
|
|
8
|
+
[e.DEFAULT]: "border-secondary-alt-600",
|
|
9
9
|
[e.ERROR]: "border-error",
|
|
10
10
|
[e.SUCCESS]: "border-primary-600"
|
|
11
11
|
};
|
|
12
|
-
return /* @__PURE__ */
|
|
12
|
+
return /* @__PURE__ */ s(
|
|
13
13
|
p,
|
|
14
14
|
{
|
|
15
15
|
tag: "label",
|
|
16
16
|
htmlFor: r.id,
|
|
17
|
-
className:
|
|
17
|
+
className: i(
|
|
18
18
|
"ui-input-wrapper",
|
|
19
19
|
"flex flex-row items-center gap-sm rounded-xl border p-sm",
|
|
20
|
-
|
|
20
|
+
"hover:border-secondary-alt-700",
|
|
21
|
+
"focus-within:outline-4",
|
|
22
|
+
"focus-within:outline-primary-300",
|
|
23
|
+
"active:ring focus-within:ring-secondary-alt-700",
|
|
24
|
+
a && n[a],
|
|
21
25
|
{
|
|
22
26
|
"bg-white": !r.disabled,
|
|
23
27
|
"border-secondary-alt-300 bg-secondary-alt-200": r.disabled
|
|
24
28
|
},
|
|
25
|
-
|
|
29
|
+
l
|
|
26
30
|
),
|
|
27
31
|
children: [
|
|
28
|
-
|
|
29
|
-
/* @__PURE__ */
|
|
32
|
+
t || null,
|
|
33
|
+
/* @__PURE__ */ d(
|
|
30
34
|
"input",
|
|
31
35
|
{
|
|
32
|
-
className:
|
|
36
|
+
className: i("bg-transparent outline-hidden placeholder:text-secondary-alt-600 w-full"),
|
|
33
37
|
...r
|
|
34
38
|
}
|
|
35
39
|
),
|
|
@@ -39,6 +43,6 @@ const f = ({ postIcon: o, preIcon: a, className: d, kind: l = e.DEFAULT, ...r })
|
|
|
39
43
|
);
|
|
40
44
|
};
|
|
41
45
|
export {
|
|
42
|
-
|
|
46
|
+
h as UiInputBase
|
|
43
47
|
};
|
|
44
48
|
//# sourceMappingURL=UiInput.base.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UiInput.base.js","sources":["../../../src/components/UiInput/UiInput.base.tsx"],"sourcesContent":["import React from \"react\";\nimport { UiTypography } from \"../UiTypography\";\nimport { EInputKind } from \"./_types\";\nimport cx from \"classnames\";\n\nexport type TUiInputBaseProps = {\n\tid: string;\n\tpostIcon?: React.ReactNode;\n\tpreIcon?: React.ReactNode;\n\tkind?: EInputKind;\n\tclassName?: string;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const UiInputBase: React.FC<\n\tTUiInputBaseProps\n> = ({ postIcon, preIcon, className, kind = EInputKind.DEFAULT, ...rest } ) => {\n\n\tconst stateClasses = {\n\t\t[EInputKind.DEFAULT]: \"border-secondary-alt-600
|
|
1
|
+
{"version":3,"file":"UiInput.base.js","sources":["../../../src/components/UiInput/UiInput.base.tsx"],"sourcesContent":["import React from \"react\";\nimport { UiTypography } from \"../UiTypography\";\nimport { EInputKind } from \"./_types\";\nimport cx from \"classnames\";\n\nexport type TUiInputBaseProps = {\n\tid: string;\n\tpostIcon?: React.ReactNode;\n\tpreIcon?: React.ReactNode;\n\tkind?: EInputKind;\n\tclassName?: string;\n\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const UiInputBase: React.FC<\n\tTUiInputBaseProps\n> = ({ postIcon, preIcon, className, kind = EInputKind.DEFAULT, ...rest } ) => {\n\n\tconst stateClasses = {\n\t\t[EInputKind.DEFAULT]: \"border-secondary-alt-600\",\n\t\t[EInputKind.ERROR]: \"border-error\",\n\t\t[EInputKind.SUCCESS]: \"border-primary-600\",\n\t};\n\n\treturn (\n\t\t<UiTypography\n\t\t\ttag=\"label\"\n\t\t\thtmlFor={ rest.id }\n\t\t\tclassName={\n\t\t\t\tcx(\n\t\t\t\t\t\"ui-input-wrapper\",\n\t\t\t\t\t\"flex flex-row items-center gap-sm rounded-xl border p-sm\",\n\t\t\t\t\t\"hover:border-secondary-alt-700\",\n\t\t\t\t\t\"focus-within:outline-4\",\n\t\t\t\t\t\"focus-within:outline-primary-300\",\n\t\t\t\t\t\"active:ring focus-within:ring-secondary-alt-700\",\n\t\t\t\t\tkind && stateClasses[kind],\n\t\t\t\t\t{\n\t\t\t\t\t\t\"bg-white\": !rest.disabled,\n\t\t\t\t\t\t\"border-secondary-alt-300 bg-secondary-alt-200\": rest.disabled,\n\t\t\t\t\t},\n\t\t\t\t\tclassName\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t{ preIcon\n\t\t\t\t? preIcon\n\t\t\t\t: null }\n\t\t\t<input\n\t\t\t\tclassName={ cx(\"bg-transparent outline-hidden placeholder:text-secondary-alt-600 w-full\") }\n\t\t\t\t{ ...rest }\n\t\t\t/>\n\n\t\t\t{ postIcon\n\t\t\t\t? postIcon\n\t\t\t\t: null }\n\n\t\t</UiTypography>\n\t);\n};\n"],"names":["UiInputBase","postIcon","preIcon","className","kind","EInputKind","rest","stateClasses","jsxs","UiTypography","cx","jsx"],"mappings":";;;;;AAca,MAAAA,IAET,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,WAAAC,GAAW,MAAAC,IAAOC,EAAW,SAAS,GAAGC,QAAY;AAE9E,QAAMC,IAAe;AAAA,IACpB,CAACF,EAAW,OAAO,GAAG;AAAA,IACtB,CAACA,EAAW,KAAK,GAAG;AAAA,IACpB,CAACA,EAAW,OAAO,GAAG;AAAA,EACvB;AAGC,SAAA,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,KAAI;AAAA,MACJ,SAAUH,EAAK;AAAA,MACf,WACCI;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAN,KAAQG,EAAaH,CAAI;AAAA,QACzB;AAAA,UACC,YAAY,CAACE,EAAK;AAAA,UAClB,iDAAiDA,EAAK;AAAA,QACvD;AAAA,QACAH;AAAA,MACD;AAAA,MAGC,UAAA;AAAA,QAAAD,KAEC;AAAA,QACH,gBAAAS;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAYD,EAAG,yEAAyE;AAAA,YACtF,GAAGJ;AAAA,UAAA;AAAA,QACN;AAAA,QAEEL,KAEC;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ;AAEF;"}
|
|
@@ -3,7 +3,7 @@ import { EInputKind } from './_types.ts';
|
|
|
3
3
|
type TUiInputTextProps = {
|
|
4
4
|
id: string;
|
|
5
5
|
kind?: EInputKind;
|
|
6
|
-
statusMessage?: string;
|
|
6
|
+
statusMessage?: string | React.ReactElement;
|
|
7
7
|
title?: React.ReactNode;
|
|
8
8
|
subtitle?: React.ReactNode;
|
|
9
9
|
infoComponent?: React.ReactNode;
|
|
@@ -3,10 +3,10 @@ import "react";
|
|
|
3
3
|
import { UiInputBase as l } from "./UiInput.base.js";
|
|
4
4
|
import { UiInputTitled as u } from "./UiInputTitled.js";
|
|
5
5
|
import { EInputKind as s } from "./_types.js";
|
|
6
|
-
import { UiTypography as
|
|
6
|
+
import { UiTypography as x } from "../UiTypography/UiTypography.js";
|
|
7
7
|
import { ETypographySizes as f } from "../UiTypography/_types.js";
|
|
8
8
|
import { EColors as i } from "../../_types/colors.js";
|
|
9
|
-
import
|
|
9
|
+
import d from "classnames";
|
|
10
10
|
const j = ({
|
|
11
11
|
kind: o,
|
|
12
12
|
title: m,
|
|
@@ -15,14 +15,14 @@ const j = ({
|
|
|
15
15
|
statusMessage: t,
|
|
16
16
|
...e
|
|
17
17
|
}) => /* @__PURE__ */ n(u, { title: m, subtitle: a, infoComponent: p, children: [
|
|
18
|
+
/* @__PURE__ */ r(l, { kind: o, ...e }),
|
|
18
19
|
t ? /* @__PURE__ */ r(
|
|
19
|
-
|
|
20
|
+
x,
|
|
20
21
|
{
|
|
21
|
-
className:
|
|
22
|
-
"mb-xxs",
|
|
22
|
+
className: d(
|
|
23
23
|
"transition-all duration-300 ease-in-out",
|
|
24
|
-
"max-h-0 opacity-0 overflow-hidden",
|
|
25
|
-
"data-[status=true]:max-h-
|
|
24
|
+
"max-h-0 opacity-0 overflow-hidden gap-xxs mt-xxs",
|
|
25
|
+
"data-[status=true]:max-h-full data-[status=true]:opacity-100"
|
|
26
26
|
),
|
|
27
27
|
lineHeight: !0,
|
|
28
28
|
color: o === s.ERROR ? i.ERROR : i.PRIMARY,
|
|
@@ -30,8 +30,7 @@ const j = ({
|
|
|
30
30
|
"data-status": !!t,
|
|
31
31
|
children: t
|
|
32
32
|
}
|
|
33
|
-
) : null
|
|
34
|
-
/* @__PURE__ */ r(l, { kind: o, ...e })
|
|
33
|
+
) : null
|
|
35
34
|
] });
|
|
36
35
|
export {
|
|
37
36
|
j as UiInputText
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UiInputText.js","sources":["../../../src/components/UiInput/UiInputText.tsx"],"sourcesContent":["import React from \"react\";\nimport { UiInputBase } from \"./UiInput.base.tsx\";\nimport { UiInputTitled } from \"./UiInputTitled.tsx\";\nimport { EInputKind } from \"./_types.ts\";\nimport { EColors, ETypographySizes, UiTypography } from \"../UiTypography/index.ts\";\nimport cx from \"classnames\";\n\ntype TUiInputTextProps = {\n\tid: string;\n\tkind?: EInputKind;\n\tstatusMessage?: string;\n\ttitle?: React.ReactNode;\n\tsubtitle?: React.ReactNode;\n\tinfoComponent?: React.ReactNode;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const UiInputText: React.FC<TUiInputTextProps> = ({\n\tkind,\n\ttitle,\n\tinfoComponent,\n\tsubtitle,\n\tstatusMessage,\n\t...rest\n}) => {\n\treturn (\n\t\t<UiInputTitled title={ title } subtitle={ subtitle } infoComponent={ infoComponent } >\n\t\t\t{ statusMessage\n\t\t\t\t? (\n\t\t\t\t\t<UiTypography\n\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\"
|
|
1
|
+
{"version":3,"file":"UiInputText.js","sources":["../../../src/components/UiInput/UiInputText.tsx"],"sourcesContent":["import React from \"react\";\nimport { UiInputBase } from \"./UiInput.base.tsx\";\nimport { UiInputTitled } from \"./UiInputTitled.tsx\";\nimport { EInputKind } from \"./_types.ts\";\nimport { EColors, ETypographySizes, UiTypography } from \"../UiTypography/index.ts\";\nimport cx from \"classnames\";\n\ntype TUiInputTextProps = {\n\tid: string;\n\tkind?: EInputKind;\n\tstatusMessage?: string | React.ReactElement;\n\ttitle?: React.ReactNode;\n\tsubtitle?: React.ReactNode;\n\tinfoComponent?: React.ReactNode;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const UiInputText: React.FC<TUiInputTextProps> = ({\n\tkind,\n\ttitle,\n\tinfoComponent,\n\tsubtitle,\n\tstatusMessage,\n\t...rest\n}) => {\n\treturn (\n\t\t<UiInputTitled title={ title } subtitle={ subtitle } infoComponent={ infoComponent } >\n\t\t\t<UiInputBase kind={ kind } { ...rest }/>\n\t\t\t{ statusMessage\n\t\t\t\t? (\n\t\t\t\t\t<UiTypography\n\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\"transition-all duration-300 ease-in-out\",\n\t\t\t\t\t\t\t\"max-h-0 opacity-0 overflow-hidden gap-xxs mt-xxs\",\n\t\t\t\t\t\t\t\"data-[status=true]:max-h-full data-[status=true]:opacity-100\"\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tlineHeight\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tkind === EInputKind.ERROR\n\t\t\t\t\t\t\t\t? EColors.ERROR\n\t\t\t\t\t\t\t\t: EColors.PRIMARY\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize={ ETypographySizes.SM }\n\t\t\t\t\t\tdata-status={ !!statusMessage }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ statusMessage }\n\t\t\t\t\t</UiTypography>\n\t\t\t\t)\n\t\t\t\t: null }\n\n\t\t</UiInputTitled>\n\t);\n};\n"],"names":["UiInputText","kind","title","infoComponent","subtitle","statusMessage","rest","jsxs","UiInputTitled","jsx","UiInputBase","UiTypography","cx","EInputKind","EColors","ETypographySizes"],"mappings":";;;;;;;;;AAgBO,MAAMA,IAA2C,CAAC;AAAA,EACxD,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACJ,MAEG,gBAAAC,EAAAC,GAAA,EAAc,OAAAN,GAAgB,UAAAE,GAAsB,eAAAD,GACpD,UAAA;AAAA,EAAC,gBAAAM,EAAAC,GAAA,EAAY,MAAAT,GAAgB,GAAGK,EAAM,CAAA;AAAA,EACpCD,IAEA,gBAAAI;AAAA,IAACE;AAAA,IAAA;AAAA,MACA,WAAYC;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MACA,YAAU;AAAA,MACV,OACCX,MAASY,EAAW,QACjBC,EAAQ,QACRA,EAAQ;AAAA,MAEZ,MAAOC,EAAiB;AAAA,MACxB,eAAc,CAAC,CAACV;AAAA,MAEd,UAAAA;AAAA,IAAA;AAAA,EAAA,IAGF;AAAA,GAEJ;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
import { EInputKind } from '../UiInput';
|
|
2
3
|
type TSelectProps = {
|
|
3
4
|
heading?: string;
|
|
4
5
|
subLabel?: string;
|
|
@@ -7,6 +8,8 @@ type TSelectProps = {
|
|
|
7
8
|
placeholder?: string;
|
|
8
9
|
postfixIcon?: React.ReactNode;
|
|
9
10
|
className?: string;
|
|
11
|
+
kind?: EInputKind;
|
|
12
|
+
statusMessage?: string | React.ReactElement;
|
|
10
13
|
onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
|
|
11
14
|
} & React.SelectHTMLAttributes<HTMLSelectElement>;
|
|
12
15
|
export declare const UiSelect: React.FC<TSelectProps>;
|
|
@@ -1,71 +1,79 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import { UiTypography as
|
|
5
|
-
import { ETypographySizes as
|
|
6
|
-
import { EColors as
|
|
7
|
-
import
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
import { jsxs as n, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import y from "react";
|
|
3
|
+
import s from "classnames";
|
|
4
|
+
import { UiTypography as i } from "../UiTypography/UiTypography.js";
|
|
5
|
+
import { ETypographySizes as c } from "../UiTypography/_types.js";
|
|
6
|
+
import { EColors as d } from "../../_types/colors.js";
|
|
7
|
+
import { EInputKind as t } from "../UiInput/_types.js";
|
|
8
|
+
import '../../assets/UiSelect.css';const w = "_UiSelect_1fbno_1", E = {
|
|
9
|
+
UiSelect: w
|
|
10
|
+
}, g = {
|
|
11
|
+
[t.DEFAULT]: "border-secondary-alt-600",
|
|
12
|
+
[t.ERROR]: "border-error",
|
|
13
|
+
[t.SUCCESS]: "border-primary-600"
|
|
14
|
+
}, _ = ({
|
|
15
|
+
children: f,
|
|
16
|
+
heading: m,
|
|
17
|
+
subLabel: u,
|
|
18
|
+
disabled: p,
|
|
14
19
|
onChange: r,
|
|
15
|
-
className:
|
|
16
|
-
placeholder:
|
|
17
|
-
postfixIcon:
|
|
18
|
-
|
|
20
|
+
className: R,
|
|
21
|
+
placeholder: h,
|
|
22
|
+
postfixIcon: x,
|
|
23
|
+
statusMessage: l,
|
|
24
|
+
kind: o,
|
|
25
|
+
...a
|
|
19
26
|
}) => {
|
|
20
|
-
const [
|
|
21
|
-
(
|
|
22
|
-
|
|
27
|
+
const [S, b] = y.useState(a.value || a.defaultValue || ""), C = y.useCallback(
|
|
28
|
+
(v) => {
|
|
29
|
+
b(v.target.value), r == null || r(v);
|
|
23
30
|
},
|
|
24
31
|
[r]
|
|
25
32
|
);
|
|
26
|
-
return /* @__PURE__ */
|
|
27
|
-
|
|
28
|
-
|
|
33
|
+
return /* @__PURE__ */ n("div", { className: s("ui-select", R), children: [
|
|
34
|
+
m ? /* @__PURE__ */ e(
|
|
35
|
+
i,
|
|
29
36
|
{
|
|
30
|
-
size:
|
|
37
|
+
size: c.MD,
|
|
31
38
|
className: "mb-xxs",
|
|
32
|
-
children:
|
|
39
|
+
children: m
|
|
33
40
|
}
|
|
34
41
|
) : null,
|
|
35
|
-
/* @__PURE__ */
|
|
36
|
-
|
|
42
|
+
/* @__PURE__ */ n("div", { className: s(
|
|
43
|
+
E.UiSelect,
|
|
37
44
|
"relative",
|
|
38
45
|
"rounded-xl",
|
|
39
46
|
"border",
|
|
40
47
|
"hover:border-secondary-alt-600",
|
|
41
|
-
|
|
48
|
+
p ? ["pointer-events-none", "border-secondary-alt-300", "bg-secondary-alt-200"] : [o && g[o], "bg-white"]
|
|
42
49
|
), children: [
|
|
43
|
-
/* @__PURE__ */
|
|
50
|
+
/* @__PURE__ */ n(
|
|
44
51
|
"select",
|
|
45
52
|
{
|
|
46
|
-
...
|
|
47
|
-
className: `
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
53
|
+
...a,
|
|
54
|
+
className: `
|
|
55
|
+
m-0
|
|
56
|
+
pr-xl
|
|
57
|
+
w-full
|
|
58
|
+
cursor-pointer
|
|
59
|
+
appearance-none
|
|
60
|
+
border-0
|
|
61
|
+
bg-transparent
|
|
62
|
+
leading-[20px]
|
|
63
|
+
p-sm
|
|
64
|
+
text-secondary-alt
|
|
65
|
+
outline-0
|
|
58
66
|
`,
|
|
59
|
-
disabled:
|
|
60
|
-
value:
|
|
61
|
-
onChange:
|
|
67
|
+
disabled: p,
|
|
68
|
+
value: S,
|
|
69
|
+
onChange: C,
|
|
62
70
|
children: [
|
|
63
|
-
|
|
64
|
-
|
|
71
|
+
h ? /* @__PURE__ */ e("option", { value: "", disabled: !0, hidden: !0, children: h }) : null,
|
|
72
|
+
f
|
|
65
73
|
]
|
|
66
74
|
}
|
|
67
75
|
),
|
|
68
|
-
/* @__PURE__ */ e("div", { className: "absolute right-sm top-1/2 -translate-y-1/2 pointer-events-none", children:
|
|
76
|
+
/* @__PURE__ */ e("div", { className: "absolute right-sm top-1/2 -translate-y-1/2 pointer-events-none", children: x || /* @__PURE__ */ e(
|
|
69
77
|
"svg",
|
|
70
78
|
{
|
|
71
79
|
width: "16",
|
|
@@ -83,18 +91,33 @@ import '../../assets/UiSelect.css';const S = "_UiSelect_1fbno_1", g = {
|
|
|
83
91
|
}
|
|
84
92
|
) })
|
|
85
93
|
] }),
|
|
86
|
-
|
|
87
|
-
|
|
94
|
+
u ? /* @__PURE__ */ e(
|
|
95
|
+
i,
|
|
88
96
|
{
|
|
89
|
-
size:
|
|
90
|
-
color:
|
|
97
|
+
size: c.SM,
|
|
98
|
+
color: d.SECONDARY_ALT,
|
|
91
99
|
className: "mt-xxs",
|
|
92
|
-
children:
|
|
100
|
+
children: u
|
|
101
|
+
}
|
|
102
|
+
) : null,
|
|
103
|
+
l ? /* @__PURE__ */ e(
|
|
104
|
+
i,
|
|
105
|
+
{
|
|
106
|
+
className: s(
|
|
107
|
+
"transition-all duration-300 ease-in-out",
|
|
108
|
+
"max-h-0 opacity-0 overflow-hidden gap-xxs mt-xxs",
|
|
109
|
+
"data-[status=true]:max-h-full data-[status=true]:opacity-100"
|
|
110
|
+
),
|
|
111
|
+
lineHeight: !0,
|
|
112
|
+
color: o === t.ERROR ? d.ERROR : d.PRIMARY,
|
|
113
|
+
size: c.SM,
|
|
114
|
+
"data-status": !!l,
|
|
115
|
+
children: l
|
|
93
116
|
}
|
|
94
117
|
) : null
|
|
95
118
|
] });
|
|
96
119
|
};
|
|
97
120
|
export {
|
|
98
|
-
|
|
121
|
+
_ as UiSelect
|
|
99
122
|
};
|
|
100
123
|
//# sourceMappingURL=UiSelect.js.map
|
|
@@ -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\";\n\ntype TSelectProps = {\n\theading?: string\n\tsubLabel?: string;\n\tdisabled?: boolean;\n\tvalue?: string | number | readonly string[];\n\tplaceholder?: string;\n\tpostfixIcon?: React.ReactNode;\n\tclassName?: string;\n\tonChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;\n} & React.SelectHTMLAttributes<HTMLSelectElement>\n\nexport const UiSelect: React.FC<TSelectProps> = ({\n\tchildren,\n\theading,\n\tsubLabel,\n\tdisabled,\n\tonChange,\n\tclassName,\n\tplaceholder,\n\tpostfixIcon,\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={ 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\"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: [
|
|
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 } from \"../UiInput\";\n\ntype TSelectProps = {\n\theading?: string\n\tsubLabel?: string;\n\tdisabled?: boolean;\n\tvalue?: string | number | readonly string[];\n\tplaceholder?: string;\n\tpostfixIcon?: React.ReactNode;\n\tclassName?: string;\n\tkind?: EInputKind;\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};\n\nexport const UiSelect: React.FC<TSelectProps> = ({\n\tchildren,\n\theading,\n\tsubLabel,\n\tdisabled,\n\tonChange,\n\tclassName,\n\tplaceholder,\n\tpostfixIcon,\n\tstatusMessage,\n\tkind,\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\"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<select\n\t\t\t\t\t{ ...rest }\n\t\t\t\t\tclassName=\"\n\t\t\t\t\t\tm-0\n\t\t\t\t\t\tpr-xl\n\t\t\t\t\t\tw-full\n\t\t\t\t\t\tcursor-pointer\n\t\t\t\t\t\tappearance-none\n\t\t\t\t\t\tborder-0\n\t\t\t\t\t\tbg-transparent\n\t\t\t\t\t\tleading-[20px]\n\t\t\t\t\t\tp-sm\n\t\t\t\t\t\ttext-secondary-alt\n\t\t\t\t\t\toutline-0\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=\"absolute right-sm top-1/2 -translate-y-1/2 pointer-events-none\">\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<UiTypography\n\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\"transition-all duration-300 ease-in-out\",\n\t\t\t\t\t\t\t\"max-h-0 opacity-0 overflow-hidden gap-xxs mt-xxs\",\n\t\t\t\t\t\t\t\"data-[status=true]:max-h-full data-[status=true]:opacity-100\"\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tlineHeight\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tkind === EInputKind.ERROR\n\t\t\t\t\t\t\t\t? EColors.ERROR\n\t\t\t\t\t\t\t\t: EColors.PRIMARY\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize={ ETypographySizes.SM }\n\t\t\t\t\t\tdata-status={ !!statusMessage }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ statusMessage }\n\t\t\t\t\t</UiTypography>\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","postfixIcon","statusMessage","kind","rest","value","setValue","React","handleChange","event","cx","jsx","UiTypography","ETypographySizes","jsxs","styles","EColors"],"mappings":";;;;;;;;;GAmBMA,IAAe;AAAA,EACpB,CAACC,EAAW,OAAO,GAAG;AAAA,EACtB,CAACA,EAAW,KAAK,GAAG;AAAA,EACpB,CAACA,EAAW,OAAO,GAAG;AACvB,GAEaC,IAAmC,CAAC;AAAA,EAChD,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,MAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACC,QAAA,CAACC,GAAOC,CAAQ,IAAIC,EAAM,SAASH,EAAK,SAASA,EAAK,gBAAgB,EAAE,GACxEI,IAAeD,EAAM;AAAA,IAC1B,CAACE,MAAgD;AACvC,MAAAH,EAAAG,EAAM,OAAO,KAAK,GAC3BX,KAAA,QAAAA,EAAWW;AAAA,IACZ;AAAA,IACA,CAACX,CAAQ;AAAA,EACV;AACA,2BACE,OAAI,EAAA,WAAYY,EAAG,aAAaX,CAAS,GACvC,UAAA;AAAA,IACCJ,IAAA,gBAAAgB;AAAA,MAACC;AAAA,MAAA;AAAA,QACF,MAAOC,EAAiB;AAAA,QACxB,WAAU;AAAA,QACR,UAAAlB;AAAA,MAAA;AAAA,IAAA,IAED;AAAA,IAEH,gBAAAmB,EAAC,SAAI,WAAYJ;AAAA,MAAGK,EAAO;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAlB,IACG,CAAC,uBAAuB,4BAA4B,sBAAsB,IAC1E,CAACM,KAAQZ,EAAaY,CAAI,GAAG,UAAU;AAAA,IAE1C,GAAA,UAAA;AAAA,MAAA,gBAAAW;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGV;AAAA,UACL,WAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAaV,UAAAP;AAAA,UACA,OAAAQ;AAAA,UACA,UAAWG;AAAA,UAET,UAAA;AAAA,YACCR,IAAA,gBAAAW,EAAC,YAAO,OAAQ,IAAK,UAAQ,IAAC,QAAM,IAAG,UAAAX,EAAA,CAAa,IACpD;AAAA,YACDN;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,MACC,gBAAAiB,EAAA,OAAA,EAAI,WAAU,kEACZ,eAEE,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACH,OAAM;AAAA,UACN,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,OAAM;AAAA,UAEN,UAAA,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,GAAE;AAAA,cACF,MAAK;AAAA,YAAA;AAAA,UAAA;AAAA,QACN;AAAA,MAAA,EAGH,CAAA;AAAA,IAAA,GACD;AAAA,IACEf,IACE,gBAAAe;AAAA,MAACC;AAAA,MAAA;AAAA,QACH,MAAOC,EAAiB;AAAA,QACxB,OAAQG,EAAQ;AAAA,QAChB,WAAU;AAAA,QAER,UAAApB;AAAA,MAAA;AAAA,IAAA,IAED;AAAA,IAGDM,IAEA,gBAAAS;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,WAAYF;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,QACD;AAAA,QACA,YAAU;AAAA,QACV,OACCP,MAASX,EAAW,QACjBwB,EAAQ,QACRA,EAAQ;AAAA,QAEZ,MAAOH,EAAiB;AAAA,QACxB,eAAc,CAAC,CAACX;AAAA,QAEd,UAAAA;AAAA,MAAA;AAAA,IAAA,IAGF;AAAA,EAAA,GACJ;AAEF;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bonkers-ui",
|
|
3
|
-
"version": "v2.0.
|
|
3
|
+
"version": "v2.0.6",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Bonkers ui library",
|
|
6
6
|
"author": "cc6.magister@gmail.com",
|
|
@@ -18,46 +18,46 @@
|
|
|
18
18
|
"prepare": "husky"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@tailwindcss/vite": "^4.1.
|
|
21
|
+
"@tailwindcss/vite": "^4.1.4",
|
|
22
22
|
"ajv": "^8.17.1",
|
|
23
23
|
"classnames": "^2.5.1",
|
|
24
24
|
"postcss": "^8.5.3",
|
|
25
25
|
"prettier": "^3.5.3",
|
|
26
26
|
"react": "^19.1.0",
|
|
27
27
|
"react-dom": "^19.1.0",
|
|
28
|
-
"tailwindcss": "^4.1.
|
|
28
|
+
"tailwindcss": "^4.1.4",
|
|
29
29
|
"vite-tsconfig-paths": "^5.1.4"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"@chromatic-com/storybook": "^3.2.6",
|
|
33
|
-
"@storybook/addon-essentials": "^8.6.
|
|
34
|
-
"@storybook/addon-interactions": "^8.6.
|
|
35
|
-
"@storybook/addon-onboarding": "^8.6.
|
|
36
|
-
"@storybook/blocks": "^8.6.
|
|
37
|
-
"@storybook/manager-api": "^8.6.
|
|
38
|
-
"@storybook/preview-api": "^8.6.
|
|
39
|
-
"@storybook/react": "^8.6.
|
|
40
|
-
"@storybook/react-vite": "^8.6.
|
|
41
|
-
"@storybook/test": "^8.6.
|
|
33
|
+
"@storybook/addon-essentials": "^8.6.12",
|
|
34
|
+
"@storybook/addon-interactions": "^8.6.12",
|
|
35
|
+
"@storybook/addon-onboarding": "^8.6.12",
|
|
36
|
+
"@storybook/blocks": "^8.6.12",
|
|
37
|
+
"@storybook/manager-api": "^8.6.12",
|
|
38
|
+
"@storybook/preview-api": "^8.6.12",
|
|
39
|
+
"@storybook/react": "^8.6.12",
|
|
40
|
+
"@storybook/react-vite": "^8.6.12",
|
|
41
|
+
"@storybook/test": "^8.6.12",
|
|
42
42
|
"@stylistic/eslint-plugin": "^4.2.0",
|
|
43
43
|
"@types/bun": "latest",
|
|
44
|
-
"@types/react": "^19.1.
|
|
45
|
-
"@types/react-dom": "^19.1.
|
|
46
|
-
"@vitejs/plugin-react": "^4.
|
|
47
|
-
"eslint": "^9.
|
|
48
|
-
"eslint-plugin-react": "^7.37.
|
|
44
|
+
"@types/react": "^19.1.2",
|
|
45
|
+
"@types/react-dom": "^19.1.2",
|
|
46
|
+
"@vitejs/plugin-react": "^4.4.0",
|
|
47
|
+
"eslint": "^9.24.0",
|
|
48
|
+
"eslint-plugin-react": "^7.37.5",
|
|
49
49
|
"eslint-plugin-storybook": "^0.12.0",
|
|
50
50
|
"eslint-plugin-tailwindcss": "^3.18.0",
|
|
51
51
|
"gh-pages": "^6.3.0",
|
|
52
52
|
"husky": "^9.1.7",
|
|
53
|
-
"lint-staged": "^15.5.
|
|
54
|
-
"storybook": "^8.6.
|
|
53
|
+
"lint-staged": "^15.5.1",
|
|
54
|
+
"storybook": "^8.6.12",
|
|
55
55
|
"storybook-dark-mode": "^4.0.2",
|
|
56
|
-
"typescript": "^5.8.
|
|
57
|
-
"typescript-eslint": "^8.
|
|
58
|
-
"vite": "^6.2.
|
|
56
|
+
"typescript": "^5.8.3",
|
|
57
|
+
"typescript-eslint": "^8.30.1",
|
|
58
|
+
"vite": "^6.2.6",
|
|
59
59
|
"vite-plugin-dts": "^4.5.3",
|
|
60
|
-
"vite-plugin-lib-inject-css": "^2.2.
|
|
60
|
+
"vite-plugin-lib-inject-css": "^2.2.2"
|
|
61
61
|
},
|
|
62
62
|
"peerDependencies": {
|
|
63
63
|
"@fortawesome/fontawesome-svg-core": "^6.6.0",
|