@npm_leadtech/legal-contracts-ui 0.101.0 → 0.101.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/components/Checkbox.d.ts +2 -0
  2. package/dist/components/Checkbox.js +11 -7
  3. package/dist/components/ContactFormSection.d.ts +39 -12
  4. package/dist/components/ContactFormSection.js +102 -92
  5. package/dist/components/ContactUsTemplate.d.ts +39 -12
  6. package/dist/components/Input.d.ts +2 -0
  7. package/dist/components/Input.js +38 -26
  8. package/dist/components/Select.d.ts +2 -0
  9. package/dist/components/Select.js +29 -17
  10. package/dist/components/Textarea.d.ts +2 -0
  11. package/dist/components/Textarea.js +30 -11
  12. package/dist/components/Toast.js +1 -1
  13. package/dist/components/index.d.ts +47 -12
  14. package/dist/globals.css +1 -1
  15. package/package.json +1 -1
package/dist/components/Checkbox.d.ts CHANGED
@@ -8,5 +8,7 @@ export declare interface CheckboxProps extends React.InputHTMLAttributes<HTMLInp
8
8
  name: string;
9
9
  required?: boolean;
10
10
  children: ReactNode;
11
+ error?: boolean;
12
+ errorMessage?: string;
11
13
  }
12
14
 
package/dist/components/Checkbox.js CHANGED
@@ -1,18 +1,22 @@
1
1
  import { jsxs as a, jsx as e } from "react/jsx-runtime";
