@oneplatformdev/ui 0.0.1-beta.4 → 0.0.1-beta.41
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/AlertDialog/AlertDialog.d.ts +14 -0
- package/AlertDialog/AlertDialog.mjs +58 -60
- package/Button/buttonVariants.mjs +3 -3
- package/Combobox/Combobox.mjs +81 -70
- package/Combobox/Combobox.types.d.ts +7 -0
- package/DataTable/DataTable.mjs +32 -51
- package/DataTable/DataTableColumnFilter.d.ts +4 -0
- package/DataTable/DataTableColumnFilter.mjs +31 -0
- package/Dropzone/Dropzone.d.ts +22 -0
- package/Dropzone/Dropzone.mjs +151 -0
- package/Dropzone/Dropzone.types.d.ts +38 -0
- package/Dropzone/DropzoneFilePreview.d.ts +4 -0
- package/Dropzone/DropzoneFilePreview.mjs +9 -0
- package/Dropzone/DropzoneSinglePickPreview.d.ts +9 -0
- package/Dropzone/DropzoneSinglePickPreview.mjs +38 -0
- package/Dropzone/DropzoneUtils.d.ts +5 -0
- package/Dropzone/DropzoneUtils.mjs +24 -0
- package/Dropzone/index.d.ts +2 -0
- package/Dropzone/index.mjs +7 -0
- package/Dropzone/package.json +7 -0
- package/DropzoneFilePreview-Dhtv8F4u.js +67 -0
- package/Form/FormRenderControl.d.ts +1 -2
- package/Form/FormRenderControl.mjs +10 -10
- package/Form/FormRenderControl.types.d.ts +4 -3
- package/FormCheckbox/FormCheckbox.d.ts +1 -2
- package/FormCheckbox/FormCheckbox.types.d.ts +1 -2
- package/FormCombobox/FormCombobox.d.ts +2 -2
- package/FormCombobox/FormCombobox.types.d.ts +1 -2
- package/FormDatePicker/FormDatePicker.d.ts +2 -2
- package/FormDatePicker/FormDatePicker.types.d.ts +1 -2
- package/FormDropzone/FormDropzone.d.ts +4 -0
- package/FormDropzone/FormDropzone.mjs +19 -0
- package/FormDropzone/FormDropzone.types.d.ts +6 -0
- package/FormDropzone/index.d.ts +2 -0
- package/FormDropzone/index.mjs +4 -0
- package/FormDropzone/package.json +7 -0
- package/FormInput/FormInput.d.ts +1 -2
- package/FormInput/FormInput.mjs +6 -7
- package/FormInput/FormInput.types.d.ts +1 -2
- package/FormSelect/FormSelect.d.ts +1 -2
- package/FormSelect/FormSelect.mjs +19 -17
- package/FormSelect/FormSelect.types.d.ts +1 -2
- package/FormTextarea/FormTextarea.d.ts +1 -2
- package/FormTextarea/FormTextarea.mjs +13 -12
- package/FormTextarea/FormTextarea.types.d.ts +1 -2
- package/Input/Input.mjs +42 -37
- package/Input/Input.types.d.ts +3 -1
- package/Input/index.d.ts +0 -1
- package/Input/index.mjs +5 -7
- package/Search/Search.mjs +5 -6
- package/Select/Select.mjs +28 -28
- package/Select/Select.types.d.ts +7 -1
- package/Sidebar/Sidebar.mjs +0 -1
- package/Tabs/Tabs.d.ts +3 -2
- package/Tabs/Tabs.mjs +20 -6
- package/Tabs/Tabs.types.d.ts +5 -2
- package/Tabs/index.mjs +8 -7
- package/Textarea/Textarea.d.ts +1 -1
- package/Textarea/Textarea.mjs +71 -15
- package/Textarea/Textarea.types.d.ts +16 -2
- package/Textarea/useAutosizeTextArea.d.ts +3 -0
- package/Textarea/useAutosizeTextArea.mjs +20 -0
- package/Toast/toastVariants.mjs +3 -3
- package/index.css +1 -1
- package/index.d.ts +2 -0
- package/index.mjs +315 -309
- package/package.json +9 -8
@@ -1,38 +1,40 @@
|
|
1
1
|
import { jsx as e } from "react/jsx-runtime";
|
2
|
-
import { FormControl as
|
3
|
-
import { FormRenderControl as
|
2
|
+
import { FormControl as f } from "../Form/Form.mjs";
|
3
|
+
import { FormRenderControl as d } from "../Form/FormRenderControl.mjs";
|
4
4
|
import "../Select/SelectRoot.mjs";
|
5
|
-
import { Select as
|
6
|
-
const
|
5
|
+
import { Select as g } from "../Select/Select.mjs";
|
6
|
+
const S = (n) => {
|
7
7
|
const {
|
8
|
-
form:
|
8
|
+
form: m,
|
9
9
|
label: i,
|
10
|
-
name:
|
11
|
-
options:
|
10
|
+
name: p,
|
11
|
+
options: l = [],
|
12
12
|
onChange: r,
|
13
|
-
|
14
|
-
|
13
|
+
containerProps: c,
|
14
|
+
...s
|
15
|
+
} = n;
|
15
16
|
return /* @__PURE__ */ e(
|
16
|
-
|
17
|
+
d,
|
17
18
|
{
|
18
|
-
form:
|
19
|
-
name:
|
19
|
+
form: m,
|
20
|
+
name: p,
|
20
21
|
label: i,
|
22
|
+
containerProps: c,
|
21
23
|
render: ({ field: t }) => /* @__PURE__ */ e(
|
22
|
-
|
24
|
+
g,
|
23
25
|
{
|
24
26
|
value: t.value,
|
25
|
-
options:
|
27
|
+
options: l,
|
26
28
|
onChange: (o) => {
|
27
29
|
t.onChange(o), r == null || r(o);
|
28
30
|
},
|
29
|
-
renderTrigger: (o,
|
30
|
-
...
|
31
|
+
renderTrigger: (o, a) => /* @__PURE__ */ e(f, { children: a }),
|
32
|
+
...s
|
31
33
|
}
|
32
34
|
)
|
33
35
|
}
|
34
36
|
);
|
35
37
|
};
|
36
38
|
export {
|
37
|
-
|
39
|
+
S as FormSelect
|
38
40
|
};
|
@@ -1,7 +1,6 @@
|
|
1
1
|
import { SelectProps } from '../Select';
|
2
2
|
import { FormRenderControlExtendProps } from '../Form';
|
3
|
-
import { UseFormReturn } from 'react-hook-form';
|
4
3
|
import { FieldValues } from 'react-hook-form/dist/types/fields';
|
5
4
|
|
6
|
-
export interface FormSelectProps<Data extends FieldValues,
|
5
|
+
export interface FormSelectProps<Data extends FieldValues, ExtendOptionData> extends FormRenderControlExtendProps<Data>, Omit<SelectProps<ExtendOptionData>, 'onChange'>, Partial<Pick<SelectProps<ExtendOptionData>, 'onChange'>> {
|
7
6
|
}
|
@@ -1,5 +1,4 @@
|
|
1
|
-
import { UseFormReturn } from 'react-hook-form';
|
2
1
|
import { FieldValues } from 'react-hook-form/dist/types/fields';
|
3
2
|
import { FormTextareaProps } from './FormTextarea.types';
|
4
3
|
|
5
|
-
export declare const FormTextarea: <Data extends FieldValues
|
4
|
+
export declare const FormTextarea: <Data extends FieldValues>(props: FormTextareaProps<Data>) => import("react/jsx-runtime").JSX.Element;
|
@@ -1,26 +1,27 @@
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
2
|
-
import { FormControl as
|
3
|
-
import { FormRenderControl as
|
4
|
-
import { Textarea as
|
5
|
-
const
|
6
|
-
const { form:
|
2
|
+
import { FormControl as p } from "../Form/Form.mjs";
|
3
|
+
import { FormRenderControl as i } from "../Form/FormRenderControl.mjs";
|
4
|
+
import { Textarea as s } from "../Textarea/Textarea.mjs";
|
5
|
+
const F = (e) => {
|
6
|
+
const { form: t, label: m, name: n, containerProps: a, ...l } = e;
|
7
7
|
return /* @__PURE__ */ r(
|
8
|
-
|
8
|
+
i,
|
9
9
|
{
|
10
|
-
form:
|
10
|
+
form: t,
|
11
11
|
name: n,
|
12
|
-
label:
|
13
|
-
|
14
|
-
|
12
|
+
label: m,
|
13
|
+
containerProps: a,
|
14
|
+
render: ({ field: o }) => /* @__PURE__ */ r(p, { children: /* @__PURE__ */ r(
|
15
|
+
s,
|
15
16
|
{
|
16
17
|
...o,
|
17
18
|
value: o.value || "",
|
18
|
-
...
|
19
|
+
...l
|
19
20
|
}
|
20
21
|
) })
|
21
22
|
}
|
22
23
|
);
|
23
24
|
};
|
24
25
|
export {
|
25
|
-
|
26
|
+
F as FormTextarea
|
26
27
|
};
|
@@ -1,7 +1,6 @@
|
|
1
1
|
import { TextareaProps } from '../Textarea';
|
2
2
|
import { FormRenderControlExtendProps } from '../Form';
|
3
|
-
import { UseFormReturn } from 'react-hook-form';
|
4
3
|
import { FieldValues } from 'react-hook-form/dist/types/fields';
|
5
4
|
|
6
|
-
export interface FormTextareaProps<Data extends FieldValues
|
5
|
+
export interface FormTextareaProps<Data extends FieldValues> extends FormRenderControlExtendProps<Data>, Omit<TextareaProps, 'form' | 'name'> {
|
7
6
|
}
|
package/Input/Input.mjs
CHANGED
@@ -1,61 +1,66 @@
|
|
1
|
-
import { jsxs as
|
2
|
-
import
|
3
|
-
import { Eye as
|
4
|
-
import { inputVariants as
|
5
|
-
import { cn as
|
6
|
-
const
|
7
|
-
(t,
|
1
|
+
import { jsxs as f, jsx as s } from "react/jsx-runtime";
|
2
|
+
import u, { useState as N } from "react";
|
3
|
+
import { Eye as g, EyeOff as b } from "lucide-react";
|
4
|
+
import { inputVariants as v } from "./inputVariants.mjs";
|
5
|
+
import { cn as h } from "@oneplatformdev/utils";
|
6
|
+
const c = u.forwardRef(
|
7
|
+
(t, a) => {
|
8
8
|
const {
|
9
|
-
className:
|
10
|
-
variant:
|
11
|
-
type:
|
12
|
-
slotProps: { input:
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
9
|
+
className: e,
|
10
|
+
variant: o,
|
11
|
+
type: i,
|
12
|
+
slotProps: { input: l } = {},
|
13
|
+
onChange: m,
|
14
|
+
onTransform: n,
|
15
|
+
...y
|
16
|
+
} = t, { startAdornment: p } = l || {};
|
17
|
+
return /* @__PURE__ */ f("div", { className: "relative", children: [
|
18
|
+
!!p && /* @__PURE__ */ s("span", { className: "absolute left-[10px] top-1/2 -translate-y-1/2", children: p }),
|
17
19
|
/* @__PURE__ */ s(
|
18
20
|
"input",
|
19
21
|
{
|
20
|
-
type:
|
21
|
-
className:
|
22
|
-
|
23
|
-
!!
|
22
|
+
type: i,
|
23
|
+
className: h(
|
24
|
+
v({ variant: o, className: e }),
|
25
|
+
!!p && "pl-8"
|
24
26
|
),
|
25
|
-
ref:
|
26
|
-
...
|
27
|
+
ref: a,
|
28
|
+
...y,
|
29
|
+
onChange: (r) => {
|
30
|
+
typeof (n == null ? void 0 : n(r.target.value, r)) == "string" && (r.target.value = n(r.target.value, r)), m && m(r);
|
31
|
+
}
|
27
32
|
}
|
28
33
|
)
|
29
34
|
] });
|
30
35
|
}
|
31
36
|
);
|
32
|
-
|
33
|
-
const
|
34
|
-
(t,
|
35
|
-
const [
|
36
|
-
|
37
|
+
c.displayName = "Input";
|
38
|
+
const d = u.forwardRef(
|
39
|
+
(t, a) => {
|
40
|
+
const [e, o] = N(!1), i = e ? "text" : "password", l = () => {
|
41
|
+
o(!e);
|
37
42
|
};
|
38
|
-
return /* @__PURE__ */
|
39
|
-
/* @__PURE__ */ s(
|
40
|
-
/* @__PURE__ */ s(w, { isVisible:
|
43
|
+
return /* @__PURE__ */ f("div", { className: "relative", children: [
|
44
|
+
/* @__PURE__ */ s(c, { ...t, type: i, className: "pr-8", ref: a }),
|
45
|
+
/* @__PURE__ */ s(w, { isVisible: e, onClick: l })
|
41
46
|
] });
|
42
47
|
}
|
43
48
|
);
|
44
|
-
|
45
|
-
const w = ({ isVisible: t, onClick:
|
49
|
+
d.displayName = "PasswordInput";
|
50
|
+
const w = ({ isVisible: t, onClick: a }) => /* @__PURE__ */ s(
|
46
51
|
"button",
|
47
52
|
{
|
48
53
|
type: "button",
|
49
|
-
onClick:
|
54
|
+
onClick: a,
|
50
55
|
className: "absolute top-1/2 right-3 transform -translate-y-1/2",
|
51
|
-
children: t ? /* @__PURE__ */ s(
|
56
|
+
children: t ? /* @__PURE__ */ s(g, { size: 16 }) : /* @__PURE__ */ s(b, { size: 16 })
|
52
57
|
}
|
53
|
-
), I =
|
54
|
-
({ type: t, ...
|
58
|
+
), I = u.forwardRef(
|
59
|
+
({ type: t, ...a }, e) => t === "password" ? /* @__PURE__ */ s(d, { type: t, ...a, ref: e }) : /* @__PURE__ */ s(c, { type: t, ...a, ref: e })
|
55
60
|
);
|
56
61
|
I.displayName = "Input";
|
57
62
|
export {
|
58
|
-
|
63
|
+
c as BaseInput,
|
59
64
|
I as Input,
|
60
|
-
|
65
|
+
d as PasswordInput
|
61
66
|
};
|
package/Input/Input.types.d.ts
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import { inputVariants } from './inputVariants';
|
2
2
|
import { VariantProps } from 'class-variance-authority';
|
3
|
-
import { default as React, ReactNode } from 'react';
|
3
|
+
import { default as React, ChangeEvent, ReactNode } from 'react';
|
4
4
|
|
5
5
|
export interface InputSlotInputProps {
|
6
6
|
startAdornment?: ReactNode;
|
@@ -10,4 +10,6 @@ export interface InputSlotProps {
|
|
10
10
|
}
|
11
11
|
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
|
12
12
|
slotProps?: InputSlotProps;
|
13
|
+
/** func transform event.target.value before onChange event call*/
|
14
|
+
onTransform?: (value: string, event: ChangeEvent<HTMLInputElement>) => string;
|
13
15
|
}
|
package/Input/index.d.ts
CHANGED
package/Input/index.mjs
CHANGED
@@ -1,9 +1,7 @@
|
|
1
|
-
import { BaseInput as
|
2
|
-
import { inputVariants as s } from "./inputVariants.mjs";
|
1
|
+
import { BaseInput as u, Input as a, PasswordInput as n, Input as s } from "./Input.mjs";
|
3
2
|
export {
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
s as inputVariants
|
3
|
+
u as BaseInput,
|
4
|
+
a as Input,
|
5
|
+
n as PasswordInput,
|
6
|
+
s as default
|
9
7
|
};
|
package/Search/Search.mjs
CHANGED
@@ -1,10 +1,9 @@
|
|
1
1
|
import { jsx as o } from "react/jsx-runtime";
|
2
2
|
import { useState as S } from "react";
|
3
3
|
import { Input as f } from "../Input/Input.mjs";
|
4
|
-
import "../Input/inputVariants.mjs";
|
5
4
|
import { useDebounceCallback as v } from "@oneplatformdev/hooks";
|
6
5
|
import { cn as d } from "@oneplatformdev/utils";
|
7
|
-
const
|
6
|
+
const j = (t) => {
|
8
7
|
const {
|
9
8
|
search: a,
|
10
9
|
onChange: e,
|
@@ -12,20 +11,20 @@ const k = (t) => {
|
|
12
11
|
placeholder: s = "Search",
|
13
12
|
className: n,
|
14
13
|
...m
|
15
|
-
} = t, [i, l] = S(a),
|
14
|
+
} = t, [i, l] = S(a), h = v(c, 1e3), p = (r) => {
|
16
15
|
const u = r.target.value;
|
17
|
-
l(u), e == null || e(r),
|
16
|
+
l(u), e == null || e(r), h(r.target.value);
|
18
17
|
};
|
19
18
|
return /* @__PURE__ */ o("div", { className: d("space-y-4", n), children: /* @__PURE__ */ o(
|
20
19
|
f,
|
21
20
|
{
|
22
21
|
placeholder: s,
|
23
22
|
value: i,
|
24
|
-
onChange:
|
23
|
+
onChange: p,
|
25
24
|
...m
|
26
25
|
}
|
27
26
|
) });
|
28
27
|
};
|
29
28
|
export {
|
30
|
-
|
29
|
+
j as Search
|
31
30
|
};
|
package/Select/Select.mjs
CHANGED
@@ -1,59 +1,59 @@
|
|
1
1
|
import { jsxs as d, jsx as a } from "react/jsx-runtime";
|
2
2
|
import { Button as f } from "../Button/Button.mjs";
|
3
3
|
import "../Button/buttonVariants.mjs";
|
4
|
-
import { SelectRoot as
|
5
|
-
import { isValidReactElement as
|
4
|
+
import { SelectRoot as g, SelectContent as p, SelectTrigger as h, SelectValue as v, SelectItem as u } from "./SelectRoot.mjs";
|
5
|
+
import { isValidReactElement as c } from "@oneplatformdev/utils";
|
6
6
|
const S = (o) => {
|
7
|
-
const { placeholder:
|
8
|
-
return e && typeof e == "function" &&
|
7
|
+
const { placeholder: l, renderTrigger: e, slotProps: t } = o, n = /* @__PURE__ */ a(h, { ...(t == null ? void 0 : t.triggerProps) || {}, children: /* @__PURE__ */ a(v, { placeholder: l }) });
|
8
|
+
return e && typeof e == "function" && c(e(o, n)) ? e(o, n) : n;
|
9
9
|
}, C = (o) => {
|
10
|
-
const { renderOption:
|
11
|
-
return
|
10
|
+
const { renderOption: l, option: e, index: t, options: n, ...i } = o, r = /* @__PURE__ */ a(u, { value: e.value, children: e.label }, e.value);
|
11
|
+
return l && typeof l == "function" && c(l(
|
12
12
|
e,
|
13
|
+
t,
|
13
14
|
n,
|
14
|
-
|
15
|
-
{ ...c, options: l },
|
15
|
+
{ ...i, options: n },
|
16
16
|
r
|
17
|
-
)) ?
|
17
|
+
)) ? c(l(
|
18
18
|
e,
|
19
|
+
t,
|
19
20
|
n,
|
20
|
-
|
21
|
-
{ ...c, options: l },
|
21
|
+
{ ...i, options: n },
|
22
22
|
r
|
23
|
-
), u) ?
|
23
|
+
), u) ? c(l(
|
24
24
|
e,
|
25
|
+
t,
|
25
26
|
n,
|
26
|
-
|
27
|
-
{ ...c, options: l },
|
27
|
+
{ ...i, options: n },
|
28
28
|
r
|
29
|
-
)) : /* @__PURE__ */ a(u, { value: e.value, children:
|
29
|
+
)) : /* @__PURE__ */ a(u, { value: e.value, children: l(
|
30
30
|
e,
|
31
|
+
t,
|
31
32
|
n,
|
32
|
-
|
33
|
-
{ ...c, options: l },
|
33
|
+
{ ...i, options: n },
|
34
34
|
r
|
35
35
|
) }, e.value) : r;
|
36
36
|
}, T = (o) => {
|
37
37
|
const {
|
38
|
-
value:
|
38
|
+
value: l,
|
39
39
|
options: e,
|
40
|
-
onChange:
|
41
|
-
nullable:
|
42
|
-
clearLabel:
|
40
|
+
onChange: t,
|
41
|
+
nullable: n = !1,
|
42
|
+
clearLabel: i = "Clear",
|
43
43
|
disabled: r
|
44
44
|
} = o;
|
45
45
|
return /* @__PURE__ */ d(
|
46
|
-
|
46
|
+
g,
|
47
47
|
{
|
48
|
-
value:
|
49
|
-
onValueChange:
|
48
|
+
value: l,
|
49
|
+
onValueChange: t,
|
50
50
|
disabled: r,
|
51
51
|
children: [
|
52
52
|
/* @__PURE__ */ a(S, { ...o }),
|
53
|
-
/* @__PURE__ */ d(
|
54
|
-
|
55
|
-
|
56
|
-
}, children:
|
53
|
+
/* @__PURE__ */ d(p, { children: [
|
54
|
+
n && /* @__PURE__ */ a(f, { className: "w-full px-2", variant: "secondary", size: "sm", onClick: () => {
|
55
|
+
t("");
|
56
|
+
}, children: i }),
|
57
57
|
e.map((s, m) => /* @__PURE__ */ a(
|
58
58
|
C,
|
59
59
|
{
|
package/Select/Select.types.d.ts
CHANGED
@@ -1,5 +1,6 @@
|
|
1
|
-
import { ReactNode } from 'react';
|
1
|
+
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
2
2
|
|
3
|
+
import * as SelectPrimitive from '@radix-ui/react-select';
|
3
4
|
export interface SelectOption<ExtendOptionData> {
|
4
5
|
value: string;
|
5
6
|
label?: ReactNode;
|
@@ -26,4 +27,9 @@ export interface SelectProps<ExtendOptionData> {
|
|
26
27
|
renderTrigger?: SelectRenderTrigger<ExtendOptionData>;
|
27
28
|
/** Render custom option. */
|
28
29
|
renderOption?: SelectRenderOption<ExtendOptionData>;
|
30
|
+
/** Select Slot props */
|
31
|
+
slotProps?: {
|
32
|
+
/** Select Default Trigger Props */
|
33
|
+
triggerProps?: ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>;
|
34
|
+
};
|
29
35
|
}
|
package/Sidebar/Sidebar.mjs
CHANGED
@@ -7,7 +7,6 @@ import { cn as d } from "@oneplatformdev/utils";
|
|
7
7
|
import { Button as E } from "../Button/Button.mjs";
|
8
8
|
import "../Button/buttonVariants.mjs";
|
9
9
|
import { Input as z } from "../Input/Input.mjs";
|
10
|
-
import "../Input/inputVariants.mjs";
|
11
10
|
import { Separator as B } from "../Separator/Separator.mjs";
|
12
11
|
import { Sheet as T, SheetContent as A } from "../Sheet/Sheet.mjs";
|
13
12
|
import { Skeleton as M } from "../Skeleton/Skeleton.mjs";
|
package/Tabs/Tabs.d.ts
CHANGED
@@ -1,4 +1,5 @@
|
|
1
1
|
import { TabsProps } from './Tabs.types';
|
2
|
-
import { FC } from 'react';
|
2
|
+
import { FC, PropsWithChildren } from 'react';
|
3
3
|
|
4
|
-
export declare const
|
4
|
+
export declare const TabRender: FC<TabsProps>;
|
5
|
+
export declare const Tabs: FC<PropsWithChildren<TabsProps>>;
|
package/Tabs/Tabs.mjs
CHANGED
@@ -1,9 +1,23 @@
|
|
1
|
-
import { jsx as
|
2
|
-
import {
|
3
|
-
|
4
|
-
|
5
|
-
|
1
|
+
import { jsx as o, jsxs as c } from "react/jsx-runtime";
|
2
|
+
import { Children as p } from "react";
|
3
|
+
import { TabsContent as m, TabsRoot as b, TabsList as i, TabsTrigger as h } from "./TabsRoot.mjs";
|
4
|
+
const T = (a) => {
|
5
|
+
const { tabs: s = [], contents: t } = a;
|
6
|
+
return p.map(t, (n, r) => {
|
7
|
+
var l;
|
8
|
+
if (!n || !s[r]) return null;
|
9
|
+
const e = (l = s[r]) == null ? void 0 : l.value, u = n.props || {};
|
10
|
+
return /* @__PURE__ */ o(m, { value: e, ...u, children: n }, e);
|
11
|
+
});
|
12
|
+
}, f = (a) => {
|
13
|
+
const { tab: s, tabs: t = [], onChange: n, children: r } = a;
|
14
|
+
return /* @__PURE__ */ c(b, { value: s, onValueChange: n, children: [
|
15
|
+
/* @__PURE__ */ o(i, { className: "px-2 py-6 bg-[#E0E7FF] rounded-[6px]", children: t.map((e) => /* @__PURE__ */ o(h, { value: e.value, className: "h-8", children: e.label }, e.value)) }),
|
16
|
+
r,
|
17
|
+
!r && /* @__PURE__ */ o(T, { ...a })
|
18
|
+
] });
|
6
19
|
};
|
7
20
|
export {
|
8
|
-
|
21
|
+
T as TabRender,
|
22
|
+
f as Tabs
|
9
23
|
};
|
package/Tabs/Tabs.types.d.ts
CHANGED
@@ -1,9 +1,12 @@
|
|
1
|
+
import { ReactElement } from 'react';
|
2
|
+
|
1
3
|
export interface TabItemProps {
|
2
4
|
value: string;
|
3
5
|
label: string;
|
4
6
|
}
|
5
7
|
export interface TabsProps {
|
6
8
|
tabs: TabItemProps[];
|
7
|
-
tab
|
8
|
-
onChange
|
9
|
+
tab?: string;
|
10
|
+
onChange?: (value: string) => void;
|
11
|
+
contents?: ReactElement[];
|
9
12
|
}
|
package/Tabs/index.mjs
CHANGED
@@ -1,9 +1,10 @@
|
|
1
|
-
import { TabsContent as
|
2
|
-
import { Tabs as
|
1
|
+
import { TabsContent as T, TabsList as a, TabsRoot as b, TabsTrigger as e } from "./TabsRoot.mjs";
|
2
|
+
import { TabRender as t, Tabs as n } from "./Tabs.mjs";
|
3
3
|
export {
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
4
|
+
t as TabRender,
|
5
|
+
n as Tabs,
|
6
|
+
T as TabsContent,
|
7
|
+
a as TabsList,
|
8
|
+
b as TabsRoot,
|
9
|
+
e as TabsTrigger
|
9
10
|
};
|
package/Textarea/Textarea.d.ts
CHANGED
package/Textarea/Textarea.mjs
CHANGED
@@ -1,18 +1,74 @@
|
|
1
|
-
import { jsx as
|
2
|
-
import * as
|
3
|
-
import {
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
1
|
+
import { jsxs as u, Fragment as p, jsx as h } from "react/jsx-runtime";
|
2
|
+
import * as v from "react";
|
3
|
+
import { useId as w, useRef as z, useState as A, useImperativeHandle as N, useEffect as y } from "react";
|
4
|
+
import { cn as d } from "@oneplatformdev/utils";
|
5
|
+
import { useAutosizeTextArea as S } from "./useAutosizeTextArea.mjs";
|
6
|
+
const T = v.forwardRef(
|
7
|
+
(m, c) => {
|
8
|
+
const {
|
9
|
+
className: f,
|
10
|
+
value: r = "",
|
11
|
+
maxHeight: i = Number.MAX_SAFE_INTEGER,
|
12
|
+
minHeight: o = 0,
|
13
|
+
resizeble: g = !0,
|
14
|
+
counter: s = !1,
|
15
|
+
id: n = "",
|
16
|
+
...e
|
17
|
+
} = m, a = w(), t = z(null), [x, b] = A("");
|
18
|
+
return S({
|
19
|
+
textAreaRef: t,
|
20
|
+
triggerAutoSize: x,
|
21
|
+
maxHeight: i,
|
22
|
+
minHeight: o
|
23
|
+
}), N(c, () => ({
|
24
|
+
...t.current ?? {},
|
25
|
+
textArea: t.current,
|
26
|
+
focus: () => {
|
27
|
+
var l;
|
28
|
+
return (l = t == null ? void 0 : t.current) == null ? void 0 : l.focus();
|
29
|
+
},
|
30
|
+
maxHeight: i,
|
31
|
+
minHeight: o
|
32
|
+
})), y(() => {
|
33
|
+
b(r);
|
34
|
+
}, [e == null ? void 0 : e.defaultValue, r]), /* @__PURE__ */ u(p, { children: [
|
35
|
+
/* @__PURE__ */ h(
|
36
|
+
"textarea",
|
37
|
+
{
|
38
|
+
id: n || a,
|
39
|
+
...e,
|
40
|
+
ref: t,
|
41
|
+
value: r,
|
42
|
+
className: d(
|
43
|
+
"flex min-h-10 w-full px-3 py-2 text-base relative",
|
44
|
+
"rounded-md border border-input bg-transparent shadow-sm",
|
45
|
+
"placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
46
|
+
g ? "resize" : "resize-none",
|
47
|
+
s && "pb-2",
|
48
|
+
f
|
49
|
+
)
|
50
|
+
}
|
51
|
+
),
|
52
|
+
s && /* @__PURE__ */ u(
|
53
|
+
"label",
|
54
|
+
{
|
55
|
+
htmlFor: n || a,
|
56
|
+
className: d(
|
57
|
+
"w-full text-right inline-flex items-center justify-end",
|
58
|
+
"text-sm font-normal text-muted-foreground",
|
59
|
+
"leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
60
|
+
),
|
61
|
+
children: [
|
62
|
+
String(r || "").length,
|
63
|
+
" / ",
|
64
|
+
e == null ? void 0 : e.maxLength
|
65
|
+
]
|
66
|
+
}
|
67
|
+
)
|
68
|
+
] });
|
13
69
|
}
|
14
|
-
)
|
15
|
-
|
70
|
+
);
|
71
|
+
T.displayName = "Textarea";
|
16
72
|
export {
|
17
|
-
|
73
|
+
T as Textarea
|
18
74
|
};
|
@@ -1,4 +1,18 @@
|
|
1
|
-
import { ComponentProps } from 'react';
|
1
|
+
import { ComponentProps, RefObject } from 'react';
|
2
2
|
|
3
|
-
export interface
|
3
|
+
export interface IUseAutosizeTextAreaProps {
|
4
|
+
textAreaRef: RefObject<HTMLTextAreaElement | null>;
|
5
|
+
triggerAutoSize: string;
|
6
|
+
/**
|
7
|
+
* The minimum height of the textarea.
|
8
|
+
*/
|
9
|
+
minHeight?: number;
|
10
|
+
/**
|
11
|
+
* The maximum height of the textarea.
|
12
|
+
*/
|
13
|
+
maxHeight?: number;
|
14
|
+
}
|
15
|
+
export interface TextareaProps extends ComponentProps<'textarea'>, Pick<IUseAutosizeTextAreaProps, 'minHeight' | 'maxHeight'> {
|
16
|
+
resizeble?: boolean;
|
17
|
+
counter?: boolean;
|
4
18
|
}
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import * as f from "react";
|
2
|
+
const u = ({
|
3
|
+
textAreaRef: r,
|
4
|
+
triggerAutoSize: l,
|
5
|
+
maxHeight: t = Number.MAX_SAFE_INTEGER,
|
6
|
+
minHeight: s = 0
|
7
|
+
}) => {
|
8
|
+
const [c, i] = f.useState(!0);
|
9
|
+
f.useEffect(() => {
|
10
|
+
const e = r.current;
|
11
|
+
if (e) {
|
12
|
+
c && (e.style.minHeight = `${s + 0}px`, t > s && (e.style.maxHeight = `${t}px`), i(!1)), e.style.height = `${s + 0}px`;
|
13
|
+
const o = e.scrollHeight;
|
14
|
+
o > t ? e.style.height = `${t}px` : e.style.height = `${o + 0}px`;
|
15
|
+
}
|
16
|
+
}, [r.current, l]);
|
17
|
+
};
|
18
|
+
export {
|
19
|
+
u as useAutosizeTextArea
|
20
|
+
};
|