@oneplatformdev/ui 0.1.99-beta.298 → 0.1.99-beta.299

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 (11) hide show
  1. package/Form/Form.js +14 -14
  2. package/Form/Form.js.map +1 -1
  3. package/FormInput/FormInput.stories.js +92 -34
  4. package/FormInput/FormInput.stories.js.map +1 -1
  5. package/Input/inputVariants.d.ts.map +1 -1
  6. package/Input/inputVariants.js +4 -5
  7. package/Input/inputVariants.js.map +1 -1
  8. package/Textarea/Textarea.d.ts.map +1 -1
  9. package/Textarea/Textarea.js +19 -18
  10. package/Textarea/Textarea.js.map +1 -1
  11. package/package.json +4 -4
package/Form/Form.js CHANGED
@@ -9,7 +9,7 @@ const S = I, c = s.createContext(
9
9
  ), $ = ({
10
10
  ...e
11
11
  }) => /* @__PURE__ */ m(c.Provider, { value: { name: e.name }, children: /* @__PURE__ */ m(u, { ...e }) }), d = () => {
12
- const e = s.useContext(c), t = s.useContext(l), { getFieldState: o } = F(), r = x({ name: e.name }), n = o(e.name, r);
12
+ const e = s.useContext(c), t = s.useContext(l), { getFieldState: r } = F(), o = x({ name: e.name }), n = r(e.name, o);
13
13
  if (!e)
14
14
  throw new Error("useFormField should be used within <FormField>");
15
15
  const { id: i } = t;
@@ -25,8 +25,8 @@ const S = I, c = s.createContext(
25
25
  {}
26
26
  );
27
27
  function D({ className: e, ...t }) {
28
- const o = s.useId();
29
- return /* @__PURE__ */ m(l.Provider, { value: { id: o }, children: /* @__PURE__ */ m(
28
+ const r = s.useId();
29
+ return /* @__PURE__ */ m(l.Provider, { value: { id: r }, children: /* @__PURE__ */ m(
30
30
  "div",
31
31
  {
32
32
  "data-slot": "form-item",
@@ -39,50 +39,50 @@ function M({
39
39
  className: e,
40
40
  ...t
41
41
  }) {
42
- const { error: o, formItemId: r } = d();
42
+ const { error: r, formItemId: o } = d();
43
43
  return /* @__PURE__ */ m(
44
44
  p,
45
45
  {
46
46
  "data-slot": "form-label",
47
- "data-error": !!o,
48
- className: a(e),
49
- htmlFor: r,
47
+ "data-error": !!r,
48
+ className: a("data-[error=true]:text-destructive", e),
49
+ htmlFor: o,
50
50
  ...t
51
51
  }
52
52
  );
53
53
  }
54
54
  function N({ ...e }) {
55
- const { error: t, formItemId: o, formDescriptionId: r, formMessageId: n } = d();
55
+ const { error: t, formItemId: r, formDescriptionId: o, formMessageId: n } = d();
56
56
  return /* @__PURE__ */ m(
57
57
  f,
58
58
  {
59
59
  "data-slot": "form-control",
60
- id: o,
61
- "aria-describedby": t ? `${r} ${n}` : `${r}`,
60
+ id: r,
61
+ "aria-describedby": t ? `${o} ${n}` : `${o}`,
62
62
  "aria-invalid": !!t,
63
63
  ...e
64
64
  }
65
65
  );
66
66
  }
67
67
  function w({ className: e, ...t }) {
68
- const { formDescriptionId: o } = d();
68
+ const { formDescriptionId: r } = d();
69
69
  return /* @__PURE__ */ m(
70
70
  "p",
71
71
  {
72
72
  "data-slot": "form-description",
73
- id: o,
73
+ id: r,
74
74
  className: a("text-muted-foreground text-sm", e),
75
75
  ...t
76
76
  }
77
77
  );
78
78
  }
79
79
  function P({ className: e, ...t }) {
80
- const { error: o, formMessageId: r } = d(), n = o ? String(o?.message ?? "") : t.children;
80
+ const { error: r, formMessageId: o } = d(), n = r ? String(r?.message ?? "") : t.children;
81
81
  return n ? /* @__PURE__ */ m(
82
82
  "p",
83
83
  {
84
84
  "data-slot": "form-message",
85
- id: r,
85
+ id: o,
86
86
  className: a("text-destructive text-sm", e),
87
87
  ...t,
88
88
  children: n
package/Form/Form.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Form.js","sources":["../../src/Form/Form.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\r\nimport { Slot } from \"@radix-ui/react-slot\"\r\nimport {\r\n Controller,\r\n FormProvider,\r\n useFormContext,\r\n useFormState,\r\n type ControllerProps,\r\n type FieldPath,\r\n type FieldValues,\r\n} from \"react-hook-form\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\"\r\nimport { Label } from \"../Label\"\r\n\r\nconst Form = FormProvider\r\n\r\ntype FormFieldContextValue<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\r\n> = {\r\n name: TName\r\n}\r\n\r\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\r\n {} as FormFieldContextValue\r\n)\r\n\r\nconst FormField = <\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\r\n>({\r\n ...props\r\n }: ControllerProps<TFieldValues, TName>) => {\r\n return (\r\n <FormFieldContext.Provider value={{ name: props.name }}>\r\n <Controller {...props} />\r\n </FormFieldContext.Provider>\r\n )\r\n}\r\n\r\nconst useFormField = () => {\r\n const fieldContext = React.useContext(FormFieldContext)\r\n const itemContext = React.useContext(FormItemContext)\r\n const { getFieldState } = useFormContext()\r\n const formState = useFormState({ name: fieldContext.name })\r\n const fieldState = getFieldState(fieldContext.name, formState)\r\n\r\n if (!fieldContext) {\r\n throw new Error(\"useFormField should be used within <FormField>\")\r\n }\r\n\r\n const { id } = itemContext\r\n\r\n return {\r\n id,\r\n name: fieldContext.name,\r\n formItemId: `${id}-form-item`,\r\n formDescriptionId: `${id}-form-item-description`,\r\n formMessageId: `${id}-form-item-message`,\r\n ...fieldState,\r\n }\r\n}\r\n\r\ntype FormItemContextValue = {\r\n id: string\r\n}\r\n\r\nconst FormItemContext = React.createContext<FormItemContextValue>(\r\n {} as FormItemContextValue\r\n)\r\n\r\nfunction FormItem({ className, ...props }: React.ComponentProps<\"div\">) {\r\n const id = React.useId()\r\n\r\n return (\r\n <FormItemContext.Provider value={{ id }}>\r\n <div\r\n data-slot=\"form-item\"\r\n className={cn(\"flex flex-col gap-2\", className)}\r\n {...props}\r\n />\r\n </FormItemContext.Provider>\r\n )\r\n}\r\n\r\nfunction FormLabel({\r\n className,\r\n ...props\r\n }: React.ComponentProps<typeof LabelPrimitive.Root>) {\r\n const { error, formItemId } = useFormField()\r\n\r\n return (\r\n <Label\r\n data-slot=\"form-label\"\r\n data-error={!!error}\r\n className={cn(className)}\r\n htmlFor={formItemId}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\r\n const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\r\n\r\n return (\r\n <Slot\r\n data-slot=\"form-control\"\r\n id={formItemId}\r\n aria-describedby={\r\n !error\r\n ? `${formDescriptionId}`\r\n : `${formDescriptionId} ${formMessageId}`\r\n }\r\n aria-invalid={!!error}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction FormDescription({ className, ...props }: React.ComponentProps<\"p\">) {\r\n const { formDescriptionId } = useFormField()\r\n\r\n return (\r\n <p\r\n data-slot=\"form-description\"\r\n id={formDescriptionId}\r\n className={cn(\"text-muted-foreground text-sm\", className)}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction FormMessage({ className, ...props }: React.ComponentProps<\"p\">) {\r\n const { error, formMessageId } = useFormField()\r\n const body = error ? String(error?.message ?? \"\") : props.children\r\n\r\n if (!body) {\r\n return null\r\n }\r\n\r\n return (\r\n <p\r\n data-slot=\"form-message\"\r\n id={formMessageId}\r\n className={cn(\"text-destructive text-sm\", className)}\r\n {...props}\r\n >\r\n {body}\r\n </p>\r\n )\r\n}\r\n\r\nexport {\r\n useFormField,\r\n Form,\r\n FormItem,\r\n FormLabel,\r\n FormControl,\r\n FormDescription,\r\n FormMessage,\r\n FormField,\r\n}\r\n"],"names":["Form","FormProvider","FormFieldContext","React","FormField","props","jsx","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","useFormContext","formState","useFormState","fieldState","id","FormItem","className","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","body"],"mappings":"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"}
1
+ {"version":3,"file":"Form.js","sources":["../../src/Form/Form.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\r\nimport { Slot } from \"@radix-ui/react-slot\"\r\nimport {\r\n Controller,\r\n FormProvider,\r\n useFormContext,\r\n useFormState,\r\n type ControllerProps,\r\n type FieldPath,\r\n type FieldValues,\r\n} from \"react-hook-form\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\"\r\nimport { Label } from \"../Label\"\r\n\r\nconst Form = FormProvider\r\n\r\ntype FormFieldContextValue<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\r\n> = {\r\n name: TName\r\n}\r\n\r\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\r\n {} as FormFieldContextValue\r\n)\r\n\r\nconst FormField = <\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\r\n>({\r\n ...props\r\n }: ControllerProps<TFieldValues, TName>) => {\r\n return (\r\n <FormFieldContext.Provider value={{ name: props.name }}>\r\n <Controller {...props} />\r\n </FormFieldContext.Provider>\r\n )\r\n}\r\n\r\nconst useFormField = () => {\r\n const fieldContext = React.useContext(FormFieldContext)\r\n const itemContext = React.useContext(FormItemContext)\r\n const { getFieldState } = useFormContext()\r\n const formState = useFormState({ name: fieldContext.name })\r\n const fieldState = getFieldState(fieldContext.name, formState)\r\n\r\n if (!fieldContext) {\r\n throw new Error(\"useFormField should be used within <FormField>\")\r\n }\r\n\r\n const { id } = itemContext\r\n\r\n return {\r\n id,\r\n name: fieldContext.name,\r\n formItemId: `${id}-form-item`,\r\n formDescriptionId: `${id}-form-item-description`,\r\n formMessageId: `${id}-form-item-message`,\r\n ...fieldState,\r\n }\r\n}\r\n\r\ntype FormItemContextValue = {\r\n id: string\r\n}\r\n\r\nconst FormItemContext = React.createContext<FormItemContextValue>(\r\n {} as FormItemContextValue\r\n)\r\n\r\nfunction FormItem({ className, ...props }: React.ComponentProps<\"div\">) {\r\n const id = React.useId()\r\n\r\n return (\r\n <FormItemContext.Provider value={{ id }}>\r\n <div\r\n data-slot=\"form-item\"\r\n className={cn(\"flex flex-col gap-2\", className)}\r\n {...props}\r\n />\r\n </FormItemContext.Provider>\r\n )\r\n}\r\n\r\nfunction FormLabel({\r\n className,\r\n ...props\r\n }: React.ComponentProps<typeof LabelPrimitive.Root>) {\r\n const { error, formItemId } = useFormField()\r\n\r\n return (\r\n <Label\r\n data-slot=\"form-label\"\r\n data-error={!!error}\r\n className={cn(\"data-[error=true]:text-destructive\", className)}\r\n htmlFor={formItemId}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\r\n const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\r\n\r\n return (\r\n <Slot\r\n data-slot=\"form-control\"\r\n id={formItemId}\r\n aria-describedby={\r\n !error\r\n ? `${formDescriptionId}`\r\n : `${formDescriptionId} ${formMessageId}`\r\n }\r\n aria-invalid={!!error}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction FormDescription({ className, ...props }: React.ComponentProps<\"p\">) {\r\n const { formDescriptionId } = useFormField()\r\n\r\n return (\r\n <p\r\n data-slot=\"form-description\"\r\n id={formDescriptionId}\r\n className={cn(\"text-muted-foreground text-sm\", className)}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction FormMessage({ className, ...props }: React.ComponentProps<\"p\">) {\r\n const { error, formMessageId } = useFormField()\r\n const body = error ? String(error?.message ?? \"\") : props.children\r\n\r\n if (!body) {\r\n return null\r\n }\r\n\r\n return (\r\n <p\r\n data-slot=\"form-message\"\r\n id={formMessageId}\r\n className={cn(\"text-destructive text-sm\", className)}\r\n {...props}\r\n >\r\n {body}\r\n </p>\r\n )\r\n}\r\n\r\nexport {\r\n useFormField,\r\n Form,\r\n FormItem,\r\n FormLabel,\r\n FormControl,\r\n FormDescription,\r\n FormMessage,\r\n FormField,\r\n}\r\n"],"names":["Form","FormProvider","FormFieldContext","React","FormField","props","jsx","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","useFormContext","formState","useFormState","fieldState","id","FormItem","className","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","body"],"mappings":"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"}
package/FormInput/FormInput.stories.js CHANGED
@@ -1,18 +1,20 @@
1
- import { jsx as e, jsxs as a } from "react/jsx-runtime";
2
- import { useEffect as c } from "react";
3
- import { useForm as s, FormProvider as m } from "react-hook-form";
4
- import { FormInput as n } from "./FormInput.js";
5
- function d({ initialValue: o = "", ...r }) {
6
- const t = s({
1
+ import { jsx as r, jsxs as l } from "react/jsx-runtime";
2
+ import { useEffect as i } from "react";
3
+ import { useForm as n, FormProvider as m } from "react-hook-form";
4
+ import { FormInput as o } from "./FormInput.js";
5
+ import { FormTextarea as c } from "../FormTextarea/FormTextarea.js";
6
+ import { Button as d } from "../Button/Button.js";
7
+ function f({ initialValue: e = "", ...t }) {
8
+ const a = n({
7
9
  defaultValues: {
8
- name: o
10
+ name: e
9
11
  }
10
- }), l = t.watch("name");
11
- return /* @__PURE__ */ e(m, { ...t, children: /* @__PURE__ */ a("div", { className: "max-w-sm space-y-3", children: [
12
- /* @__PURE__ */ e(
13
- n,
12
+ }), s = a.watch("name");
13
+ return /* @__PURE__ */ r(m, { ...a, children: /* @__PURE__ */ l("div", { className: "max-w-sm space-y-3", children: [
14
+ /* @__PURE__ */ r(
15
+ o,
14
16
  {
15
- form: t,
17
+ form: a,
16
18
  name: "name",
17
19
  counter: !0,
18
20
  maxLength: 255,
@@ -20,19 +22,19 @@ function d({ initialValue: o = "", ...r }) {
20
22
  label: "Label"
21
23
  }
22
24
  ),
23
- /* @__PURE__ */ a("div", { className: "text-xs text-muted-foreground", children: [
25
+ /* @__PURE__ */ l("div", { className: "text-xs text-muted-foreground", children: [
24
26
  "value: ",
25
- /* @__PURE__ */ e("span", { className: "font-mono", children: l })
27
+ /* @__PURE__ */ r("span", { className: "font-mono", children: s })
26
28
  ] }),
27
- /* @__PURE__ */ a("div", { className: "text-xs text-muted-foreground", children: [
29
+ /* @__PURE__ */ l("div", { className: "text-xs text-muted-foreground", children: [
28
30
  "length: ",
29
- /* @__PURE__ */ e("span", { className: "font-mono", children: l?.length ?? 0 })
31
+ /* @__PURE__ */ r("span", { className: "font-mono", children: s?.length ?? 0 })
30
32
  ] })
31
33
  ] }) });
32
34
  }
33
- const g = {
35
+ const w = {
34
36
  title: "FormInput",
35
- component: n,
37
+ component: o,
36
38
  parameters: {
37
39
  layout: "centered"
38
40
  },
@@ -50,31 +52,87 @@ const g = {
50
52
  onPastePrepare: { control: !1 }
51
53
  },
52
54
  decorators: [
53
- (o) => /* @__PURE__ */ e("div", { className: "p-6 w-[420px]", children: /* @__PURE__ */ e(o, {}) })
55
+ (e) => /* @__PURE__ */ r("div", { className: "p-6 w-[420px]", children: /* @__PURE__ */ r(e, {}) })
54
56
  ]
55
- }, v = {
56
- render: (o) => /* @__PURE__ */ e(d, { ...o })
57
+ }, I = {
58
+ render: (e) => /* @__PURE__ */ r(f, { ...e })
57
59
  };
58
- function i(o) {
59
- const r = s({ defaultValues: { name: "" } });
60
- return c(() => {
61
- r.setError("name", { message: "Це поле обовʼязкове" });
62
- }, []), /* @__PURE__ */ e(m, { ...r, children: /* @__PURE__ */ e("div", { className: "max-w-sm", children: /* @__PURE__ */ e(
63
- n,
60
+ function p(e) {
61
+ const t = n({ defaultValues: { name: "" } });
62
+ return i(() => {
63
+ t.setError("name", { message: "Це поле обовʼязкове" });
64
+ }, []), /* @__PURE__ */ r(m, { ...t, children: /* @__PURE__ */ r("div", { className: "max-w-sm", children: /* @__PURE__ */ r(
65
+ o,
64
66
  {
65
- form: r,
67
+ form: t,
66
68
  name: "name",
67
69
  label: "Label",
68
- ...o
70
+ ...e
69
71
  }
70
72
  ) }) });
71
73
  }
72
- const b = {
73
- render: (o) => /* @__PURE__ */ e(i, { ...o })
74
+ const V = {
75
+ render: (e) => /* @__PURE__ */ r(p, { ...e })
76
+ }, u = (e) => {
77
+ const t = {};
78
+ return e.email?.trim() ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.email.trim()) || (t.email = { type: "pattern", message: "Невірний формат пошти" }) : t.email = { type: "required", message: "Обовʼязкове поле" }, e.fullName?.trim() || (t.fullName = { type: "required", message: "Обовʼязкове поле" }), e.description?.trim() ? e.description.trim().length < 10 && (t.description = { type: "minLength", message: "Мінімум 10 символів" }) : t.description = { type: "required", message: "Обовʼязкове поле" }, {
79
+ values: Object.keys(t).length ? {} : e,
80
+ errors: t
81
+ };
82
+ };
83
+ function h() {
84
+ const e = n({
85
+ mode: "onTouched",
86
+ resolver: u,
87
+ defaultValues: { email: "", fullName: "", description: "" }
88
+ }), { isValid: t, isSubmitting: a } = e.formState;
89
+ return /* @__PURE__ */ r(m, { ...e, children: /* @__PURE__ */ l(
90
+ "form",
91
+ {
92
+ className: "max-w-sm space-y-4",
93
+ onSubmit: e.handleSubmit(() => {
94
+ alert("Форму надіслано ✅");
95
+ }),
96
+ children: [
97
+ /* @__PURE__ */ r(
98
+ o,
99
+ {
100
+ form: e,
101
+ name: "email",
102
+ label: "Email",
103
+ placeholder: "name@example.com"
104
+ }
105
+ ),
106
+ /* @__PURE__ */ r(
107
+ o,
108
+ {
109
+ form: e,
110
+ name: "fullName",
111
+ label: "Імʼя",
112
+ placeholder: "Іван Петренко"
113
+ }
114
+ ),
115
+ /* @__PURE__ */ r(
116
+ c,
117
+ {
118
+ form: e,
119
+ name: "description",
120
+ label: "Опис",
121
+ placeholder: "Мінімум 10 символів"
122
+ }
123
+ ),
124
+ /* @__PURE__ */ r(d, { type: "submit", disabled: !t || a, className: "w-full", children: "Зберегти" })
125
+ ]
126
+ }
127
+ ) });
128
+ }
129
+ const E = {
130
+ render: () => /* @__PURE__ */ r(h, {})
74
131
  };
75
132
  export {
76
- v as Default,
77
- b as WithError,
78
- g as default
133
+ I as Default,
134
+ E as HybridValidation,
135
+ V as WithError,
136
+ w as default
79
137
  };
80
138
  //# sourceMappingURL=FormInput.stories.js.map
package/FormInput/FormInput.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FormInput.stories.js","sources":["../../src/FormInput/FormInput.stories.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\r\nimport type { Meta, StoryObj } from '@storybook/react';\r\nimport { FormProvider, useForm } from 'react-hook-form';\r\n\r\nimport { FormInput } from './FormInput';\r\n\r\ntype FormValues = {\r\n name: string;\r\n};\r\n\r\ntype ControlledProps = Omit<\r\n React.ComponentProps<typeof FormInput<FormValues>>,\r\n 'form' | 'name'\r\n> & {\r\n initialValue?: string;\r\n};\r\n\r\nfunction ControlledFormInput({ initialValue = '', ...args }: ControlledProps) {\r\n const form = useForm<FormValues>({\r\n defaultValues: {\r\n name: initialValue,\r\n },\r\n });\r\n\r\n const value = form.watch('name');\r\n const tooltip = \"UX/UI принципи, композиція, типографіка, колір, дизайн-системи та робота з інтерфейсами\"\r\n return (\r\n <FormProvider {...form}>\r\n <div className=\"max-w-sm space-y-3\">\r\n <FormInput<FormValues>\r\n form={form}\r\n name=\"name\"\r\n counter\r\n maxLength={255}\r\n tooltip={tooltip}\r\n label={\"Label\"}\r\n />\r\n\r\n <div className=\"text-xs text-muted-foreground\">\r\n value: <span className=\"font-mono\">{value}</span>\r\n </div>\r\n\r\n <div className=\"text-xs text-muted-foreground\">\r\n length: <span className=\"font-mono\">\r\n {value?.length ?? 0}\r\n </span>\r\n </div>\r\n </div>\r\n </FormProvider>\r\n );\r\n}\r\n\r\nconst meta = {\r\n title: 'FormInput',\r\n component: FormInput,\r\n parameters: {\r\n layout: 'centered',\r\n },\r\n args: {\r\n label: 'Input label',\r\n placeholder: 'Type something...',\r\n disabled: false,\r\n },\r\n argTypes: {\r\n form: { control: false },\r\n name: { control: false },\r\n onChange: { control: false },\r\n onBlur: { control: false },\r\n onPaste: { control: false },\r\n onPastePrepare: { control: false },\r\n },\r\n decorators: [\r\n (Story) => (\r\n <div className=\"p-6 w-[420px]\">\r\n <Story />\r\n </div>\r\n ),\r\n ],\r\n} satisfies Meta<typeof FormInput>;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\nexport const Default: Story = {\r\n render: (args) => <ControlledFormInput {...args} />,\r\n};\r\n\r\nfunction FormInputWithError(args: ControlledProps) {\r\n const form = useForm<FormValues>({ defaultValues: { name: '' } });\r\n\r\n useEffect(() => {\r\n form.setError('name', { message: 'Це поле обовʼязкове' });\r\n }, []);\r\n\r\n return (\r\n <FormProvider {...form}>\r\n <div className=\"max-w-sm\">\r\n <FormInput<FormValues>\r\n form={form}\r\n name=\"name\"\r\n label=\"Label\"\r\n {...args}\r\n />\r\n </div>\r\n </FormProvider>\r\n );\r\n}\r\n\r\nexport const WithError: Story = {\r\n render: (args) => <FormInputWithError {...args} />,\r\n};\r\n"],"names":["ControlledFormInput","initialValue","args","form","useForm","value","FormProvider","jsxs","jsx","FormInput","meta","Story","Default","FormInputWithError","useEffect","WithError"],"mappings":";;;;AAiBA,SAASA,EAAoB,EAAE,cAAAC,IAAe,IAAI,GAAGC,KAAyB;AAC5E,QAAMC,IAAOC,EAAoB;AAAA,IAC/B,eAAe;AAAA,MACb,MAAMH;AAAA,IAAA;AAAA,EACR,CACD,GAEKI,IAAQF,EAAK,MAAM,MAAM;AAE/B,2BACGG,GAAA,EAAc,GAAGH,GAChB,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAAN;AAAA,QACA,MAAK;AAAA,QACL,SAAO;AAAA,QACP,WAAW;AAAA,QACX,SATQ;AAAA,QAUR,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAGT,gBAAAI,EAAC,OAAA,EAAI,WAAU,iCAAgC,UAAA;AAAA,MAAA;AAAA,MACtC,gBAAAC,EAAC,QAAA,EAAK,WAAU,aAAa,UAAAH,EAAA,CAAM;AAAA,IAAA,GAC5C;AAAA,IAEA,gBAAAE,EAAC,OAAA,EAAI,WAAU,iCAAgC,UAAA;AAAA,MAAA;AAAA,wBACpC,QAAA,EAAK,WAAU,aACrB,UAAAF,GAAO,UAAU,EAAA,CACpB;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;AAEA,MAAMK,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWD;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,EAAA;AAAA,EAEZ,UAAU;AAAA,IACR,MAAM,EAAE,SAAS,GAAA;AAAA,IACjB,MAAM,EAAE,SAAS,GAAA;AAAA,IACjB,UAAU,EAAE,SAAS,GAAA;AAAA,IACrB,QAAQ,EAAE,SAAS,GAAA;AAAA,IACnB,SAAS,EAAE,SAAS,GAAA;AAAA,IACpB,gBAAgB,EAAE,SAAS,GAAA;AAAA,EAAM;AAAA,EAEnC,YAAY;AAAA,IACV,CAACE,MACC,gBAAAH,EAAC,OAAA,EAAI,WAAU,iBACb,UAAA,gBAAAA,EAACG,KAAM,EAAA,CACT;AAAA,EAAA;AAGN,GAMaC,IAAiB;AAAA,EAC5B,QAAQ,CAACV,MAAS,gBAAAM,EAACR,GAAA,EAAqB,GAAGE,EAAA,CAAM;AACnD;AAEA,SAASW,EAAmBX,GAAuB;AACjD,QAAMC,IAAOC,EAAoB,EAAE,eAAe,EAAE,MAAM,GAAA,GAAM;AAEhE,SAAAU,EAAU,MAAM;AACd,IAAAX,EAAK,SAAS,QAAQ,EAAE,SAAS,uBAAuB;AAAA,EAC1D,GAAG,CAAA,CAAE,qBAGFG,GAAA,EAAc,GAAGH,GAChB,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,YACb,UAAA,gBAAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAN;AAAA,MACA,MAAK;AAAA,MACL,OAAM;AAAA,MACL,GAAGD;AAAA,IAAA;AAAA,EAAA,GAER,EAAA,CACF;AAEJ;AAEO,MAAMa,IAAmB;AAAA,EAC9B,QAAQ,CAACb,MAAS,gBAAAM,EAACK,GAAA,EAAoB,GAAGX,EAAA,CAAM;AAClD;"}
1
+ {"version":3,"file":"FormInput.stories.js","sources":["../../src/FormInput/FormInput.stories.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\r\nimport type { Meta, StoryObj } from '@storybook/react';\r\nimport { FormProvider, useForm } from 'react-hook-form';\r\n\r\nimport { FormInput } from './FormInput';\r\nimport { FormTextarea } from '../FormTextarea';\r\nimport { Button } from '../Button';\r\n\r\ntype FormValues = {\r\n name: string;\r\n};\r\n\r\ntype ControlledProps = Omit<\r\n React.ComponentProps<typeof FormInput<FormValues>>,\r\n 'form' | 'name'\r\n> & {\r\n initialValue?: string;\r\n};\r\n\r\nfunction ControlledFormInput({ initialValue = '', ...args }: ControlledProps) {\r\n const form = useForm<FormValues>({\r\n defaultValues: {\r\n name: initialValue,\r\n },\r\n });\r\n\r\n const value = form.watch('name');\r\n const tooltip = \"UX/UI принципи, композиція, типографіка, колір, дизайн-системи та робота з інтерфейсами\"\r\n return (\r\n <FormProvider {...form}>\r\n <div className=\"max-w-sm space-y-3\">\r\n <FormInput<FormValues>\r\n form={form}\r\n name=\"name\"\r\n counter\r\n maxLength={255}\r\n tooltip={tooltip}\r\n label={\"Label\"}\r\n />\r\n\r\n <div className=\"text-xs text-muted-foreground\">\r\n value: <span className=\"font-mono\">{value}</span>\r\n </div>\r\n\r\n <div className=\"text-xs text-muted-foreground\">\r\n length: <span className=\"font-mono\">\r\n {value?.length ?? 0}\r\n </span>\r\n </div>\r\n </div>\r\n </FormProvider>\r\n );\r\n}\r\n\r\nconst meta = {\r\n title: 'FormInput',\r\n component: FormInput,\r\n parameters: {\r\n layout: 'centered',\r\n },\r\n args: {\r\n label: 'Input label',\r\n placeholder: 'Type something...',\r\n disabled: false,\r\n },\r\n argTypes: {\r\n form: { control: false },\r\n name: { control: false },\r\n onChange: { control: false },\r\n onBlur: { control: false },\r\n onPaste: { control: false },\r\n onPastePrepare: { control: false },\r\n },\r\n decorators: [\r\n (Story) => (\r\n <div className=\"p-6 w-[420px]\">\r\n <Story />\r\n </div>\r\n ),\r\n ],\r\n} satisfies Meta<typeof FormInput>;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\nexport const Default: Story = {\r\n render: (args) => <ControlledFormInput {...args} />,\r\n};\r\n\r\nfunction FormInputWithError(args: ControlledProps) {\r\n const form = useForm<FormValues>({ defaultValues: { name: '' } });\r\n\r\n useEffect(() => {\r\n form.setError('name', { message: 'Це поле обовʼязкове' });\r\n }, []);\r\n\r\n return (\r\n <FormProvider {...form}>\r\n <div className=\"max-w-sm\">\r\n <FormInput<FormValues>\r\n form={form}\r\n name=\"name\"\r\n label=\"Label\"\r\n {...args}\r\n />\r\n </div>\r\n </FormProvider>\r\n );\r\n}\r\n\r\nexport const WithError: Story = {\r\n render: (args) => <FormInputWithError {...args} />,\r\n};\r\n\r\n// Демонстрація гібридної моделі валідації (feat/1856):\r\n// - помилка з'являється на blur (mode: \"onTouched\")\r\n// - зникає миттєво при виправленні (on change), щойно значення стає валідним\r\n// - червона рамка + текст помилки під полем\r\n// - кнопка submit disabled, поки форма невалідна\r\ntype HybridValues = {\r\n email: string;\r\n fullName: string;\r\n description: string;\r\n};\r\n\r\nconst hybridResolver = (values: HybridValues) => {\r\n const errors: Record<string, { type: string; message: string }> = {};\r\n\r\n if (!values.email?.trim()) {\r\n errors.email = { type: 'required', message: \"Обовʼязкове поле\" };\r\n } else if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(values.email.trim())) {\r\n errors.email = { type: 'pattern', message: 'Невірний формат пошти' };\r\n }\r\n\r\n if (!values.fullName?.trim()) {\r\n errors.fullName = { type: 'required', message: \"Обовʼязкове поле\" };\r\n }\r\n\r\n if (!values.description?.trim()) {\r\n errors.description = { type: 'required', message: \"Обовʼязкове поле\" };\r\n } else if (values.description.trim().length < 10) {\r\n errors.description = { type: 'minLength', message: 'Мінімум 10 символів' };\r\n }\r\n\r\n return {\r\n values: Object.keys(errors).length ? {} : values,\r\n errors,\r\n };\r\n};\r\n\r\nfunction HybridValidationForm() {\r\n const form = useForm<HybridValues>({\r\n mode: 'onTouched',\r\n resolver: hybridResolver,\r\n defaultValues: { email: '', fullName: '', description: '' },\r\n });\r\n\r\n const { isValid, isSubmitting } = form.formState;\r\n\r\n return (\r\n <FormProvider {...form}>\r\n <form\r\n className=\"max-w-sm space-y-4\"\r\n onSubmit={form.handleSubmit(() => {\r\n alert('Форму надіслано ✅');\r\n })}\r\n >\r\n <FormInput<HybridValues>\r\n form={form}\r\n name=\"email\"\r\n label=\"Email\"\r\n placeholder=\"name@example.com\"\r\n />\r\n <FormInput<HybridValues>\r\n form={form}\r\n name=\"fullName\"\r\n label=\"Імʼя\"\r\n placeholder=\"Іван Петренко\"\r\n />\r\n <FormTextarea<HybridValues>\r\n form={form}\r\n name=\"description\"\r\n label=\"Опис\"\r\n placeholder=\"Мінімум 10 символів\"\r\n />\r\n <Button type=\"submit\" disabled={!isValid || isSubmitting} className=\"w-full\">\r\n Зберегти\r\n </Button>\r\n </form>\r\n </FormProvider>\r\n );\r\n}\r\n\r\nexport const HybridValidation: Story = {\r\n render: () => <HybridValidationForm />,\r\n};\r\n"],"names":["ControlledFormInput","initialValue","args","form","useForm","value","FormProvider","jsxs","jsx","FormInput","meta","Story","Default","FormInputWithError","useEffect","WithError","hybridResolver","values","errors","HybridValidationForm","isValid","isSubmitting","FormTextarea","Button","HybridValidation"],"mappings":"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"}
package/Input/inputVariants.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"inputVariants.d.ts","sourceRoot":"","sources":["../../src/Input/inputVariants.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;;8EAoBzB,CAAC"}
1
+ {"version":3,"file":"inputVariants.d.ts","sourceRoot":"","sources":["../../src/Input/inputVariants.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;;8EAmBzB,CAAC"}
package/Input/inputVariants.js CHANGED
@@ -1,11 +1,10 @@
1
- import { cva as r } from "class-variance-authority";
2
- const t = r(
1
+ import { cva as e } from "class-variance-authority";
2
+ const r = e(
3
3
  [
4
4
  "flex h-10 w-full rounded-lg border border-input px-3 py-2",
5
5
  "text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground",
6
6
  "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
7
- "group-data-[state=invalid]/form-control:border-destructive",
8
- "group-data-[state=valid]/form-control:border-input",
7
+ "aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive",
9
8
  "box-border"
10
9
  ],
11
10
  {
@@ -21,6 +20,6 @@ const t = r(
21
20
  }
22
21
  );
23
22
  export {
24
- t as inputVariants
23
+ r as inputVariants
25
24
  };
26
25
  //# sourceMappingURL=inputVariants.js.map
package/Input/inputVariants.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"inputVariants.js","sources":["../../src/Input/inputVariants.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\r\n\r\nexport const inputVariants = cva(\r\n [\r\n 'flex h-10 w-full rounded-lg border border-input px-3 py-2',\r\n 'text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground',\r\n 'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\r\n 'group-data-[state=invalid]/form-control:border-destructive',\r\n 'group-data-[state=valid]/form-control:border-input',\r\n 'box-border',\r\n ],\r\n {\r\n variants: {\r\n variant: {\r\n default: 'bg-background',\r\n grey: 'bg-slate-200',\r\n },\r\n },\r\n defaultVariants: {\r\n variant: 'default',\r\n },\r\n }\r\n);\r\n"],"names":["inputVariants","cva"],"mappings":";AAEO,MAAMA,IAAgBC;AAAA,EAC3B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;"}
1
+ {"version":3,"file":"inputVariants.js","sources":["../../src/Input/inputVariants.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\r\n\r\nexport const inputVariants = cva(\r\n [\r\n 'flex h-10 w-full rounded-lg border border-input px-3 py-2',\r\n 'text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground',\r\n 'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\r\n 'aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive',\r\n 'box-border',\r\n ],\r\n {\r\n variants: {\r\n variant: {\r\n default: 'bg-background',\r\n grey: 'bg-slate-200',\r\n },\r\n },\r\n defaultVariants: {\r\n variant: 'default',\r\n },\r\n }\r\n);\r\n"],"names":["inputVariants","cva"],"mappings":";AAEO,MAAMA,IAAgBC;AAAA,EAC3B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;"}
package/Textarea/Textarea.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,QAAA,MAAM,QAAQ,wGA2Eb,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
1
+ {"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,QAAA,MAAM,QAAQ,wGA4Eb,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
package/Textarea/Textarea.js CHANGED
@@ -1,62 +1,63 @@
1
1
  import { jsxs as d, Fragment as v, jsx as A } from "react/jsx-runtime";
2
2
  import * as w from "react";
3
3
  import { useId as y, useRef as z, useState as F, useImperativeHandle as N, useEffect as T } from "react";
4
- import { cn as m } from "@oneplatformdev/utils";
4
+ import { cn as f } from "@oneplatformdev/utils";
5
5
  import { useAutosizeTextArea as C } from "./useAutosizeTextArea.js";
6
6
  const R = w.forwardRef(
7
- (f, c) => {
7
+ (m, c) => {
8
8
  const {
9
9
  className: g,
10
10
  value: r = "",
11
11
  maxHeight: a = Number.MAX_SAFE_INTEGER,
12
- minHeight: i = 40,
12
+ minHeight: o = 40,
13
13
  resizeble: x = !1,
14
- counter: n = !0,
15
- id: s = "",
14
+ counter: s = !0,
15
+ id: n = "",
16
16
  onChange: p,
17
17
  onTransform: l,
18
- ...o
19
- } = f, u = y(), t = z(null), [b, h] = F("");
18
+ ...i
19
+ } = m, u = y(), t = z(null), [b, h] = F("");
20
20
  return C({
21
21
  textAreaRef: t,
22
22
  triggerAutoSize: b,
23
23
  maxHeight: a,
24
- minHeight: i
24
+ minHeight: o
25
25
  }), N(c, () => ({
26
26
  ...t.current ?? {},
27
27
  textArea: t.current,
28
28
  focus: () => t?.current?.focus(),
29
29
  maxHeight: a,
30
- minHeight: i
30
+ minHeight: o
31
31
  })), T(() => {
32
32
  h(r);
33
- }, [o?.defaultValue, r]), /* @__PURE__ */ d(v, { children: [
33
+ }, [i?.defaultValue, r]), /* @__PURE__ */ d(v, { children: [
34
34
  /* @__PURE__ */ A(
35
35
  "textarea",
36
36
  {
37
- id: s || u,
38
- ...o,
37
+ id: n || u,
38
+ ...i,
39
39
  ref: t,
40
40
  value: r,
41
41
  onChange: (e) => {
42
42
  typeof l?.(e.target.value, e) == "string" && (e.target.value = l(e.target.value, e)), p?.(e);
43
43
  },
44
- className: m(
44
+ className: f(
45
45
  "flex min-h-10 w-full px-3 py-2 text-base relative md:text-sm",
46
46
  "rounded-lg border border-input bg-[#FCFCFC] shadow-none",
47
+ "aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive",
47
48
  "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
48
49
  "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring",
49
50
  x ? "resize" : "resize-none overflow-hidden!",
50
- n && "pb-1",
51
+ s && "pb-1",
51
52
  g
52
53
  )
53
54
  }
54
55
  ),
55
- n && typeof o?.maxLength == "number" && /* @__PURE__ */ d(
56
+ s && typeof i?.maxLength == "number" && /* @__PURE__ */ d(
56
57
  "label",
57
58
  {
58
- htmlFor: s || u,
59
- className: m(
59
+ htmlFor: n || u,
60
+ className: f(
60
61
  "w-full text-right inline-flex items-center justify-end",
61
62
  "text-xs font-medium leading-[1.2] text-muted-foreground",
62
63
  "peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -64,7 +65,7 @@ const R = w.forwardRef(
64
65
  children: [
65
66
  String(r || "").length,
66
67
  " / ",
67
- o?.maxLength
68
+ i?.maxLength
68
69
  ]
69
70
  }
70
71
  )
package/Textarea/Textarea.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Textarea.js","sources":["../../src/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { useEffect, useId, useImperativeHandle, useRef, useState } from 'react';\r\nimport { cn } from '@oneplatformdev/utils';\r\n\r\nimport { TextareaProps } from './Textarea.types';\r\nimport { useAutosizeTextArea } from './useAutosizeTextArea';\r\n\r\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\r\n (textareaProps, ref) => {\r\n const {\r\n className,\r\n value = '',\r\n maxHeight = Number.MAX_SAFE_INTEGER,\r\n minHeight = 40,\r\n resizeble = false,\r\n counter = true,\r\n id: customId = '',\r\n onChange,\r\n onTransform,\r\n ...props\r\n } = textareaProps;\r\n const id = useId();\r\n const textAreaRef = useRef<HTMLTextAreaElement | null>(null);\r\n const [triggerAutoSize, setTriggerAutoSize] = useState('');\r\n\r\n useAutosizeTextArea({\r\n textAreaRef,\r\n triggerAutoSize: triggerAutoSize,\r\n maxHeight,\r\n minHeight,\r\n });\r\n\r\n useImperativeHandle(ref, () => ({\r\n ...((textAreaRef.current ?? {}) as HTMLTextAreaElement),\r\n textArea: textAreaRef.current as HTMLTextAreaElement,\r\n focus: () => textAreaRef?.current?.focus(),\r\n maxHeight,\r\n minHeight,\r\n }));\r\n\r\n useEffect(() => {\r\n setTriggerAutoSize(value as string);\r\n }, [props?.defaultValue, value]);\r\n\r\n return (\r\n <>\r\n <textarea\r\n id={customId || id}\r\n {...props}\r\n ref={textAreaRef}\r\n value={value}\r\n onChange={(e) => {\r\n if (typeof onTransform?.(e.target.value, e) === 'string') {\r\n e.target.value = onTransform(e.target.value, e);\r\n }\r\n onChange?.(e);\r\n }}\r\n className={cn(\r\n 'flex min-h-10 w-full px-3 py-2 text-base relative md:text-sm',\r\n 'rounded-lg border border-input bg-[#FCFCFC] shadow-none',\r\n 'placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',\r\n 'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring',\r\n resizeble ? 'resize' : 'resize-none overflow-hidden!',\r\n counter && 'pb-1',\r\n className\r\n )}\r\n />\r\n {counter && typeof props?.maxLength === 'number' && (\r\n <label\r\n htmlFor={customId || id}\r\n className={cn(\r\n 'w-full text-right inline-flex items-center justify-end',\r\n 'text-xs font-medium leading-[1.2] text-muted-foreground',\r\n 'peer-disabled:cursor-not-allowed peer-disabled:opacity-70'\r\n )}\r\n >\r\n {String(value || '').length} / {props?.maxLength}\r\n </label>\r\n )}\r\n </>\r\n );\r\n }\r\n);\r\nTextarea.displayName = 'Textarea';\r\n\r\nexport { Textarea };\r\n"],"names":["Textarea","React","textareaProps","ref","className","value","maxHeight","minHeight","resizeble","counter","customId","onChange","onTransform","props","id","useId","textAreaRef","useRef","triggerAutoSize","setTriggerAutoSize","useState","useAutosizeTextArea","useImperativeHandle","useEffect","jsxs","Fragment","jsx","cn"],"mappings":";;;;;AAOA,MAAMA,IAAWC,EAAM;AAAA,EACrB,CAACC,GAAeC,MAAQ;AACtB,UAAM;AAAA,MACJ,WAAAC;AAAA,MACA,OAAAC,IAAQ;AAAA,MACR,WAAAC,IAAY,OAAO;AAAA,MACnB,WAAAC,IAAY;AAAA,MACZ,WAAAC,IAAY;AAAA,MACZ,SAAAC,IAAU;AAAA,MACV,IAAIC,IAAW;AAAA,MACf,UAAAC;AAAA,MACA,aAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDX,GACEY,IAAKC,EAAA,GACLC,IAAcC,EAAmC,IAAI,GACrD,CAACC,GAAiBC,CAAkB,IAAIC,EAAS,EAAE;AAEzD,WAAAC,EAAoB;AAAA,MAClB,aAAAL;AAAA,MACA,iBAAAE;AAAA,MACA,WAAAZ;AAAA,MACA,WAAAC;AAAA,IAAA,CACD,GAEDe,EAAoBnB,GAAK,OAAO;AAAA,MAC9B,GAAKa,EAAY,WAAW,CAAA;AAAA,MAC5B,UAAUA,EAAY;AAAA,MACtB,OAAO,MAAMA,GAAa,SAAS,MAAA;AAAA,MACnC,WAAAV;AAAA,MACA,WAAAC;AAAA,IAAA,EACA,GAEFgB,EAAU,MAAM;AACd,MAAAJ,EAAmBd,CAAe;AAAA,IACpC,GAAG,CAACQ,GAAO,cAAcR,CAAK,CAAC,GAG7B,gBAAAmB,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIhB,KAAYI;AAAA,UACf,GAAGD;AAAA,UACJ,KAAKG;AAAA,UACL,OAAAX;AAAA,UACA,UAAU,CAAC,MAAM;AACf,YAAI,OAAOO,IAAc,EAAE,OAAO,OAAO,CAAC,KAAM,aAC9C,EAAE,OAAO,QAAQA,EAAY,EAAE,OAAO,OAAO,CAAC,IAEhDD,IAAW,CAAC;AAAA,UACd;AAAA,UACA,WAAWgB;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACAnB,IAAY,WAAW;AAAA,YACvBC,KAAW;AAAA,YACXL;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,MAEDK,KAAW,OAAOI,GAAO,aAAc,YACtC,gBAAAW;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASd,KAAYI;AAAA,UACrB,WAAWa;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAGD,UAAA;AAAA,YAAA,OAAOtB,KAAS,EAAE,EAAE;AAAA,YAAO;AAAA,YAAIQ,GAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACzC,GAEJ;AAAA,EAEJ;AACF;AACAb,EAAS,cAAc;"}
1
+ {"version":3,"file":"Textarea.js","sources":["../../src/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { useEffect, useId, useImperativeHandle, useRef, useState } from 'react';\r\nimport { cn } from '@oneplatformdev/utils';\r\n\r\nimport { TextareaProps } from './Textarea.types';\r\nimport { useAutosizeTextArea } from './useAutosizeTextArea';\r\n\r\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\r\n (textareaProps, ref) => {\r\n const {\r\n className,\r\n value = '',\r\n maxHeight = Number.MAX_SAFE_INTEGER,\r\n minHeight = 40,\r\n resizeble = false,\r\n counter = true,\r\n id: customId = '',\r\n onChange,\r\n onTransform,\r\n ...props\r\n } = textareaProps;\r\n const id = useId();\r\n const textAreaRef = useRef<HTMLTextAreaElement | null>(null);\r\n const [triggerAutoSize, setTriggerAutoSize] = useState('');\r\n\r\n useAutosizeTextArea({\r\n textAreaRef,\r\n triggerAutoSize: triggerAutoSize,\r\n maxHeight,\r\n minHeight,\r\n });\r\n\r\n useImperativeHandle(ref, () => ({\r\n ...((textAreaRef.current ?? {}) as HTMLTextAreaElement),\r\n textArea: textAreaRef.current as HTMLTextAreaElement,\r\n focus: () => textAreaRef?.current?.focus(),\r\n maxHeight,\r\n minHeight,\r\n }));\r\n\r\n useEffect(() => {\r\n setTriggerAutoSize(value as string);\r\n }, [props?.defaultValue, value]);\r\n\r\n return (\r\n <>\r\n <textarea\r\n id={customId || id}\r\n {...props}\r\n ref={textAreaRef}\r\n value={value}\r\n onChange={(e) => {\r\n if (typeof onTransform?.(e.target.value, e) === 'string') {\r\n e.target.value = onTransform(e.target.value, e);\r\n }\r\n onChange?.(e);\r\n }}\r\n className={cn(\r\n 'flex min-h-10 w-full px-3 py-2 text-base relative md:text-sm',\r\n 'rounded-lg border border-input bg-[#FCFCFC] shadow-none',\r\n 'aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive',\r\n 'placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',\r\n 'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring',\r\n resizeble ? 'resize' : 'resize-none overflow-hidden!',\r\n counter && 'pb-1',\r\n className\r\n )}\r\n />\r\n {counter && typeof props?.maxLength === 'number' && (\r\n <label\r\n htmlFor={customId || id}\r\n className={cn(\r\n 'w-full text-right inline-flex items-center justify-end',\r\n 'text-xs font-medium leading-[1.2] text-muted-foreground',\r\n 'peer-disabled:cursor-not-allowed peer-disabled:opacity-70'\r\n )}\r\n >\r\n {String(value || '').length} / {props?.maxLength}\r\n </label>\r\n )}\r\n </>\r\n );\r\n }\r\n);\r\nTextarea.displayName = 'Textarea';\r\n\r\nexport { Textarea };\r\n"],"names":["Textarea","React","textareaProps","ref","className","value","maxHeight","minHeight","resizeble","counter","customId","onChange","onTransform","props","id","useId","textAreaRef","useRef","triggerAutoSize","setTriggerAutoSize","useState","useAutosizeTextArea","useImperativeHandle","useEffect","jsxs","Fragment","jsx","cn"],"mappings":";;;;;AAOA,MAAMA,IAAWC,EAAM;AAAA,EACrB,CAACC,GAAeC,MAAQ;AACtB,UAAM;AAAA,MACJ,WAAAC;AAAA,MACA,OAAAC,IAAQ;AAAA,MACR,WAAAC,IAAY,OAAO;AAAA,MACnB,WAAAC,IAAY;AAAA,MACZ,WAAAC,IAAY;AAAA,MACZ,SAAAC,IAAU;AAAA,MACV,IAAIC,IAAW;AAAA,MACf,UAAAC;AAAA,MACA,aAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDX,GACEY,IAAKC,EAAA,GACLC,IAAcC,EAAmC,IAAI,GACrD,CAACC,GAAiBC,CAAkB,IAAIC,EAAS,EAAE;AAEzD,WAAAC,EAAoB;AAAA,MAClB,aAAAL;AAAA,MACA,iBAAAE;AAAA,MACA,WAAAZ;AAAA,MACA,WAAAC;AAAA,IAAA,CACD,GAEDe,EAAoBnB,GAAK,OAAO;AAAA,MAC9B,GAAKa,EAAY,WAAW,CAAA;AAAA,MAC5B,UAAUA,EAAY;AAAA,MACtB,OAAO,MAAMA,GAAa,SAAS,MAAA;AAAA,MACnC,WAAAV;AAAA,MACA,WAAAC;AAAA,IAAA,EACA,GAEFgB,EAAU,MAAM;AACd,MAAAJ,EAAmBd,CAAe;AAAA,IACpC,GAAG,CAACQ,GAAO,cAAcR,CAAK,CAAC,GAG7B,gBAAAmB,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIhB,KAAYI;AAAA,UACf,GAAGD;AAAA,UACJ,KAAKG;AAAA,UACL,OAAAX;AAAA,UACA,UAAU,CAAC,MAAM;AACf,YAAI,OAAOO,IAAc,EAAE,OAAO,OAAO,CAAC,KAAM,aAC9C,EAAE,OAAO,QAAQA,EAAY,EAAE,OAAO,OAAO,CAAC,IAEhDD,IAAW,CAAC;AAAA,UACd;AAAA,UACA,WAAWgB;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACAnB,IAAY,WAAW;AAAA,YACvBC,KAAW;AAAA,YACXL;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,MAEDK,KAAW,OAAOI,GAAO,aAAc,YACtC,gBAAAW;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASd,KAAYI;AAAA,UACrB,WAAWa;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAGD,UAAA;AAAA,YAAA,OAAOtB,KAAS,EAAE,EAAE;AAAA,YAAO;AAAA,YAAIQ,GAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACzC,GAEJ;AAAA,EAEJ;AACF;AACAb,EAAS,cAAc;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oneplatformdev/ui",
3
- "version": "0.1.99-beta.298",
3
+ "version": "0.1.99-beta.299",
4
4
  "description": "UI component library for OnePlatform",
5
5
  "author": "One Platform Development Team",
6
6
  "keywords": [
@@ -109,9 +109,9 @@
109
109
  "recharts": "^3.2.0",
110
110
  "sonner": "^2.0.7",
111
111
  "vaul": "^1.1.2",
112
- "@oneplatformdev/tokens": "^0.1.99-beta.297",
113
- "@oneplatformdev/utils": "^0.1.99-beta.297",
114
- "@oneplatformdev/hooks": "^0.1.99-beta.297"
112
+ "@oneplatformdev/tokens": "^0.1.99-beta.299",
113
+ "@oneplatformdev/hooks": "^0.1.99-beta.299",
114
+ "@oneplatformdev/utils": "^0.1.99-beta.299"
115
115
  },
116
116
  "scripts": {
117
117
  "chromatic": "chromatic"