bonkers-ui 2.0.3 → 2.0.4
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/assets/UiToggle.css +1 -0
- package/components/UiAlert/UiAlert.d.ts +1 -0
- package/components/UiAlert/UiAlert.js +12 -10
- package/components/UiAlert/UiAlert.js.map +1 -1
- package/components/UiBerRank/UiBerRank.d.ts +1 -0
- package/components/UiBerRank/UiBerRank.js +8 -6
- package/components/UiBerRank/UiBerRank.js.map +1 -1
- package/components/UiButton/UiButton.js +22 -128
- package/components/UiButton/UiButton.js.map +1 -1
- package/components/UiButton/_types.d.ts +0 -28
- package/components/UiButton/_types.js +1 -1
- package/components/UiButton/_types.js.map +1 -1
- package/components/UiCheckbox/UiCheckbox.d.ts +1 -0
- package/components/UiCheckbox/UiCheckbox.js +25 -23
- package/components/UiCheckbox/UiCheckbox.js.map +1 -1
- package/components/UiIcon/UiIcon.js.map +1 -1
- package/components/UiIconBadge/UiIconBadge.d.ts +3 -0
- package/components/UiIconBadge/UiIconBadge.js +35 -0
- package/components/UiIconBadge/UiIconBadge.js.map +1 -0
- package/components/UiIconBadge/_types.d.ts +15 -0
- package/components/UiIconBadge/_types.js +5 -0
- package/components/UiIconBadge/_types.js.map +1 -0
- package/components/UiIconBadge/index.d.ts +2 -0
- package/components/UiIconBadge/index.js +7 -0
- package/components/UiIconBadge/index.js.map +1 -0
- package/components/UiInput/UiInput.base.d.ts +1 -0
- package/components/UiInput/UiInput.base.js +11 -10
- package/components/UiInput/UiInput.base.js.map +1 -1
- package/components/UiInputRange/UiInputRange.d.ts +1 -0
- package/components/UiInputRange/UiInputRange.js +17 -15
- package/components/UiInputRange/UiInputRange.js.map +1 -1
- package/components/UiList/UiList.d.ts +1 -0
- package/components/UiList/UiList.js.map +1 -1
- package/components/UiList/UiListItem.d.ts +1 -0
- package/components/UiList/UiListItem.js +6 -5
- package/components/UiList/UiListItem.js.map +1 -1
- package/components/UiNotificationBadge/UiNotificationBadge.d.ts +3 -2
- package/components/UiNotificationBadge/UiNotificationBadge.js +16 -14
- package/components/UiNotificationBadge/UiNotificationBadge.js.map +1 -1
- package/components/UiPills/UiPills.d.ts +1 -0
- package/components/UiPills/UiPills.js +17 -15
- package/components/UiPills/UiPills.js.map +1 -1
- package/components/UiPlainRadio/UiPlainRadio.d.ts +1 -0
- package/components/UiPlainRadio/UiPlainRadio.js +66 -51
- package/components/UiPlainRadio/UiPlainRadio.js.map +1 -1
- package/components/UiProductCard/UiProductCard.d.ts +1 -0
- package/components/UiProductCard/UiProductCard.js +26 -29
- package/components/UiProductCard/UiProductCard.js.map +1 -1
- package/components/UiProgress/UiProgress.d.ts +1 -0
- package/components/UiProgress/UiProgress.js +17 -15
- package/components/UiProgress/UiProgress.js.map +1 -1
- package/components/UiRadio/UiRadio.js +20 -16
- package/components/UiRadio/UiRadio.js.map +1 -1
- package/components/UiRadioFancy/UiRadioFancy.d.ts +1 -0
- package/components/UiRadioFancy/UiRadioFancy.js +12 -10
- package/components/UiRadioFancy/UiRadioFancy.js.map +1 -1
- package/components/UiSelect/UiSelect.d.ts +1 -0
- package/components/UiSelect/UiSelect.js +15 -14
- package/components/UiSelect/UiSelect.js.map +1 -1
- package/components/UiSkeleton/UiSkeleton.d.ts +1 -0
- package/components/UiSkeleton/UiSkeleton.js +38 -37
- package/components/UiSkeleton/UiSkeleton.js.map +1 -1
- package/components/UiSnackbar/UiSnackbar.d.ts +1 -0
- package/components/UiSnackbar/UiSnackbar.js +26 -28
- package/components/UiSnackbar/UiSnackbar.js.map +1 -1
- package/components/UiStars/UiStars.d.ts +18 -0
- package/components/UiStars/UiStars.js +57 -0
- package/components/UiStars/UiStars.js.map +1 -0
- package/components/UiStars/_types.d.ts +12 -0
- package/components/UiStars/_types.js +6 -0
- package/components/UiStars/_types.js.map +1 -0
- package/components/UiStars/index.d.ts +3 -0
- package/components/UiStars/index.js +7 -0
- package/components/UiStars/index.js.map +1 -0
- package/components/UiTable/UiTable.js +10 -9
- package/components/UiTable/UiTable.js.map +1 -1
- package/components/UiTable/UiTableCell.js +13 -12
- package/components/UiTable/UiTableCell.js.map +1 -1
- package/components/UiTabs/UiTabs.d.ts +1 -0
- package/components/UiTabs/UiTabs.js +8 -6
- package/components/UiTabs/UiTabs.js.map +1 -1
- package/components/UiToggle/UiToggle.js +75 -49
- package/components/UiToggle/UiToggle.js.map +1 -1
- package/index.d.ts +1 -0
- package/package.json +24 -24
|
@@ -1,83 +1,98 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as i, jsx as n } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
import
|
|
4
|
-
import { UiRadio as
|
|
5
|
-
const
|
|
6
|
-
children:
|
|
3
|
+
import p from "classnames";
|
|
4
|
+
import { UiRadio as c } from "../UiRadio/UiRadio.js";
|
|
5
|
+
const f = ({
|
|
6
|
+
children: l,
|
|
7
7
|
disabled: r,
|
|
8
|
-
subHeader:
|
|
8
|
+
subHeader: d,
|
|
9
9
|
value: e,
|
|
10
10
|
name: a,
|
|
11
11
|
checked: o = !1,
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
className: s,
|
|
13
|
+
onChange: t
|
|
14
|
+
}) => /* @__PURE__ */ i(
|
|
14
15
|
"label",
|
|
15
16
|
{
|
|
16
|
-
className:
|
|
17
|
+
className: p(
|
|
17
18
|
"ui-radio-fancy",
|
|
18
19
|
"relative",
|
|
19
20
|
{
|
|
20
|
-
"pointer-events-none": r
|
|
21
|
-
}
|
|
21
|
+
"pointer-events-none opacity-50": r
|
|
22
|
+
},
|
|
23
|
+
s
|
|
22
24
|
),
|
|
23
25
|
htmlFor: a + e,
|
|
24
26
|
children: [
|
|
25
|
-
/* @__PURE__ */
|
|
27
|
+
/* @__PURE__ */ n(
|
|
26
28
|
"input",
|
|
27
29
|
{
|
|
28
|
-
className:
|
|
30
|
+
className: p(
|
|
29
31
|
" absolute",
|
|
30
32
|
"appearance-none",
|
|
31
|
-
"peer"
|
|
33
|
+
"peer/plain-radio"
|
|
32
34
|
),
|
|
33
35
|
id: a + e,
|
|
34
36
|
type: "radio",
|
|
35
37
|
value: e,
|
|
36
38
|
checked: o,
|
|
37
|
-
onChange: () =>
|
|
39
|
+
onChange: () => t(e)
|
|
38
40
|
}
|
|
39
41
|
),
|
|
40
|
-
/* @__PURE__ */
|
|
41
|
-
"
|
|
42
|
-
"size-full",
|
|
43
|
-
"cursor-pointer",
|
|
44
|
-
"rounded-lg",
|
|
45
|
-
"border-2",
|
|
46
|
-
"bg-white",
|
|
47
|
-
"peer-active:bg-secondary-alt-200",
|
|
48
|
-
"p-sm",
|
|
49
|
-
"peer-hover:border-primary-700",
|
|
50
|
-
"peer-focus:shadow-border-primary",
|
|
51
|
-
"flex",
|
|
52
|
-
"items-center",
|
|
53
|
-
"gap-sm",
|
|
54
|
-
"text-sm",
|
|
42
|
+
/* @__PURE__ */ i(
|
|
43
|
+
"div",
|
|
55
44
|
{
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
45
|
+
className: p(
|
|
46
|
+
"box-border",
|
|
47
|
+
"size-full",
|
|
48
|
+
"cursor-pointer",
|
|
49
|
+
"rounded-xl",
|
|
50
|
+
"border border-secondary-alt-600",
|
|
51
|
+
"peer-checked/plain-radio:border-primary-600",
|
|
52
|
+
"peer-checked/plain-radio:outline",
|
|
53
|
+
"peer-checked/plain-radio:outline",
|
|
54
|
+
"peer-checked/plain-radio:outline-primary-600",
|
|
55
|
+
"peer-hover/plain-radio:peer-checked/plain-radio:outline-primary-700",
|
|
56
|
+
"bg-white",
|
|
57
|
+
"peer-active/plain-radio:bg-secondary-alt-200",
|
|
58
|
+
"p-sm",
|
|
59
|
+
"peer-hover/plain-radio:border-primary-700",
|
|
60
|
+
"peer-focus/plain-radio:shadow-border-primary",
|
|
61
|
+
"flex",
|
|
62
|
+
"items-center",
|
|
63
|
+
"gap-sm",
|
|
64
|
+
"text-sm",
|
|
65
|
+
{
|
|
66
|
+
"border-secondary-alt-400": r && !o,
|
|
67
|
+
"border-primary-300": r && o,
|
|
68
|
+
"border-secondary-alt-600": !r && !o,
|
|
69
|
+
"border-primary-600": !r && o
|
|
70
|
+
}
|
|
71
|
+
),
|
|
72
|
+
children: [
|
|
73
|
+
/* @__PURE__ */ n(
|
|
74
|
+
c,
|
|
75
|
+
{
|
|
76
|
+
className: "pointer-events-none",
|
|
77
|
+
disabled: r,
|
|
78
|
+
value: e,
|
|
79
|
+
name: a,
|
|
80
|
+
onChange: () => t(e),
|
|
81
|
+
checked: o,
|
|
82
|
+
tabIndex: -1
|
|
83
|
+
}
|
|
84
|
+
),
|
|
85
|
+
/* @__PURE__ */ i("div", { className: "flex flex-col", children: [
|
|
86
|
+
l,
|
|
87
|
+
/* @__PURE__ */ n("div", { className: "text-xs font-normal text-secondary-alt-400", children: d })
|
|
88
|
+
] })
|
|
89
|
+
]
|
|
60
90
|
}
|
|
61
|
-
)
|
|
62
|
-
/* @__PURE__ */ t("span", { className: "pointer-events-none", children: /* @__PURE__ */ t(
|
|
63
|
-
l,
|
|
64
|
-
{
|
|
65
|
-
disabled: r,
|
|
66
|
-
value: e,
|
|
67
|
-
name: a,
|
|
68
|
-
onChange: () => s(e),
|
|
69
|
-
checked: o
|
|
70
|
-
}
|
|
71
|
-
) }),
|
|
72
|
-
/* @__PURE__ */ n("div", { className: "flex flex-col", children: [
|
|
73
|
-
p,
|
|
74
|
-
/* @__PURE__ */ t("div", { className: "text-xs font-normal text-secondary-alt-400", children: m })
|
|
75
|
-
] })
|
|
76
|
-
] })
|
|
91
|
+
)
|
|
77
92
|
]
|
|
78
93
|
}
|
|
79
94
|
);
|
|
80
95
|
export {
|
|
81
|
-
|
|
96
|
+
f as UiPlainRadio
|
|
82
97
|
};
|
|
83
98
|
//# sourceMappingURL=UiPlainRadio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UiPlainRadio.js","sources":["../../../src/components/UiPlainRadio/UiPlainRadio.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { UiRadio } from \"../UiRadio\";\n\nexport type TUiPlainRadio = {\n\tchildren?: React.ReactNode\n\tdisabled?: boolean;\n\tsubHeader?: string;\n\tvalue: string;\n\tname: string;\n\tchecked?: boolean\n\tonChange: (value: string) => void;\n\n}& Omit<React.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"checked\" | \"value\" | \"name\">;\n\nexport const UiPlainRadio: React.FC<TUiPlainRadio> = ({\n\tchildren,\n\tdisabled,\n\tsubHeader,\n\tvalue,\n\tname,\n\tchecked = false,\n\tonChange\n\n}) => {\n\n\treturn (\n\t\t<label className={ cx(\n\t\t\t\"ui-radio-fancy\",\n\t\t\t\"relative\",\n\t\t\t{\n\t\t\t\t\"pointer-events-none\": disabled\n\t\t\t}\n\t\t) }\n\t\thtmlFor={ name + value }\n\t\t>\n\t\t\t<input className={ cx(\n\t\t\t\t\" absolute\",\n\t\t\t\t\"appearance-none\",\n\t\t\t\t\"peer\",\n\
|
|
1
|
+
{"version":3,"file":"UiPlainRadio.js","sources":["../../../src/components/UiPlainRadio/UiPlainRadio.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { UiRadio } from \"../UiRadio\";\n\nexport type TUiPlainRadio = {\n\tchildren?: React.ReactNode\n\tdisabled?: boolean;\n\tsubHeader?: string;\n\tvalue: string;\n\tname: string;\n\tclassName?: string\n\tchecked?: boolean\n\tonChange: (value: string) => void;\n\n}& Omit<React.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"checked\" | \"value\" | \"name\">;\n\nexport const UiPlainRadio: React.FC<TUiPlainRadio> = ({\n\tchildren,\n\tdisabled,\n\tsubHeader,\n\tvalue,\n\tname,\n\tchecked = false,\n\tclassName,\n\tonChange\n\n}) => {\n\n\treturn (\n\t\t<label className={ cx(\n\t\t\t\"ui-radio-fancy\",\n\t\t\t\"relative\",\n\t\t\t{\n\t\t\t\t\"pointer-events-none opacity-50\": disabled\n\t\t\t},\n\t\t\tclassName\n\t\t) }\n\t\thtmlFor={ name + value }\n\t\t>\n\t\t\t<input className={ cx(\n\t\t\t\t\" absolute\",\n\t\t\t\t\"appearance-none\",\n\t\t\t\t\"peer/plain-radio\",\n\t\t\t) }\n\t\t\tid={ name + value }\n\t\t\ttype=\"radio\"\n\t\t\tvalue={ value }\n\t\t\tchecked={ checked }\n\t\t\tonChange={ ()=> onChange(value) }\n\t\t\t/>\n\n\t\t\t<div className={ cx(\n\t\t\t\t\"box-border\",\n\t\t\t\t\"size-full\",\n\t\t\t\t\"cursor-pointer\",\n\t\t\t\t\"rounded-xl\",\n\t\t\t\t\"border border-secondary-alt-600\",\n\t\t\t\t\"peer-checked/plain-radio:border-primary-600\",\n\t\t\t\t\"peer-checked/plain-radio:outline\",\n\t\t\t\t\"peer-checked/plain-radio:outline\",\n\t\t\t\t\"peer-checked/plain-radio:outline-primary-600\",\n\t\t\t\t\"peer-hover/plain-radio:peer-checked/plain-radio:outline-primary-700\",\n\t\t\t\t\"bg-white\",\n\t\t\t\t\"peer-active/plain-radio:bg-secondary-alt-200\",\n\t\t\t\t\"p-sm\",\n\t\t\t\t\"peer-hover/plain-radio:border-primary-700\",\n\t\t\t\t\"peer-focus/plain-radio:shadow-border-primary\",\n\t\t\t\t\"flex\",\n\t\t\t\t\"items-center\",\n\t\t\t\t\"gap-sm\",\n\t\t\t\t\"text-sm\",\n\t\t\t\t{\n\t\t\t\t\t\"border-secondary-alt-400\": disabled && !checked,\n\t\t\t\t\t\"border-primary-300\": disabled && checked,\n\t\t\t\t\t\"border-secondary-alt-600\": !disabled && !checked,\n\t\t\t\t\t\"border-primary-600\": !disabled && checked\n\t\t\t\t}\n\n\t\t\t) }\n\t\t\t>\n\n\t\t\t\t<UiRadio\n\t\t\t\t\tclassName=\"pointer-events-none\"\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tname={ name }\n\t\t\t\t\tonChange={ ()=> onChange(value) }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t/>\n\n\t\t\t\t<div className=\"flex flex-col\">\n\t\t\t\t\t{ children }\n\t\t\t\t\t<div className=\"text-xs font-normal text-secondary-alt-400\">{ subHeader }</div>\n\t\t\t\t</div>\n\n\t\t\t</div>\n\n\t\t</label>\n\n\t);\n};\n"],"names":["UiPlainRadio","children","disabled","subHeader","value","name","checked","className","onChange","jsxs","cx","jsx","UiRadio"],"mappings":";;;;AAgBO,MAAMA,IAAwC,CAAC;AAAA,EACrD,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,UAAAC;AAED,MAGE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IAAM,WAAYC;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,QACC,kCAAkCR;AAAA,MACnC;AAAA,MACAK;AAAA,IACD;AAAA,IACA,SAAUF,IAAOD;AAAA,IAEhB,UAAA;AAAA,MAAA,gBAAAO;AAAA,QAAC;AAAA,QAAA;AAAA,UAAM,WAAYD;AAAA,YAClB;AAAA,YACA;AAAA,YACA;AAAA,UACD;AAAA,UACA,IAAKL,IAAOD;AAAA,UACZ,MAAK;AAAA,UACL,OAAAA;AAAA,UACA,SAAAE;AAAA,UACA,UAAW,MAAKE,EAASJ,CAAK;AAAA,QAAA;AAAA,MAC9B;AAAA,MAEA,gBAAAK;AAAA,QAAC;AAAA,QAAA;AAAA,UAAI,WAAYC;AAAA,YAChB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,cACC,4BAA4BR,KAAY,CAACI;AAAA,cACzC,sBAAsBJ,KAAYI;AAAA,cAClC,4BAA4B,CAACJ,KAAY,CAACI;AAAA,cAC1C,sBAAsB,CAACJ,KAAYI;AAAA,YAAA;AAAA,UAGrC;AAAA,UAGC,UAAA;AAAA,YAAA,gBAAAK;AAAA,cAACC;AAAA,cAAA;AAAA,gBACA,WAAU;AAAA,gBACV,UAAAV;AAAA,gBACA,OAAAE;AAAA,gBACA,MAAAC;AAAA,gBACA,UAAW,MAAKG,EAASJ,CAAK;AAAA,gBAC9B,SAAAE;AAAA,gBACA,UAAW;AAAA,cAAA;AAAA,YACZ;AAAA,YAEA,gBAAAG,EAAC,OAAI,EAAA,WAAU,iBACZ,UAAA;AAAA,cAAAR;AAAA,cACD,gBAAAU,EAAA,OAAA,EAAI,WAAU,8CAA+C,UAAWR,EAAA,CAAA;AAAA,YAAA,EAC1E,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED;AAAA,EAAA;AAED;"}
|
|
@@ -1,52 +1,49 @@
|
|
|
1
1
|
import { jsxs as e, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
3
|
import { UiPills as a } from "../UiPills/UiPills.js";
|
|
4
|
-
import { EBadgeKind as
|
|
4
|
+
import { EBadgeKind as c } from "../UiPills/_types.js";
|
|
5
5
|
import { UiTypography as o } from "../UiTypography/UiTypography.js";
|
|
6
|
-
import { ETextAlign as
|
|
7
|
-
import { EColors as
|
|
8
|
-
|
|
6
|
+
import { ETextAlign as l, ETextWeight as x, ETypographySizes as t } from "../UiTypography/_types.js";
|
|
7
|
+
import { EColors as s } from "../../_types/colors.js";
|
|
8
|
+
import g from "classnames";
|
|
9
|
+
const A = ({
|
|
9
10
|
badgeText: i,
|
|
10
|
-
title:
|
|
11
|
-
subtitle:
|
|
12
|
-
header:
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
px-xs
|
|
22
|
-
py-sm`, children: [
|
|
23
|
-
i && /* @__PURE__ */ r("div", { className: "absolute! -top-xxs right-xs", children: /* @__PURE__ */ r(a, { rounded: !0, kind: p.ACCENT_ALT, children: i }) }),
|
|
24
|
-
m,
|
|
11
|
+
title: d,
|
|
12
|
+
subtitle: m,
|
|
13
|
+
header: n,
|
|
14
|
+
className: p
|
|
15
|
+
}) => /* @__PURE__ */ e("div", { className: g(
|
|
16
|
+
"relative flex flex-col gap-sm rounded-2xl border border-secondary-alt-500 bg-white",
|
|
17
|
+
"px-xs py-sm",
|
|
18
|
+
p
|
|
19
|
+
), children: [
|
|
20
|
+
i && /* @__PURE__ */ r("div", { className: "absolute! -top-xxs right-xs", children: /* @__PURE__ */ r(a, { rounded: !0, kind: c.ACCENT_ALT, children: i }) }),
|
|
21
|
+
n,
|
|
25
22
|
/* @__PURE__ */ e("div", { className: "grid gap-xxs", children: [
|
|
26
23
|
/* @__PURE__ */ r(
|
|
27
24
|
o,
|
|
28
25
|
{
|
|
29
|
-
size:
|
|
30
|
-
weight:
|
|
31
|
-
align:
|
|
32
|
-
color:
|
|
26
|
+
size: t.MD,
|
|
27
|
+
weight: x.BOLD,
|
|
28
|
+
align: l.LEFT,
|
|
29
|
+
color: s.SECONDARY,
|
|
33
30
|
lineHeight: !0,
|
|
34
|
-
children:
|
|
31
|
+
children: d
|
|
35
32
|
}
|
|
36
33
|
),
|
|
37
34
|
/* @__PURE__ */ r(
|
|
38
35
|
o,
|
|
39
36
|
{
|
|
40
|
-
size:
|
|
41
|
-
align:
|
|
42
|
-
color:
|
|
37
|
+
size: t.XS,
|
|
38
|
+
align: l.LEFT,
|
|
39
|
+
color: s.SECONDARY_400,
|
|
43
40
|
lineHeight: !0,
|
|
44
|
-
children:
|
|
41
|
+
children: m
|
|
45
42
|
}
|
|
46
43
|
)
|
|
47
44
|
] })
|
|
48
45
|
] });
|
|
49
46
|
export {
|
|
50
|
-
|
|
47
|
+
A as UiProductCard
|
|
51
48
|
};
|
|
52
49
|
//# sourceMappingURL=UiProductCard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UiProductCard.js","sources":["../../../src/components/UiProductCard/UiProductCard.tsx"],"sourcesContent":["import React from \"react\";\nimport { EBadgeKind, UiPills } from \"../UiPills\";\nimport {\n\tUiTypography, ETypographySizes, ETextWeight, ETextAlign, EColors\n} from \"../UiTypography\";\n\ntype TUiProductCardProps = {\n\tbadgeText?: string;\n\ttitle?: React.ReactNode;\n\tsubtitle?: React.ReactNode;\n\theader?: React.ReactNode;\n}\n\nexport const UiProductCard: React.FC<TUiProductCardProps> = ({
|
|
1
|
+
{"version":3,"file":"UiProductCard.js","sources":["../../../src/components/UiProductCard/UiProductCard.tsx"],"sourcesContent":["import React from \"react\";\nimport { EBadgeKind, UiPills } from \"../UiPills\";\nimport {\n\tUiTypography, ETypographySizes, ETextWeight, ETextAlign, EColors\n} from \"../UiTypography\";\nimport cx from \"classnames\";\n\ntype TUiProductCardProps = {\n\tbadgeText?: string;\n\ttitle?: React.ReactNode;\n\tsubtitle?: React.ReactNode;\n\theader?: React.ReactNode;\n\tclassName?: string;\n}\n\nexport const UiProductCard: React.FC<TUiProductCardProps> = ({\n\tbadgeText,\n\ttitle,\n\tsubtitle,\n\theader,\n\tclassName\n}) => {\n\treturn (\n\t\t<div className={ cx(\n\t\t\t\"relative flex flex-col gap-sm rounded-2xl border border-secondary-alt-500 bg-white\",\n\t\t\t\"px-xs py-sm\",\n\t\t\tclassName\n\t\t) }>\n\n\t\t\t{ badgeText && (\n\t\t\t\t<div className=\"absolute! -top-xxs right-xs\">\n\t\t\t\t\t<UiPills rounded kind={ EBadgeKind.ACCENT_ALT }>{ badgeText }</UiPills>\n\t\t\t\t</div>\n\t\t\t) }\n\n\t\t\t{ header }\n\n\t\t\t<div className=\"grid gap-xxs\">\n\t\t\t\t<UiTypography\n\t\t\t\t\tsize={ ETypographySizes.MD }\n\t\t\t\t\tweight={ ETextWeight.BOLD }\n\t\t\t\t\talign={ ETextAlign.LEFT }\n\t\t\t\t\tcolor={ EColors.SECONDARY }\n\t\t\t\t\tlineHeight\n\t\t\t\t>\n\t\t\t\t\t{ title }\n\t\t\t\t</UiTypography>\n\n\t\t\t\t<UiTypography\n\t\t\t\t\tsize={ ETypographySizes.XS }\n\t\t\t\t\talign={ ETextAlign.LEFT }\n\t\t\t\t\tcolor={ EColors.SECONDARY_400 }\n\t\t\t\t\tlineHeight\n\t\t\t\t>\n\t\t\t\t\t{ subtitle }\n\t\t\t\t</UiTypography>\n\t\t\t</div>\n\t\t</div >\n\t);\n};\n"],"names":["UiProductCard","badgeText","title","subtitle","header","className","jsxs","cx","jsx","UiPills","EBadgeKind","UiTypography","ETypographySizes","ETextWeight","ETextAlign","EColors"],"mappings":";;;;;;;;AAeO,MAAMA,IAA+C,CAAC;AAAA,EAC5D,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AACD,MAEE,gBAAAC,EAAC,SAAI,WAAYC;AAAA,EAChB;AAAA,EACA;AAAA,EACAF;AAGE,GAAA,UAAA;AAAA,EAAAJ,KACA,gBAAAO,EAAA,OAAA,EAAI,WAAU,+BACd,UAAC,gBAAAA,EAAAC,GAAA,EAAQ,SAAO,IAAC,MAAOC,EAAW,YAAe,UAAAT,EAAW,CAAA,GAC9D;AAAA,EAGCG;AAAA,EAEF,gBAAAE,EAAC,OAAI,EAAA,WAAU,gBACd,UAAA;AAAA,IAAA,gBAAAE;AAAA,MAACG;AAAA,MAAA;AAAA,QACA,MAAOC,EAAiB;AAAA,QACxB,QAASC,EAAY;AAAA,QACrB,OAAQC,EAAW;AAAA,QACnB,OAAQC,EAAQ;AAAA,QAChB,YAAU;AAAA,QAER,UAAAb;AAAA,MAAA;AAAA,IACH;AAAA,IAEA,gBAAAM;AAAA,MAACG;AAAA,MAAA;AAAA,QACA,MAAOC,EAAiB;AAAA,QACxB,OAAQE,EAAW;AAAA,QACnB,OAAQC,EAAQ;AAAA,QAChB,YAAU;AAAA,QAER,UAAAZ;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,EACD,CAAA;AAAA,GACD;"}
|
|
@@ -1,18 +1,20 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as m, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
3
|
import o from "classnames";
|
|
4
|
-
import { UiTypography as
|
|
5
|
-
import { ETextWeight as
|
|
6
|
-
import { EColors as
|
|
7
|
-
const
|
|
4
|
+
import { UiTypography as p } from "../UiTypography/UiTypography.js";
|
|
5
|
+
import { ETextWeight as d, ETypographySizes as f } from "../UiTypography/_types.js";
|
|
6
|
+
import { EColors as h } from "../../_types/colors.js";
|
|
7
|
+
const b = ({
|
|
8
8
|
progressText: i,
|
|
9
9
|
max: e,
|
|
10
10
|
min: l,
|
|
11
|
-
current: s
|
|
11
|
+
current: s,
|
|
12
|
+
className: t
|
|
12
13
|
}) => {
|
|
13
|
-
const
|
|
14
|
-
return /* @__PURE__ */
|
|
15
|
-
"ui-progress"
|
|
14
|
+
const a = (s - l) / (e - l) * 100;
|
|
15
|
+
return /* @__PURE__ */ m("div", { className: o(
|
|
16
|
+
"ui-progress",
|
|
17
|
+
t
|
|
16
18
|
), children: [
|
|
17
19
|
/* @__PURE__ */ r("div", { className: o(
|
|
18
20
|
"relative",
|
|
@@ -38,22 +40,22 @@ const y = ({
|
|
|
38
40
|
"duration-300"
|
|
39
41
|
),
|
|
40
42
|
style: {
|
|
41
|
-
width: `${
|
|
43
|
+
width: `${a}%`
|
|
42
44
|
}
|
|
43
45
|
}
|
|
44
46
|
) }),
|
|
45
47
|
i && /* @__PURE__ */ r(
|
|
46
|
-
|
|
48
|
+
p,
|
|
47
49
|
{
|
|
48
|
-
color:
|
|
49
|
-
size:
|
|
50
|
-
weight:
|
|
50
|
+
color: h.PRIMARY_700,
|
|
51
|
+
size: f.SM,
|
|
52
|
+
weight: d.SEMI_BOLD,
|
|
51
53
|
children: i
|
|
52
54
|
}
|
|
53
55
|
)
|
|
54
56
|
] });
|
|
55
57
|
};
|
|
56
58
|
export {
|
|
57
|
-
|
|
59
|
+
b as UiProgress
|
|
58
60
|
};
|
|
59
61
|
//# sourceMappingURL=UiProgress.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UiProgress.js","sources":["../../../src/components/UiProgress/UiProgress.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { EColors, ETextWeight, ETypographySizes, UiTypography } from \"../UiTypography\";\n\ninterface IUiProgress {\n\tmin: number\n\tmax: number\n\tcurrent: number\n\tprogressText?: string\n\n}\n\nexport const UiProgress: React.FC<IUiProgress> = ({\n\tprogressText,\n\tmax,\n\tmin,\n\tcurrent\n\n}) => {\n\tconst filler = ((current - min) / (max - min)) * 100;\n\n\treturn (\n\t\t<div className={ cx(\n\t\t\t\"ui-progress\"\n\t\t) }>\n\t\t\t<div className={ cx(\n\t\t\t\t\"relative\",\n\t\t\t\t\"h-xxs \",\n\t\t\t\t\"w-full\",\n\t\t\t\t\"overflow-hidden\",\n\t\t\t\t\"rounded-3xl\",\n\t\t\t\t\"bg-primary-50\",\n\t\t\t\t\"mb-xxs\"\n\t\t\t) } >\n\t\t\t\t<div className={ cx(\n\t\t\t\t\t\"ui-progress__bar-fill\",\n\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\"left-0\",\n\t\t\t\t\t\"top-0\",\n\t\t\t\t\t\"z-10\",\n\t\t\t\t\t\"h-full\",\n\t\t\t\t\t\"rounded-2xl\",\n\t\t\t\t\t\"bg-primary-700\",\n\t\t\t\t\t\"transition-all\",\n\t\t\t\t\t\"duration-300\"\n\n\t\t\t\t) }\n\t\t\t\tstyle={ {\n\t\t\t\t\twidth: `${filler}%`\n\t\t\t\t} }>\n\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ progressText && (\n\t\t\t\t<UiTypography\n\t\t\t\t\tcolor={ EColors.PRIMARY_700 }\n\t\t\t\t\tsize={ ETypographySizes.SM }\n\t\t\t\t\tweight={ ETextWeight.SEMI_BOLD }\n\t\t\t\t>\n\t\t\t\t\t{ progressText }\n\t\t\t\t</UiTypography>\n\t\t\t) }\n\n\t\t</div>\n\n\t);\n};\n"],"names":["UiProgress","progressText","max","min","current","filler","jsxs","cx","jsx","UiTypography","EColors","ETypographySizes","ETextWeight"],"mappings":";;;;;;AAYO,MAAMA,IAAoC,CAAC;AAAA,EACjD,cAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,SAAAC;AAED,MAAM;AACL,QAAMC,
|
|
1
|
+
{"version":3,"file":"UiProgress.js","sources":["../../../src/components/UiProgress/UiProgress.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { EColors, ETextWeight, ETypographySizes, UiTypography } from \"../UiTypography\";\n\ninterface IUiProgress {\n\tmin: number\n\tmax: number\n\tcurrent: number\n\tprogressText?: string\n\tclassName?: string\n}\n\nexport const UiProgress: React.FC<IUiProgress> = ({\n\tprogressText,\n\tmax,\n\tmin,\n\tcurrent,\n\tclassName\n\n}) => {\n\tconst filler = ((current - min) / (max - min)) * 100;\n\n\treturn (\n\t\t<div className={ cx(\n\t\t\t\"ui-progress\",\n\t\t\tclassName\n\t\t) }>\n\t\t\t<div className={ cx(\n\t\t\t\t\"relative\",\n\t\t\t\t\"h-xxs \",\n\t\t\t\t\"w-full\",\n\t\t\t\t\"overflow-hidden\",\n\t\t\t\t\"rounded-3xl\",\n\t\t\t\t\"bg-primary-50\",\n\t\t\t\t\"mb-xxs\"\n\t\t\t) } >\n\t\t\t\t<div className={ cx(\n\t\t\t\t\t\"ui-progress__bar-fill\",\n\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\"left-0\",\n\t\t\t\t\t\"top-0\",\n\t\t\t\t\t\"z-10\",\n\t\t\t\t\t\"h-full\",\n\t\t\t\t\t\"rounded-2xl\",\n\t\t\t\t\t\"bg-primary-700\",\n\t\t\t\t\t\"transition-all\",\n\t\t\t\t\t\"duration-300\"\n\n\t\t\t\t) }\n\t\t\t\tstyle={ {\n\t\t\t\t\twidth: `${filler}%`\n\t\t\t\t} }>\n\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ progressText && (\n\t\t\t\t<UiTypography\n\t\t\t\t\tcolor={ EColors.PRIMARY_700 }\n\t\t\t\t\tsize={ ETypographySizes.SM }\n\t\t\t\t\tweight={ ETextWeight.SEMI_BOLD }\n\t\t\t\t>\n\t\t\t\t\t{ progressText }\n\t\t\t\t</UiTypography>\n\t\t\t) }\n\n\t\t</div>\n\n\t);\n};\n"],"names":["UiProgress","progressText","max","min","current","className","filler","jsxs","cx","jsx","UiTypography","EColors","ETypographySizes","ETextWeight"],"mappings":";;;;;;AAYO,MAAMA,IAAoC,CAAC;AAAA,EACjD,cAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAED,MAAM;AACL,QAAMC,KAAWF,IAAUD,MAAQD,IAAMC,KAAQ;AAGhD,SAAA,gBAAAI,EAAC,SAAI,WAAYC;AAAA,IAChB;AAAA,IACAH;AAAA,EAEA,GAAA,UAAA;AAAA,IAAA,gBAAAI,EAAC,SAAI,WAAYD;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAEA,GAAA,UAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QAAI,WAAYD;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAED;AAAA,QACA,OAAQ;AAAA,UACP,OAAO,GAAGF,CAAM;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA,GAGD;AAAA,IACEL,KACD,gBAAAQ;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,OAAQC,EAAQ;AAAA,QAChB,MAAOC,EAAiB;AAAA,QACxB,QAASC,EAAY;AAAA,QAEnB,UAAAZ;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAGF;AAGF;"}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as y, jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
3
|
import a from "classnames";
|
|
4
4
|
import { EJustify as e } from "../../_types/align.js";
|
|
5
|
-
import '../../assets/UiRadio.css';const
|
|
6
|
-
UiRadio__custom:
|
|
7
|
-
UiRadio__dot:
|
|
8
|
-
},
|
|
5
|
+
import '../../assets/UiRadio.css';const b = "_UiRadio__custom_wei69_1", R = "_UiRadio__dot_wei69_4", d = {
|
|
6
|
+
UiRadio__custom: b,
|
|
7
|
+
UiRadio__dot: R
|
|
8
|
+
}, g = {
|
|
9
9
|
[e.START]: "justify-start",
|
|
10
10
|
[e.END]: "justify-end",
|
|
11
11
|
[e.CENTER]: "justify-center",
|
|
12
12
|
[e.BETWEEN]: "justify-between",
|
|
13
13
|
[e.AROUND]: "justify-around",
|
|
14
14
|
[e.EVENLY]: "justify-evenly"
|
|
15
|
-
},
|
|
15
|
+
}, N = ({
|
|
16
16
|
name: c,
|
|
17
17
|
value: s,
|
|
18
18
|
invertOrder: n = !1,
|
|
@@ -20,18 +20,20 @@ import '../../assets/UiRadio.css';const f = "_UiRadio__custom_wei69_1", y = "_Ui
|
|
|
20
20
|
disabled: r = !1,
|
|
21
21
|
onChange: t,
|
|
22
22
|
checked: p = !1,
|
|
23
|
-
children: i
|
|
23
|
+
children: i,
|
|
24
|
+
className: u,
|
|
25
|
+
tabIndex: m
|
|
24
26
|
}) => {
|
|
25
|
-
const
|
|
26
|
-
!r && t && t(
|
|
27
|
+
const _ = (f) => {
|
|
28
|
+
!r && t && t(f.target.value);
|
|
27
29
|
};
|
|
28
|
-
return /* @__PURE__ */
|
|
30
|
+
return /* @__PURE__ */ y("label", { className: a(
|
|
29
31
|
"UiRadio",
|
|
30
32
|
"group",
|
|
31
33
|
"grid",
|
|
32
34
|
"grid-flow-col",
|
|
33
35
|
"cursor-pointer",
|
|
34
|
-
|
|
36
|
+
g[l],
|
|
35
37
|
{
|
|
36
38
|
"pointer-events-none": r,
|
|
37
39
|
"items-center gap-xxs": i
|
|
@@ -46,8 +48,9 @@ import '../../assets/UiRadio.css';const f = "_UiRadio__custom_wei69_1", y = "_Ui
|
|
|
46
48
|
value: s,
|
|
47
49
|
disabled: r,
|
|
48
50
|
checked: p,
|
|
49
|
-
onChange:
|
|
50
|
-
className: "peer absolute appearance-none"
|
|
51
|
+
onChange: _,
|
|
52
|
+
className: "peer absolute appearance-none",
|
|
53
|
+
tabIndex: m
|
|
51
54
|
}
|
|
52
55
|
),
|
|
53
56
|
/* @__PURE__ */ o("span", { className: a(
|
|
@@ -68,7 +71,8 @@ import '../../assets/UiRadio.css';const f = "_UiRadio__custom_wei69_1", y = "_Ui
|
|
|
68
71
|
"active:peer-checked:border-primary-800",
|
|
69
72
|
"peer-focus:shadow-border-primary",
|
|
70
73
|
"peer-disabled:border-secondary-alt-400",
|
|
71
|
-
"peer-disabled:bg-secondary-alt-200"
|
|
74
|
+
"peer-disabled:bg-secondary-alt-200",
|
|
75
|
+
u
|
|
72
76
|
), children: /* @__PURE__ */ o("span", { className: a(
|
|
73
77
|
d.UiRadio__dot,
|
|
74
78
|
"absolute",
|
|
@@ -77,12 +81,12 @@ import '../../assets/UiRadio.css';const f = "_UiRadio__custom_wei69_1", y = "_Ui
|
|
|
77
81
|
"block",
|
|
78
82
|
"size-xxs",
|
|
79
83
|
"rounded-full",
|
|
80
|
-
"bg-primary
|
|
84
|
+
"bg-primary"
|
|
81
85
|
) }) }),
|
|
82
86
|
i
|
|
83
87
|
] });
|
|
84
88
|
};
|
|
85
89
|
export {
|
|
86
|
-
|
|
90
|
+
N as UiRadio
|
|
87
91
|
};
|
|
88
92
|
//# sourceMappingURL=UiRadio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UiRadio.js","sources":["../../../src/components/UiRadio/UiRadio.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./UiRadio.module.css\";\nimport { EJustify } from \"../../_types/align\";\n\nexport type TUiRadioProps = {\n\tchildren?: React.ReactNode;\n\tname: string;\n\tvalue: string;\n\tinvertOrder?: boolean;\n\tjustify?: EJustify;\n\tdisabled?: boolean;\n\tchecked?: boolean;\n\tonChange: (value: string) => void;\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"checked\" | \"value\" | \"name\">;\n\nconst justificationClasses = {\n\t[EJustify.START]: \"justify-start\",\n\t[EJustify.END]: \"justify-end\",\n\t[EJustify.CENTER]: \"justify-center\",\n\t[EJustify.BETWEEN]: \"justify-between\",\n\t[EJustify.AROUND]: \"justify-around\",\n\t[EJustify.EVENLY]: \"justify-evenly\"\n};\n\nexport const UiRadio: React.FC<TUiRadioProps> = ({\n\tname,\n\tvalue,\n\tinvertOrder = false,\n\tjustify = EJustify.START,\n\tdisabled = false,\n\tonChange,\n\tchecked = false,\n\tchildren\n}) => {\n\n\tconst handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n\t\tif (!disabled && onChange) {\n\t\t\tonChange(event.target.value);\n\t\t}\n\t};\n\n\treturn (\n\t\t<label className={\n\t\t\tcx(\"UiRadio\",\n\t\t\t\t\"group\",\n\t\t\t\t\"grid\",\n\t\t\t\t\"grid-flow-col\",\n\t\t\t\t\"cursor-pointer\",\n\t\t\t\tjustificationClasses[justify],\n\t\t\t\t{\n\t\t\t\t\t\"pointer-events-none\": disabled,\n\t\t\t\t\t\"items-center gap-xxs\": children\n\t\t\t\t}\n\t\t\t) }>\n\t\t\t<input\n\t\t\t\tid={ value }\n\t\t\t\tname={ name.toString() }\n\t\t\t\ttype=\"radio\"\n\t\t\t\tvalue={ value }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tchecked={ checked }\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tclassName=\"peer absolute appearance-none\"\n\t\t\t/>\n\t\t\t<span className={ cx(\n\t\t\t\tstyles.UiRadio__custom,\n\t\t\t\tinvertOrder && \"order-last\",\n\t\t\t\t\"relative\",\n\t\t\t\t\"block\",\n\t\t\t\t\"size-md\",\n\t\t\t\t\"rounded-full\",\n\t\t\t\t\"border\",\n\t\t\t\t\"border-secondary-alt\",\n\t\t\t\t\"bg-white\",\n\t\t\t\t\"group-hover:border-secondary-alt-700\",\n\t\t\t\t\"group-focus:border-secondary-alt-700\",\n\t\t\t\t\"peer-checked:border-2\",\n\t\t\t\t\"peer-checked:border-primary\",\n\t\t\t\t\"hover:peer-checked:border-primary-600\",\n\t\t\t\t\"active:peer-checked:border-primary-800\",\n\t\t\t\t\"peer-focus:shadow-border-primary\",\n\t\t\t\t\"peer-disabled:border-secondary-alt-400\",\n\t\t\t\t\"peer-disabled:bg-secondary-alt-200\"\n\t\t\t) }>\n\t\t\t\t<span className={ cx(\n\t\t\t\t\tstyles.UiRadio__dot,\n\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\"left-2/4\",\n\t\t\t\t\t\"top-2/4\",\n\t\t\t\t\t\"block\",\n\t\t\t\t\t\"size-xxs\",\n\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\"bg-primary\
|
|
1
|
+
{"version":3,"file":"UiRadio.js","sources":["../../../src/components/UiRadio/UiRadio.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./UiRadio.module.css\";\nimport { EJustify } from \"../../_types/align\";\n\nexport type TUiRadioProps = {\n\tchildren?: React.ReactNode;\n\tname: string;\n\tvalue: string;\n\tinvertOrder?: boolean;\n\tjustify?: EJustify;\n\tdisabled?: boolean;\n\tchecked?: boolean;\n\tonChange: (value: string) => void;\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"checked\" | \"value\" | \"name\">;\n\nconst justificationClasses = {\n\t[EJustify.START]: \"justify-start\",\n\t[EJustify.END]: \"justify-end\",\n\t[EJustify.CENTER]: \"justify-center\",\n\t[EJustify.BETWEEN]: \"justify-between\",\n\t[EJustify.AROUND]: \"justify-around\",\n\t[EJustify.EVENLY]: \"justify-evenly\"\n};\n\nexport const UiRadio: React.FC<TUiRadioProps> = ({\n\tname,\n\tvalue,\n\tinvertOrder = false,\n\tjustify = EJustify.START,\n\tdisabled = false,\n\tonChange,\n\tchecked = false,\n\tchildren,\n\tclassName,\n\ttabIndex\n}) => {\n\n\tconst handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n\t\tif (!disabled && onChange) {\n\t\t\tonChange(event.target.value);\n\t\t}\n\t};\n\n\treturn (\n\t\t<label className={\n\t\t\tcx(\"UiRadio\",\n\t\t\t\t\"group\",\n\t\t\t\t\"grid\",\n\t\t\t\t\"grid-flow-col\",\n\t\t\t\t\"cursor-pointer\",\n\t\t\t\tjustificationClasses[justify],\n\t\t\t\t{\n\t\t\t\t\t\"pointer-events-none\": disabled,\n\t\t\t\t\t\"items-center gap-xxs\": children\n\t\t\t\t}\n\t\t\t) }>\n\t\t\t<input\n\t\t\t\tid={ value }\n\t\t\t\tname={ name.toString() }\n\t\t\t\ttype=\"radio\"\n\t\t\t\tvalue={ value }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tchecked={ checked }\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tclassName=\"peer absolute appearance-none\"\n\t\t\t\ttabIndex={ tabIndex }\n\t\t\t/>\n\t\t\t<span className={ cx(\n\t\t\t\tstyles.UiRadio__custom,\n\t\t\t\tinvertOrder && \"order-last\",\n\t\t\t\t\"relative\",\n\t\t\t\t\"block\",\n\t\t\t\t\"size-md\",\n\t\t\t\t\"rounded-full\",\n\t\t\t\t\"border\",\n\t\t\t\t\"border-secondary-alt\",\n\t\t\t\t\"bg-white\",\n\t\t\t\t\"group-hover:border-secondary-alt-700\",\n\t\t\t\t\"group-focus:border-secondary-alt-700\",\n\t\t\t\t\"peer-checked:border-2\",\n\t\t\t\t\"peer-checked:border-primary\",\n\t\t\t\t\"hover:peer-checked:border-primary-600\",\n\t\t\t\t\"active:peer-checked:border-primary-800\",\n\t\t\t\t\"peer-focus:shadow-border-primary\",\n\t\t\t\t\"peer-disabled:border-secondary-alt-400\",\n\t\t\t\t\"peer-disabled:bg-secondary-alt-200\",\n\t\t\t\tclassName,\n\t\t\t) }>\n\t\t\t\t<span className={ cx(\n\t\t\t\t\tstyles.UiRadio__dot,\n\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\"left-2/4\",\n\t\t\t\t\t\"top-2/4\",\n\t\t\t\t\t\"block\",\n\t\t\t\t\t\"size-xxs\",\n\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\"bg-primary\",\n\t\t\t\t) } />\n\t\t\t</span>\n\t\t\t{ children }\n\t\t</label>\n\t);\n};\n"],"names":["justificationClasses","EJustify","UiRadio","name","value","invertOrder","justify","disabled","onChange","checked","children","className","tabIndex","handleChange","event","jsxs","cx","jsx","styles"],"mappings":";;;;;;;GAgBMA,IAAuB;AAAA,EAC5B,CAACC,EAAS,KAAK,GAAG;AAAA,EAClB,CAACA,EAAS,GAAG,GAAG;AAAA,EAChB,CAACA,EAAS,MAAM,GAAG;AAAA,EACnB,CAACA,EAAS,OAAO,GAAG;AAAA,EACpB,CAACA,EAAS,MAAM,GAAG;AAAA,EACnB,CAACA,EAAS,MAAM,GAAG;AACpB,GAEaC,IAAmC,CAAC;AAAA,EAChD,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,SAAAC,IAAUL,EAAS;AAAA,EACnB,UAAAM,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACD,MAAM;AAEC,QAAAC,IAAe,CAACC,MAA+C;AAChE,IAAA,CAACP,KAAYC,KACPA,EAAAM,EAAM,OAAO,KAAK;AAAA,EAE7B;AAGC,SAAA,gBAAAC,EAAC,WAAM,WACNC;AAAA,IAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAhB,EAAqBM,CAAO;AAAA,IAC5B;AAAA,MACC,uBAAuBC;AAAA,MACvB,wBAAwBG;AAAA,IAAA;AAAA,EAG1B,GAAA,UAAA;AAAA,IAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,IAAKb;AAAA,QACL,MAAOD,EAAK,SAAS;AAAA,QACrB,MAAK;AAAA,QACL,OAAAC;AAAA,QACA,UAAAG;AAAA,QACA,SAAAE;AAAA,QACA,UAAWI;AAAA,QACX,WAAU;AAAA,QACV,UAAAD;AAAA,MAAA;AAAA,IACD;AAAA,IACA,gBAAAK,EAAC,UAAK,WAAYD;AAAA,MACjBE,EAAO;AAAA,MACPb,KAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAM;AAAA,IACD,GACC,UAAC,gBAAAM,EAAA,QAAA,EAAK,WAAYD;AAAA,MACjBE,EAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,OACG,EACL,CAAA;AAAA,IACER;AAAA,EAAA,GACH;AAEF;"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { jsxs as o, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
3
|
import t from "classnames";
|
|
4
|
-
import { UiIcon as
|
|
5
|
-
import { ESize as
|
|
4
|
+
import { UiIcon as f } from "../UiIcon/UiIcon.js";
|
|
5
|
+
import { ESize as u } from "../../_types/sizing.js";
|
|
6
6
|
import "@fortawesome/fontawesome-svg-core";
|
|
7
7
|
import { ERadioTypes as a } from "./_types.js";
|
|
8
|
-
const
|
|
8
|
+
const h = {
|
|
9
9
|
[a.DEFAULT]: "items-center",
|
|
10
10
|
[a.COMPACT]: "items-start flex-col"
|
|
11
|
-
},
|
|
11
|
+
}, w = ({
|
|
12
12
|
children: i,
|
|
13
13
|
icon: s,
|
|
14
14
|
disabled: e,
|
|
@@ -16,13 +16,15 @@ const u = {
|
|
|
16
16
|
active: c,
|
|
17
17
|
radioType: l = a.DEFAULT,
|
|
18
18
|
value: d,
|
|
19
|
-
onChange: p
|
|
19
|
+
onChange: p,
|
|
20
|
+
className: m
|
|
20
21
|
}) => /* @__PURE__ */ o("label", { className: t(
|
|
21
22
|
"ui-radio-fancy",
|
|
22
23
|
"relative",
|
|
23
24
|
{
|
|
24
25
|
"pointer-events-none": e
|
|
25
|
-
}
|
|
26
|
+
},
|
|
27
|
+
m
|
|
26
28
|
), children: [
|
|
27
29
|
/* @__PURE__ */ r("input", { className: "group peer absolute appearance-none", type: "radio", checked: c, onChange: () => p(d) }),
|
|
28
30
|
/* @__PURE__ */ o("div", { className: t(
|
|
@@ -45,7 +47,7 @@ const u = {
|
|
|
45
47
|
"text-sm",
|
|
46
48
|
c ? "peer-focus:outline-offset-2" : "peer-focus:outline-offset-0",
|
|
47
49
|
e ? "border-secondary-alt-400 text-secondary-alt-500 peer-checked:shadow-border-primary-disabled" : "border-secondary-alt-600",
|
|
48
|
-
|
|
50
|
+
h[l]
|
|
49
51
|
), children: [
|
|
50
52
|
/* @__PURE__ */ r(
|
|
51
53
|
"div",
|
|
@@ -64,10 +66,10 @@ const u = {
|
|
|
64
66
|
}
|
|
65
67
|
),
|
|
66
68
|
children: s ? /* @__PURE__ */ r(
|
|
67
|
-
|
|
69
|
+
f,
|
|
68
70
|
{
|
|
69
71
|
name: s,
|
|
70
|
-
size:
|
|
72
|
+
size: u.SM
|
|
71
73
|
}
|
|
72
74
|
) : null
|
|
73
75
|
}
|
|
@@ -79,6 +81,6 @@ const u = {
|
|
|
79
81
|
] })
|
|
80
82
|
] });
|
|
81
83
|
export {
|
|
82
|
-
|
|
84
|
+
w as UiRadioFancy
|
|
83
85
|
};
|
|
84
86
|
//# sourceMappingURL=UiRadioFancy.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UiRadioFancy.js","sources":["../../../src/components/UiRadioFancy/UiRadioFancy.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { UiIcon } from \"../UiIcon\";\nimport { ESize } from \"../../_types/sizing\";\nimport { type IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { ERadioTypes } from \"./_types\";\n\nexport type TUiRadioFancy = {\n\tchildren: React.ReactNode\n\ticon?: IconProp\n\tdisabled?: boolean;\n\tactive?: boolean;\n\tsubHeader?: string;\n\tradioType?: ERadioTypes;\n\tvalue: string;\n\tonChange: (value: string) => void;\n\n}& Omit<React.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"checked\" | \"value\" | \"name\">;\n\nconst typeClasses = {\n\t[ERadioTypes.DEFAULT]: \"items-center\",\n\t[ERadioTypes.COMPACT]: \"items-start flex-col\"\n};\n\nexport const UiRadioFancy: React.FC<TUiRadioFancy> = ({\n\tchildren,\n\ticon,\n\tdisabled,\n\tsubHeader,\n\tactive,\n\tradioType = ERadioTypes.DEFAULT,\n\tvalue,\n\tonChange\n\n}) => {\n\treturn (\n\t\t<label className={ cx(\n\t\t\t\"ui-radio-fancy\",\n\t\t\t\"relative\",\n\t\t\t{\n\t\t\t\t\"pointer-events-none\": disabled\n\t\t\t}\n\t\t) }>\n\t\t\t<input className=\"group peer absolute appearance-none\" type=\"radio\" checked={ active } onChange={ ()=> onChange(value) }/>\n\n\t\t\t<div className={ cx(\n\t\t\t\t\"box-border\",\n\t\t\t\t\"cursor-pointer\",\n\t\t\t\t\"rounded-lg\",\n\t\t\t\t\"border\",\n\t\t\t\t\"bg-white\",\n\t\t\t\t\"p-sm\",\n\t\t\t\t\"hover:border-secondary-alt-700\",\n\t\t\t\t\"peer-focus:outline \",\n\t\t\t\t\"peer-focus:outline-4\",\n\t\t\t\t\"peer-focus:outline-primary-300\",\n\t\t\t\t\"peer-checked:shadow-border-primary-600\",\n\t\t\t\t\"peer-checked:border-0\",\n\t\t\t\t\"active:peer-checked:bg-secondary-alt-200\",\n\t\t\t\t\"hover:peer-checked:shadow-border-primary-700\",\n\t\t\t\t\"flex\",\n\t\t\t\t\"gap-sm\",\n\t\t\t\t\"text-sm\",\n\t\t\t\tactive\n\t\t\t\t\t? \"peer-focus:outline-offset-2\"\n\t\t\t\t\t: \"peer-focus:outline-offset-0\",\n\t\t\t\tdisabled\n\t\t\t\t\t? \"border-secondary-alt-400 text-secondary-alt-500 peer-checked:shadow-border-primary-disabled\"\n\t\t\t\t\t: \"border-secondary-alt-600\",\n\n\t\t\t\ttypeClasses[radioType],\n\n\t\t\t) }>\n\t\t\t\t<div className={ cx(\n\t\t\t\t\t\"relative\",\n\t\t\t\t\t\"grid\",\n\t\t\t\t\t\"size-fit\",\n\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\"place-items-center\",\n\t\t\t\t\t\"text-white\",\n\t\t\t\t\t\"p-xxs\",\n\t\t\t\t\t{\n\t\t\t\t\t\t\"bg-primary-300\": disabled,\n\t\t\t\t\t\t\"bg-primary\": !disabled\n\t\t\t\t\t}\n\n\t\t\t\t) }\n\t\t\t\t>\n\n\t\t\t\t\t{\n\t\t\t\t\t\ticon\n\t\t\t\t\t\t\t? <UiIcon\n\t\t\t\t\t\t\t\tname={ icon }\n\t\t\t\t\t\t\t\tsize={ ESize.SM }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t: null\n\t\t\t\t\t}\n\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"flex flex-col\">\n\t\t\t\t\t{ children }\n\t\t\t\t\t<div className=\"text-xs font-normal text-secondary-alt-400\">{ subHeader }</div>\n\t\t\t\t</div>\n\n\t\t\t</div>\n\n\t\t</label>\n\n\t);\n};\n"],"names":["typeClasses","ERadioTypes","UiRadioFancy","children","icon","disabled","subHeader","active","radioType","value","onChange","jsxs","cx","jsx","UiIcon","ESize"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"UiRadioFancy.js","sources":["../../../src/components/UiRadioFancy/UiRadioFancy.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { UiIcon } from \"../UiIcon\";\nimport { ESize } from \"../../_types/sizing\";\nimport { type IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { ERadioTypes } from \"./_types\";\n\nexport type TUiRadioFancy = {\n\tchildren: React.ReactNode\n\ticon?: IconProp\n\tdisabled?: boolean;\n\tactive?: boolean;\n\tsubHeader?: string;\n\tclassName?: string;\n\tradioType?: ERadioTypes;\n\tvalue: string;\n\tonChange: (value: string) => void;\n\n}& Omit<React.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"checked\" | \"value\" | \"name\">;\n\nconst typeClasses = {\n\t[ERadioTypes.DEFAULT]: \"items-center\",\n\t[ERadioTypes.COMPACT]: \"items-start flex-col\"\n};\n\nexport const UiRadioFancy: React.FC<TUiRadioFancy> = ({\n\tchildren,\n\ticon,\n\tdisabled,\n\tsubHeader,\n\tactive,\n\tradioType = ERadioTypes.DEFAULT,\n\tvalue,\n\tonChange,\n\tclassName\n\n}) => {\n\treturn (\n\t\t<label className={ cx(\n\t\t\t\"ui-radio-fancy\",\n\t\t\t\"relative\",\n\t\t\t{\n\t\t\t\t\"pointer-events-none\": disabled\n\t\t\t},\n\t\t\tclassName\n\t\t) }>\n\t\t\t<input className=\"group peer absolute appearance-none\" type=\"radio\" checked={ active } onChange={ ()=> onChange(value) }/>\n\n\t\t\t<div className={ cx(\n\t\t\t\t\"box-border\",\n\t\t\t\t\"cursor-pointer\",\n\t\t\t\t\"rounded-lg\",\n\t\t\t\t\"border\",\n\t\t\t\t\"bg-white\",\n\t\t\t\t\"p-sm\",\n\t\t\t\t\"hover:border-secondary-alt-700\",\n\t\t\t\t\"peer-focus:outline \",\n\t\t\t\t\"peer-focus:outline-4\",\n\t\t\t\t\"peer-focus:outline-primary-300\",\n\t\t\t\t\"peer-checked:shadow-border-primary-600\",\n\t\t\t\t\"peer-checked:border-0\",\n\t\t\t\t\"active:peer-checked:bg-secondary-alt-200\",\n\t\t\t\t\"hover:peer-checked:shadow-border-primary-700\",\n\t\t\t\t\"flex\",\n\t\t\t\t\"gap-sm\",\n\t\t\t\t\"text-sm\",\n\t\t\t\tactive\n\t\t\t\t\t? \"peer-focus:outline-offset-2\"\n\t\t\t\t\t: \"peer-focus:outline-offset-0\",\n\t\t\t\tdisabled\n\t\t\t\t\t? \"border-secondary-alt-400 text-secondary-alt-500 peer-checked:shadow-border-primary-disabled\"\n\t\t\t\t\t: \"border-secondary-alt-600\",\n\n\t\t\t\ttypeClasses[radioType],\n\n\t\t\t) }>\n\t\t\t\t<div className={ cx(\n\t\t\t\t\t\"relative\",\n\t\t\t\t\t\"grid\",\n\t\t\t\t\t\"size-fit\",\n\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\"place-items-center\",\n\t\t\t\t\t\"text-white\",\n\t\t\t\t\t\"p-xxs\",\n\t\t\t\t\t{\n\t\t\t\t\t\t\"bg-primary-300\": disabled,\n\t\t\t\t\t\t\"bg-primary\": !disabled\n\t\t\t\t\t}\n\n\t\t\t\t) }\n\t\t\t\t>\n\n\t\t\t\t\t{\n\t\t\t\t\t\ticon\n\t\t\t\t\t\t\t? <UiIcon\n\t\t\t\t\t\t\t\tname={ icon }\n\t\t\t\t\t\t\t\tsize={ ESize.SM }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t: null\n\t\t\t\t\t}\n\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"flex flex-col\">\n\t\t\t\t\t{ children }\n\t\t\t\t\t<div className=\"text-xs font-normal text-secondary-alt-400\">{ subHeader }</div>\n\t\t\t\t</div>\n\n\t\t\t</div>\n\n\t\t</label>\n\n\t);\n};\n"],"names":["typeClasses","ERadioTypes","UiRadioFancy","children","icon","disabled","subHeader","active","radioType","value","onChange","className","jsxs","cx","jsx","UiIcon","ESize"],"mappings":";;;;;;;AAoBA,MAAMA,IAAc;AAAA,EACnB,CAACC,EAAY,OAAO,GAAG;AAAA,EACvB,CAACA,EAAY,OAAO,GAAG;AACxB,GAEaC,IAAwC,CAAC;AAAA,EACrD,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC,IAAYP,EAAY;AAAA,EACxB,OAAAQ;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAED,MAEE,gBAAAC,EAAC,WAAM,WAAYC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,IACC,uBAAuBR;AAAA,EACxB;AAAA,EACAM;AAEA,GAAA,UAAA;AAAA,EAAC,gBAAAG,EAAA,SAAA,EAAM,WAAU,uCAAsC,MAAK,SAAQ,SAAUP,GAAS,UAAW,MAAKG,EAASD,CAAK,EAAG,CAAA;AAAA,EAExH,gBAAAG,EAAC,SAAI,WAAYC;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAN,IACG,gCACA;AAAA,IACHF,IACG,gGACA;AAAA,IAEHL,EAAYQ,CAAS;AAAA,EAGrB,GAAA,UAAA;AAAA,IAAA,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QAAI,WAAYD;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,YACC,kBAAkBR;AAAA,YAClB,cAAc,CAACA;AAAA,UAAA;AAAA,QAGjB;AAAA,QAIE,UACGD,IAAA,gBAAAU;AAAA,UAACC;AAAA,UAAA;AAAA,YACF,MAAOX;AAAA,YACP,MAAOY,EAAM;AAAA,UAAA;AAAA,QAAA,IAEZ;AAAA,MAAA;AAAA,IAGL;AAAA,IAEA,gBAAAJ,EAAC,OAAI,EAAA,WAAU,iBACZ,UAAA;AAAA,MAAAT;AAAA,MACD,gBAAAW,EAAA,OAAA,EAAI,WAAU,8CAA+C,UAAWR,EAAA,CAAA;AAAA,IAAA,EAC1E,CAAA;AAAA,EAAA,EAED,CAAA;AAAA,GAED;"}
|
|
@@ -6,6 +6,7 @@ type TSelectProps = {
|
|
|
6
6
|
value?: string | number | readonly string[];
|
|
7
7
|
placeholder?: string;
|
|
8
8
|
postfixIcon?: React.ReactNode;
|
|
9
|
+
className?: string;
|
|
9
10
|
onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
|
|
10
11
|
} & React.SelectHTMLAttributes<HTMLSelectElement>;
|
|
11
12
|
export declare const UiSelect: React.FC<TSelectProps>;
|