@bioturing/components 0.21.1 → 0.22.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/code-block/component.js +67 -66
- package/dist/components/code-block/component.js.map +1 -1
- package/dist/components/form/item.js +10 -10
- package/dist/components/form/item.js.map +1 -1
- package/dist/components/icon-button/component.js +42 -38
- package/dist/components/icon-button/component.js.map +1 -1
- package/dist/components/icon-button/style.css +1 -1
- package/dist/components/select/style.css +1 -1
- package/dist/components/utils/WithRenderProp.js +9 -9
- package/dist/components/utils/WithRenderProp.js.map +1 -1
- package/dist/index.d.ts +12 -3
- package/package.json +2 -2
|
@@ -1,77 +1,78 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as o, jsxs as
|
|
3
|
-
import {
|
|
4
|
-
import { Check as q, Copy as z } from "@bioturing/assets";
|
|
5
|
-
import { ThemeProvider as G } from "../theme-provider/component.js";
|
|
2
|
+
import { jsx as o, jsxs as q } from "react/jsx-runtime";
|
|
3
|
+
import { CheckIcon as z, CopyIcon as G } from "@bioturing/assets";
|
|
6
4
|
import { Highlight as J, themes as K } from "prism-react-renderer";
|
|
5
|
+
import { useState as p, useEffect as Q, useCallback as I } from "react";
|
|
6
|
+
import { ThemeProvider as R } from "../theme-provider/component.js";
|
|
7
7
|
import './style.css';/* empty css */
|
|
8
|
-
import { WithAntdTokens as Q } from "../utils/WithAntdTokens.js";
|
|
9
|
-
import { Segmented as R } from "../segmented/component.js";
|
|
10
8
|
import { reactNodeToString as U } from "../utils/reactToString.js";
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
9
|
+
import { WithAntdTokens as V } from "../utils/WithAntdTokens.js";
|
|
10
|
+
import { Segmented as X } from "../segmented/component.js";
|
|
11
|
+
import { useControlledState as Y } from "../hooks/useControlledState.js";
|
|
12
|
+
import { useCls as Z } from "../utils/antdUtils.js";
|
|
13
|
+
import { clsx as H } from "../utils/cn.js";
|
|
14
|
+
import { IconButton as N } from "../icon-button/component.js";
|
|
15
|
+
import { ScrollArea as oo } from "../scroll-area/component.js";
|
|
16
|
+
const vo = ({
|
|
17
|
+
code: s,
|
|
18
|
+
children: m,
|
|
19
19
|
// initial,
|
|
20
|
-
lang:
|
|
21
|
-
className:
|
|
20
|
+
lang: h = "tsx",
|
|
21
|
+
className: O,
|
|
22
22
|
options: n,
|
|
23
|
-
activeOption:
|
|
24
|
-
defaultActiveOption:
|
|
25
|
-
onActiveOptionChange:
|
|
26
|
-
copyText:
|
|
27
|
-
copySuccessText:
|
|
23
|
+
activeOption: j,
|
|
24
|
+
defaultActiveOption: b = 0,
|
|
25
|
+
onActiveOptionChange: x,
|
|
26
|
+
copyText: a = "Copy",
|
|
27
|
+
copySuccessText: g = "Copied",
|
|
28
28
|
classNames: e,
|
|
29
|
-
maxHeight:
|
|
30
|
-
|
|
29
|
+
maxHeight: i,
|
|
30
|
+
onCopy: C,
|
|
31
|
+
...A
|
|
31
32
|
}) => {
|
|
32
|
-
const [
|
|
33
|
+
const [l, y] = Y(
|
|
34
|
+
j,
|
|
33
35
|
x,
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
$(() => {
|
|
36
|
+
b
|
|
37
|
+
), [c, B] = p(s || ""), [L, M] = p(h), f = n && n.length > 0;
|
|
38
|
+
Q(() => {
|
|
38
39
|
var t, r;
|
|
39
|
-
if (
|
|
40
|
-
const
|
|
41
|
-
|
|
40
|
+
if (f) {
|
|
41
|
+
const v = ((t = n[l]) == null ? void 0 : t.code) || "", k = ((r = n[l]) == null ? void 0 : r.lang) || h;
|
|
42
|
+
B(v), M(k);
|
|
42
43
|
}
|
|
43
44
|
}, [
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
s,
|
|
46
|
+
l,
|
|
47
|
+
b,
|
|
47
48
|
n,
|
|
48
|
-
m,
|
|
49
49
|
h,
|
|
50
|
-
|
|
50
|
+
f,
|
|
51
|
+
y
|
|
51
52
|
]);
|
|
52
|
-
const [
|
|
53
|
-
const t =
|
|
53
|
+
const [T, u] = p(a), [D, S] = p(!1), E = I(() => {
|
|
54
|
+
const t = c || U(m);
|
|
54
55
|
try {
|
|
55
56
|
navigator.clipboard.writeText(t).then(() => {
|
|
56
|
-
|
|
57
|
+
u(g), S(!0), C && C(t);
|
|
57
58
|
});
|
|
58
59
|
} catch {
|
|
59
|
-
|
|
60
|
+
u("Failed to copy");
|
|
60
61
|
}
|
|
61
|
-
},
|
|
62
|
-
a
|
|
63
|
-
}, d =
|
|
64
|
-
return /* @__PURE__ */ o(
|
|
65
|
-
|
|
62
|
+
}, [c, m, g, C]), F = I(() => {
|
|
63
|
+
u(a), S(!1);
|
|
64
|
+
}, [a]), d = Z();
|
|
65
|
+
return /* @__PURE__ */ o(R, { theme: "dark", children: /* @__PURE__ */ q(
|
|
66
|
+
V,
|
|
66
67
|
{
|
|
67
|
-
className:
|
|
68
|
-
...
|
|
68
|
+
className: H(d("code-block"), O, e == null ? void 0 : e.root),
|
|
69
|
+
...A,
|
|
69
70
|
children: [
|
|
70
|
-
|
|
71
|
-
|
|
71
|
+
f && /* @__PURE__ */ o("div", { className: d("code-block-header", e == null ? void 0 : e.header), children: /* @__PURE__ */ o(
|
|
72
|
+
X,
|
|
72
73
|
{
|
|
73
|
-
value:
|
|
74
|
-
onChange:
|
|
74
|
+
value: l,
|
|
75
|
+
onChange: y,
|
|
75
76
|
options: n.map((t, r) => ({
|
|
76
77
|
label: t.label,
|
|
77
78
|
value: r
|
|
@@ -79,12 +80,12 @@ const fo = ({
|
|
|
79
80
|
}
|
|
80
81
|
) }),
|
|
81
82
|
/* @__PURE__ */ o("div", { className: d("code-block-copy"), children: /* @__PURE__ */ o(
|
|
82
|
-
|
|
83
|
+
N,
|
|
83
84
|
{
|
|
84
|
-
onClick:
|
|
85
|
-
label:
|
|
86
|
-
onMouseLeave:
|
|
87
|
-
children:
|
|
85
|
+
onClick: E,
|
|
86
|
+
label: T,
|
|
87
|
+
onMouseLeave: F,
|
|
88
|
+
children: D ? /* @__PURE__ */ o(z, {}) : /* @__PURE__ */ o(G, {})
|
|
88
89
|
}
|
|
89
90
|
) }),
|
|
90
91
|
/* @__PURE__ */ o(
|
|
@@ -92,30 +93,30 @@ const fo = ({
|
|
|
92
93
|
{
|
|
93
94
|
className: d("code-block-content", e == null ? void 0 : e.content),
|
|
94
95
|
style: {
|
|
95
|
-
maxHeight:
|
|
96
|
+
maxHeight: i && (typeof i == "number" ? `${i}px` : i)
|
|
96
97
|
},
|
|
97
|
-
children: /* @__PURE__ */ o(
|
|
98
|
+
children: /* @__PURE__ */ o(oo, { children: c ? /* @__PURE__ */ o(
|
|
98
99
|
J,
|
|
99
100
|
{
|
|
100
|
-
language:
|
|
101
|
-
code:
|
|
101
|
+
language: L,
|
|
102
|
+
code: c,
|
|
102
103
|
theme: K.vsDark,
|
|
103
104
|
children: ({
|
|
104
105
|
className: t,
|
|
105
106
|
style: r,
|
|
106
|
-
tokens:
|
|
107
|
-
getLineProps:
|
|
108
|
-
getTokenProps:
|
|
107
|
+
tokens: v,
|
|
108
|
+
getLineProps: k,
|
|
109
|
+
getTokenProps: P
|
|
109
110
|
}) => /* @__PURE__ */ o(
|
|
110
111
|
"pre",
|
|
111
112
|
{
|
|
112
113
|
style: { ...r, backgroundColor: "transparent" },
|
|
113
114
|
className: t,
|
|
114
|
-
children:
|
|
115
|
+
children: v.map((w, W) => /* @__PURE__ */ o("div", { ...k({ line: w }), children: w.map((_, $) => /* @__PURE__ */ o("span", { ...P({ token: _ }) }, $)) }, W))
|
|
115
116
|
}
|
|
116
117
|
)
|
|
117
118
|
}
|
|
118
|
-
) :
|
|
119
|
+
) : m })
|
|
119
120
|
}
|
|
120
121
|
)
|
|
121
122
|
]
|
|
@@ -123,6 +124,6 @@ const fo = ({
|
|
|
123
124
|
) });
|
|
124
125
|
};
|
|
125
126
|
export {
|
|
126
|
-
|
|
127
|
+
vo as CodeBlock
|
|
127
128
|
};
|
|
128
129
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../src/components/code-block/component.tsx"],"sourcesContent":["\"use client\";\nimport {
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../src/components/code-block/component.tsx"],"sourcesContent":["\"use client\";\nimport { CheckIcon, CopyIcon } from \"@bioturing/assets\";\nimport { Highlight, themes } from \"prism-react-renderer\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { useControlledState } from \"../hooks\";\nimport { IconButton } from \"../icon-button\";\nimport { ScrollArea } from \"../scroll-area\";\nimport { Segmented } from \"../segmented\";\nimport { ThemeProvider } from \"../theme-provider/component\";\nimport { clsx, reactNodeToString, useCls, WithAntdTokens } from \"../utils\";\nimport type { CodeBlockProps } from \"./types\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport const CodeBlock = ({\n code,\n children,\n // initial,\n lang: defaultLang = \"tsx\",\n className,\n options,\n activeOption: controlledActiveOption,\n defaultActiveOption = 0,\n onActiveOptionChange,\n copyText = \"Copy\",\n copySuccessText = \"Copied\",\n classNames,\n maxHeight,\n onCopy,\n ...rest\n}: CodeBlockProps) => {\n const [activeOption, setActiveOption] = useControlledState(\n controlledActiveOption,\n onActiveOptionChange,\n defaultActiveOption\n );\n\n const [currentCode, setCurrentCode] = useState(code || \"\");\n\n const [lang, setLang] = useState(defaultLang);\n\n const hasOptions = options && options.length > 0;\n\n useEffect(() => {\n if (hasOptions) {\n const newCode = options[activeOption]?.code || \"\";\n const newLang = options[activeOption]?.lang || defaultLang;\n setCurrentCode(newCode);\n setLang(newLang);\n }\n }, [\n code,\n activeOption,\n defaultActiveOption,\n options,\n defaultLang,\n hasOptions,\n setActiveOption,\n ]);\n\n const [tooltipContent, setTooltipContent] = useState(copyText);\n const [copySuccess, setCopySuccess] = useState(false);\n\n const handleCopy = useCallback(() => {\n const codeContent = currentCode ? currentCode : reactNodeToString(children);\n try {\n navigator.clipboard.writeText(codeContent).then(() => {\n setTooltipContent(copySuccessText);\n setCopySuccess(true);\n if (onCopy) onCopy(codeContent);\n });\n } catch (_) {\n setTooltipContent(\"Failed to copy\");\n }\n }, [currentCode, children, copySuccessText, onCopy]);\n\n const handleMouseLeave = useCallback(() => {\n setTooltipContent(copyText);\n setCopySuccess(false);\n }, [copyText]);\n\n const cls = useCls();\n\n return (\n <ThemeProvider theme={\"dark\"}>\n <WithAntdTokens\n className={clsx(cls(\"code-block\"), className, classNames?.root)}\n {...rest}\n >\n {hasOptions && (\n <div className={cls(\"code-block-header\", classNames?.header)}>\n <Segmented\n value={activeOption}\n onChange={setActiveOption}\n options={options.map((opt, index) => ({\n label: opt.label,\n value: index,\n }))}\n />\n </div>\n )}\n <div className={cls(\"code-block-copy\")}>\n <IconButton\n onClick={handleCopy}\n label={tooltipContent}\n onMouseLeave={handleMouseLeave}\n >\n {copySuccess ? <CheckIcon /> : <CopyIcon />}\n </IconButton>\n </div>\n <div\n className={cls(\"code-block-content\", classNames?.content)}\n style={{\n maxHeight:\n maxHeight &&\n (typeof maxHeight === \"number\" ? `${maxHeight}px` : maxHeight),\n }}\n >\n <ScrollArea>\n {currentCode ? (\n <Highlight\n language={lang}\n code={currentCode}\n theme={themes.vsDark}\n >\n {({\n className,\n style,\n tokens,\n getLineProps,\n getTokenProps,\n }) => (\n <pre\n style={{ ...style, backgroundColor: \"transparent\" }}\n className={className}\n >\n {tokens.map((line, i) => (\n <div key={i} {...getLineProps({ line })}>\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </pre>\n )}\n </Highlight>\n ) : (\n children\n )}\n </ScrollArea>\n </div>\n </WithAntdTokens>\n </ThemeProvider>\n );\n};\n"],"names":["CodeBlock","code","children","defaultLang","className","options","controlledActiveOption","defaultActiveOption","onActiveOptionChange","copyText","copySuccessText","classNames","maxHeight","onCopy","rest","activeOption","setActiveOption","useControlledState","currentCode","setCurrentCode","useState","lang","setLang","hasOptions","useEffect","newCode","_a","newLang","_b","tooltipContent","setTooltipContent","copySuccess","setCopySuccess","handleCopy","useCallback","codeContent","reactNodeToString","handleMouseLeave","cls","useCls","jsx","ThemeProvider","jsxs","WithAntdTokens","clsx","Segmented","opt","index","IconButton","CheckIcon","CopyIcon","ScrollArea","Highlight","themes","style","tokens","getLineProps","getTokenProps","line","i","token","key"],"mappings":"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"}
|
|
@@ -4,16 +4,16 @@ import { useMemo as i, isValidElement as a } from "react";
|
|
|
4
4
|
import c from "antd/es/form/FormItem";
|
|
5
5
|
import { QuestionIcon as f } from "@bioturing/assets";
|
|
6
6
|
import { useCls as p } from "../utils/antdUtils.js";
|
|
7
|
-
import { IconButton as
|
|
7
|
+
import { IconButton as d } from "../icon-button/component.js";
|
|
8
8
|
const y = ({
|
|
9
9
|
tooltip: m,
|
|
10
|
-
label:
|
|
10
|
+
label: r,
|
|
11
11
|
optionalMark: s,
|
|
12
12
|
requiredMark: o = !0,
|
|
13
|
-
...
|
|
13
|
+
...t
|
|
14
14
|
}) => {
|
|
15
|
-
const n = p(),
|
|
16
|
-
() => /* @__PURE__ */ e(
|
|
15
|
+
const n = p(), l = i(
|
|
16
|
+
() => r ? /* @__PURE__ */ e(
|
|
17
17
|
"span",
|
|
18
18
|
{
|
|
19
19
|
className: n(
|
|
@@ -21,9 +21,9 @@ const y = ({
|
|
|
21
21
|
o && "form-item-label-with-required-mark"
|
|
22
22
|
),
|
|
23
23
|
children: [
|
|
24
|
-
|
|
24
|
+
r,
|
|
25
25
|
m && /* @__PURE__ */ e(
|
|
26
|
-
|
|
26
|
+
d,
|
|
27
27
|
{
|
|
28
28
|
className: n("form-item-explaination-icon"),
|
|
29
29
|
label: typeof m == "string" || a(m) ? m : void 0,
|
|
@@ -34,10 +34,10 @@ const y = ({
|
|
|
34
34
|
o !== !1 && /* @__PURE__ */ e("span", { className: n("form-item-label-required-mark"), children: typeof o == "boolean" ? "*" : o })
|
|
35
35
|
]
|
|
36
36
|
}
|
|
37
|
-
),
|
|
38
|
-
[
|
|
37
|
+
) : void 0,
|
|
38
|
+
[r, m, s, o, n]
|
|
39
39
|
);
|
|
40
|
-
return /* @__PURE__ */ e(c, { label:
|
|
40
|
+
return /* @__PURE__ */ e(c, { label: l, ...t });
|
|
41
41
|
};
|
|
42
42
|
export {
|
|
43
43
|
y as FormItem
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.js","sources":["../../../src/components/form/item.tsx"],"sourcesContent":["\"use client\";\nimport { isValidElement, useMemo } from \"react\";\nimport {\n default as AntdFormItem,\n type FormItemProps as AntdFormItemProps,\n} from \"antd/es/form/FormItem\";\nimport { QuestionIcon } from \"@bioturing/assets\";\nimport { IconButton } from \"../icon-button\";\nimport { useCls } from \"../utils\";\n\nexport interface FormItemProps<Values = unknown>\n extends AntdFormItemProps<Values> {\n // tooltip?: React.ReactNode | TooltipProps;\n /**\n * Whether the field is optional. If true, the label will be marked as optional.\n * @default false\n */\n optionalMark?: boolean | React.ReactNode;\n /**\n * Whether show the asterisk when the field is required\n * @default true\n */\n requiredMark?: boolean | React.ReactNode;\n}\n\nexport const FormItem = <Values = unknown,>({\n tooltip,\n label,\n optionalMark,\n requiredMark = true,\n ...rest\n}: FormItemProps<Values>) => {\n const cls = useCls();\n\n // requiredMark is used in the className below\n const renderedLabel = useMemo(\n ()
|
|
1
|
+
{"version":3,"file":"item.js","sources":["../../../src/components/form/item.tsx"],"sourcesContent":["\"use client\";\nimport { isValidElement, useMemo } from \"react\";\nimport {\n default as AntdFormItem,\n type FormItemProps as AntdFormItemProps,\n} from \"antd/es/form/FormItem\";\nimport { QuestionIcon } from \"@bioturing/assets\";\nimport { IconButton } from \"../icon-button\";\nimport { useCls } from \"../utils\";\n\nexport interface FormItemProps<Values = unknown>\n extends AntdFormItemProps<Values> {\n // tooltip?: React.ReactNode | TooltipProps;\n /**\n * Whether the field is optional. If true, the label will be marked as optional.\n * @default false\n */\n optionalMark?: boolean | React.ReactNode;\n /**\n * Whether show the asterisk when the field is required\n * @default true\n */\n requiredMark?: boolean | React.ReactNode;\n}\n\nexport const FormItem = <Values = unknown,>({\n tooltip,\n label,\n optionalMark,\n requiredMark = true,\n ...rest\n}: FormItemProps<Values>) => {\n const cls = useCls();\n\n // requiredMark is used in the className below\n const renderedLabel = useMemo(\n () =>\n label ? (\n <span\n className={cls(\n \"form-item-label-inner\",\n requiredMark && \"form-item-label-with-required-mark\"\n )}\n >\n {[\n label,\n tooltip && (\n <IconButton\n className={cls(\"form-item-explaination-icon\")}\n label={\n typeof tooltip == \"string\" || isValidElement(tooltip)\n ? tooltip\n : undefined\n }\n >\n <QuestionIcon />\n </IconButton>\n ),\n optionalMark && (\n <span className={cls(\"form-item-label-optional-mark\")}>\n {typeof optionalMark == \"boolean\" ? \"(optional)\" : optionalMark}\n </span>\n ),\n requiredMark !== false && (\n <span className={cls(\"form-item-label-required-mark\")}>\n {typeof requiredMark == \"boolean\" ? \"*\" : requiredMark}\n </span>\n ),\n ]}\n </span>\n ) : undefined,\n [label, tooltip, optionalMark, requiredMark, cls]\n );\n\n return <AntdFormItem label={renderedLabel} {...rest} />;\n};\n"],"names":["FormItem","tooltip","label","optionalMark","requiredMark","rest","cls","useCls","renderedLabel","useMemo","jsx","IconButton","isValidElement","QuestionIcon","AntdFormItem"],"mappings":";;;;;;;AAyBO,MAAMA,IAAW,CAAoB;AAAA,EAC1C,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,GAAGC;AACL,MAA6B;AAC3B,QAAMC,IAAMC,EAAO,GAGbC,IAAgBC;AAAA,IACpB,MACEP,IACE,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWJ;AAAA,UACT;AAAA,UACAF,KAAgB;AAAA,QAClB;AAAA,QAEC,UAAA;AAAA,UACCF;AAAA,UACAD,KACE,gBAAAS;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,WAAWL,EAAI,6BAA6B;AAAA,cAC5C,OACE,OAAOL,KAAW,YAAYW,EAAeX,CAAO,IAChDA,IACA;AAAA,cAGN,4BAACY,GAAa,CAAA,CAAA;AAAA,YAAA;AAAA,UAChB;AAAA,UAEFV,KACG,gBAAAO,EAAA,QAAA,EAAK,WAAWJ,EAAI,+BAA+B,GACjD,UAAO,OAAAH,KAAgB,YAAY,eAAeA,EACrD,CAAA;AAAA,UAEFC,MAAiB,MACd,gBAAAM,EAAA,QAAA,EAAK,WAAWJ,EAAI,+BAA+B,GACjD,UAAO,OAAAF,KAAgB,YAAY,MAAMA,EAC5C,CAAA;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA,IAEA;AAAA,IACN,CAACF,GAAOD,GAASE,GAAcC,GAAcE,CAAG;AAAA,EAClD;AAEA,SAAQ,gBAAAI,EAAAI,GAAA,EAAa,OAAON,GAAgB,GAAGH,GAAM;AACvD;"}
|
|
@@ -1,65 +1,69 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import { forwardRef as
|
|
2
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef as N } from "react";
|
|
4
4
|
import './style.css';/* empty css */
|
|
5
|
-
import { Tooltip as
|
|
6
|
-
import { WithRenderProp as
|
|
7
|
-
import { Spin as
|
|
8
|
-
import { useCls as
|
|
9
|
-
import { clsx as
|
|
10
|
-
const
|
|
11
|
-
label:
|
|
12
|
-
size:
|
|
5
|
+
import { Tooltip as P } from "../tooltip/component.js";
|
|
6
|
+
import { WithRenderProp as S } from "../utils/WithRenderProp.js";
|
|
7
|
+
import { Spin as T } from "../spin/component.js";
|
|
8
|
+
import { useCls as W } from "../utils/antdUtils.js";
|
|
9
|
+
import { clsx as $ } from "../utils/cn.js";
|
|
10
|
+
const h = ({
|
|
11
|
+
label: m,
|
|
12
|
+
size: a = "medium",
|
|
13
13
|
negativeMargin: l = !0,
|
|
14
|
-
children:
|
|
15
|
-
className:
|
|
16
|
-
tooltipProps:
|
|
14
|
+
children: d,
|
|
15
|
+
className: b,
|
|
16
|
+
tooltipProps: f = {},
|
|
17
|
+
active: v = !1,
|
|
17
18
|
as: x,
|
|
18
19
|
href: t,
|
|
19
20
|
// Extract anchor-specific props
|
|
20
|
-
target:
|
|
21
|
+
target: s,
|
|
21
22
|
rel: e,
|
|
22
|
-
download:
|
|
23
|
-
hrefLang:
|
|
24
|
-
referrerPolicy:
|
|
23
|
+
download: r,
|
|
24
|
+
hrefLang: c,
|
|
25
|
+
referrerPolicy: p,
|
|
25
26
|
loading: o,
|
|
26
27
|
render: C,
|
|
27
28
|
...I
|
|
28
29
|
}, B) => {
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
30
|
+
const R = W(), j = $(
|
|
31
|
+
R(
|
|
32
|
+
"icon-button",
|
|
33
|
+
`icon-button-${a}`,
|
|
34
|
+
v && "icon-button-active",
|
|
35
|
+
l && "icon-button-negative-margin"
|
|
36
|
+
),
|
|
37
|
+
b
|
|
38
|
+
), n = x || (t ? "a" : "button"), w = {
|
|
35
39
|
ref: B,
|
|
36
|
-
className:
|
|
37
|
-
...
|
|
38
|
-
...
|
|
40
|
+
className: j,
|
|
41
|
+
...n === "button" && { type: "button" },
|
|
42
|
+
...n === "a" ? {
|
|
39
43
|
...t && { href: t },
|
|
40
|
-
...
|
|
44
|
+
...s !== void 0 && { target: s },
|
|
41
45
|
...e !== void 0 && { rel: e },
|
|
42
|
-
...
|
|
43
|
-
...
|
|
44
|
-
...
|
|
46
|
+
...r !== void 0 && { download: r },
|
|
47
|
+
...c !== void 0 && { hrefLang: c },
|
|
48
|
+
...p !== void 0 && { referrerPolicy: p }
|
|
45
49
|
} : {},
|
|
46
50
|
"data-loading": o,
|
|
47
|
-
children: o ? /* @__PURE__ */
|
|
51
|
+
children: o ? /* @__PURE__ */ i(T, {}) : d,
|
|
48
52
|
...I
|
|
49
|
-
},
|
|
50
|
-
|
|
53
|
+
}, u = /* @__PURE__ */ i(
|
|
54
|
+
S,
|
|
51
55
|
{
|
|
52
|
-
as:
|
|
56
|
+
as: n,
|
|
53
57
|
render: C,
|
|
54
|
-
...
|
|
58
|
+
...w,
|
|
55
59
|
state: {
|
|
56
60
|
loading: o
|
|
57
61
|
}
|
|
58
62
|
}
|
|
59
63
|
);
|
|
60
|
-
return
|
|
61
|
-
},
|
|
64
|
+
return m ? /* @__PURE__ */ i(P, { title: m, arrow: !1, ...f, children: u }) : u;
|
|
65
|
+
}, G = N(h);
|
|
62
66
|
export {
|
|
63
|
-
|
|
67
|
+
G as IconButton
|
|
64
68
|
};
|
|
65
69
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../src/components/icon-button/component.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n forwardRef,\n type ElementType,\n type ReactElement,\n type Ref,\n ComponentPropsWithRef,\n} from \"react\";\nimport { Tooltip, TooltipProps } from \"../tooltip\";\nimport {\n useCls,\n clsx,\n WithRenderPropProps,\n WithRenderProp,\n ElementTypeToDOMType,\n} from \"../utils\";\nimport { Spin } from \"../spin\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Base props without href/as handling\nexport type IconButtonProps<E extends ElementType = \"button\"> =\n WithRenderPropProps<E, { loading: boolean }> & {\n /**\n * Label text or element to display within tooltip\n * @default undefined\n */\n label?: React.ReactNode;\n /**\n * Size of the icon button: small (1.25rem) or medium (1.5rem)\n * @default medium\n */\n size?: \"small\" | \"medium\";\n /**\n * Whether to apply negative margin for better visual alignment\n * @default true\n */\n negativeMargin?: boolean;\n /**\n * Whether to show loading state\n * @default false\n */\n loading?: boolean;\n /**\n * Props to pass to the Tooltip component when wrapping the button\n */\n tooltipProps?: TooltipProps;\n };\n\n/**\n * Implementation of the IconButton component\n */\nconst IconButtonImpl = <E extends ElementType = \"button\">(\n {\n label,\n size = \"medium\",\n negativeMargin = true,\n children,\n className,\n tooltipProps = {},\n as,\n href,\n // Extract anchor-specific props\n target,\n rel,\n download,\n hrefLang,\n referrerPolicy,\n loading,\n render,\n ...rest\n }: IconButtonProps<E>,\n ref: Ref<ElementTypeToDOMType<E>>\n) => {\n const cls = useCls();\n const buttonClasses = clsx(\n cls(\"icon-button\"
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../src/components/icon-button/component.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n forwardRef,\n type ElementType,\n type ReactElement,\n type Ref,\n ComponentPropsWithRef,\n} from \"react\";\nimport { Tooltip, TooltipProps } from \"../tooltip\";\nimport {\n useCls,\n clsx,\n WithRenderPropProps,\n WithRenderProp,\n ElementTypeToDOMType,\n} from \"../utils\";\nimport { Spin } from \"../spin\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Base props without href/as handling\nexport type IconButtonProps<E extends ElementType = \"button\"> =\n WithRenderPropProps<E, { loading: boolean }> & {\n /**\n * Label text or element to display within tooltip\n * @default undefined\n */\n label?: React.ReactNode;\n /**\n * Size of the icon button: small (1.25rem) or medium (1.5rem)\n * @default medium\n */\n size?: \"small\" | \"medium\";\n /**\n * Whether to apply negative margin for better visual alignment\n * @default true\n */\n negativeMargin?: boolean;\n /**\n * Whether to show loading state\n * @default false\n */\n loading?: boolean;\n /**\n * Props to pass to the Tooltip component when wrapping the button\n */\n tooltipProps?: TooltipProps;\n /**\n * Whether to show active state\n * @default false\n */\n active?: boolean;\n };\n\n/**\n * Implementation of the IconButton component\n */\nconst IconButtonImpl = <E extends ElementType = \"button\">(\n {\n label,\n size = \"medium\",\n negativeMargin = true,\n children,\n className,\n tooltipProps = {},\n active = false,\n as,\n href,\n // Extract anchor-specific props\n target,\n rel,\n download,\n hrefLang,\n referrerPolicy,\n loading,\n render,\n ...rest\n }: IconButtonProps<E>,\n ref: Ref<ElementTypeToDOMType<E>>\n) => {\n const cls = useCls();\n const buttonClasses = clsx(\n cls(\n \"icon-button\",\n `icon-button-${size}`,\n active && \"icon-button-active\",\n negativeMargin && \"icon-button-negative-margin\"\n ),\n className\n );\n\n // Use a type assertion for the component to avoid TypeScript errors\n const Component = (as || (href ? \"a\" : \"button\")) as ElementType;\n\n const elementProps = {\n ref,\n className: buttonClasses,\n ...(Component === \"button\" && { type: \"button\" }),\n ...(Component === \"a\"\n ? {\n ...(href && { href }),\n ...(target !== undefined && { target }),\n ...(rel !== undefined && { rel }),\n ...(download !== undefined && { download }),\n ...(hrefLang !== undefined && { hrefLang }),\n ...(referrerPolicy !== undefined && { referrerPolicy }),\n }\n : {}),\n \"data-loading\": loading,\n children: loading ? <Spin /> : children,\n ...rest,\n };\n\n const element = (\n <WithRenderProp\n as={Component}\n render={render}\n {...elementProps}\n state={{\n loading,\n }}\n />\n );\n\n return label ? (\n <Tooltip title={label} arrow={false} {...tooltipProps}>\n {element}\n </Tooltip>\n ) : (\n element\n );\n};\n\n// Export with correct typing\nexport const IconButton = forwardRef(IconButtonImpl) as <\n E extends ElementType = \"button\"\n>(\n props: IconButtonProps<E> & { ref?: ComponentPropsWithRef<E>[\"ref\"] }\n) => ReturnType<typeof IconButtonImpl>;\n"],"names":["IconButtonImpl","label","size","negativeMargin","children","className","tooltipProps","active","as","href","target","rel","download","hrefLang","referrerPolicy","loading","render","rest","ref","cls","useCls","buttonClasses","clsx","Component","elementProps","jsx","Spin","element","WithRenderProp","Tooltip","IconButton","forwardRef"],"mappings":";;;;;;;;;AA0DA,MAAMA,IAAiB,CACrB;AAAA,EACE,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,gBAAAC,IAAiB;AAAA,EACjB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC,IAAe,CAAC;AAAA,EAChB,QAAAC,IAAS;AAAA,EACT,IAAAC;AAAA,EACA,MAAAC;AAAA;AAAA,EAEA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAO,GACbC,IAAgBC;AAAA,IACpBH;AAAA,MACE;AAAA,MACA,eAAejB,CAAI;AAAA,MACnBK,KAAU;AAAA,MACVJ,KAAkB;AAAA,IACpB;AAAA,IACAE;AAAA,EACF,GAGMkB,IAAaf,MAAOC,IAAO,MAAM,WAEjCe,IAAe;AAAA,IACnB,KAAAN;AAAA,IACA,WAAWG;AAAA,IACX,GAAIE,MAAc,YAAY,EAAE,MAAM,SAAS;AAAA,IAC/C,GAAIA,MAAc,MACd;AAAA,MACE,GAAId,KAAQ,EAAE,MAAAA,EAAK;AAAA,MACnB,GAAIC,MAAW,UAAa,EAAE,QAAAA,EAAO;AAAA,MACrC,GAAIC,MAAQ,UAAa,EAAE,KAAAA,EAAI;AAAA,MAC/B,GAAIC,MAAa,UAAa,EAAE,UAAAA,EAAS;AAAA,MACzC,GAAIC,MAAa,UAAa,EAAE,UAAAA,EAAS;AAAA,MACzC,GAAIC,MAAmB,UAAa,EAAE,gBAAAA,EAAe;AAAA,IAAA,IAEvD,CAAC;AAAA,IACL,gBAAgBC;AAAA,IAChB,UAAUA,IAAW,gBAAAU,EAAAC,GAAA,CAAA,CAAK,IAAKtB;AAAA,IAC/B,GAAGa;AAAA,EACL,GAEMU,IACJ,gBAAAF;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,IAAIL;AAAA,MACJ,QAAAP;AAAA,MACC,GAAGQ;AAAA,MACJ,OAAO;AAAA,QACL,SAAAT;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAGK,SAAAd,IACJ,gBAAAwB,EAAAI,GAAA,EAAQ,OAAO5B,GAAO,OAAO,IAAQ,GAAGK,GACtC,UAAAqB,EAAA,CACH,IAEAA;AAEJ,GAGaG,IAAaC,EAAW/B,CAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.ds-icon-button{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:999px;cursor:pointer;background-color:transparent;color:var(--ds-color-icon);transition:all .2s}.ds-icon-button:hover{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-icon-hover)}.ds-icon-button:active,.ds-icon-button.ds-popover-open{background-color:var(--ds-color-primary-bg);color:var(--ds-color-primary)}.ds-icon-button:focus{outline:none}.ds-icon-button:disabled{cursor:not-allowed;pointer-events:none;color:var(--ds-color-text-disabled)}.ds-icon-button.ds-icon-button-medium{padding:.25rem;font-size:1.25rem;height:1.75rem;width:1.75rem}.ds-icon-button.ds-icon-button-medium.ds-icon-button-negative-margin{margin:-.25rem}.ds-icon-button.ds-icon-button-small{padding:.25rem;font-size:1rem;height:1.5rem;width:1.5rem}.ds-icon-button.ds-icon-button-small.ds-icon-button-negative-margin{margin:-.25rem}.ds-icon-button .ds-spin{font-size:.8em;line-height:1;display:flex;align-items:center;justify-content:center}}
|
|
1
|
+
@layer components{.ds-icon-button{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:999px;cursor:pointer;background-color:transparent;color:var(--ds-color-icon);transition:all .2s}.ds-icon-button:hover{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-icon-hover)}.ds-icon-button:active,.ds-icon-button.ds-icon-button-active,.ds-icon-button.ds-popover-open{background-color:var(--ds-color-primary-bg);color:var(--ds-color-primary)}.ds-icon-button:focus{outline:none}.ds-icon-button:disabled{cursor:not-allowed;pointer-events:none;color:var(--ds-color-text-disabled)}.ds-icon-button.ds-icon-button-medium{padding:.25rem;font-size:1.25rem;height:1.75rem;width:1.75rem}.ds-icon-button.ds-icon-button-medium.ds-icon-button-negative-margin{margin:-.25rem}.ds-icon-button.ds-icon-button-small{padding:.25rem;font-size:1rem;height:1.5rem;width:1.5rem}.ds-icon-button.ds-icon-button-small.ds-icon-button-negative-margin{margin:-.25rem}.ds-icon-button .ds-spin{font-size:.8em;line-height:1;display:flex;align-items:center;justify-content:center}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.ds-select-popup .ds-select-item-option-state{order:-1}.ds-select-popup .ds-select-checkbox-indicator,.ds-select-popup .ant-select-checkbox-indicator{margin-right:.5rem}.ds-select-multiple .ds-select-item-option-selected:not(.ds-select-item-option-disabled):not(:hover){background:transparent}.ds-select-popup-enhanced{
|
|
1
|
+
@layer components{.ds-select-popup .ds-select-item-option-state{order:-1}.ds-select-popup .ds-select-checkbox-indicator,.ds-select-popup .ant-select-checkbox-indicator{margin-right:.5rem}.ds-select-multiple .ds-select-item-option-selected:not(.ds-select-item-option-disabled):not(:hover){background:transparent}.ds-select-popup-enhanced{transition:none;width:var(--ds-select-popup-width);height:fit-content;max-width:calc(var(--available-width) - 16px);max-height:calc(var(--available-height) - 16px)}}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { forwardRef as
|
|
1
|
+
import { jsx as m } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as p } from "react";
|
|
3
3
|
import { useRender as i } from "@base-ui-components/react/use-render";
|
|
4
|
-
const
|
|
5
|
-
const { render:
|
|
4
|
+
const c = (e, r) => {
|
|
5
|
+
const { render: n, as: t = "div", state: o, ...d } = e;
|
|
6
6
|
return i({
|
|
7
|
-
render:
|
|
8
|
-
props:
|
|
9
|
-
state:
|
|
7
|
+
render: n || ((s) => /* @__PURE__ */ m(t, { ...s })),
|
|
8
|
+
props: d,
|
|
9
|
+
state: o,
|
|
10
10
|
ref: r
|
|
11
11
|
});
|
|
12
|
-
},
|
|
12
|
+
}, l = p(c);
|
|
13
13
|
export {
|
|
14
|
-
|
|
14
|
+
l as WithRenderProp
|
|
15
15
|
};
|
|
16
16
|
//# sourceMappingURL=WithRenderProp.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WithRenderProp.js","sources":["../../../src/components/utils/WithRenderProp.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport { ElementTypeToDOMType } from \"./types\";\n\nexport type WithRenderPropProps<\n T extends React.ElementType = \"div\",\n State extends Record<string, unknown> = Record<string, unknown>\n> = React.ComponentPropsWithoutRef<T> & {\n render?: useRender.RenderProp<State>;\n as?: T;\n state?: State;\n};\n\nconst WithRenderPropInner = <\n T extends React.ElementType = \"div\",\n State extends Record<string, unknown> = Record<string, unknown>\n>(\n props: WithRenderPropProps<T, State>,\n ref: React.ForwardedRef<T>\n) => {\n const { render, as: Tag = \"div\", ...etc } = props;\n const renderedElement = useRender({\n render: render || ((props) => <Tag {...props} />),\n props: etc,\n state
|
|
1
|
+
{"version":3,"file":"WithRenderProp.js","sources":["../../../src/components/utils/WithRenderProp.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport { ElementTypeToDOMType } from \"./types\";\n\nexport type WithRenderPropProps<\n T extends React.ElementType = \"div\",\n State extends Record<string, unknown> = Record<string, unknown>\n> = React.ComponentPropsWithoutRef<T> & {\n render?: useRender.RenderProp<State>;\n as?: T;\n state?: State;\n};\n\nconst WithRenderPropInner = <\n T extends React.ElementType = \"div\",\n State extends Record<string, unknown> = Record<string, unknown>\n>(\n props: WithRenderPropProps<T, State>,\n ref: React.ForwardedRef<T>\n) => {\n const { render, as: Tag = \"div\", state, ...etc } = props;\n const renderedElement = useRender({\n render: render || ((props) => <Tag {...props} />),\n props: etc,\n state,\n ref: ref as unknown as React.Ref<ElementTypeToDOMType<T>>,\n });\n return renderedElement;\n};\n\nexport const WithRenderProp = forwardRef(WithRenderPropInner) as <\n T extends React.ElementType = \"div\",\n State extends Record<string, unknown> = Record<string, unknown>\n>(\n props: WithRenderPropProps<T, State> & {\n ref?: React.Ref<ElementTypeToDOMType<T>>;\n }\n) => ReturnType<typeof WithRenderPropInner>;\n"],"names":["WithRenderPropInner","props","ref","render","Tag","state","etc","useRender","jsx","WithRenderProp","forwardRef"],"mappings":";;;AAaA,MAAMA,IAAsB,CAI1BC,GACAC,MACG;AACG,QAAA,EAAE,QAAAC,GAAQ,IAAIC,IAAM,OAAO,OAAAC,GAAO,GAAGC,MAAQL;AAO5C,SANiBM,EAAU;AAAA,IAChC,QAAQJ,MAAW,CAACF,MAAW,gBAAAO,EAAAJ,GAAA,EAAK,GAAGH,EAAO,CAAA;AAAA,IAC9C,OAAOK;AAAA,IACP,OAAAD;AAAA,IACA,KAAAH;AAAA,EAAA,CACD;AAEH,GAEaO,IAAiBC,EAAWV,CAAmB;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -456,9 +456,9 @@ export declare function clsx(...args: ClassValue[]): string;
|
|
|
456
456
|
|
|
457
457
|
export declare function cn(...args: ClassValue[]): string;
|
|
458
458
|
|
|
459
|
-
export declare const CodeBlock: ({ code, children, lang: defaultLang, className, options, activeOption: controlledActiveOption, defaultActiveOption, onActiveOptionChange, copyText, copySuccessText, classNames, maxHeight, ...rest }: CodeBlockProps) => JSX.Element;
|
|
459
|
+
export declare const CodeBlock: ({ code, children, lang: defaultLang, className, options, activeOption: controlledActiveOption, defaultActiveOption, onActiveOptionChange, copyText, copySuccessText, classNames, maxHeight, onCopy, ...rest }: CodeBlockProps) => JSX.Element;
|
|
460
460
|
|
|
461
|
-
export declare interface CodeBlockProps extends React.ComponentPropsWithRef<"div"> {
|
|
461
|
+
export declare interface CodeBlockProps extends Omit<React.ComponentPropsWithRef<"div">, "onCopy"> {
|
|
462
462
|
/**
|
|
463
463
|
* The code to be highlighted
|
|
464
464
|
*/
|
|
@@ -510,6 +510,10 @@ export declare interface CodeBlockProps extends React.ComponentPropsWithRef<"div
|
|
|
510
510
|
* Maximum height of the code block
|
|
511
511
|
*/
|
|
512
512
|
maxHeight?: string | number;
|
|
513
|
+
/**
|
|
514
|
+
* Copy callback function
|
|
515
|
+
*/
|
|
516
|
+
onCopy?: (code?: string) => void;
|
|
513
517
|
}
|
|
514
518
|
|
|
515
519
|
export declare interface CodeOption {
|
|
@@ -1791,7 +1795,7 @@ export declare const IconButton: <E extends ElementType = "button">(props: IconB
|
|
|
1791
1795
|
/**
|
|
1792
1796
|
* Implementation of the IconButton component
|
|
1793
1797
|
*/
|
|
1794
|
-
declare const IconButtonImpl: <E extends ElementType = "button">({ label, size, negativeMargin, children, className, tooltipProps, as, href, target, rel, download, hrefLang, referrerPolicy, loading, render, ...rest }: IconButtonProps<E>, ref: Ref<ElementTypeToDOMType<E>>) => JSX.Element;
|
|
1798
|
+
declare const IconButtonImpl: <E extends ElementType = "button">({ label, size, negativeMargin, children, className, tooltipProps, active, as, href, target, rel, download, hrefLang, referrerPolicy, loading, render, ...rest }: IconButtonProps<E>, ref: Ref<ElementTypeToDOMType<E>>) => JSX.Element;
|
|
1795
1799
|
|
|
1796
1800
|
export declare type IconButtonProps<E extends ElementType = "button"> = WithRenderPropProps<E, {
|
|
1797
1801
|
loading: boolean;
|
|
@@ -1820,6 +1824,11 @@ export declare type IconButtonProps<E extends ElementType = "button"> = WithRend
|
|
|
1820
1824
|
* Props to pass to the Tooltip component when wrapping the button
|
|
1821
1825
|
*/
|
|
1822
1826
|
tooltipProps?: TooltipProps;
|
|
1827
|
+
/**
|
|
1828
|
+
* Whether to show active state
|
|
1829
|
+
* @default false
|
|
1830
|
+
*/
|
|
1831
|
+
active?: boolean;
|
|
1823
1832
|
};
|
|
1824
1833
|
|
|
1825
1834
|
declare const InnerInternalTable: <RecordType extends object = object>({ columns, locale, emptyDescription, loading, virtual, scroll: scrollProp, className, variant, ...rest }: TableProps<RecordType>, ref: Ref<TableRef>) => JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bioturing/components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.22.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"module": "./dist/index.js",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"rc-tree": "^5.13.1",
|
|
29
29
|
"react-use-resizable": "^0.2.0",
|
|
30
30
|
"tailwind-merge": "^3.2.0",
|
|
31
|
-
"@bioturing/assets": "0.
|
|
31
|
+
"@bioturing/assets": "0.18.0"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"antd": "^5.25.0",
|