2
- const n = ({ id: t, name: r, required: s = !1, children: i, ...l }) => /* @__PURE__ */ a("label", { className: "text-medium flex items-center gap-3 text-neutral-800", children: [
2
+ import c from "clsx";
3
+ const m = ({ id: r, name: o, required: t = !1, children: s, error: i = !1, ...l }) => /* @__PURE__ */ a("label", { className: "text-medium flex items-center gap-3 text-neutral-800", children: [
3
4
  /* @__PURE__ */ e(
4
5
  "input",
5
6
  {
6
- id: t,
7
+ id: r,
7
8
  type: "checkbox",
8
- name: r,
9
- required: s,
10
- className: "text-primary-700 focus-visible:outline-primary-500 h-5 w-5 rounded border-neutral-400 focus-visible:outline-2",
9
+ name: o,
10
+ required: t,
11
+ className: c(
12
+ "text-primary-700 h-5 w-5 rounded border focus-visible:outline-2",
13
+ i ? "border-error-500 focus-visible:outline-error-500" : "focus-visible:outline-primary-500 border-neutral-400"
14
+ ),
11
15
  ...l
12
16
  }
13
17
  ),
14
- /* @__PURE__ */ e("span", { children: i })
18
+ /* @__PURE__ */ e("span", { children: s })
15
19
  ] });
16
20
  export {
17
- n as Checkbox
21
+ m as Checkbox
18
22
  };
package/dist/components/ContactFormSection.d.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import { ChangeEventHandler } from 'react';
2
+ import { ComponentProps } from 'react';
1
3
  import { ComponentPropsWithRef } from 'react';
2
4
  import { FC } from 'react';
3
5
  import { ReactNode } from 'react';
@@ -13,6 +15,17 @@ export type ButtonSize = 'small' | 'default' | 'large';
13
15
 
14
16
  export type ButtonVariant = 'primary-green' | 'primary-darkgreen' | 'primary-yellow' | 'primary-white' | 'secondary-green' | 'secondary-yellow' | 'secondary-red' | 'secondary-black' | 'tertiary-bold' | 'tertiary-thin' | 'tertiary-icon' | 'tertiary-link' | 'icon-black' | 'icon-grey' | 'icon-mobile';
15
17
 
18
+ export interface ContactFormCheckboxFieldProps extends Omit<ContactFormFieldProps, 'placeholder' | 'tooltip'> {
19
+ checked: boolean;
20
+ onChange: ChangeEventHandler<HTMLInputElement>;
21
+ }
22
+
23
+ export interface ContactFormFeedbackProps {
24
+ message: string;
25
+ title?: string;
26
+ cta?: ReactNode;
27
+ }
28
+
16
29
  export declare interface ContactFormFieldProps {
17
30
  label: string;
18
31
  id: string;
@@ -20,6 +33,7 @@ export declare interface ContactFormFieldProps {
20
33
  placeholder?: string;
21
34
  required?: boolean;
22
35
  tooltip?: string;
36
+ error?: boolean;
23
37
  errorMessage?: string;
24
38
  }
25
39
 
@@ -31,23 +45,36 @@ export declare interface ContactFormSectionProps {
31
45
  label: string;
32
46
  value: string;
33
47
  }[];
34
- fullNameField: Omit<ContactFormFieldProps, 'tooltip'>;
35
- emailField: Omit<ContactFormFieldProps, 'tooltip'>;
36
- referenceNumberField: ContactFormFieldProps;
37
- subjectField: Omit<ContactFormFieldProps, 'tooltip'>;
38
- messageField: Omit<ContactFormFieldProps, 'tooltip'>;
48
+ fullNameField: Omit<ContactFormTextFieldProps, 'tooltip'>;
49
+ emailField: Omit<ContactFormTextFieldProps, 'tooltip'>;
50
+ referenceNumberField: ContactFormTextFieldProps;
51
+ subjectField: ContactFormSelectFieldProps;
52
+ messageField: ContactFormTextareaFieldProps;
39
53
  requiredFieldsText: string;
40
- privacyField: Omit<ContactFormFieldProps, 'tooltip'>;
54
+ privacyField: ContactFormCheckboxFieldProps;
41
55
  securityHint: string;
42
- feedback?: {
43
- type: 'success' | 'error';
44
- message: string;
45
- title?: string;
46
- cta?: ReactNode;
47
- };
56
+ status?: 'default' | 'loading' | 'success' | 'error';
57
+ successFeedback?: ContactFormFeedbackProps;
58
+ errorFeedback?: ContactFormFeedbackProps;
59
+ onSubmit?: ComponentProps<'form'>['onSubmit'];
48
60
  button: ButtonProps;
49
61
  }
50
62
 
63
+ export interface ContactFormSelectFieldProps extends Omit<ContactFormFieldProps, 'tooltip'> {
64
+ value: string;
65
+ onChange: ChangeEventHandler<HTMLSelectElement>;
66
+ }
67
+
68
+ export interface ContactFormTextareaFieldProps extends Omit<ContactFormFieldProps, 'tooltip'> {
69
+ value: string;
70
+ onChange: ChangeEventHandler<HTMLTextAreaElement>;
71
+ }
72
+
73
+ export interface ContactFormTextFieldProps extends ContactFormFieldProps {
74
+ value: string;
75
+ onChange: ChangeEventHandler<HTMLInputElement>;
76
+ }
77
+
51
78
  export type IconPosition = 'left' | 'right' | 'top';
52
79
 
53
80
  export type ResponsiveButtonVariant = ButtonVariant | {
package/dist/components/ContactFormSection.js CHANGED
@@ -1,104 +1,114 @@
1
- import { jsxs as s, jsx as r } from "react/jsx-runtime";
2
- import { Textarea as g } from "./Textarea.js";
3
- import { Checkbox as y } from "./Checkbox.js";
4
- import { Input as m } from "./Input.js";
5
- import { Select as u } from "./Select.js";
6
- import { Markdown as M } from "./Markdown.js";
7
- import { Item as N } from "./Item.js";
8
- import { InfoIcon as v } from "./InfoIcon.js";
9
- import { Button as q } from "./Button.js";
10
- const V = ({
11
- title: n,
12
- subjectOptions: p,
1
+ import { jsxs as t, jsx as e } from "react/jsx-runtime";
2
+ import { Textarea as b } from "./Textarea.js";
3
+ import { Checkbox as g } from "./Checkbox.js";
4
+ import { Input as n } from "./Input.js";
5
+ import { Select as v } from "./Select.js";
6
+ import { Markdown as w } from "./Markdown.js";
7
+ import { InfoIcon as y } from "./InfoIcon.js";
8
+ import { Button as j } from "./Button.js";
9
+ const q = ({
10
+ title: l,
11
+ subjectOptions: m,
13
12
  fullNameField: o,
14
- emailField: l,
15
- referenceNumberField: e,
16
- subjectField: a,
17
- messageField: t,
18
- privacyField: d,
19
- requiredFieldsText: c,
20
- securityHint: h,
21
- feedback: i,
22
- button: x
23
- }) => /* @__PURE__ */ s("section", { className: "rounded-sm bg-white p-8 shadow-sm", children: [
24
- /* @__PURE__ */ s("div", { className: "space-y-4", children: [
25
- /* @__PURE__ */ r("p", { className: "text-big font-bold text-neutral-600", children: n }),
26
- /* @__PURE__ */ r("div", { className: "h-px w-full bg-neutral-200", "aria-hidden": "true" })
13
+ emailField: c,
14
+ referenceNumberField: p,
15
+ subjectField: h,
16
+ messageField: u,
17
+ privacyField: s,
18
+ requiredFieldsText: x,
19
+ securityHint: f,
20
+ status: d = "default",
21
+ successFeedback: r,
22
+ errorFeedback: a,
23
+ onSubmit: N,
24
+ button: i
25
+ }) => d === "success" ? /* @__PURE__ */ t("section", { className: "rounded-sm bg-white p-8 shadow-sm", children: [
26
+ /* @__PURE__ */ t("div", { className: "space-y-4", children: [
27
+ /* @__PURE__ */ e("p", { className: "text-big font-bold text-neutral-600", children: l }),
28
+ /* @__PURE__ */ e("div", { className: "h-px w-full bg-neutral-200", "aria-hidden": "true" })
27
29
  ] }),
28
- /* @__PURE__ */ s("form", { className: "mt-6 flex flex-col gap-6", noValidate: !0, children: [
29
- i && /* @__PURE__ */ r(
30
+ /* @__PURE__ */ t(
31
+ "div",
32
+ {
33
+ role: "status",
34
+ "aria-live": "polite",
35
+ className: "mt-6 rounded border border-green-300 bg-green-50 px-4 py-3 text-green-900",
36
+ children: [
37
+ r?.title && /* @__PURE__ */ e("p", { className: "text-medium mb-1 font-bold", children: r.title }),
38
+ /* @__PURE__ */ e("p", { children: r?.message }),
39
+ r?.cta != null && /* @__PURE__ */ e("div", { className: "mt-2", children: r.cta })
40
+ ]
41
+ }
42
+ )
43
+ ] }) : d === "error" ? /* @__PURE__ */ t("section", { className: "rounded-sm bg-white p-8 shadow-sm", children: [
44
+ /* @__PURE__ */ t("div", { className: "space-y-4", children: [
45
+ /* @__PURE__ */ e("p", { className: "text-big font-bold text-neutral-600", children: l }),
46
+ /* @__PURE__ */ e("div", { className: "h-px w-full bg-neutral-200", "aria-hidden": "true" })
47
+ ] }),
48
+ /* @__PURE__ */ t(
49
+ "div",
50
+ {
51
+ role: "alert",
52
+ "aria-live": "assertive",
53
+ className: "mt-6 rounded border border-red-300 bg-red-50 px-4 py-3 text-red-800",
54
+ children: [
55
+ a?.title && /* @__PURE__ */ e("p", { className: "text-medium mb-1 font-bold", children: a.title }),
56
+ /* @__PURE__ */ e("p", { children: a?.message }),
57
+ a?.cta != null && /* @__PURE__ */ e("div", { className: "mt-2", children: a.cta })
58
+ ]
59
+ }
60
+ )
61
+ ] }) : d === "loading" ? /* @__PURE__ */ t("section", { className: "rounded-sm bg-white p-8 shadow-sm", children: [
62
+ /* @__PURE__ */ t("div", { className: "space-y-4", children: [
63
+ /* @__PURE__ */ e("p", { className: "text-big font-bold text-neutral-600", children: l }),
64
+ /* @__PURE__ */ e("div", { className: "h-px w-full bg-neutral-200", "aria-hidden": "true" })
65
+ ] }),
66
+ /* @__PURE__ */ e(
67
+ "div",
68
+ {
69
+ role: "status",
70
+ "aria-live": "polite",
71
+ className: "mt-6 flex items-center justify-center rounded border border-neutral-200 bg-neutral-50 px-4 py-6 text-neutral-700",
72
+ children: /* @__PURE__ */ e("div", { className: "border-primary-500 h-[25px] w-[25px] animate-spin rounded-full border-3 border-t-transparent" })
73
+ }
74
+ )
75
+ ] }) : /* @__PURE__ */ t("section", { className: "rounded-sm bg-white p-8 shadow-sm", children: [
76
+ /* @__PURE__ */ t("div", { className: "space-y-4", children: [
77
+ /* @__PURE__ */ e("p", { className: "text-big font-bold text-neutral-600", children: l }),
78
+ /* @__PURE__ */ e("div", { className: "h-px w-full bg-neutral-200", "aria-hidden": "true" })
79
+ ] }),
80
+ /* @__PURE__ */ t("form", { className: "mt-6 flex flex-col gap-6", noValidate: !0, onSubmit: N, children: [
81
+ /* @__PURE__ */ e(n, { ...o, type: "text" }),
82
+ /* @__PURE__ */ e(n, { ...c, type: "email" }),
83
+ /* @__PURE__ */ e(n, { ...p }),
84
+ /* @__PURE__ */ e(v, { ...h, options: m }),
85
+ /* @__PURE__ */ e(b, { ...u }),
86
+ /* @__PURE__ */ e("p", { className: "text-medium text-neutral-600", children: x }),
87
+ /* @__PURE__ */ e(g, { ...s, children: /* @__PURE__ */ e(w, { className: "text-medium [&_p:last-child]:mb-0", content: s.label }) }),
88
+ /* @__PURE__ */ t(
30
89
  "div",
31
90
  {
32
- role: "status",
33
- "aria-live": "polite",
34
- className: i.type === "success" ? "rounded border border-green-300 bg-green-50 px-4 py-3 text-green-900" : "rounded border border-red-300 bg-red-50 px-4 py-3 text-red-800",
35
- children: i.message
91
+ id: "security-hint",
92
+ className: "text-small flex items-start gap-2 rounded bg-neutral-50 p-4 text-neutral-600",
93
+ children: [
94
+ /* @__PURE__ */ e(y, { width: 24, height: 24, "aria-hidden": "true" }),
95
+ /* @__PURE__ */ e("p", { children: f })
96
+ ]
36
97
  }
37
98
  ),
38
- /* @__PURE__ */ s("div", { className: "space-y-1", children: [
39
- /* @__PURE__ */ r(m, { ...o, type: "text" }),
40
- o.errorMessage && /* @__PURE__ */ r("p", { id: `${o.id}-error-message`, className: "text-small text-red-700", children: o.errorMessage })
41
- ] }),
42
- /* @__PURE__ */ s("div", { className: "space-y-1", children: [
43
- /* @__PURE__ */ r(m, { ...l, type: "email" }),
44
- l.errorMessage && /* @__PURE__ */ r("p", { id: `${l.id}-error-message`, className: "text-small text-red-700", children: l.errorMessage })
45
- ] }),
46
- /* @__PURE__ */ s("div", { className: "space-y-1", children: [
47
- /* @__PURE__ */ r(
48
- m,
49
- {
50
- label: e.label,
51
- id: e.id,
52
- name: e.name,
53
- type: "text",
54
- placeholder: e.placeholder,
55
- tooltip: e.tooltip,
56
- required: e.required
57
- }
58
- ),
59
- e.errorMessage && /* @__PURE__ */ r("p", { id: `${e.id}-error-message`, className: "text-small text-red-700", children: e.errorMessage })
60
- ] }),
61
- /* @__PURE__ */ s("div", { className: "space-y-1", children: [
62
- /* @__PURE__ */ r(
63
- u,
64
- {
65
- label: a.label,
66
- id: a.id,
67
- name: a.name,
68
- placeholder: a.placeholder,
69
- options: p,
70
- required: a.required
71
- }
72
- ),
73
- a.errorMessage && /* @__PURE__ */ r("p", { id: `${a.id}-error-message`, className: "text-small text-red-700", children: a.errorMessage })
74
- ] }),
75
- /* @__PURE__ */ s("div", { className: "space-y-1", children: [
76
- /* @__PURE__ */ r(
77
- g,
78
- {
79
- label: t.label,
80
- id: t.id,
81
- name: t.name,
82
- placeholder: t.placeholder,
83
- required: t.required
84
- }
85
- ),
86
- t.errorMessage && /* @__PURE__ */ r("p", { id: `${t.id}-error-message`, className: "text-small text-red-700", children: t.errorMessage })
87
- ] }),
88
- /* @__PURE__ */ r("p", { className: "text-medium text-neutral-600", children: c }),
89
- /* @__PURE__ */ r("div", { className: "", children: /* @__PURE__ */ r(y, { id: d.id, name: d.name, required: !0, children: /* @__PURE__ */ r(M, { className: "text-medium [&_p:last-child]:mb-0", content: d.label }) }) }),
90
- /* @__PURE__ */ r(
91
- N,
99
+ /* @__PURE__ */ e(
100
+ j,
92
101
  {
93
- id: "security-hint",
94
- image: /* @__PURE__ */ r(v, { width: 24, height: 24, "aria-hidden": "true" }),
95
- description: h,
96
- className: "text-small flex items-start gap-2 rounded bg-neutral-50 p-4 text-neutral-600"
102
+ ...i,
103
+ variant: "primary-green",
104
+ className: "w-fit self-center",
105
+ type: i.type ?? "submit",
106
+ disabled: i.disabled,
107
+ children: i.children
97
108
  }
98
- ),
99
- /* @__PURE__ */ r(q, { ...x, variant: "primary-green", className: "w-fit self-center" })
109
+ )
100
110
  ] })
101
111
  ] });
102
112
  export {
103
- V as ContactFormSection
113
+ q as ContactFormSection
104
114
  };
package/dist/components/ContactUsTemplate.d.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import { ChangeEventHandler } from 'react';
2
+ import { ComponentProps } from 'react';
1
3
  import { ComponentPropsWithRef } from 'react';
2
4
  import { FC } from 'react';
3
5
  import { ReactNode } from 'react';
@@ -13,6 +15,17 @@ export type ButtonSize = 'small' | 'default' | 'large';
13
15
 
14
16
  export type ButtonVariant = 'primary-green' | 'primary-darkgreen' | 'primary-yellow' | 'primary-white' | 'secondary-green' | 'secondary-yellow' | 'secondary-red' | 'secondary-black' | 'tertiary-bold' | 'tertiary-thin' | 'tertiary-icon' | 'tertiary-link' | 'icon-black' | 'icon-grey' | 'icon-mobile';
15
17
 
18
+ export interface ContactFormCheckboxFieldProps extends Omit<ContactFormFieldProps, 'placeholder' | 'tooltip'> {
19
+ checked: boolean;
20
+ onChange: ChangeEventHandler<HTMLInputElement>;
21
+ }
22
+
23
+ export interface ContactFormFeedbackProps {
24
+ message: string;
25
+ title?: string;
26
+ cta?: ReactNode;
27
+ }
28
+
16
29
  export interface ContactFormFieldProps {
17
30
  label: string;
18
31
  id: string;
@@ -20,6 +33,7 @@ export interface ContactFormFieldProps {
20
33
  placeholder?: string;
21
34
  required?: boolean;
22
35
  tooltip?: string;
36
+ error?: boolean;
23
37
  errorMessage?: string;
24
38
  }
25
39
 
@@ -29,23 +43,36 @@ export interface ContactFormSectionProps {
29
43
  label: string;
30
44
  value: string;
31
45
  }[];
32
- fullNameField: Omit<ContactFormFieldProps, 'tooltip'>;
33
- emailField: Omit<ContactFormFieldProps, 'tooltip'>;
34
- referenceNumberField: ContactFormFieldProps;
35
- subjectField: Omit<ContactFormFieldProps, 'tooltip'>;
36
- messageField: Omit<ContactFormFieldProps, 'tooltip'>;
46
+ fullNameField: Omit<ContactFormTextFieldProps, 'tooltip'>;
47
+ emailField: Omit<ContactFormTextFieldProps, 'tooltip'>;
48
+ referenceNumberField: ContactFormTextFieldProps;
49
+ subjectField: ContactFormSelectFieldProps;
50
+ messageField: ContactFormTextareaFieldProps;
37
51
  requiredFieldsText: string;
38
- privacyField: Omit<ContactFormFieldProps, 'tooltip'>;
52
+ privacyField: ContactFormCheckboxFieldProps;
39
53
  securityHint: string;
40
- feedback?: {
41
- type: 'success' | 'error';
42
- message: string;
43
- title?: string;
44
- cta?: ReactNode;
45
- };
54
+ status?: 'default' | 'loading' | 'success' | 'error';
55
+ successFeedback?: ContactFormFeedbackProps;
56
+ errorFeedback?: ContactFormFeedbackProps;
57
+ onSubmit?: ComponentProps<'form'>['onSubmit'];
46
58
  button: ButtonProps;
47
59
  }
48
60
 
61
+ export interface ContactFormSelectFieldProps extends Omit<ContactFormFieldProps, 'tooltip'> {
62
+ value: string;
63
+ onChange: ChangeEventHandler<HTMLSelectElement>;
64
+ }
65
+
66
+ export interface ContactFormTextareaFieldProps extends Omit<ContactFormFieldProps, 'tooltip'> {
67
+ value: string;
68
+ onChange: ChangeEventHandler<HTMLTextAreaElement>;
69
+ }
70
+
71
+ export interface ContactFormTextFieldProps extends ContactFormFieldProps {
72
+ value: string;
73
+ onChange: ChangeEventHandler<HTMLInputElement>;
74
+ }
75
+
49
76
  export interface ContactMethod {
50
77
  id: string;
51
78
  label?: ReactNode;
package/dist/components/Input.d.ts CHANGED
@@ -13,5 +13,7 @@ export declare interface InputProps extends React.InputHTMLAttributes<HTMLInputE
13
13
  tooltip?: string;
14
14
  onInputChange?: (str: string) => void;
15
15
  containerClassName?: string;
16
+ error?: boolean;
17
+ errorMessage?: string;
16
18
  }
17
19
 
package/dist/components/Input.js CHANGED
@@ -1,23 +1,27 @@
1
- import { jsxs as e, jsx as l } from "react/jsx-runtime";
2
- const f = ({
3
- label: n,
4
- id: t,
5
- name: s,
1
+ import { jsxs as e, jsx as r } from "react/jsx-runtime";
2
+ import { InfoIcon as h } from "./InfoIcon.js";
3
+ import p from "clsx";
4
+ const v = ({
5
+ label: s,
6
+ id: l,
7
+ name: o,
6
8
  type: i = "text",
7
- placeholder: u,
8
- required: r = !1,
9
+ placeholder: c,
10
+ required: t = !1,
9
11
  tooltip: a,
10
- onInputChange: c,
11
- containerClassName: o = "",
12
- ...d
13
- }) => /* @__PURE__ */ e("div", { className: `flex flex-col gap-2 ${o}`, children: [
12
+ onInputChange: d,
13
+ containerClassName: m = "",
14
+ error: n = !1,
15
+ errorMessage: u,
16
+ ...x
17
+ }) => /* @__PURE__ */ e("div", { className: `flex flex-col gap-2 ${m}`, children: [
14
18
  /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: [
15
- /* @__PURE__ */ e("label", { htmlFor: t, className: "font-bold text-neutral-800", children: [
16
- n,
19
+ /* @__PURE__ */ e("label", { htmlFor: l, className: "font-bold text-neutral-800", children: [
20
+ s,
17
21
  " ",
18
- r && /* @__PURE__ */ l("span", { className: "text-neutral-800", children: "*" })
22
+ t && /* @__PURE__ */ r("span", { className: "text-neutral-800", children: "*" })
19
23
  ] }),
20
- a && /* @__PURE__ */ l(
24
+ a && /* @__PURE__ */ r(
21
25
  "span",
22
26
  {
23
27
  className: "text-extra-small inline-flex h-5 w-5 items-center justify-center rounded-full border border-neutral-200 text-neutral-400",
@@ -27,22 +31,30 @@ const f = ({
27
31
  }
28
32
  )
29
33
  ] }),
30
- /* @__PURE__ */ l(
34
+ /* @__PURE__ */ r(
31
35
  "input",
32
36
  {
33
- id: t,
34
- name: s,
37
+ id: l,
38
+ name: o,
35
39
  type: i,
36
- placeholder: u,
37
- required: r,
38
- className: "bg-neutral-25 text-small focus-visible:outline-primary-500 w-full rounded border border-neutral-400 p-3 text-neutral-800 placeholder:text-neutral-600 focus-visible:outline-2",
39
- onChange: (x) => {
40
- c?.(x.target.value);
40
+ placeholder: c,
41
+ required: t,
42
+ className: p(
43
+ "text-small focus-visible:outline-primary-500 w-full rounded border p-3 text-neutral-800 placeholder:text-neutral-600 focus-visible:outline-2",
44
+ n ? "border-error-500 bg-error-25" : "bg-neutral-25 border-neutral-400"
45
+ ),
46
+ onChange: (f) => {
47
+ d?.(f.target.value);
41
48
  },
42
- ...d
49
+ ...x
43
50
  }
44
- )
51
+ ),
52
+ n && /* @__PURE__ */ e("p", { id: `${l}-error-message`, className: "text-small text-error-500 flex items-center gap-1", children: [
53
+ /* @__PURE__ */ r(h, { width: 20, height: 20, fill: "var(--color-error-500)", "aria-hidden": "true" }),
54
+ " ",
55
+ u
56
+ ] })
45
57
  ] });
46
58
  export {
47
- f as Input
59
+ v as Input
48
60
  };
package/dist/components/Select.d.ts CHANGED
@@ -13,5 +13,7 @@ export declare interface SelectProps extends React.SelectHTMLAttributes<HTMLSele
13
13
  value: string;
14
14
  }[];
15
15
  containerClassName?: string;
16
+ error?: boolean;
17
+ errorMessage?: string;
16
18
  }
17
19
 
package/dist/components/Select.js CHANGED
@@ -1,38 +1,50 @@
1
- import { jsxs as l, jsx as e } from "react/jsx-runtime";
2
- import { ChevronDownIcon as d } from "./ChevronDownIcon.js";
3
- const v = ({
4
- label: t,
5
- id: a,
1
+ import { jsxs as r, jsx as e } from "react/jsx-runtime";
2
+ import p from "clsx";
3
+ import { ChevronDownIcon as f } from "./ChevronDownIcon.js";
4
+ import { InfoIcon as h } from "./InfoIcon.js";
5
+ const N = ({
6
+ label: a,
7
+ id: l,
6
8
  name: s,
7
9
  required: i = !1,
8
10
  placeholder: n,
9
- options: o,
10
- containerClassName: c = "",
11
+ options: c,
12
+ containerClassName: m = "",
13
+ error: o = !1,
14
+ errorMessage: d,
11
15
  ...u
12
- }) => /* @__PURE__ */ l("div", { className: `flex flex-col gap-2 ${c}`, children: [
13
- t && /* @__PURE__ */ l("label", { htmlFor: a, className: "text-medium font-bold text-neutral-800", children: [
14
- t,
16
+ }) => /* @__PURE__ */ r("div", { className: `flex flex-col gap-2 ${m}`, children: [
17
+ a && /* @__PURE__ */ r("label", { htmlFor: l, className: "text-medium font-bold text-neutral-800", children: [
18
+ a,
15
19
  " ",
16
20
  i && /* @__PURE__ */ e("span", { className: "text-neutral-800", children: "*" })
17
21
  ] }),
18
- /* @__PURE__ */ l("div", { className: "relative", children: [
19
- /* @__PURE__ */ l(
22
+ /* @__PURE__ */ r("div", { className: "relative", children: [
23
+ /* @__PURE__ */ r(
20
24
  "select",
21
25
  {
22
- id: a,
26
+ id: l,
23
27
  name: s,
24
28
  required: !0,
25
- className: "bg-neutral-25 text-small focus-visible:outline-primary-500 w-full appearance-none rounded border border-neutral-400 py-2 pr-10 pl-4 text-neutral-800 placeholder:text-neutral-400 focus-visible:outline-2",
29
+ className: p(
30
+ "text-small focus-visible:outline-primary-500 w-full appearance-none rounded border py-2 pr-10 pl-4 text-neutral-800 placeholder:text-neutral-600 focus-visible:outline-2",
31
+ o ? "border-error-500 bg-error-25" : "bg-neutral-25 border-neutral-400"
32
+ ),
26
33
  ...u,
27
34
  children: [
28
35
  n && /* @__PURE__ */ e("option", { value: "", disabled: !0, children: n }),
29
- o.map((r) => /* @__PURE__ */ e("option", { value: r.value, children: r.label }, r.value))
36
+ c.map((t) => /* @__PURE__ */ e("option", { value: t.value, children: t.label }, t.value))
30
37
  ]
31
38
  }
32
39
  ),
33
- /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2", children: /* @__PURE__ */ e(d, {}) })
40
+ /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2", children: /* @__PURE__ */ e(f, {}) })
41
+ ] }),
42
+ o && /* @__PURE__ */ r("p", { id: `${l}-error-message`, className: "text-small text-error-500 flex items-center gap-1", children: [
43
+ /* @__PURE__ */ e(h, { width: 20, height: 20, fill: "var(--color-error-500)", "aria-hidden": "true" }),
44
+ " ",
45
+ d
34
46
  ] })
35
47
  ] });
36
48
  export {
37
- v as Select
49
+ N as Select
38
50
  };
package/dist/components/Textarea.d.ts CHANGED
@@ -8,5 +8,7 @@ export declare interface TextareaProps extends React.TextareaHTMLAttributes<HTML
8
8
  name: string;
9
9
  required?: boolean;
10
10
  placeholder?: string;
11
+ error?: boolean;
12
+ errorMessage?: string;
11
13
  }
12
14
 
package/dist/components/Textarea.js CHANGED
@@ -1,22 +1,41 @@
1
- import { jsxs as t, jsx as a } from "react/jsx-runtime";
2
- const i = ({ label: r, id: e, name: s, required: l = !1, placeholder: n, ...o }) => /* @__PURE__ */ t("div", { className: "flex flex-col gap-2", children: [
3
- /* @__PURE__ */ t("label", { htmlFor: e, className: "text-medium font-bold text-neutral-800", children: [
4
- r,
1
+ import { jsxs as r, jsx as l } from "react/jsx-runtime";
2
+ import { InfoIcon as c } from "./InfoIcon.js";
3
+ import x from "clsx";
4
+ const h = ({
5
+ label: o,
6
+ id: e,
7
+ name: s,
8
+ required: t = !1,
9
+ placeholder: n,
10
+ error: a = !1,
11
+ errorMessage: i,
12
+ ...m
13
+ }) => /* @__PURE__ */ r("div", { className: "flex flex-col gap-2", children: [
14
+ /* @__PURE__ */ r("label", { htmlFor: e, className: "text-medium font-bold text-neutral-800", children: [
15
+ o,
5
16
  " ",
6
- l && /* @__PURE__ */ a("span", { className: "text-neutral-800", children: "*" })
17
+ t && /* @__PURE__ */ l("span", { className: "text-neutral-800", children: "*" })
7
18
  ] }),
8
- /* @__PURE__ */ a(
19
+ /* @__PURE__ */ l(
9
20
  "textarea",
10
21
  {
11
22
  id: e,
12
23
  name: s,
13
- required: l,
24
+ required: t,
14
25
  placeholder: n,
15
- className: "bg-neutral-25 text-small focus-visible:outline-primary-500 min-h-32 w-full resize-none rounded border border-neutral-200 px-4 py-2 text-neutral-800 placeholder:text-neutral-400 focus-visible:outline-2",
16
- ...o
26
+ className: x(
27
+ "text-small focus-visible:outline-primary-500 min-h-32 w-full resize-none rounded border p-3 text-neutral-800 placeholder:text-neutral-600 focus-visible:outline-2",
28
+ a ? "border-error-500 bg-error-25" : "bg-neutral-25 border-neutral-400"
29
+ ),
30
+ ...m
17
31
  }
18
- )
32
+ ),
33
+ a && /* @__PURE__ */ r("p", { id: `${e}-error-message`, className: "text-small text-error-500 flex items-center gap-1", children: [
34
+ /* @__PURE__ */ l(c, { width: 20, height: 20, fill: "var(--color-error-500)", "aria-hidden": "true" }),
35
+ " ",
36
+ i
37
+ ] })
19
38
  ] });
20
39
  export {
21
- i as Textarea
40
+ h as Textarea
22
41
  };
package/dist/components/Toast.js CHANGED
@@ -2,9 +2,9 @@
2
2
  import { jsxs as r, jsx as e } from "react/jsx-runtime";
3
3
  import f from "clsx";
4
4
  import { useState as h } from "react";
5
- import { InfoIcon as l } from "./InfoIcon.js";
6
5
  import { DoneCircleIcon as g } from "./DoneCircleIcon.js";
7
6
  import { CloseIcon as p } from "./CloseIcon.js";
7
+ import { InfoIcon as l } from "./InfoIcon.js";
8
8
  const u = {
9
9
  success: {
10
10
  icon: /* @__PURE__ */ e(g, { fill: "white", width: 24, height: 24 }),