ics-ui-kit 0.1.0-alpha.55 → 0.1.0-alpha.57
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/dist/{Button--ooZ8ALo.js → Button-DJ6u1_it.js} +2 -2
- package/dist/{Button--ooZ8ALo.js.map → Button-DJ6u1_it.js.map} +1 -1
- package/dist/ButtonBase-DG_uUg_9.js +158 -0
- package/dist/ButtonBase-DG_uUg_9.js.map +1 -0
- package/dist/{FormFooterTemplate-I-NxFuYd.js → FormFooterTemplate-CRhbX3NR.js} +2 -2
- package/dist/{FormFooterTemplate-I-NxFuYd.js.map → FormFooterTemplate-CRhbX3NR.js.map} +1 -1
- package/dist/{IconButton-moydR8IU.js → IconButton-Cn6pUFj_.js} +2 -2
- package/dist/{IconButton-moydR8IU.js.map → IconButton-Cn6pUFj_.js.map} +1 -1
- package/dist/{ImagePreview-BIBDrLVV.js → ImagePreview-CeZK6kIJ.js} +2 -2
- package/dist/{ImagePreview-BIBDrLVV.js.map → ImagePreview-CeZK6kIJ.js.map} +1 -1
- package/dist/{ImageUploader-C-_ZPptv.js → ImageUploader-Dt6W5mdt.js} +2 -2
- package/dist/{ImageUploader-C-_ZPptv.js.map → ImageUploader-Dt6W5mdt.js.map} +1 -1
- package/dist/{InputGroup-DPmtpUdR.js → InputGroup-zJmBoy9c.js} +2 -2
- package/dist/{InputGroup-DPmtpUdR.js.map → InputGroup-zJmBoy9c.js.map} +1 -1
- package/dist/{Popover-DmwXZwYd.js → Popover-ByxEiHD3.js} +2 -2
- package/dist/{Popover-DmwXZwYd.js.map → Popover-ByxEiHD3.js.map} +1 -1
- package/dist/{RichButton-BuenN3bJ.js → RichButton-LdJEoO04.js} +2 -2
- package/dist/{RichButton-BuenN3bJ.js.map → RichButton-LdJEoO04.js.map} +1 -1
- package/dist/{Select-jZ8AGYac.js → Select-onFuKmtW.js} +160 -155
- package/dist/{Select-jZ8AGYac.js.map → Select-onFuKmtW.js.map} +1 -1
- package/dist/{TextInput-Dj_XBSmE.js → TextInput-CAhlwdf3.js} +2 -2
- package/dist/{TextInput-Dj_XBSmE.js.map → TextInput-CAhlwdf3.js.map} +1 -1
- package/dist/{TriggerButton-a2ClSj7f.js → TriggerButton-DyTFjmhE.js} +4 -4
- package/dist/TriggerButton-DyTFjmhE.js.map +1 -0
- package/dist/blocks/auth/otp-form.js +2 -2
- package/dist/components/alert-dialog/AlertDialog.d.ts +5 -4
- package/dist/components/alert-dialog.js +163 -208
- package/dist/components/alert-dialog.js.map +1 -1
- package/dist/components/alert.js +1 -1
- package/dist/components/button.js +5 -5
- package/dist/components/calendar.js +1 -1
- package/dist/components/card.js +1 -1
- package/dist/components/carousel.js +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/drawer.js +1 -1
- package/dist/components/dropdown.js +3 -3
- package/dist/components/dropdown.js.map +1 -1
- package/dist/components/error-state.js +1 -1
- package/dist/components/file-upload.js +2 -2
- package/dist/components/form.js +2 -2
- package/dist/components/gallery.js +2 -2
- package/dist/components/image-preview.js +1 -1
- package/dist/components/image-uploader.js +1 -1
- package/dist/components/input/components/clear-button/ClearButton.d.ts +3 -2
- package/dist/components/input.js +4 -4
- package/dist/components/menu-item.js +3 -3
- package/dist/components/page-state.js +1 -1
- package/dist/components/popover.js +1 -1
- package/dist/components/progress-circle.js +1 -1
- package/dist/components/progress.js +1 -1
- package/dist/components/search-select.js +2 -2
- package/dist/components/select.js +1 -1
- package/dist/components/sidebar.js +3 -3
- package/dist/components/sidebar.js.map +1 -1
- package/dist/components/system-state.js +1 -1
- package/dist/components/tag-input.js +2 -2
- package/dist/components/textarea.js +12 -12
- package/dist/components/textarea.js.map +1 -1
- package/dist/components/toast.js +2 -2
- package/dist/styles-scoped.css +204 -53
- package/dist/styles.css +204 -53
- package/package.json +1 -1
- package/dist/ButtonBase-Sf-fcVor.js +0 -158
- package/dist/ButtonBase-Sf-fcVor.js.map +0 -1
- package/dist/TriggerButton-a2ClSj7f.js.map +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as t, jsxs as f } from "react/jsx-runtime";
|
|
2
2
|
import p from "react";
|
|
3
3
|
import { T as u } from "./index-BVqs-uqP.js";
|
|
4
|
-
import { B as h } from "./ButtonBase-
|
|
4
|
+
import { B as h } from "./ButtonBase-DG_uUg_9.js";
|
|
5
5
|
const w = u({
|
|
6
6
|
slots: {
|
|
7
7
|
container: "flex items-center justify-center gap-2 overflow-hidden",
|
|
@@ -33,4 +33,4 @@ x.displayName = "Button";
|
|
|
33
33
|
export {
|
|
34
34
|
x as B
|
|
35
35
|
};
|
|
36
|
-
//# sourceMappingURL=Button
|
|
36
|
+
//# sourceMappingURL=Button-DJ6u1_it.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button
|
|
1
|
+
{"version":3,"file":"Button-DJ6u1_it.js","sources":["../src/components/button/button/Button.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport { ButtonBase, ButtonBaseProps, ButtonBaseVariants } from \"../button-base/ButtonBase\";\nimport { VariantsConfig } from \"@/lib/utils/variants\";\n\ntype ButtonVariants = Pick<ButtonBaseVariants, \"size\">;\n\nconst buttonStyles = tv({\n\tslots: {\n\t\tcontainer: \"flex items-center justify-center gap-2 overflow-hidden\",\n\t\ticon: \"h-4 w-4\"\n\t},\n\tvariants: {\n\t\tsize: {\n\t\t\txs: { icon: \"h-3 w-3\" },\n\t\t\tsm: { icon: \"h-3.5 w-3.5\" },\n\t\t\tmd: {},\n\t\t\tlg: {},\n\t\t\txl: { icon: \"h-5 w-5\", container: \"gap-3\" }\n\t\t}\n\t} satisfies VariantsConfig<ButtonVariants>,\n\tdefaultVariants: {\n\t\tsize: \"md\"\n\t}\n});\n\nexport type ButtonProps = PropsWithChildren<\n\tButtonBaseProps &\n\t\tButtonVariants & {\n\t\t\tstartIcon?: React.ElementType;\n\t\t\tendIcon?: React.ElementType;\n\t\t\tcontainerClassName?: string;\n\t\t\ticonClassName?: string;\n\t\t}\n>;\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n\t({ startIcon: StartIcon, endIcon: EndIcon, size, children, iconClassName, containerClassName, ...props }, ref) => {\n\t\tconst styles = buttonStyles({ size });\n\n\t\tconst startIconEl = StartIcon && <StartIcon className={styles.icon({ className: iconClassName })} />;\n\t\tconst endIconEl = EndIcon && <EndIcon className={styles.icon({ className: iconClassName })} />;\n\n\t\treturn (\n\t\t\t<ButtonBase {...props} size={size} ref={ref}>\n\t\t\t\t<div className={styles.container({ className: containerClassName })}>\n\t\t\t\t\t{startIconEl}\n\t\t\t\t\t{children}\n\t\t\t\t\t{endIconEl}\n\t\t\t\t</div>\n\t\t\t</ButtonBase>\n\t\t);\n\t}\n);\n\nButton.displayName = \"Button\";\n"],"names":["buttonStyles","tv","Button","React","StartIcon","EndIcon","size","children","iconClassName","containerClassName","props","ref","styles","startIconEl","jsx","endIconEl","ButtonBase","jsxs"],"mappings":";;;;AAOA,MAAMA,IAAeC,EAAG;AAAA,EACvB,OAAO;AAAA,IACN,WAAW;AAAA,IACX,MAAM;AAAA,EACP;AAAA,EACA,UAAU;AAAA,IACT,MAAM;AAAA,MACL,IAAI,EAAE,MAAM,UAAU;AAAA,MACtB,IAAI,EAAE,MAAM,cAAc;AAAA,MAC1B,IAAI,CAAC;AAAA,MACL,IAAI,CAAC;AAAA,MACL,IAAI,EAAE,MAAM,WAAW,WAAW,QAAQ;AAAA,IAAA;AAAA,EAE5C;AAAA,EACA,iBAAiB;AAAA,IAChB,MAAM;AAAA,EAAA;AAER,CAAC,GAYYC,IAASC,EAAM;AAAA,EAC3B,CAAC,EAAE,WAAWC,GAAW,SAASC,GAAS,MAAAC,GAAM,UAAAC,GAAU,eAAAC,GAAe,oBAAAC,GAAoB,GAAGC,EAAA,GAASC,MAAQ;AACjH,UAAMC,IAASZ,EAAa,EAAE,MAAAM,GAAM,GAE9BO,IAAcT,KAAa,gBAAAU,EAACV,GAAU,EAAA,WAAWQ,EAAO,KAAK,EAAE,WAAWJ,EAAc,CAAC,EAAG,CAAA,GAC5FO,IAAYV,KAAW,gBAAAS,EAACT,GAAQ,EAAA,WAAWO,EAAO,KAAK,EAAE,WAAWJ,EAAc,CAAC,EAAG,CAAA;AAE5F,WACE,gBAAAM,EAAAE,GAAA,EAAY,GAAGN,GAAO,MAAAJ,GAAY,KAAAK,GAClC,UAAA,gBAAAM,EAAC,OAAI,EAAA,WAAWL,EAAO,UAAU,EAAE,WAAWH,EAAA,CAAoB,GAChE,UAAA;AAAA,MAAAI;AAAA,MACAN;AAAA,MACAQ;AAAA,IAAA,EAAA,CACF,EACD,CAAA;AAAA,EAAA;AAGH;AAEAb,EAAO,cAAc;"}
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { S as u } from "./index-5Bhkapwi.js";
|
|
3
|
+
import c from "react";
|
|
4
|
+
import { T as b } from "./index-BVqs-uqP.js";
|
|
5
|
+
const v = b({
|
|
6
|
+
base: "inline-flex cursor-pointer select-none items-center justify-center overflow-hidden rounded-lg font-medium text-primary-fg transition-all focus-visible:shadow-focus focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
|
|
7
|
+
variants: {
|
|
8
|
+
variant: {
|
|
9
|
+
primary: "bg-primary-accent text-primary-bg shadow-soft-base active:bg-primary-accent-hover lg:hover:bg-primary-accent-hover",
|
|
10
|
+
secondary: "bg-secondary-bg-hover active:bg-primary-bg-hover lg:hover:bg-primary-bg-hover",
|
|
11
|
+
outline: "border border-solid border-secondary-border bg-secondary-bg shadow-soft-sm active:border-primary-border active:bg-secondary-bg-hover lg:hover:border-primary-border lg:hover:bg-secondary-bg-hover",
|
|
12
|
+
ghost: "bg-transparent active:bg-secondary-bg-hover lg:hover:bg-secondary-bg-hover",
|
|
13
|
+
link: "bg-transparent text-muted underline active:text-primary-fg lg:hover:text-primary-fg",
|
|
14
|
+
text: "bg-transparent text-muted active:text-primary-fg lg:hover:text-primary-fg"
|
|
15
|
+
},
|
|
16
|
+
status: {
|
|
17
|
+
default: "",
|
|
18
|
+
info: "text-status-info",
|
|
19
|
+
success: "text-status-success",
|
|
20
|
+
warning: "text-status-warning",
|
|
21
|
+
error: "text-status-error"
|
|
22
|
+
},
|
|
23
|
+
size: {
|
|
24
|
+
xs: "h-7 gap-2 px-2.5 py-1.5 text-xs",
|
|
25
|
+
sm: "h-8 gap-2 px-3 py-2 text-xs",
|
|
26
|
+
md: "h-9 gap-2 px-4 py-2 text-sm",
|
|
27
|
+
lg: "h-10 gap-2 px-5 py-2 text-sm",
|
|
28
|
+
xl: "h-11 gap-3 px-6 py-3 text-base"
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
defaultVariants: {
|
|
32
|
+
variant: "primary",
|
|
33
|
+
size: "md",
|
|
34
|
+
status: "default"
|
|
35
|
+
},
|
|
36
|
+
compoundVariants: [
|
|
37
|
+
/*
|
|
38
|
+
* Statuses
|
|
39
|
+
*/
|
|
40
|
+
// Primary
|
|
41
|
+
{
|
|
42
|
+
variant: "primary",
|
|
43
|
+
status: ["info", "success", "warning", "error"],
|
|
44
|
+
class: "text-white active:text-white lg:hover:text-white"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
variant: "primary",
|
|
48
|
+
status: "info",
|
|
49
|
+
class: "bg-status-info active:bg-status-info-hover lg:hover:bg-status-info-hover"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
variant: "primary",
|
|
53
|
+
status: "success",
|
|
54
|
+
class: "bg-status-success active:bg-status-success-hover lg:hover:bg-status-success-hover"
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
variant: "primary",
|
|
58
|
+
status: "warning",
|
|
59
|
+
class: "bg-status-warning active:bg-status-warning-hover lg:hover:bg-status-warning-hover"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
variant: "primary",
|
|
63
|
+
status: "error",
|
|
64
|
+
class: "bg-status-error active:bg-status-error-hover lg:hover:bg-status-error-hover"
|
|
65
|
+
},
|
|
66
|
+
// Secondary
|
|
67
|
+
{
|
|
68
|
+
variant: "secondary",
|
|
69
|
+
status: "info",
|
|
70
|
+
class: "bg-status-info-bg active:bg-status-info-bg-hover lg:hover:bg-status-info-bg-hover"
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
variant: "secondary",
|
|
74
|
+
status: "success",
|
|
75
|
+
class: "bg-status-success-bg active:bg-status-success-bg-hover lg:hover:bg-status-success-bg-hover"
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
variant: "secondary",
|
|
79
|
+
status: "warning",
|
|
80
|
+
class: "bg-status-warning-bg active:bg-status-warning-bg-hover lg:hover:bg-status-warning-bg-hover"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
variant: "secondary",
|
|
84
|
+
status: "error",
|
|
85
|
+
class: "bg-status-error-bg active:bg-status-error-bg-hover lg:hover:bg-status-error-bg-hover"
|
|
86
|
+
},
|
|
87
|
+
// Outline
|
|
88
|
+
{
|
|
89
|
+
variant: "outline",
|
|
90
|
+
status: "info",
|
|
91
|
+
class: "border-status-info-border active:border-status-info-border active:bg-status-info-bg lg:hover:border-status-info-border lg:hover:bg-status-info-bg"
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
variant: "outline",
|
|
95
|
+
status: "success",
|
|
96
|
+
class: "border-status-success-border active:border-status-success-border active:bg-status-success-bg lg:hover:border-status-success-border lg:hover:bg-status-success-bg"
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
variant: "outline",
|
|
100
|
+
status: "warning",
|
|
101
|
+
class: "border-status-warning-border active:border-status-warning-border active:bg-status-warning-bg lg:hover:border-status-warning-border lg:hover:bg-status-warning-bg"
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
variant: "outline",
|
|
105
|
+
status: "error",
|
|
106
|
+
class: "border-status-error-border active:border-status-error-border active:bg-status-error-bg lg:hover:border-status-error-border lg:hover:bg-status-error-bg"
|
|
107
|
+
},
|
|
108
|
+
// Ghost
|
|
109
|
+
{
|
|
110
|
+
variant: "ghost",
|
|
111
|
+
status: "info",
|
|
112
|
+
class: "text-status-info active:bg-status-info-bg lg:hover:bg-status-info-bg"
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
variant: "ghost",
|
|
116
|
+
status: "success",
|
|
117
|
+
class: "text-status-success active:bg-status-success-bg lg:hover:bg-status-success-bg"
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
variant: "ghost",
|
|
121
|
+
status: "warning",
|
|
122
|
+
class: "text-status-warning active:bg-status-warning-bg lg:hover:bg-status-warning-bg"
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
variant: "ghost",
|
|
126
|
+
status: "error",
|
|
127
|
+
class: "text-status-error active:bg-status-error-bg lg:hover:bg-status-error-bg"
|
|
128
|
+
},
|
|
129
|
+
// Text & Link
|
|
130
|
+
{
|
|
131
|
+
variant: ["text", "link"],
|
|
132
|
+
status: "info",
|
|
133
|
+
class: "text-status-info/70 active:text-status-info lg:hover:text-status-info"
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
variant: ["text", "link"],
|
|
137
|
+
status: "success",
|
|
138
|
+
class: "text-status-success/70 active:text-status-success lg:hover:text-status-success"
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
variant: ["text", "link"],
|
|
142
|
+
status: "warning",
|
|
143
|
+
class: "text-status-warning/70 active:text-status-warning lg:hover:text-status-warning"
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
variant: ["text", "link"],
|
|
147
|
+
status: "error",
|
|
148
|
+
class: "text-status-error/70 active:text-status-error lg:hover:text-status-error"
|
|
149
|
+
}
|
|
150
|
+
]
|
|
151
|
+
}), l = c.forwardRef(
|
|
152
|
+
({ variant: t, size: s, children: r, status: a, className: e, asChild: o = !1, ...i }, g) => /* @__PURE__ */ n(o ? u : "button", { className: v({ variant: t, size: s, status: a, className: e }), ref: g, ...i, children: r })
|
|
153
|
+
);
|
|
154
|
+
l.displayName = "ButtonBase";
|
|
155
|
+
export {
|
|
156
|
+
l as B
|
|
157
|
+
};
|
|
158
|
+
//# sourceMappingURL=ButtonBase-DG_uUg_9.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonBase-DG_uUg_9.js","sources":["../src/components/button/button-base/ButtonBase.tsx"],"sourcesContent":["import { VariantsConfig } from \"@/lib/utils/variants\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport React, { PropsWithChildren } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport interface ButtonBaseVariants {\n\tvariant?: \"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"link\" | \"text\";\n\tstatus?: \"default\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\tsize?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n}\n\nconst buttonBaseStyles = tv({\n\tbase: \"inline-flex cursor-pointer select-none items-center justify-center overflow-hidden rounded-lg font-medium text-primary-fg transition-all focus-visible:shadow-focus focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50\",\n\tvariants: {\n\t\tvariant: {\n\t\t\tprimary:\n\t\t\t\t\"bg-primary-accent text-primary-bg shadow-soft-base active:bg-primary-accent-hover lg:hover:bg-primary-accent-hover\",\n\t\t\tsecondary:\n\t\t\t\t\"bg-secondary-bg-hover active:bg-primary-bg-hover lg:hover:bg-primary-bg-hover\",\n\t\t\toutline:\n\t\t\t\t\"border border-solid border-secondary-border bg-secondary-bg shadow-soft-sm active:border-primary-border active:bg-secondary-bg-hover lg:hover:border-primary-border lg:hover:bg-secondary-bg-hover\",\n\t\t\tghost:\n\t\t\t\t\"bg-transparent active:bg-secondary-bg-hover lg:hover:bg-secondary-bg-hover\",\n\t\t\tlink:\n\t\t\t\t\"bg-transparent text-muted underline active:text-primary-fg lg:hover:text-primary-fg\",\n\t\t\ttext: \"bg-transparent text-muted active:text-primary-fg lg:hover:text-primary-fg\"\n\t\t},\n\t\tstatus: {\n\t\t\tdefault: \"\",\n\t\t\tinfo: \"text-status-info\",\n\t\t\tsuccess: \"text-status-success\",\n\t\t\twarning: \"text-status-warning\",\n\t\t\terror: \"text-status-error\"\n\t\t},\n\t\tsize: {\n\t\t\txs: \"h-7 gap-2 px-2.5 py-1.5 text-xs\",\n\t\t\tsm: \"h-8 gap-2 px-3 py-2 text-xs\",\n\t\t\tmd: \"h-9 gap-2 px-4 py-2 text-sm\",\n\t\t\tlg: \"h-10 gap-2 px-5 py-2 text-sm\",\n\t\t\txl: \"h-11 gap-3 px-6 py-3 text-base\"\n\t\t}\n\t} satisfies VariantsConfig<ButtonBaseVariants>,\n\tdefaultVariants: {\n\t\tvariant: \"primary\",\n\t\tsize: \"md\",\n\t\tstatus: \"default\"\n\t},\n\tcompoundVariants: [\n\t\t/*\n\t\t * Statuses\n\t\t */\n\t\t// Primary\n\t\t{\n\t\t\tvariant: \"primary\",\n\t\t\tstatus: [\"info\", \"success\", \"warning\", \"error\"],\n\t\t\tclass: \"text-white active:text-white lg:hover:text-white\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"primary\",\n\t\t\tstatus: \"info\",\n\t\t\tclass: \"bg-status-info active:bg-status-info-hover lg:hover:bg-status-info-hover\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"primary\",\n\t\t\tstatus: \"success\",\n\t\t\tclass: \"bg-status-success active:bg-status-success-hover lg:hover:bg-status-success-hover\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"primary\",\n\t\t\tstatus: \"warning\",\n\t\t\tclass: \"bg-status-warning active:bg-status-warning-hover lg:hover:bg-status-warning-hover\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"primary\",\n\t\t\tstatus: \"error\",\n\t\t\tclass: \"bg-status-error active:bg-status-error-hover lg:hover:bg-status-error-hover\"\n\t\t},\n\t\t// Secondary\n\t\t{\n\t\t\tvariant: \"secondary\",\n\t\t\tstatus: \"info\",\n\t\t\tclass:\n\t\t\t\t\"bg-status-info-bg active:bg-status-info-bg-hover lg:hover:bg-status-info-bg-hover\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"secondary\",\n\t\t\tstatus: \"success\",\n\t\t\tclass:\n\t\t\t\t\"bg-status-success-bg active:bg-status-success-bg-hover lg:hover:bg-status-success-bg-hover\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"secondary\",\n\t\t\tstatus: \"warning\",\n\t\t\tclass:\n\t\t\t\t\"bg-status-warning-bg active:bg-status-warning-bg-hover lg:hover:bg-status-warning-bg-hover\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"secondary\",\n\t\t\tstatus: \"error\",\n\t\t\tclass:\n\t\t\t\t\"bg-status-error-bg active:bg-status-error-bg-hover lg:hover:bg-status-error-bg-hover\"\n\t\t},\n\t\t// Outline\n\t\t{\n\t\t\tvariant: \"outline\",\n\t\t\tstatus: \"info\",\n\t\t\tclass:\n\t\t\t\t\"border-status-info-border active:border-status-info-border active:bg-status-info-bg lg:hover:border-status-info-border lg:hover:bg-status-info-bg\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"outline\",\n\t\t\tstatus: \"success\",\n\t\t\tclass:\n\t\t\t\t\"border-status-success-border active:border-status-success-border active:bg-status-success-bg lg:hover:border-status-success-border lg:hover:bg-status-success-bg\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"outline\",\n\t\t\tstatus: \"warning\",\n\t\t\tclass:\n\t\t\t\t\"border-status-warning-border active:border-status-warning-border active:bg-status-warning-bg lg:hover:border-status-warning-border lg:hover:bg-status-warning-bg\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"outline\",\n\t\t\tstatus: \"error\",\n\t\t\tclass:\n\t\t\t\t\"border-status-error-border active:border-status-error-border active:bg-status-error-bg lg:hover:border-status-error-border lg:hover:bg-status-error-bg\"\n\t\t},\n\t\t// Ghost\n\t\t{\n\t\t\tvariant: \"ghost\",\n\t\t\tstatus: \"info\",\n\t\t\tclass: \"text-status-info active:bg-status-info-bg lg:hover:bg-status-info-bg\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"ghost\",\n\t\t\tstatus: \"success\",\n\t\t\tclass: \"text-status-success active:bg-status-success-bg lg:hover:bg-status-success-bg\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"ghost\",\n\t\t\tstatus: \"warning\",\n\t\t\tclass: \"text-status-warning active:bg-status-warning-bg lg:hover:bg-status-warning-bg\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"ghost\",\n\t\t\tstatus: \"error\",\n\t\t\tclass: \"text-status-error active:bg-status-error-bg lg:hover:bg-status-error-bg\"\n\t\t},\n\t\t// Text & Link\n\t\t{\n\t\t\tvariant: [\"text\", \"link\"],\n\t\t\tstatus: \"info\",\n\t\t\tclass: \"text-status-info/70 active:text-status-info lg:hover:text-status-info\"\n\t\t},\n\t\t{\n\t\t\tvariant: [\"text\", \"link\"],\n\t\t\tstatus: \"success\",\n\t\t\tclass: \"text-status-success/70 active:text-status-success lg:hover:text-status-success\"\n\t\t},\n\t\t{\n\t\t\tvariant: [\"text\", \"link\"],\n\t\t\tstatus: \"warning\",\n\t\t\tclass: \"text-status-warning/70 active:text-status-warning lg:hover:text-status-warning\"\n\t\t},\n\t\t{\n\t\t\tvariant: [\"text\", \"link\"],\n\t\t\tstatus: \"error\",\n\t\t\tclass: \"text-status-error/70 active:text-status-error lg:hover:text-status-error\"\n\t\t}\n\t]\n});\n\nexport type ButtonBaseProps = React.ButtonHTMLAttributes<HTMLButtonElement> &\n\tButtonBaseVariants & {\n\t\tasChild?: boolean;\n\t};\n\nexport const ButtonBase = React.forwardRef<HTMLButtonElement, PropsWithChildren<ButtonBaseProps>>(\n\t({ variant, size, children, status, className, asChild = false, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"button\";\n\t\treturn (\n\t\t\t<Comp className={buttonBaseStyles({ variant, size, status, className })} ref={ref} {...props}>\n\t\t\t\t{children}\n\t\t\t</Comp>\n\t\t);\n\t}\n);\n\nButtonBase.displayName = \"ButtonBase\";\n"],"names":["buttonBaseStyles","tv","ButtonBase","React","variant","size","children","status","className","asChild","props","ref","jsx","Slot"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ import { F as w } from "./FeatureIcon-yM7FhAXa.js";
|
|
|
3
3
|
import d from "react";
|
|
4
4
|
import { T as F } from "./index-BVqs-uqP.js";
|
|
5
5
|
import { d as T, e as N, b as v, a as y } from "./FormHeader-BA2dJOPS.js";
|
|
6
|
-
import { B as h } from "./Button
|
|
6
|
+
import { B as h } from "./Button-DJ6u1_it.js";
|
|
7
7
|
import { a as b } from "./CheckboxField-C2G3OAEz.js";
|
|
8
8
|
import { e as k } from "./useBreakpoints-D8wKOvil.js";
|
|
9
9
|
const H = F({
|
|
@@ -85,4 +85,4 @@ export {
|
|
|
85
85
|
z as F,
|
|
86
86
|
R as a
|
|
87
87
|
};
|
|
88
|
-
//# sourceMappingURL=FormFooterTemplate-
|
|
88
|
+
//# sourceMappingURL=FormFooterTemplate-CRhbX3NR.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFooterTemplate-
|
|
1
|
+
{"version":3,"file":"FormFooterTemplate-CRhbX3NR.js","sources":["../src/components/form/templates/header-template/FormHeaderTemplate.tsx","../src/components/form/templates/footer-template/FormFooterTemplate.tsx"],"sourcesContent":["import { FeatureIcon } from \"@/components/icon/feature-icon/FeatureIcon\";\nimport { LucideIcon } from \"lucide-react\";\nimport React, { HTMLAttributes, PropsWithChildren } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport { FormDescription, FormHeader, FormTitle } from \"../../components/form-header/FormHeader\";\nimport { VariantsConfig } from \"@/lib/utils/variants\";\n\nexport interface FormHeaderTemplateVariants {\n\talignment?: \"compact\" | \"left\" | \"center\";\n}\n\nconst formHeaderTemplateStyles = tv({\n\tslots: {\n\t\theader: \"flex items-start gap-4\",\n\t\tcontentWrapper: \"flex flex-col gap-px lg:gap-1.5\",\n\t\ticon: \"flex-shrink-0\"\n\t},\n\tvariants: {\n\t\talignment: {\n\t\t\tcompact: {\n\t\t\t\theader: \"flex-row pr-9\"\n\t\t\t},\n\t\t\tleft: {\n\t\t\t\theader: \"flex-col gap-2 lg:gap-4\",\n\t\t\t\tcontentWrapper: \"gap-0.5 lg:gap-1\"\n\t\t\t},\n\t\t\tcenter: {\n\t\t\t\theader: \"flex-col items-center gap-2 text-center lg:gap-4\",\n\t\t\t\tcontentWrapper: \"gap-0.5 lg:gap-1\"\n\t\t\t}\n\t\t}\n\t} satisfies VariantsConfig<FormHeaderTemplateVariants>,\n\tdefaultVariants: {\n\t\talignment: \"compact\"\n\t}\n});\n\nexport type BaseHeaderTemplateProps = Omit<HTMLAttributes<HTMLDivElement>, \"title\"> &\n\tFormHeaderTemplateVariants & {\n\t\t/** Заголовок формы */\n\t\ttitle: React.ReactNode;\n\t\t/** Описание формы */\n\t\tdescription?: React.ReactNode;\n\t\t/** Иконка заголовка */\n\t\ticon?: LucideIcon;\n\t\t/** Кастомная иконка заголовка */\n\t\tcustomIcon?: React.ReactNode;\n\t};\n\nexport const BaseHeaderTemplate = React.forwardRef<HTMLDivElement, PropsWithChildren<BaseHeaderTemplateProps>>(\n\t({ className, icon: Icon, title, alignment, description, customIcon, ...props }, ref) => {\n\t\tconst { header, contentWrapper, icon } = formHeaderTemplateStyles({ alignment });\n\n\t\treturn (\n\t\t\t<FormHeader ref={ref} className={header({ class: className })} {...props}>\n\t\t\t\t{Icon && <FeatureIcon size=\"xl\" type=\"primary\" icon={Icon} className={icon()} />}\n\t\t\t\t{customIcon && customIcon}\n\t\t\t\t<div className={contentWrapper()}>\n\t\t\t\t\t{title}\n\t\t\t\t\t{description}\n\t\t\t\t</div>\n\t\t\t</FormHeader>\n\t\t);\n\t}\n);\n\n/**\n * Темплейт заголовка формы. Содержит иконку, заголовок и описание.\n * Имеет различные варианты расположения элементов\n */\nexport const FormHeaderTemplate = React.forwardRef<HTMLDivElement, PropsWithChildren<BaseHeaderTemplateProps>>(\n\t({ title, description, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BaseHeaderTemplate\n\t\t\t\ttitle={<FormTitle>{title}</FormTitle>}\n\t\t\t\tdescription={<FormDescription>{description}</FormDescription>}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t}\n);\n\nFormHeaderTemplate.displayName = \"FormHeaderTemplate\";\n","import { Button, ButtonProps } from \"@/components/button/button/Button\";\nimport { CheckboxField, CheckboxFieldProps } from \"@/components/checkbox/checkbox-field/CheckboxField\";\nimport { useIsMobile } from \"@/hooks/useBreakpoints\";\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport { FormFooter } from \"../../components/form-footer/FormFooter\";\n\nconst formFooterTemplateStyles = tv({\n\tslots: {\n\t\tcontainer: \"flex w-full flex-col gap-3 lg:flex-row\",\n\t\tstartBlock: \"flex items-center py-1 lg:py-2.5\",\n\t\tendBlock: \"ml-auto flex w-full flex-col gap-3 lg:w-auto lg:flex-row\"\n\t}\n});\n\nexport interface FormFooterTemplateProps {\n\t/** Дополнительные классы */\n\tclassName?: string;\n\t/** Текст для чекбокса */\n\tcheckboxLabel?: string;\n\t/** Пропсы для чекбокса */\n\tcheckboxProps?: CheckboxFieldProps;\n\t/** Основная кнопка */\n\tprimaryButton?: React.ReactNode;\n\t/** Пропсы для основной кнопки */\n\tprimaryButtonProps?: ButtonProps;\n\t/** Вторичная кнопка */\n\tsecondaryButton?: React.ReactNode;\n\t/** Пропсы для вторичной кнопки */\n\tsecondaryButtonProps?: ButtonProps;\n}\n\n/**\n * Темплейт футера формы. Содержит чекбокс и 2 кнопки, которыми можно управлять.\n * Адаптивен к размерам устройств\n */\nexport const FormFooterTemplate = React.forwardRef<HTMLDivElement, FormFooterTemplateProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tprimaryButton,\n\t\t\tsecondaryButton,\n\t\t\tcheckboxLabel,\n\t\t\tcheckboxProps,\n\t\t\tprimaryButtonProps,\n\t\t\tsecondaryButtonProps\n\t\t},\n\t\tref\n\t) => {\n\t\tconst isMobile = useIsMobile();\n\t\tconst { container, startBlock, endBlock } = formFooterTemplateStyles();\n\n\t\tif (isMobile) {\n\t\t\tprimaryButtonProps = { ...primaryButtonProps, size: \"xl\" };\n\t\t\tsecondaryButtonProps = { ...secondaryButtonProps, size: \"xl\" };\n\t\t}\n\t\tconst primaryButtonElement = primaryButton && (\n\t\t\t<Button key=\"primary-button\" variant=\"primary\" {...primaryButtonProps}>\n\t\t\t\t{primaryButton}\n\t\t\t</Button>\n\t\t);\n\n\t\tconst secondaryButtonElement = secondaryButton && (\n\t\t\t<Button key=\"secondary-button\" variant=\"outline\" {...secondaryButtonProps}>\n\t\t\t\t{secondaryButton}\n\t\t\t</Button>\n\t\t);\n\n\t\treturn (\n\t\t\t<FormFooter className={className} ref={ref}>\n\t\t\t\t<div className={container()}>\n\t\t\t\t\t{checkboxLabel && (\n\t\t\t\t\t\t<div className={startBlock()}>\n\t\t\t\t\t\t\t<CheckboxField label={checkboxLabel} {...checkboxProps} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div className={endBlock()}>\n\t\t\t\t\t\t{isMobile\n\t\t\t\t\t\t\t? [primaryButtonElement, secondaryButtonElement]\n\t\t\t\t\t\t\t: [secondaryButtonElement, primaryButtonElement]}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</FormFooter>\n\t\t);\n\t}\n);\n\nFormFooterTemplate.displayName = \"FormFooterTemplate\";\n"],"names":["formHeaderTemplateStyles","tv","BaseHeaderTemplate","React","className","Icon","title","alignment","description","customIcon","props","ref","header","contentWrapper","icon","jsxs","FormHeader","jsx","FeatureIcon","FormHeaderTemplate","FormTitle","FormDescription","formFooterTemplateStyles","FormFooterTemplate","primaryButton","secondaryButton","checkboxLabel","checkboxProps","primaryButtonProps","secondaryButtonProps","isMobile","useIsMobile","container","startBlock","endBlock","primaryButtonElement","Button","secondaryButtonElement","FormFooter","CheckboxField"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as n } from "react/jsx-runtime";
|
|
2
2
|
import m from "react";
|
|
3
3
|
import { T as p } from "./index-BVqs-uqP.js";
|
|
4
|
-
import { B as l } from "./ButtonBase-
|
|
4
|
+
import { B as l } from "./ButtonBase-DG_uUg_9.js";
|
|
5
5
|
import { I as f } from "./Icon-DH3ev9GK.js";
|
|
6
6
|
const u = p({
|
|
7
7
|
slots: {
|
|
@@ -30,4 +30,4 @@ d.displayName = "IconButton";
|
|
|
30
30
|
export {
|
|
31
31
|
d as I
|
|
32
32
|
};
|
|
33
|
-
//# sourceMappingURL=IconButton-
|
|
33
|
+
//# sourceMappingURL=IconButton-Cn6pUFj_.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton-
|
|
1
|
+
{"version":3,"file":"IconButton-Cn6pUFj_.js","sources":["../src/components/button/icon-button/IconButton.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport { ButtonBase, ButtonBaseProps, ButtonBaseVariants } from \"../button-base/ButtonBase\";\nimport { Icon } from \"@/components/icon/Icon\";\nimport { LucideIcon } from \"lucide-react\";\nimport { VariantsConfig } from \"@/lib/utils/variants\";\n\ntype IconButtonVariants = Pick<ButtonBaseVariants, \"size\">;\n\nconst iconButtonVariants = tv({\n\tslots: {\n\t\tcontainer: \"aspect-square\",\n\t\ticon: \"h-4 w-4\"\n\t},\n\tvariants: {\n\t\tsize: {\n\t\t\txs: { container: \"p-1.5\", icon: \"h-3 w-3\" },\n\t\t\tsm: { container: \"p-2\", icon: \"h-3.5 w-3.5\" },\n\t\t\tmd: { container: \"p-2.5\" },\n\t\t\tlg: { container: \"p-3\" },\n\t\t\txl: { container: \"p-3\", icon: \"h-5 w-5\" }\n\t\t}\n\t} satisfies VariantsConfig<IconButtonVariants>,\n\tdefaultVariants: {\n\t\tsize: \"md\"\n\t}\n});\n\nexport type IconButtonProps = ButtonBaseProps &\n\tIconButtonVariants & {\n\t\ticon: LucideIcon;\n\t\ticonClassName?: string;\n\t};\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, PropsWithChildren<IconButtonProps>>(\n\t({ icon, size, className, iconClassName, ...props }, ref) => {\n\t\tconst { container, icon: iconClass } = iconButtonVariants({ size });\n\n\t\treturn (\n\t\t\t<ButtonBase className={container({ class: className })} size={size} ref={ref} {...props}>\n\t\t\t\t<Icon className={iconClass({ size, className: iconClassName })} icon={icon} />\n\t\t\t</ButtonBase>\n\t\t);\n\t}\n);\n\nIconButton.displayName = \"IconButton\";\n"],"names":["iconButtonVariants","tv","IconButton","React","icon","size","className","iconClassName","props","ref","container","iconClass","jsx","ButtonBase","Icon"],"mappings":";;;;;AASA,MAAMA,IAAqBC,EAAG;AAAA,EAC7B,OAAO;AAAA,IACN,WAAW;AAAA,IACX,MAAM;AAAA,EACP;AAAA,EACA,UAAU;AAAA,IACT,MAAM;AAAA,MACL,IAAI,EAAE,WAAW,SAAS,MAAM,UAAU;AAAA,MAC1C,IAAI,EAAE,WAAW,OAAO,MAAM,cAAc;AAAA,MAC5C,IAAI,EAAE,WAAW,QAAQ;AAAA,MACzB,IAAI,EAAE,WAAW,MAAM;AAAA,MACvB,IAAI,EAAE,WAAW,OAAO,MAAM,UAAU;AAAA,IAAA;AAAA,EAE1C;AAAA,EACA,iBAAiB;AAAA,IAChB,MAAM;AAAA,EAAA;AAER,CAAC,GAQYC,IAAaC,EAAM;AAAA,EAC/B,CAAC,EAAE,MAAAC,GAAM,MAAAC,GAAM,WAAAC,GAAW,eAAAC,GAAe,GAAGC,EAAM,GAAGC,MAAQ;AACtD,UAAA,EAAE,WAAAC,GAAW,MAAMC,MAAcX,EAAmB,EAAE,MAAAK,GAAM;AAGjE,WAAA,gBAAAO,EAACC,GAAW,EAAA,WAAWH,EAAU,EAAE,OAAOJ,GAAW,GAAG,MAAAD,GAAY,KAAAI,GAAW,GAAGD,GACjF,UAAC,gBAAAI,EAAAE,GAAA,EAAK,WAAWH,EAAU,EAAE,MAAAN,GAAM,WAAWE,EAAe,CAAA,GAAG,MAAAH,EAAA,CAAY,EAC7E,CAAA;AAAA,EAAA;AAGH;AAEAF,EAAW,cAAc;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as r, jsxs as f } from "react/jsx-runtime";
|
|
2
2
|
import y, { useCallback as i } from "react";
|
|
3
3
|
import { T as h } from "./index-BVqs-uqP.js";
|
|
4
|
-
import { B as D } from "./Button
|
|
4
|
+
import { B as D } from "./Button-DJ6u1_it.js";
|
|
5
5
|
import { I as b } from "./Icon-DH3ev9GK.js";
|
|
6
6
|
import { c as P } from "./createLucideIcon-DwBrHnj9.js";
|
|
7
7
|
import { D as j } from "./download-BHsj218e.js";
|
|
@@ -121,4 +121,4 @@ M.displayName = "ImagePreview";
|
|
|
121
121
|
export {
|
|
122
122
|
M as I
|
|
123
123
|
};
|
|
124
|
-
//# sourceMappingURL=ImagePreview-
|
|
124
|
+
//# sourceMappingURL=ImagePreview-CeZK6kIJ.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImagePreview-
|
|
1
|
+
{"version":3,"file":"ImagePreview-CeZK6kIJ.js","sources":["../node_modules/.pnpm/lucide-react@0.460.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/image-off.js","../src/components/image-uploader/components/ImageUploaderButton.tsx","../src/components/image-preview/ImagePreview.tsx"],"sourcesContent":["/**\n * @license lucide-react v0.460.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst ImageOff = createLucideIcon(\"ImageOff\", [\n [\"line\", { x1: \"2\", x2: \"22\", y1: \"2\", y2: \"22\", key: \"a6p6uj\" }],\n [\"path\", { d: \"M10.41 10.41a2 2 0 1 1-2.83-2.83\", key: \"1bzlo9\" }],\n [\"line\", { x1: \"13.5\", x2: \"6\", y1: \"13.5\", y2: \"21\", key: \"1q0aeu\" }],\n [\"line\", { x1: \"18\", x2: \"21\", y1: \"12\", y2: \"15\", key: \"5mozeu\" }],\n [\n \"path\",\n {\n d: \"M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59\",\n key: \"mmje98\"\n }\n ],\n [\"path\", { d: \"M21 15V5a2 2 0 0 0-2-2H9\", key: \"43el77\" }]\n]);\n\nexport { ImageOff as default };\n//# sourceMappingURL=image-off.js.map\n","import { Button } from \"@/components/button\";\nimport { Icon } from \"@/components/icon\";\nimport { LucideIcon } from \"lucide-react\";\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst imageUploaderButtonStyles = tv({\n\tslots: {\n\t\tcontainer: \"h-4 w-4 rounded-full border border-muted bg-primary-bg p-1\",\n\t\ticon: \"h-2 w-2 stroke-[3px] text-muted\"\n\t}\n});\n\nexport type ImageUploaderButtonProps = React.HTMLAttributes<HTMLButtonElement> & {\n\ticon: LucideIcon;\n};\n\nexport const ImageUploaderButton = React.forwardRef<HTMLButtonElement, ImageUploaderButtonProps>(\n\t({ className, onClick, icon, ...props }, ref) => {\n\t\tconst styles = imageUploaderButtonStyles();\n\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tvariant=\"outline\"\n\t\t\t\tref={ref}\n\t\t\t\tclassName={styles.container({ className })}\n\t\t\t\tonClick={onClick}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<Icon className={styles.icon()} icon={icon} />\n\t\t\t</Button>\n\t\t);\n\t}\n);\n\nImageUploaderButton.displayName = \"ImageUploaderButton\";\n","import React, { useCallback, KeyboardEvent } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport { ImageUploaderButton } from \"../image-uploader/components/ImageUploaderButton\";\nimport { Download, ImageOff, RotateCw, X } from \"lucide-react\";\nimport { Icon } from \"../icon\";\nimport { VariantsConfig } from \"@/lib/utils/variants\";\n\nexport interface ImagePreviewVariants {\n\tsize?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\terror?: boolean;\n}\n\nconst imagePreviewStyles = tv({\n\tslots: {\n\t\tcontainer:\n\t\t\t\"group relative flex aspect-square cursor-pointer items-center justify-center rounded-xl outline-none focus-visible:shadow-focus\",\n\t\timage: \"aspect-square h-full rounded-xl\",\n\t\tbuttonWrapper: \"absolute right-1 top-1 flex gap-1\",\n\t\ticon: \"h-8 w-8 stroke-[1.5px] text-muted\",\n\t\toverlay: \"absolute inset-0 rounded-xl group-hover:bg-slate-900/20\"\n\t},\n\tvariants: {\n\t\terror: {\n\t\t\ttrue: {\n\t\t\t\tcontainer:\n\t\t\t\t\t\"border border-status-error-secondary-border hover:border-status-error-primary-border hover:bg-status-error-bg focus-visible:border-status-error-secondary-border focus-visible:shadow-focus-error\"\n\t\t\t}\n\t\t},\n\t\tsize: {\n\t\t\txs: { container: \"h-[3.75rem] w-[3.75rem]\" },\n\t\t\tsm: { container: \"h-20 w-20\" },\n\t\t\tmd: { container: \"h-[7.5rem] w-[7.5rem]\" },\n\t\t\tlg: { container: \"h-[11.5rem] w-[11.5rem]\" },\n\t\t\txl: { container: \"h-96 w-96\" }\n\t\t}\n\t} satisfies VariantsConfig<ImagePreviewVariants>\n});\n\nexport type ImagePreviewProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"onClick\"> &\n\tImagePreviewVariants & {\n\t\turl: string;\n\t\talt: string;\n\t\treadonly?: boolean;\n\t\tonImageClick?: (e: React.MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>) => void;\n\t\tonDownload?: (url: string) => void;\n\t\tonRetry?: () => void;\n\t\tonClear?: () => void;\n\t};\n\nexport const ImagePreview = React.forwardRef<HTMLDivElement, ImagePreviewProps>(\n\t({ className, error, readonly, onClear, onRetry, size, url, alt, onImageClick, onDownload, ...props }, ref) => {\n\t\tconst styles = imagePreviewStyles({ className, size, error });\n\n\t\tconst handleDownload = useCallback(\n\t\t\t(e: React.MouseEvent<HTMLButtonElement>) => {\n\t\t\t\te.preventDefault();\n\t\t\t\te.stopPropagation();\n\t\t\t\tonDownload?.(url);\n\t\t\t},\n\t\t\t[onDownload, url]\n\t\t);\n\n\t\tconst handleClear = useCallback(\n\t\t\t(e: React.MouseEvent<HTMLButtonElement>) => {\n\t\t\t\te.preventDefault();\n\t\t\t\te.stopPropagation();\n\t\t\t\tonClear?.();\n\t\t\t},\n\t\t\t[onClear]\n\t\t);\n\n\t\tconst handleRetry = useCallback(\n\t\t\t(e: React.MouseEvent<HTMLButtonElement>) => {\n\t\t\t\te.preventDefault();\n\t\t\t\te.stopPropagation();\n\t\t\t\tonRetry?.();\n\t\t\t},\n\t\t\t[onRetry]\n\t\t);\n\n\t\tconst handleKeyDown = useCallback(\n\t\t\t(e: KeyboardEvent<HTMLDivElement>) => {\n\t\t\t\tif (e.key === \"Enter\" || e.key === \" \") {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tonImageClick?.(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[onImageClick]\n\t\t);\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\trole=\"button\"\n\t\t\t\ttabIndex={0}\n\t\t\t\tonClick={onImageClick}\n\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\tclassName={styles.container()}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{!error && <img src={url} alt={alt} className={styles.image()} />}\n\t\t\t\t{!error && <div className={styles.overlay()} />}\n\n\t\t\t\t{error && <Icon icon={ImageOff} className={styles.icon()} />}\n\n\t\t\t\t<div className={styles.buttonWrapper()}>\n\t\t\t\t\t{!error && onDownload && <ImageUploaderButton icon={Download} onClick={handleDownload} />}\n\t\t\t\t\t{error && onRetry && <ImageUploaderButton icon={RotateCw} onClick={handleRetry} />}\n\t\t\t\t\t{!readonly && onClear && <ImageUploaderButton icon={X} onClick={handleClear} />}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n);\n\nImagePreview.displayName = \"ImagePreview\";\n"],"names":["ImageOff","createLucideIcon","imageUploaderButtonStyles","tv","ImageUploaderButton","React","className","onClick","icon","props","ref","styles","jsx","Button","Icon","imagePreviewStyles","ImagePreview","error","readonly","onClear","onRetry","size","url","alt","onImageClick","onDownload","handleDownload","useCallback","handleClear","handleRetry","handleKeyDown","jsxs","Download","RotateCw","X"],"mappings":"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","x_google_ignoreList":[0]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as e, jsxs as C } from "react/jsx-runtime";
|
|
2
2
|
import l, { useRef as d } from "react";
|
|
3
3
|
import { T as p } from "./index-BVqs-uqP.js";
|
|
4
|
-
import { B as f } from "./Button
|
|
4
|
+
import { B as f } from "./Button-DJ6u1_it.js";
|
|
5
5
|
import { I as h } from "./Icon-DH3ev9GK.js";
|
|
6
6
|
import { c as g } from "./cn-dsXlqdJg.js";
|
|
7
7
|
import { I as v } from "./image-BqL5JP90.js";
|
|
@@ -85,4 +85,4 @@ x.displayName = "ImageUploader";
|
|
|
85
85
|
export {
|
|
86
86
|
x as I
|
|
87
87
|
};
|
|
88
|
-
//# sourceMappingURL=ImageUploader-
|
|
88
|
+
//# sourceMappingURL=ImageUploader-Dt6W5mdt.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageUploader-
|
|
1
|
+
{"version":3,"file":"ImageUploader-Dt6W5mdt.js","sources":["../src/components/image-uploader/components/ImageCameraAddSvg.tsx","../src/components/image-uploader/ImageUploader.tsx"],"sourcesContent":["interface ImageCameraAddProps {\n\tclassName?: string;\n}\n\nexport const ImageCameraAddSvg = ({ className }: ImageCameraAddProps) => {\n\treturn (\n\t\t<svg\n\t\t\twidth=\"33\"\n\t\t\theight=\"29\"\n\t\t\tviewBox=\"0 0 33 29\"\n\t\t\tclassName={className}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<path\n\t\t\t\td=\"M27.4463 16.9258C27.9982 16.926 28.4461 17.3739 28.4463 17.9258V21.5322H31.9746C32.5266 21.5325 32.9746 21.9801 32.9746 22.5322C32.9743 23.0841 32.5265 23.5319 31.9746 23.5322H28.4463V27.1377C28.4461 27.6896 27.9982 28.1374 27.4463 28.1377C26.8941 28.1377 26.4465 27.6898 26.4463 27.1377V23.5322H22.918C22.3659 23.5322 21.9182 23.0843 21.918 22.5322C21.918 21.9799 22.3657 21.5322 22.918 21.5322H26.4463V17.9258C26.4465 17.3737 26.8941 16.9258 27.4463 16.9258ZM17.6523 0.0449219C17.9098 0.0739444 18.1484 0.202586 18.3145 0.405273L21.3164 4.06934H24.8047L24.9863 4.07324C25.8909 4.11901 26.7469 4.50459 27.3857 5.1543C28.0666 5.8469 28.4463 6.78361 28.4463 7.75586V12.2402C28.4462 12.7923 27.9983 13.24 27.4463 13.2402C26.894 13.2402 26.4463 12.7925 26.4463 12.2402V7.75586C26.4463 7.30322 26.2686 6.87167 25.959 6.55664C25.6885 6.28172 25.3364 6.11468 24.9648 6.07715L24.8047 6.06934H20.8428C20.5434 6.06934 20.2593 5.93454 20.0693 5.70312L17.0664 2.03906H11.4102L8.4082 5.70312C8.21833 5.93464 7.93419 6.06925 7.63477 6.06934H3.67285C3.24307 6.06934 2.82676 6.24223 2.51758 6.55664C2.20786 6.87168 2.03125 7.30316 2.03125 7.75586V19.8447C2.03127 20.2974 2.20792 20.7289 2.51758 21.0439C2.82675 21.3583 3.2431 21.5322 3.67285 21.5322H17.6348L17.7373 21.5371C18.2412 21.5886 18.6348 22.0147 18.6348 22.5322C18.6345 23.0495 18.2411 23.4749 17.7373 23.5264L17.6348 23.5322H3.67285C2.70169 23.5322 1.77333 23.1393 1.0918 22.4463C0.410823 21.7537 0.03127 20.817 0.03125 19.8447V7.75586C0.03125 6.78353 0.410805 5.84692 1.0918 5.1543C1.77333 4.46129 2.70169 4.06934 3.67285 4.06934H7.16113L10.1631 0.405273L10.2393 0.323242C10.4248 0.142425 10.6745 0.0391387 10.9365 0.0390625H17.54L17.6523 0.0449219ZM14.2383 8.09863C16.9946 8.09879 19.2012 10.3671 19.2012 13.1289C19.201 15.8906 16.9945 18.158 14.2383 18.1582C11.4821 18.158 9.2765 15.8906 9.27637 13.1289C9.27637 10.3671 11.482 8.09885 14.2383 8.09863ZM14.2383 10.0986C12.6184 10.0988 11.2764 11.4397 11.2764 13.1289C11.2765 14.818 12.6184 16.158 14.2383 16.1582C15.8582 16.158 17.201 14.8181 17.2012 13.1289C17.2012 11.4396 15.8582 10.0988 14.2383 10.0986Z\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t/>\n\t\t</svg>\n\t);\n};\n","import React, { useRef } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport { ImageCameraAddSvg } from \"./components/ImageCameraAddSvg\";\nimport { Button } from \"../button\";\nimport { Image } from \"lucide-react\";\nimport { Icon } from \"../icon\";\nimport { cn } from \"@/lib/utils\";\nimport { VariantsConfig } from \"@/lib/utils/variants\";\n\nexport interface ImageUploaderVariants {\n\treadonly?: boolean;\n\terror?: boolean;\n\tsize?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n}\n\nconst imageUploaderStyles = tv({\n\tslots: {\n\t\tcontainer:\n\t\t\t\"group relative flex aspect-square items-center justify-center rounded-xl p-6 hover:shadow-soft-base focus-visible:shadow-focus focus-visible:ring-0\",\n\t\ticon: \"h-8 w-8 stroke-[1.5px] text-muted group-hover:text-primary\",\n\t\tinput: \"hidden\",\n\t\t// Кастомная иконка для состояния загрузки с фиксированными размерами (35 и 33px) и небольшим смещением для визуального баланса\n\t\tcustomIcon: \"h-[2.1875rem] w-[2.0625rem] translate-x-0.5 translate-y-0.5\"\n\t},\n\tvariants: {\n\t\treadonly: {\n\t\t\ttrue: {\n\t\t\t\tcontainer:\n\t\t\t\t\t\"cursor-default bg-secondary-bg-hover hover:border-secondary-border hover:shadow-soft-sm focus-visible:bg-secondary-bg-hover\",\n\t\t\t\ticon: \"group-hover:text-muted\"\n\t\t\t}\n\t\t},\n\t\terror: {\n\t\t\ttrue: {\n\t\t\t\tcontainer:\n\t\t\t\t\t\"border-status-error-secondary-border hover:border-status-error-primary-border hover:bg-status-error-bg focus-visible:border-status-error-secondary-border focus-visible:shadow-focus-error\",\n\t\t\t\ticon: \"group-hover:text-muted\"\n\t\t\t}\n\t\t},\n\t\tsize: {\n\t\t\txs: { container: \"h-[3.75rem] w-[3.75rem]\" },\n\t\t\tsm: { container: \"h-20 w-20\" },\n\t\t\tmd: { container: \"h-[7.5rem] w-[7.5rem]\" },\n\t\t\tlg: { container: \"h-[11.5rem] w-[11.5rem]\" },\n\t\t\txl: { container: \"h-96 w-96\" }\n\t\t}\n\t} satisfies VariantsConfig<ImageUploaderVariants>\n});\n\nexport type ImageUploaderProps = Omit<React.ComponentPropsWithoutRef<typeof Button>, \"onChange\"> &\n\tImageUploaderVariants & {\n\t\tonChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n\t\twhiteList?: string;\n\t};\n\nexport const ImageUploader = React.forwardRef<HTMLButtonElement, ImageUploaderProps>(\n\t({ className, error, readonly, size, onChange, whiteList = \"image/*\", ...props }, ref) => {\n\t\tconst fileInputRef = useRef<HTMLInputElement>(null);\n\t\tconst styles = imageUploaderStyles({ className, readonly, error, size });\n\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tref={ref}\n\t\t\t\ttype=\"button\"\n\t\t\t\tvariant=\"outline\"\n\t\t\t\tclassName={styles.container()}\n\t\t\t\tonClick={() => !readonly && fileInputRef.current?.click()}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<input\n\t\t\t\t\tref={fileInputRef}\n\t\t\t\t\ttype=\"file\"\n\t\t\t\t\tclassName={styles.input()}\n\t\t\t\t\tonChange={onChange}\n\t\t\t\t\taccept={whiteList}\n\t\t\t\t/>\n\n\t\t\t\t{readonly && <Icon icon={Image} className={styles.icon()} />}\n\t\t\t\t{!readonly && <ImageCameraAddSvg className={cn(styles.icon(), styles.customIcon())} />}\n\t\t\t</Button>\n\t\t);\n\t}\n);\n\nImageUploader.displayName = \"ImageUploader\";\n"],"names":["ImageCameraAddSvg","className","jsx","imageUploaderStyles","tv","ImageUploader","React","error","readonly","size","onChange","whiteList","props","ref","fileInputRef","useRef","styles","jsxs","Button","Icon","Image","cn"],"mappings":";;;;;;;AAIO,MAAMA,IAAoB,CAAC,EAAE,WAAAC,QAElC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,WAAAD;AAAA,IACA,MAAK;AAAA,IACL,OAAM;AAAA,IAEN,UAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,GAAE;AAAA,QACF,MAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACN;AACD,GCHIC,IAAsBC,EAAG;AAAA,EAC9B,OAAO;AAAA,IACN,WACC;AAAA,IACD,MAAM;AAAA,IACN,OAAO;AAAA;AAAA,IAEP,YAAY;AAAA,EACb;AAAA,EACA,UAAU;AAAA,IACT,UAAU;AAAA,MACT,MAAM;AAAA,QACL,WACC;AAAA,QACD,MAAM;AAAA,MAAA;AAAA,IAER;AAAA,IACA,OAAO;AAAA,MACN,MAAM;AAAA,QACL,WACC;AAAA,QACD,MAAM;AAAA,MAAA;AAAA,IAER;AAAA,IACA,MAAM;AAAA,MACL,IAAI,EAAE,WAAW,0BAA0B;AAAA,MAC3C,IAAI,EAAE,WAAW,YAAY;AAAA,MAC7B,IAAI,EAAE,WAAW,wBAAwB;AAAA,MACzC,IAAI,EAAE,WAAW,0BAA0B;AAAA,MAC3C,IAAI,EAAE,WAAW,YAAY;AAAA,IAAA;AAAA,EAC9B;AAEF,CAAC,GAQYC,IAAgBC,EAAM;AAAA,EAClC,CAAC,EAAE,WAAAL,GAAW,OAAAM,GAAO,UAAAC,GAAU,MAAAC,GAAM,UAAAC,GAAU,WAAAC,IAAY,WAAW,GAAGC,EAAM,GAAGC,MAAQ;AACnF,UAAAC,IAAeC,EAAyB,IAAI,GAC5CC,IAASb,EAAoB,EAAE,WAAAF,GAAW,UAAAO,GAAU,OAAAD,GAAO,MAAAE,GAAM;AAGtE,WAAA,gBAAAQ;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,KAAAL;AAAA,QACA,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,WAAWG,EAAO,UAAU;AAAA,QAC5B,SAAS,MAAM,CAACR,KAAYM,EAAa,SAAS,MAAM;AAAA,QACvD,GAAGF;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAV;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,KAAKY;AAAA,cACL,MAAK;AAAA,cACL,WAAWE,EAAO,MAAM;AAAA,cACxB,UAAAN;AAAA,cACA,QAAQC;AAAA,YAAA;AAAA,UACT;AAAA,UAECH,uBAAaW,GAAK,EAAA,MAAMC,GAAO,WAAWJ,EAAO,QAAQ;AAAA,UACzD,CAACR,KAAa,gBAAAN,EAAAF,GAAA,EAAkB,WAAWqB,EAAGL,EAAO,KAAQ,GAAAA,EAAO,WAAY,CAAA,EAAG,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACrF;AAAA,EAAA;AAGH;AAEAX,EAAc,cAAc;"}
|
|
@@ -3,7 +3,7 @@ import s, { useRef as d } from "react";
|
|
|
3
3
|
import { T as u } from "./index-BVqs-uqP.js";
|
|
4
4
|
import { u as l, i as b } from "./inputBaseStyles-DbzD_jvq.js";
|
|
5
5
|
import { u as f } from "./useMergeRefs-qoKniYqT.js";
|
|
6
|
-
import { I as c } from "./IconButton-
|
|
6
|
+
import { I as c } from "./IconButton-Cn6pUFj_.js";
|
|
7
7
|
const h = u({
|
|
8
8
|
extend: b,
|
|
9
9
|
base: [
|
|
@@ -134,4 +134,4 @@ export {
|
|
|
134
134
|
w as c,
|
|
135
135
|
N as d
|
|
136
136
|
};
|
|
137
|
-
//# sourceMappingURL=InputGroup-
|
|
137
|
+
//# sourceMappingURL=InputGroup-zJmBoy9c.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputGroup-DPmtpUdR.js","sources":["../src/components/input/input-group/InputGroup.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport { inputBaseElementStyles } from \"../styles/inputBaseStyles\";\nimport { useMergeRefs } from \"@/hooks/useMergeRefs\";\nimport { useCustomValidity } from \"@/hooks/useCustomValidity\";\nimport { IconButton } from \"@/components/button\";\nimport { LucideIcon } from \"lucide-react\";\nimport { ButtonBaseProps } from \"@/components/button/button-base/ButtonBase\";\nimport { VariantsConfig } from \"@/lib/utils/variants\";\n\nconst inputGroupStyles = tv({\n\textend: inputBaseElementStyles,\n\tbase: [\n\t\t\"group/input-group flex h-10 px-0 py-0 lg:h-9 lg:py-0\",\n\t\t\"has-[input:focus]:border-secondary-border has-[input:focus]:bg-secondary-bg has-[input:focus]:shadow-focus\",\n\t\t\"has-[div[data-input-group-element='contenteditable']:focus]:border-secondary-border has-[div[data-input-group-element='contenteditable']:focus]:bg-secondary-bg has-[div[data-input-group-element='contenteditable']:focus]:shadow-focus\",\n\n\t\t// Стили для обычных read-only input'ов (исключая file)\n\t\t\"has-[input:read-only:not([type='file'])]:border-primary-border\",\n\t\t\"has-[input:read-only:not([type='file'])]:bg-secondary-bg-hover\",\n\t\t\"has-[input:read-only:not([type='file'])]:shadow-soft-sm\",\n\t\t\"has-[input:read-only:not([type='file'])]:hover:bg-secondary-bg-hover\",\n\t\t\"has-[input:read-only:not([type='file'])]:has-[input:focus]:!bg-secondary-bg-hover\",\n\t\t\"has-[input:read-only:not([type='file'])]:has-[input:focus]:shadow-focus\",\n\n\t\t\"has-[input:disabled]:border-primary-border\",\n\t\t\"has-[input:disabled]:bg-secondary-bg-hover\",\n\t\t\"has-[input:disabled]:shadow-soft-sm\",\n\t\t\"has-[input:invalid]:border-status-error-secondary-border\",\n\t\t\"has-[input:invalid]:shadow-soft-base\",\n\t\t\"has-[input:invalid]:hover:border-status-error-primary-border\",\n\t\t\"has-[input:invalid]:hover:shadow-soft-base\",\n\t\t\"has-[input:invalid]:has-[input:focus]:border-status-error-secondary-border\",\n\t\t\"has-[input:invalid]:has-[input:focus]:shadow-focus-error\",\n\t\t\"has-[input[aria-invalid=true]]:border-status-error-secondary-border\",\n\t\t\"has-[input[aria-invalid=true]]:shadow-soft-base\",\n\t\t\"has-[input[aria-invalid=true]]:hover:border-status-error-primary-border\",\n\t\t\"has-[input[aria-invalid=true]]:hover:shadow-soft-base\",\n\t\t\"has-[input[aria-invalid=true]]:has-[input:focus]:border-status-error-secondary-border\",\n\t\t\"has-[input[aria-invalid=true]]:has-[input:focus]:shadow-focus-error\",\n\n\t\t// Стили для автозаполнения - применяем фон ко всей группе\n\t\t\"has-[input:-webkit-autofill]:bg-[hsl(var(--autofill-bg))]\",\n\t\t\"has-[input:-webkit-autofill]:has-[input:focus]:bg-[hsl(var(--autofill-bg))]\"\n\t]\n});\n\n/**\n * Контейнер для группировки инпутов с дополнительными элементами (текст, кнопки).\n * Позволяет создавать композиции из инпутов, текстовых блоков и кнопок.\n */\nconst InputGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n\t({ className, children, ...props }, ref) => {\n\t\tconst styles = inputGroupStyles({ className });\n\n\t\treturn (\n\t\t\t<div ref={ref} className={styles} {...props}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t}\n);\n\nInputGroup.displayName = \"InputGroup\";\n\nconst inputGroupInputStyles = tv({\n\tbase: [\n\t\t\"min-w-5 flex-1 rounded-lg bg-transparent py-2.5 pl-3 lg:py-2\",\n\t\t\"outline-none placeholder:text-muted focus:outline-none\",\n\t\t// Градиентная маска для плавного обрезания текста слева\n\t\t\"[mask-image:linear-gradient(to_left,rgba(255,255,255,0),#fff_15%)]\",\n\t\t// Стили для автозаполнения - убираем фон у самого input'а\n\t\t\"[-webkit-autofill]:bg-transparent\",\n\t\t\"[-webkit-autofill]:shadow-none\"\n\t]\n});\n\nexport interface InputGroupInputProps extends React.ComponentProps<\"input\"> {\n\terror?: string;\n}\n\n/**\n * Инпут для использования в группе.\n */\nconst InputGroupInput = React.forwardRef<HTMLInputElement, InputGroupInputProps>(\n\t({ className, error, ...props }, ref) => {\n\t\tconst styles = inputGroupInputStyles({ className });\n\t\tconst inputRef = useRef<HTMLInputElement>(null);\n\t\tconst mergedRef = useMergeRefs(inputRef, ref);\n\n\t\tuseCustomValidity(inputRef, error);\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\tref={mergedRef}\n\t\t\t\tclassName={styles}\n\t\t\t\taria-invalid={!!error}\n\t\t\t\tdata-input-group-element=\"input\"\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t}\n);\n\nInputGroupInput.displayName = \"InputGroup.Input\";\n\ntype InputGroupTextVariants = {\n\ttype?: \"primary\";\n};\n\nconst inputGroupTextStyles = tv({\n\tbase: [\n\t\t\"flex h-full items-center border-l border-secondary-border px-3 text-secondary-fg first:border-l-0\",\n\t\t// Правая граница, если следующий элемент НЕ InputGroupText\n\t\t\"[&[data-input-group-element='text']:has(+_:not([data-input-group-element='text']))]:border-r\"\n\t],\n\tvariants: {\n\t\ttype: {\n\t\t\tprimary: \"rounded-l-lg bg-secondary-bg-hover\"\n\t\t}\n\t} satisfies VariantsConfig<InputGroupTextVariants>\n});\n\ntype InputGroupTextProps = React.ComponentProps<\"div\"> & InputGroupTextVariants;\n\n/**\n * Текстовый элемент для отображения префикса или суффикса в группе инпутов.\n */\nconst InputGroupText = React.forwardRef<HTMLDivElement, InputGroupTextProps>(({ className, type, ...props }, ref) => {\n\tconst styles = inputGroupTextStyles({ className, type });\n\treturn <div ref={ref} className={styles} data-input-group-element=\"text\" {...props} />;\n});\n\nInputGroupText.displayName = \"InputGroup.Text\";\n\nconst inputGroupContentEditableStyles = tv({\n\tbase: [\"bg-transparent py-2.5 pl-3 lg:py-2\", \"outline-none focus:outline-none\"]\n});\n\nexport interface InputGroupContentEditableProps extends React.ComponentProps<\"div\"> {\n\terror?: string;\n}\n\n/**\n * Contenteditable элемент для использования в группе.\n */\nconst InputGroupContentEditable = React.forwardRef<HTMLDivElement, InputGroupContentEditableProps>(\n\t({ className, error, ...props }, ref) => {\n\t\tconst styles = inputGroupContentEditableStyles({ className });\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={styles}\n\t\t\t\tcontentEditable\n\t\t\t\trole=\"textbox\"\n\t\t\t\taria-invalid={!!error}\n\t\t\t\tdata-input-group-element=\"contenteditable\"\n\t\t\t\tsuppressContentEditableWarning={true}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t}\n);\n\nInputGroupContentEditable.displayName = \"InputGroup.ContentEditable\";\n\nconst inputGroupButtonStyles = tv({\n\tbase: [\"aspect-auto h-full px-1.5 py-2.5 first:pl-2.5 last:pr-2.5 lg:py-2\"]\n});\n\ntype InputGroupButtonProps = ButtonBaseProps & {\n\ticon: LucideIcon;\n\ticonClassName?: string;\n};\n\nconst InputGroupButton = React.forwardRef<HTMLButtonElement, InputGroupButtonProps>(\n\t({ icon, className, ...props }, ref) => {\n\t\tconst styles = inputGroupButtonStyles({ className });\n\t\treturn (\n\t\t\t<IconButton\n\t\t\t\tref={ref}\n\t\t\t\ticon={icon}\n\t\t\t\tclassName={styles}\n\t\t\t\tvariant=\"text\"\n\t\t\t\tsize=\"md\"\n\t\t\t\tdata-input-group-element=\"button\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t}\n);\n\nInputGroupButton.displayName = \"InputGroup.Button\";\n\nexport { InputGroupText, InputGroupInput, InputGroup, InputGroupButton, InputGroupContentEditable };\n"],"names":["inputGroupStyles","tv","inputBaseElementStyles","InputGroup","React","className","children","props","ref","styles","inputGroupInputStyles","InputGroupInput","error","inputRef","useRef","mergedRef","useMergeRefs","useCustomValidity","jsx","inputGroupTextStyles","InputGroupText","type","inputGroupContentEditableStyles","InputGroupContentEditable","inputGroupButtonStyles","InputGroupButton","icon","IconButton"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"InputGroup-zJmBoy9c.js","sources":["../src/components/input/input-group/InputGroup.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport { inputBaseElementStyles } from \"../styles/inputBaseStyles\";\nimport { useMergeRefs } from \"@/hooks/useMergeRefs\";\nimport { useCustomValidity } from \"@/hooks/useCustomValidity\";\nimport { IconButton } from \"@/components/button\";\nimport { LucideIcon } from \"lucide-react\";\nimport { ButtonBaseProps } from \"@/components/button/button-base/ButtonBase\";\nimport { VariantsConfig } from \"@/lib/utils/variants\";\n\nconst inputGroupStyles = tv({\n\textend: inputBaseElementStyles,\n\tbase: [\n\t\t\"group/input-group flex h-10 px-0 py-0 lg:h-9 lg:py-0\",\n\t\t\"has-[input:focus]:border-secondary-border has-[input:focus]:bg-secondary-bg has-[input:focus]:shadow-focus\",\n\t\t\"has-[div[data-input-group-element='contenteditable']:focus]:border-secondary-border has-[div[data-input-group-element='contenteditable']:focus]:bg-secondary-bg has-[div[data-input-group-element='contenteditable']:focus]:shadow-focus\",\n\n\t\t// Стили для обычных read-only input'ов (исключая file)\n\t\t\"has-[input:read-only:not([type='file'])]:border-primary-border\",\n\t\t\"has-[input:read-only:not([type='file'])]:bg-secondary-bg-hover\",\n\t\t\"has-[input:read-only:not([type='file'])]:shadow-soft-sm\",\n\t\t\"has-[input:read-only:not([type='file'])]:hover:bg-secondary-bg-hover\",\n\t\t\"has-[input:read-only:not([type='file'])]:has-[input:focus]:!bg-secondary-bg-hover\",\n\t\t\"has-[input:read-only:not([type='file'])]:has-[input:focus]:shadow-focus\",\n\n\t\t\"has-[input:disabled]:border-primary-border\",\n\t\t\"has-[input:disabled]:bg-secondary-bg-hover\",\n\t\t\"has-[input:disabled]:shadow-soft-sm\",\n\t\t\"has-[input:invalid]:border-status-error-secondary-border\",\n\t\t\"has-[input:invalid]:shadow-soft-base\",\n\t\t\"has-[input:invalid]:hover:border-status-error-primary-border\",\n\t\t\"has-[input:invalid]:hover:shadow-soft-base\",\n\t\t\"has-[input:invalid]:has-[input:focus]:border-status-error-secondary-border\",\n\t\t\"has-[input:invalid]:has-[input:focus]:shadow-focus-error\",\n\t\t\"has-[input[aria-invalid=true]]:border-status-error-secondary-border\",\n\t\t\"has-[input[aria-invalid=true]]:shadow-soft-base\",\n\t\t\"has-[input[aria-invalid=true]]:hover:border-status-error-primary-border\",\n\t\t\"has-[input[aria-invalid=true]]:hover:shadow-soft-base\",\n\t\t\"has-[input[aria-invalid=true]]:has-[input:focus]:border-status-error-secondary-border\",\n\t\t\"has-[input[aria-invalid=true]]:has-[input:focus]:shadow-focus-error\",\n\n\t\t// Стили для автозаполнения - применяем фон ко всей группе\n\t\t\"has-[input:-webkit-autofill]:bg-[hsl(var(--autofill-bg))]\",\n\t\t\"has-[input:-webkit-autofill]:has-[input:focus]:bg-[hsl(var(--autofill-bg))]\"\n\t]\n});\n\n/**\n * Контейнер для группировки инпутов с дополнительными элементами (текст, кнопки).\n * Позволяет создавать композиции из инпутов, текстовых блоков и кнопок.\n */\nconst InputGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n\t({ className, children, ...props }, ref) => {\n\t\tconst styles = inputGroupStyles({ className });\n\n\t\treturn (\n\t\t\t<div ref={ref} className={styles} {...props}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t}\n);\n\nInputGroup.displayName = \"InputGroup\";\n\nconst inputGroupInputStyles = tv({\n\tbase: [\n\t\t\"min-w-5 flex-1 rounded-lg bg-transparent py-2.5 pl-3 lg:py-2\",\n\t\t\"outline-none placeholder:text-muted focus:outline-none\",\n\t\t// Градиентная маска для плавного обрезания текста слева\n\t\t\"[mask-image:linear-gradient(to_left,rgba(255,255,255,0),#fff_15%)]\",\n\t\t// Стили для автозаполнения - убираем фон у самого input'а\n\t\t\"[-webkit-autofill]:bg-transparent\",\n\t\t\"[-webkit-autofill]:shadow-none\"\n\t]\n});\n\nexport interface InputGroupInputProps extends React.ComponentProps<\"input\"> {\n\terror?: string;\n}\n\n/**\n * Инпут для использования в группе.\n */\nconst InputGroupInput = React.forwardRef<HTMLInputElement, InputGroupInputProps>(\n\t({ className, error, ...props }, ref) => {\n\t\tconst styles = inputGroupInputStyles({ className });\n\t\tconst inputRef = useRef<HTMLInputElement>(null);\n\t\tconst mergedRef = useMergeRefs(inputRef, ref);\n\n\t\tuseCustomValidity(inputRef, error);\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\tref={mergedRef}\n\t\t\t\tclassName={styles}\n\t\t\t\taria-invalid={!!error}\n\t\t\t\tdata-input-group-element=\"input\"\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t}\n);\n\nInputGroupInput.displayName = \"InputGroup.Input\";\n\ntype InputGroupTextVariants = {\n\ttype?: \"primary\";\n};\n\nconst inputGroupTextStyles = tv({\n\tbase: [\n\t\t\"flex h-full items-center border-l border-secondary-border px-3 text-secondary-fg first:border-l-0\",\n\t\t// Правая граница, если следующий элемент НЕ InputGroupText\n\t\t\"[&[data-input-group-element='text']:has(+_:not([data-input-group-element='text']))]:border-r\"\n\t],\n\tvariants: {\n\t\ttype: {\n\t\t\tprimary: \"rounded-l-lg bg-secondary-bg-hover\"\n\t\t}\n\t} satisfies VariantsConfig<InputGroupTextVariants>\n});\n\ntype InputGroupTextProps = React.ComponentProps<\"div\"> & InputGroupTextVariants;\n\n/**\n * Текстовый элемент для отображения префикса или суффикса в группе инпутов.\n */\nconst InputGroupText = React.forwardRef<HTMLDivElement, InputGroupTextProps>(({ className, type, ...props }, ref) => {\n\tconst styles = inputGroupTextStyles({ className, type });\n\treturn <div ref={ref} className={styles} data-input-group-element=\"text\" {...props} />;\n});\n\nInputGroupText.displayName = \"InputGroup.Text\";\n\nconst inputGroupContentEditableStyles = tv({\n\tbase: [\"bg-transparent py-2.5 pl-3 lg:py-2\", \"outline-none focus:outline-none\"]\n});\n\nexport interface InputGroupContentEditableProps extends React.ComponentProps<\"div\"> {\n\terror?: string;\n}\n\n/**\n * Contenteditable элемент для использования в группе.\n */\nconst InputGroupContentEditable = React.forwardRef<HTMLDivElement, InputGroupContentEditableProps>(\n\t({ className, error, ...props }, ref) => {\n\t\tconst styles = inputGroupContentEditableStyles({ className });\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={styles}\n\t\t\t\tcontentEditable\n\t\t\t\trole=\"textbox\"\n\t\t\t\taria-invalid={!!error}\n\t\t\t\tdata-input-group-element=\"contenteditable\"\n\t\t\t\tsuppressContentEditableWarning={true}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t}\n);\n\nInputGroupContentEditable.displayName = \"InputGroup.ContentEditable\";\n\nconst inputGroupButtonStyles = tv({\n\tbase: [\"aspect-auto h-full px-1.5 py-2.5 first:pl-2.5 last:pr-2.5 lg:py-2\"]\n});\n\ntype InputGroupButtonProps = ButtonBaseProps & {\n\ticon: LucideIcon;\n\ticonClassName?: string;\n};\n\nconst InputGroupButton = React.forwardRef<HTMLButtonElement, InputGroupButtonProps>(\n\t({ icon, className, ...props }, ref) => {\n\t\tconst styles = inputGroupButtonStyles({ className });\n\t\treturn (\n\t\t\t<IconButton\n\t\t\t\tref={ref}\n\t\t\t\ticon={icon}\n\t\t\t\tclassName={styles}\n\t\t\t\tvariant=\"text\"\n\t\t\t\tsize=\"md\"\n\t\t\t\tdata-input-group-element=\"button\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t}\n);\n\nInputGroupButton.displayName = \"InputGroup.Button\";\n\nexport { InputGroupText, InputGroupInput, InputGroup, InputGroupButton, InputGroupContentEditable };\n"],"names":["inputGroupStyles","tv","inputBaseElementStyles","InputGroup","React","className","children","props","ref","styles","inputGroupInputStyles","InputGroupInput","error","inputRef","useRef","mergedRef","useMergeRefs","useCustomValidity","jsx","inputGroupTextStyles","InputGroupText","type","inputGroupContentEditableStyles","InputGroupContentEditable","inputGroupButtonStyles","InputGroupButton","icon","IconButton"],"mappings":"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"}
|
|
@@ -12,7 +12,7 @@ import { P as w } from "./index-CpDnqHCm.js";
|
|
|
12
12
|
import { T as X } from "./index-BVqs-uqP.js";
|
|
13
13
|
import { c as Y } from "./cn-dsXlqdJg.js";
|
|
14
14
|
import { u as oo } from "./usePortalContainer-ae6EzS08.js";
|
|
15
|
-
import { T as eo } from "./TriggerButton-
|
|
15
|
+
import { T as eo } from "./TriggerButton-DyTFjmhE.js";
|
|
16
16
|
var C = "Popover", [y, Mo] = G(C, [
|
|
17
17
|
_
|
|
18
18
|
]), m = _(), [ro, l] = y(C), E = (o) => {
|
|
@@ -255,4 +255,4 @@ export {
|
|
|
255
255
|
Io as c,
|
|
256
256
|
Co as d
|
|
257
257
|
};
|
|
258
|
-
//# sourceMappingURL=Popover-
|
|
258
|
+
//# sourceMappingURL=Popover-ByxEiHD3.js.map
|