@bioturing/components 0.45.0 → 0.46.1
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/base-menu/index.d.ts.map +1 -1
- package/dist/components/base-menu/item.d.ts.map +1 -1
- package/dist/components/base-menu/item.js +6 -13
- package/dist/components/base-menu/item.js.map +1 -1
- package/dist/components/button/style.css +1 -1
- package/dist/components/code-block/component.js +58 -58
- package/dist/components/code-block/component.js.map +1 -1
- package/dist/components/collapse/component.js +6 -6
- package/dist/components/collapse/component.js.map +1 -1
- package/dist/components/combobox/component.d.ts +32 -1
- package/dist/components/combobox/component.d.ts.map +1 -1
- package/dist/components/combobox/component.js +286 -261
- package/dist/components/combobox/component.js.map +1 -1
- package/dist/components/combobox/style.css +1 -1
- package/dist/components/combobox/utils.d.ts +2 -0
- package/dist/components/combobox/utils.d.ts.map +1 -0
- package/dist/components/combobox/utils.js +10 -0
- package/dist/components/combobox/utils.js.map +1 -0
- package/dist/components/command-palette/component.d.ts.map +1 -1
- package/dist/components/command-palette/component.js +30 -24
- package/dist/components/command-palette/component.js.map +1 -1
- package/dist/components/drag-drop/droppable.d.ts.map +1 -1
- package/dist/components/drag-drop/droppable.js +72 -68
- package/dist/components/drag-drop/droppable.js.map +1 -1
- package/dist/components/drag-drop/index.d.ts.map +1 -1
- package/dist/components/drag-drop/value.d.ts.map +1 -1
- package/dist/components/drag-drop/value.js +40 -56
- package/dist/components/drag-drop/value.js.map +1 -1
- package/dist/components/hooks/useDraggable.d.ts.map +1 -1
- package/dist/components/hooks/useDraggable.js +34 -27
- package/dist/components/hooks/useDraggable.js.map +1 -1
- package/dist/components/popup-panel/component.d.ts +1 -1
- package/dist/components/popup-panel/component.d.ts.map +1 -1
- package/dist/components/popup-panel/component.js +217 -233
- package/dist/components/popup-panel/component.js.map +1 -1
- package/dist/components/popup-panel/constants.d.ts +5 -1
- package/dist/components/popup-panel/constants.d.ts.map +1 -1
- package/dist/components/popup-panel/constants.js +8 -4
- package/dist/components/popup-panel/constants.js.map +1 -1
- package/dist/components/popup-panel/style.css +1 -1
- package/dist/components/popup-panel/types.d.ts +14 -1
- package/dist/components/popup-panel/types.d.ts.map +1 -1
- package/dist/components/select-trigger/style.css +1 -1
- package/dist/components/theme-provider/style.css +1 -1
- package/dist/components/toast/component.d.ts.map +1 -1
- package/dist/components/toast/component.js +37 -35
- package/dist/components/toast/component.js.map +1 -1
- package/dist/components/truncate/helpers.d.ts +13 -7
- package/dist/components/truncate/helpers.d.ts.map +1 -1
- package/dist/components/truncate/helpers.js +102 -85
- package/dist/components/truncate/helpers.js.map +1 -1
- package/dist/stats.html +1 -1
- package/dist/tailwind.css +16 -0
- package/dist/tokens/and-theme/tokens.d.ts.map +1 -1
- package/dist/tokens/and-theme/tokens.js +4 -1
- package/dist/tokens/and-theme/tokens.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/base-menu/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAE9D,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,CAAC;AAChD,eAAO,MAAM,QAAQ;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/base-menu/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAE9D,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,CAAC;AAChD,eAAO,MAAM,QAAQ;;;;;;;;;;;;WASo/F,CAAC;;CADzgG,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/components/base-menu/item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,wBAAwB,EAAc,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAGtD,OAAO,YAAY,CAAC;AAEpB,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,MAAM,iBAAiB,
|
|
1
|
+
{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/components/base-menu/item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,wBAAwB,EAAc,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAGtD,OAAO,YAAY,CAAC;AAEpB,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,KAAK,IAC/E,wBAAwB,CAAC,CAAC,CAAC,GAAG;IAC5B,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iCAAiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+CAA+C;IAC/C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gDAAgD;IAChD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;IAC/E,2CAA2C;IAC3C,UAAU,CAAC,EAAE;QACX,4CAA4C;QAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,oCAAoC;QACpC,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,oCAAoC;QACpC,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,sCAAsC;QACtC,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC;IAC9B,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,CAAC;AAEJ,QAAA,MAAM,iBAAiB,GAAI,CAAC,SAAS,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,KAAK,EAC5E,+JAiBG,iBAAiB,CAAC,CAAC,CAAC,EACvB,KAAK,KAAK,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,SA8CjD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAoC,CAC3D,CAAC,SAAS,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,KAAK,EAEnD,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAC5B,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC;CACnD,KACE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsxs as v, Fragment as R, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef as j } from "react";
|
|
3
|
-
import { Checkbox as k } from "antd";
|
|
4
3
|
import './item.css';/* empty css */
|
|
5
|
-
import { useRender as
|
|
6
|
-
import { useCls as
|
|
4
|
+
import { useRender as k } from "@base-ui/react";
|
|
5
|
+
import { useCls as B } from "../utils/antdUtils.js";
|
|
6
|
+
import { Checkbox as E } from "../checkbox/component.js";
|
|
7
7
|
import { clsx as a } from "../utils/cn.js";
|
|
8
8
|
import { WithRenderProp as M } from "../utils/WithRenderProp.js";
|
|
9
9
|
const N = ({
|
|
@@ -24,15 +24,8 @@ const N = ({
|
|
|
24
24
|
as: h,
|
|
25
25
|
...b
|
|
26
26
|
}, I) => {
|
|
27
|
-
const e =
|
|
28
|
-
i && /* @__PURE__ */ r(
|
|
29
|
-
k,
|
|
30
|
-
{
|
|
31
|
-
checked: m,
|
|
32
|
-
tabIndex: -1,
|
|
33
|
-
indeterminate: p
|
|
34
|
-
}
|
|
35
|
-
),
|
|
27
|
+
const e = B(), g = /* @__PURE__ */ v(R, { children: [
|
|
28
|
+
i && /* @__PURE__ */ r(E, { checked: m, tabIndex: -1, indeterminate: p }),
|
|
36
29
|
o && /* @__PURE__ */ r("span", { className: a(e("menu-item-icon"), t?.icon), children: o }),
|
|
37
30
|
s && /* @__PURE__ */ r(
|
|
38
31
|
M,
|
|
@@ -45,7 +38,7 @@ const N = ({
|
|
|
45
38
|
),
|
|
46
39
|
d && /* @__PURE__ */ r("span", { className: a(e("menu-item-suffix"), t?.suffix), children: d })
|
|
47
40
|
] });
|
|
48
|
-
return
|
|
41
|
+
return k({
|
|
49
42
|
render: x || void 0,
|
|
50
43
|
props: {
|
|
51
44
|
...b,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.js","sources":["../../../src/components/base-menu/item.tsx"],"sourcesContent":["import React, { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { clsx, useCls, WithRenderProp } from \"../utils\";\nimport { ElementTypeToDOMType } from \"../utils/types\";\nimport { Checkbox } from \"
|
|
1
|
+
{"version":3,"file":"item.js","sources":["../../../src/components/base-menu/item.tsx"],"sourcesContent":["import React, { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { clsx, useCls, WithRenderProp } from \"../utils\";\nimport { ElementTypeToDOMType } from \"../utils/types\";\nimport { Checkbox } from \"../checkbox\";\n\nimport \"./item.css\";\n\nimport { useRender } from \"@base-ui/react\";\n\nexport type BaseMenuItemProps<T extends keyof React.JSX.IntrinsicElements = \"div\"> =\n ComponentPropsWithoutRef<T> & {\n /** Whether the item is disabled */\n disabled?: boolean;\n /** Whether the item represents a dangerous action */\n danger?: boolean;\n /** Whether the item is currently selected */\n selected?: boolean;\n /** Whether the item is currently active/highlighted */\n active?: boolean;\n /** Whether the item has focus */\n focused?: boolean;\n /** Icon to display before the text */\n icon?: React.ReactNode;\n /** Text content of the item */\n children?: React.ReactNode;\n /** Suffix content to display after the text */\n suffix?: React.ReactNode;\n /** Whether to show checkbox */\n showCheckbox?: boolean;\n /** Whether the checkbox is indeterminate */\n indeterminate?: boolean;\n /** Custom render function for the item label */\n labelRender?: (props: React.HTMLAttributes<HTMLElement>) => React.ReactElement;\n /** Custom className for different parts */\n classNames?: {\n /** Custom className for the root element */\n root?: string;\n /** Custom className for the icon */\n icon?: string;\n /** Custom className for the text */\n text?: string;\n /** Custom className for the suffix */\n suffix?: string;\n };\n onSelect?: () => void;\n render?: useRender.RenderProp;\n as?: T;\n };\n\nconst BaseMenuItemInner = <T extends keyof React.JSX.IntrinsicElements = \"div\">(\n {\n disabled = false,\n danger = false,\n selected = false,\n active = false,\n focused = false,\n icon,\n children,\n suffix,\n showCheckbox = false,\n indeterminate = false,\n labelRender,\n classNames,\n render,\n onSelect,\n as,\n ...props\n }: BaseMenuItemProps<T>,\n ref: React.ForwardedRef<ElementTypeToDOMType<T>>,\n) => {\n const cls = useCls();\n\n const content = (\n <>\n {showCheckbox && <Checkbox checked={selected} tabIndex={-1} indeterminate={indeterminate} />}\n {icon && <span className={clsx(cls(\"menu-item-icon\"), classNames?.icon)}>{icon}</span>}\n {children && (\n <WithRenderProp\n render={labelRender}\n as=\"span\"\n className={clsx(cls(\"menu-item-text\"), classNames?.text)}\n >\n {children}\n </WithRenderProp>\n )}\n {suffix && (\n <span className={clsx(cls(\"menu-item-suffix\"), classNames?.suffix)}>{suffix}</span>\n )}\n </>\n );\n\n const renderedElement = useRender({\n render: render || undefined,\n props: {\n ...props,\n className: clsx(\n // Base menu item styles\n cls(\"menu-item-base\"),\n showCheckbox && cls(\"menu-item-show-checkbox\"),\n classNames?.root,\n ),\n \"data-disabled\": disabled,\n \"data-danger\": danger,\n \"data-selected\": selected,\n \"data-active\": active,\n \"data-focus\": focused,\n \"aria-disabled\": disabled,\n children: content,\n },\n ref: ref as unknown as React.Ref<ElementTypeToDOMType<T>>,\n defaultTagName: as || \"div\",\n });\n\n return renderedElement;\n};\n\nexport const BaseMenuItem = forwardRef(BaseMenuItemInner) as <\n T extends keyof React.JSX.IntrinsicElements = \"div\",\n>(\n props: BaseMenuItemProps<T> & {\n ref?: React.ForwardedRef<ElementTypeToDOMType<T>>;\n },\n) => ReturnType<typeof BaseMenuItemInner>;\n"],"names":["BaseMenuItemInner","disabled","danger","selected","active","focused","icon","children","suffix","showCheckbox","indeterminate","labelRender","classNames","render","onSelect","as","props","ref","cls","useCls","content","jsxs","Fragment","Checkbox","jsx","clsx","WithRenderProp","useRender","BaseMenuItem","forwardRef"],"mappings":";;;;;;;;AAiDA,MAAMA,IAAoB,CACxB;AAAA,EACE,UAAAC,IAAW;AAAA,EACX,QAAAC,IAAS;AAAA,EACT,UAAAC,IAAW;AAAA,EACX,QAAAC,IAAS;AAAA,EACT,SAAAC,IAAU;AAAA,EACV,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,eAAAC,IAAgB;AAAA,EAChB,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAA,GAENC,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAb,uBAAiBc,GAAA,EAAS,SAASpB,GAAU,UAAU,IAAI,eAAAO,GAA8B;AAAA,IACzFJ,KAAQ,gBAAAkB,EAAC,QAAA,EAAK,WAAWC,EAAKP,EAAI,gBAAgB,GAAGN,GAAY,IAAI,GAAI,UAAAN,EAAA,CAAK;AAAA,IAC9EC,KACC,gBAAAiB;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,QAAQf;AAAA,QACR,IAAG;AAAA,QACH,WAAWc,EAAKP,EAAI,gBAAgB,GAAGN,GAAY,IAAI;AAAA,QAEtD,UAAAL;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJC,KACC,gBAAAgB,EAAC,QAAA,EAAK,WAAWC,EAAKP,EAAI,kBAAkB,GAAGN,GAAY,MAAM,GAAI,UAAAJ,EAAA,CAAO;AAAA,EAAA,GAEhF;AAyBF,SAtBwBmB,EAAU;AAAA,IAChC,QAAQd,KAAU;AAAA,IAClB,OAAO;AAAA,MACL,GAAGG;AAAA,MACH,WAAWS;AAAA;AAAA,QAETP,EAAI,gBAAgB;AAAA,QACpBT,KAAgBS,EAAI,yBAAyB;AAAA,QAC7CN,GAAY;AAAA,MAAA;AAAA,MAEd,iBAAiBX;AAAA,MACjB,eAAeC;AAAA,MACf,iBAAiBC;AAAA,MACjB,eAAeC;AAAA,MACf,cAAcC;AAAA,MACd,iBAAiBJ;AAAA,MACjB,UAAUmB;AAAA,IAAA;AAAA,IAEZ,KAAAH;AAAA,IACA,gBAAgBF,KAAM;AAAA,EAAA,CACvB;AAGH,GAEaa,IAAeC,EAAW7B,CAAiB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.ds-btn.ds-btn-color-default.ds-btn-variant-outlined:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):not(.ds-btn-background-ghost),.ds-btn.ds-btn-color-default.ds-btn-variant-dashed:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):not(.ds-btn-background-ghost),.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-background-ghost){background-color:var(--ds-button-bg-secondary)}.ds-btn.ds-btn-color-default.ds-btn-variant-outlined:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):not(.ds-btn-background-ghost),.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-background-ghost){background-image:linear-gradient(180deg,var(--ds-button-bg-gradient-top) 0%,var(--ds-button-bg-gradient-bottom) 100%);box-shadow:var(--ds-button-shadow-default),var(--ds-button-shadow-default-inner)}.ds-btn.ds-btn-background-ghost:not(.ds-btn-disabled):not(:disabled):is(.ds-btn-variant-outlined,.ds-btn-variant-dashed):not(.ds-btn-dangerous){background:transparent;box-shadow:none}.ds-btn.ds-btn-color-primary.ds-btn-variant-solid:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous){background-color:var(--ds-color-primary);border:1px solid var(--ds-color-primary);background-image:linear-gradient(180deg,var(--ds-button-bg-gradient-primary-top) 0%,var(--ds-button-bg-gradient-primary-bottom) 100%);box-shadow:var(--ds-button-shadow-solid),var(--ds-button-shadow-solid-inner);transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}.ds-btn.ds-btn-dangerous.ds-btn-variant-solid:not(.ds-btn-disabled):not(:disabled){background-color:var(--ds-color-error);border:1px solid var(--ds-color-error);background-image:linear-gradient(180deg,var(--ds-button-bg-gradient-primary-top) 0%,var(--ds-button-bg-gradient-primary-bottom) 100%);box-shadow:var(--ds-button-shadow-solid),var(--ds-button-shadow-solid-inner);transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}span.ds-btn-icon{display:flex;align-items:center}.ds-btn-negative-margin-wrapper{display:inline-flex;flex-shrink:0}.ds-btn-negative-margin-wrapper,.ds-btn-negative-margin-wrapper.ds-btn-wrapper-large{margin-inline:-1rem}.ds-btn-negative-margin-wrapper.ds-btn-wrapper-small{margin-inline:-.5rem}.ds-btn-loading-icon svg{animation:spin 1s linear infinite}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous).ds-btn-color-default.ds-btn-variant-outlined:not(.ds-btn-background-ghost):is(:hover,:focus-visible){border-color:var(--ds-color-primary-hover);color:var(--ds-color-primary-hover)}.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-background-ghost):not(.ds-btn-disabled):not(:disabled){border-color:var(--ds-control-color-border);color:var(--ds-color-error)}.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-background-ghost):not(.ds-btn-disabled):not(:disabled):is(:hover,:focus-visible){border-color:var(--ds-color-error-hover);color:var(--ds-color-error-hover)}.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-background-ghost):not(.ds-btn-disabled):not(:disabled):active{border-color:var(--ds-color-error-active);color:var(--ds-color-error-active)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):is(.ds-btn-color-default.ds-btn-variant-dashed,.ds-btn-background-ghost.ds-btn-variant-outlined,.ds-btn-background-ghost.ds-btn-variant-dashed):is(:hover,:focus-visible){border-color:var(--ds-color-primary-hover);color:var(--ds-color-primary-hover)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous).ds-btn-color-default.ds-btn-variant-outlined:not(.ds-btn-background-ghost):active{border-color:var(--ds-color-primary-active);color:var(--ds-color-primary-active)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):is(.ds-btn-color-default.ds-btn-variant-dashed,.ds-btn-background-ghost.ds-btn-variant-outlined,.ds-btn-background-ghost.ds-btn-variant-dashed):active{border-color:var(--ds-color-primary-active);color:var(--ds-color-primary-active)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous).ds-btn-color-primary.ds-btn-variant-solid:is(:hover,:focus-visible){background-color:var(--ds-color-primary-hover);border-color:var(--ds-color-primary-hover);box-shadow:var(--ds-button-shadow-solid-hover),var(--ds-button-shadow-solid-inner)}.ds-btn.ds-btn-dangerous.ds-btn-variant-solid:not(.ds-btn-disabled):not(:disabled):is(:hover,:focus-visible){background-color:var(--ds-color-error-hover);border-color:var(--ds-color-error-hover);box-shadow:var(--ds-button-shadow-solid-hover),var(--ds-button-shadow-solid-inner)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous).ds-btn-color-primary.ds-btn-variant-solid:active{background-color:var(--ds-color-primary-active);border-color:var(--ds-color-primary-active);box-shadow:var(--ds-button-shadow-solid-active),var(--ds-button-shadow-solid-inner)}.ds-btn.ds-btn-dangerous.ds-btn-variant-solid:not(.ds-btn-disabled):not(:disabled):active{background-color:var(--ds-color-error-active);border-color:var(--ds-color-error-active);box-shadow:var(--ds-button-shadow-solid-active),var(--ds-button-shadow-solid-inner)}.ds-btn-no-icon .ds-btn-loading-icon{position:absolute;inset-inline-start:50%;transform:translate(-50%)}.ds-btn-no-icon.ds-btn-loading .ds-btn-loading-icon{transition:opacity 0s}.ds-btn-no-icon.ds-btn-loading>*:not(.ds-btn-loading-icon){transition:opacity 0s;opacity:0}}
|
|
1
|
+
@layer components{.ds-btn.ds-btn-color-default.ds-btn-variant-outlined:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):not(.ds-btn-background-ghost),.ds-btn.ds-btn-color-default.ds-btn-variant-dashed:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):not(.ds-btn-background-ghost),.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-background-ghost){background-color:var(--ds-button-bg-secondary)}.ds-btn.ds-btn-color-default.ds-btn-variant-outlined:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):not(.ds-btn-background-ghost),.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-background-ghost){background-image:linear-gradient(180deg,var(--ds-button-bg-gradient-top) 0%,var(--ds-button-bg-gradient-bottom) 100%);box-shadow:var(--ds-button-shadow-default),var(--ds-button-shadow-default-inner)}.ds-btn.ds-btn-background-ghost:not(.ds-btn-disabled):not(:disabled):is(.ds-btn-variant-outlined,.ds-btn-variant-dashed):not(.ds-btn-dangerous){background:transparent;box-shadow:none}.ds-btn.ds-btn-color-primary.ds-btn-variant-solid:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous){background-color:var(--ds-color-primary);border:1px solid var(--ds-color-primary);background-image:linear-gradient(180deg,var(--ds-button-bg-gradient-primary-top) 0%,var(--ds-button-bg-gradient-primary-bottom) 100%);box-shadow:var(--ds-button-shadow-solid),var(--ds-button-shadow-solid-inner);transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}.ds-btn.ds-btn-dangerous.ds-btn-variant-solid:not(.ds-btn-disabled):not(:disabled){background-color:var(--ds-color-error);border:1px solid var(--ds-color-error);background-image:linear-gradient(180deg,var(--ds-button-bg-gradient-primary-top) 0%,var(--ds-button-bg-gradient-primary-bottom) 100%);box-shadow:var(--ds-button-shadow-solid),var(--ds-button-shadow-solid-inner);transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}span.ds-btn-icon{display:flex;align-items:center}.ds-btn-negative-margin-wrapper{display:inline-flex;flex-shrink:0}.ds-btn-negative-margin-wrapper,.ds-btn-negative-margin-wrapper.ds-btn-wrapper-large{margin-inline:-1rem}.ds-btn-negative-margin-wrapper.ds-btn-wrapper-small{margin-inline:-.5rem}.ds-btn-loading-icon svg{animation:spin 1s linear infinite}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous).ds-btn-color-default.ds-btn-variant-outlined:not(.ds-btn-background-ghost):is(:hover,:focus-visible){border-color:var(--ds-color-primary-hover);color:var(--ds-color-primary-hover)}.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-background-ghost):not(.ds-btn-disabled):not(:disabled){border-color:var(--ds-control-color-border);color:var(--ds-color-error)}.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-background-ghost):not(.ds-btn-disabled):not(:disabled):is(:hover,:focus-visible){border-color:var(--ds-color-error-hover);color:var(--ds-color-error-hover)}.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-background-ghost):not(.ds-btn-disabled):not(:disabled):active{border-color:var(--ds-color-error-active);color:var(--ds-color-error-active)}.ds-btn.ds-btn-dangerous.ds-btn-dangerous:is(.ds-btn-variant-outlined,.ds-btn-variant-dashed):not(.ds-btn-disabled):not(:disabled){color:var(--ds-color-error-fg)}.ds-btn.ds-btn-dangerous.ds-btn-dangerous:is(.ds-btn-variant-outlined,.ds-btn-variant-dashed):not(.ds-btn-disabled):not(:disabled):is(:hover,:focus-visible){color:var(--ds-color-error-fg-hover)}.ds-btn.ds-btn-dangerous.ds-btn-dangerous:is(.ds-btn-variant-outlined,.ds-btn-variant-dashed):not(.ds-btn-disabled):not(:disabled):active{color:var(--ds-color-error-fg-active)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):is(.ds-btn-color-default.ds-btn-variant-dashed,.ds-btn-background-ghost.ds-btn-variant-outlined,.ds-btn-background-ghost.ds-btn-variant-dashed):is(:hover,:focus-visible){border-color:var(--ds-color-primary-hover);color:var(--ds-color-primary-hover)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous).ds-btn-color-default.ds-btn-variant-outlined:not(.ds-btn-background-ghost):active{border-color:var(--ds-color-primary-active);color:var(--ds-color-primary-active)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):is(.ds-btn-color-default.ds-btn-variant-dashed,.ds-btn-background-ghost.ds-btn-variant-outlined,.ds-btn-background-ghost.ds-btn-variant-dashed):active{border-color:var(--ds-color-primary-active);color:var(--ds-color-primary-active)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous).ds-btn-color-primary.ds-btn-variant-solid:is(:hover,:focus-visible){background-color:var(--ds-color-primary-hover);border-color:var(--ds-color-primary-hover);box-shadow:var(--ds-button-shadow-solid-hover),var(--ds-button-shadow-solid-inner)}.ds-btn.ds-btn-dangerous.ds-btn-variant-solid:not(.ds-btn-disabled):not(:disabled):is(:hover,:focus-visible){background-color:var(--ds-color-error-hover);border-color:var(--ds-color-error-hover);box-shadow:var(--ds-button-shadow-solid-hover),var(--ds-button-shadow-solid-inner)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous).ds-btn-color-primary.ds-btn-variant-solid:active{background-color:var(--ds-color-primary-active);border-color:var(--ds-color-primary-active);box-shadow:var(--ds-button-shadow-solid-active),var(--ds-button-shadow-solid-inner)}.ds-btn.ds-btn-dangerous.ds-btn-variant-solid:not(.ds-btn-disabled):not(:disabled):active{background-color:var(--ds-color-error-active);border-color:var(--ds-color-error-active);box-shadow:var(--ds-button-shadow-solid-active),var(--ds-button-shadow-solid-inner)}.ds-btn.ds-btn-color-link:not(.ds-btn-disabled):not(:disabled):is(.ds-btn-variant-link,.ds-btn-variant-text){color:var(--ds-color-primary-fg)}.ds-btn.ds-btn-color-link:not(.ds-btn-disabled):not(:disabled):is(.ds-btn-variant-link,.ds-btn-variant-text):is(:hover,:focus-visible){color:var(--ds-color-primary-fg-hover)}.ds-btn.ds-btn-color-link:not(.ds-btn-disabled):not(:disabled):is(.ds-btn-variant-link,.ds-btn-variant-text):active{color:var(--ds-color-primary-fg-active)}.ds-btn.ds-btn-color-dangerous:not(.ds-btn-disabled):not(:disabled):is(.ds-btn-variant-link,.ds-btn-variant-text){color:var(--ds-color-error-fg)}.ds-btn.ds-btn-color-dangerous:not(.ds-btn-disabled):not(:disabled):is(.ds-btn-variant-link,.ds-btn-variant-text):is(:hover,:focus-visible){color:var(--ds-color-error-fg-hover)}.ds-btn.ds-btn-color-dangerous:not(.ds-btn-disabled):not(:disabled):is(.ds-btn-variant-link,.ds-btn-variant-text):active{color:var(--ds-color-error-fg-active)}.ds-btn-no-icon .ds-btn-loading-icon{position:absolute;inset-inline-start:50%;transform:translate(-50%)}.ds-btn-no-icon.ds-btn-loading .ds-btn-loading-icon{transition:opacity 0s}.ds-btn-no-icon.ds-btn-loading>*:not(.ds-btn-loading-icon){transition:opacity 0s;opacity:0}}
|
|
@@ -1,82 +1,82 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import { CheckIcon as
|
|
4
|
-
import { Highlight as
|
|
5
|
-
import { useState as i, useEffect as
|
|
6
|
-
import { ThemeProvider as
|
|
2
|
+
import { jsxs as U, jsx as e } from "react/jsx-runtime";
|
|
3
|
+
import { CheckIcon as V, CopyIcon as W } from "@bioturing/assets";
|
|
4
|
+
import { Highlight as X, themes as I } from "prism-react-renderer";
|
|
5
|
+
import { useState as i, useEffect as Y, useCallback as M } from "react";
|
|
6
|
+
import { ThemeProvider as Z } from "../theme-provider/component.js";
|
|
7
7
|
import './style.css';/* empty css */
|
|
8
|
-
import { Segmented as
|
|
9
|
-
import { useControlledState as
|
|
10
|
-
import { reactNodeToString as
|
|
11
|
-
import { useCls as
|
|
12
|
-
import { useTheme as
|
|
13
|
-
import { clsx as
|
|
8
|
+
import { Segmented as ee } from "../segmented/component.js";
|
|
9
|
+
import { useControlledState as oe } from "../hooks/useControlledState.js";
|
|
10
|
+
import { reactNodeToString as te } from "../utils/reactToString.js";
|
|
11
|
+
import { useCls as re } from "../utils/antdUtils.js";
|
|
12
|
+
import { useTheme as ne } from "../theme-provider/context/themeStore.js";
|
|
13
|
+
import { clsx as v } from "../utils/cn.js";
|
|
14
14
|
import { IconButton as ce } from "../icon-button/component.js";
|
|
15
15
|
import { ScrollArea as se } from "../scroll-area/component.js";
|
|
16
|
-
const
|
|
17
|
-
dark:
|
|
18
|
-
light:
|
|
16
|
+
const w = {
|
|
17
|
+
dark: I.vsDark,
|
|
18
|
+
light: I.vsLight
|
|
19
19
|
}, ye = ({
|
|
20
|
-
code:
|
|
20
|
+
code: g,
|
|
21
21
|
children: m,
|
|
22
22
|
// initial,
|
|
23
23
|
lang: d = "tsx",
|
|
24
|
-
className:
|
|
24
|
+
className: x,
|
|
25
25
|
options: t,
|
|
26
|
-
activeOption:
|
|
27
|
-
defaultActiveOption:
|
|
28
|
-
onActiveOptionChange:
|
|
26
|
+
activeOption: E,
|
|
27
|
+
defaultActiveOption: b = 0,
|
|
28
|
+
onActiveOptionChange: L,
|
|
29
29
|
copyText: p = "Copy",
|
|
30
|
-
copySuccessText:
|
|
30
|
+
copySuccessText: k = "Copied",
|
|
31
31
|
classNames: h,
|
|
32
32
|
maxHeight: c,
|
|
33
33
|
onCopy: u,
|
|
34
34
|
theme: s = "auto",
|
|
35
|
-
themeProviderProps:
|
|
36
|
-
scrollAreaProps:
|
|
37
|
-
...
|
|
35
|
+
themeProviderProps: O,
|
|
36
|
+
scrollAreaProps: j,
|
|
37
|
+
...A
|
|
38
38
|
}) => {
|
|
39
|
-
const [l,
|
|
40
|
-
x,
|
|
39
|
+
const [l, y] = oe(
|
|
41
40
|
E,
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
41
|
+
L,
|
|
42
|
+
b
|
|
43
|
+
), [n, B] = i(g || ""), [F, P] = i(d), C = t && t.length > 0;
|
|
44
|
+
Y(() => {
|
|
45
45
|
if (C) {
|
|
46
46
|
const o = t[l]?.code || "", r = t[l]?.lang || d;
|
|
47
|
-
|
|
47
|
+
B(o), P(r);
|
|
48
48
|
}
|
|
49
49
|
}, [
|
|
50
|
-
v,
|
|
51
|
-
l,
|
|
52
50
|
g,
|
|
51
|
+
l,
|
|
52
|
+
b,
|
|
53
53
|
t,
|
|
54
54
|
d,
|
|
55
55
|
C,
|
|
56
|
-
|
|
56
|
+
y
|
|
57
57
|
]);
|
|
58
|
-
const [
|
|
59
|
-
const o = n ||
|
|
58
|
+
const [_, f] = i(p), [D, S] = i(!1), $ = M(() => {
|
|
59
|
+
const o = n || te(m);
|
|
60
60
|
try {
|
|
61
61
|
navigator.clipboard.writeText(o).then(() => {
|
|
62
|
-
f(
|
|
62
|
+
f(k), S(!0), u && u(o);
|
|
63
63
|
});
|
|
64
64
|
} catch {
|
|
65
65
|
f("Failed to copy");
|
|
66
66
|
}
|
|
67
|
-
}, [n, m,
|
|
68
|
-
f(p),
|
|
69
|
-
}, [p]), a =
|
|
67
|
+
}, [n, m, k, u]), q = M(() => {
|
|
68
|
+
f(p), S(!1);
|
|
69
|
+
}, [p]), a = re(), { theme: z } = ne(), N = () => /* @__PURE__ */ U(
|
|
70
70
|
"div",
|
|
71
71
|
{
|
|
72
|
-
className:
|
|
73
|
-
...
|
|
72
|
+
className: v(a("code-block"), x, h?.root),
|
|
73
|
+
...A,
|
|
74
74
|
children: [
|
|
75
|
-
C && /* @__PURE__ */ e("div", { className: a("code-block-header", h?.header), children: /* @__PURE__ */ e(
|
|
76
|
-
|
|
75
|
+
C && /* @__PURE__ */ e("div", { className: v(a("code-block-header"), h?.header), children: /* @__PURE__ */ e(
|
|
76
|
+
ee,
|
|
77
77
|
{
|
|
78
78
|
value: l,
|
|
79
|
-
onChange:
|
|
79
|
+
onChange: y,
|
|
80
80
|
options: t.map((o, r) => ({
|
|
81
81
|
label: o.label,
|
|
82
82
|
value: r
|
|
@@ -86,31 +86,31 @@ const M = {
|
|
|
86
86
|
/* @__PURE__ */ e("div", { className: a("code-block-copy"), children: /* @__PURE__ */ e(
|
|
87
87
|
ce,
|
|
88
88
|
{
|
|
89
|
-
onClick:
|
|
90
|
-
label:
|
|
91
|
-
onMouseLeave:
|
|
92
|
-
children:
|
|
89
|
+
onClick: $,
|
|
90
|
+
label: _,
|
|
91
|
+
onMouseLeave: q,
|
|
92
|
+
children: D ? /* @__PURE__ */ e(V, {}) : /* @__PURE__ */ e(W, {})
|
|
93
93
|
}
|
|
94
94
|
) }),
|
|
95
95
|
/* @__PURE__ */ e(
|
|
96
96
|
"div",
|
|
97
97
|
{
|
|
98
|
-
className: a("code-block-content", h?.content),
|
|
98
|
+
className: v(a("code-block-content"), h?.content),
|
|
99
99
|
style: {
|
|
100
100
|
maxHeight: c && (typeof c == "number" ? `${c}px` : c)
|
|
101
101
|
},
|
|
102
|
-
children: /* @__PURE__ */ e(se, { orientation: "both", ...
|
|
103
|
-
|
|
102
|
+
children: /* @__PURE__ */ e(se, { orientation: "both", ...j, children: n ? /* @__PURE__ */ e(
|
|
103
|
+
X,
|
|
104
104
|
{
|
|
105
|
-
language:
|
|
105
|
+
language: F,
|
|
106
106
|
code: n,
|
|
107
|
-
theme: s == "auto" ?
|
|
108
|
-
children: ({ className: o, style: r, tokens:
|
|
107
|
+
theme: s == "auto" ? w[z] : w[s],
|
|
108
|
+
children: ({ className: o, style: r, tokens: G, getLineProps: H, getTokenProps: J }) => /* @__PURE__ */ e(
|
|
109
109
|
"pre",
|
|
110
110
|
{
|
|
111
111
|
style: { ...r, backgroundColor: "transparent" },
|
|
112
112
|
className: o,
|
|
113
|
-
children:
|
|
113
|
+
children: G.map((T, K) => /* @__PURE__ */ e("div", { ...H({ line: T }), children: T.map((Q, R) => /* @__PURE__ */ e("span", { ...J({ token: Q }) }, R)) }, K))
|
|
114
114
|
}
|
|
115
115
|
)
|
|
116
116
|
}
|
|
@@ -120,13 +120,13 @@ const M = {
|
|
|
120
120
|
]
|
|
121
121
|
}
|
|
122
122
|
);
|
|
123
|
-
return s == "auto" ?
|
|
124
|
-
|
|
123
|
+
return s == "auto" ? N() : /* @__PURE__ */ e(
|
|
124
|
+
Z,
|
|
125
125
|
{
|
|
126
126
|
theme: s,
|
|
127
127
|
appendClassesToChildren: !0,
|
|
128
|
-
...
|
|
129
|
-
children:
|
|
128
|
+
...O,
|
|
129
|
+
children: N()
|
|
130
130
|
}
|
|
131
131
|
);
|
|
132
132
|
};
|
|
@@ -1 +1 @@
|
|
|
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 } from \"../utils\";\nimport type { CodeBlockProps } from \"./types\";\n\n// Import component-specific styles\nimport \"./style.css\";\nimport { useTheme } from \"../theme-provider\";\n\nconst THEME_MAP = {\n dark: themes.vsDark,\n light: themes.vsLight,\n};\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 theme = \"auto\",\n themeProviderProps,\n scrollAreaProps,\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 const { theme: currentThemeFromContext } = useTheme();\n\n const renderInner = () => (\n <div\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 orientation=\"both\" {...scrollAreaProps}>\n {currentCode ? (\n <Highlight\n language={lang}\n code={currentCode}\n theme={\n theme == \"auto\"\n ? THEME_MAP[currentThemeFromContext]\n : THEME_MAP[theme]\n }\n >\n {({ className, style, tokens, getLineProps, getTokenProps }) => (\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 </div>\n );\n\n return theme == \"auto\" ? (\n renderInner()\n ) : (\n <ThemeProvider\n theme={theme}\n appendClassesToChildren\n {...themeProviderProps}\n >\n {renderInner()}\n </ThemeProvider>\n );\n};\n"],"names":["THEME_MAP","themes","CodeBlock","code","children","defaultLang","className","options","controlledActiveOption","defaultActiveOption","onActiveOptionChange","copyText","copySuccessText","classNames","maxHeight","onCopy","theme","themeProviderProps","scrollAreaProps","rest","activeOption","setActiveOption","useControlledState","currentCode","setCurrentCode","useState","lang","setLang","hasOptions","useEffect","newCode","newLang","tooltipContent","setTooltipContent","copySuccess","setCopySuccess","handleCopy","useCallback","codeContent","reactNodeToString","handleMouseLeave","cls","useCls","currentThemeFromContext","useTheme","renderInner","jsxs","clsx","jsx","Segmented","opt","index","IconButton","CheckIcon","CopyIcon","ScrollArea","Highlight","style","tokens","getLineProps","getTokenProps","line","i","token","key","ThemeProvider"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAMA,IAAY;AAAA,EAChB,MAAMC,EAAO;AAAA,EACb,OAAOA,EAAO;AAChB,GAEaC,KAAY,CAAC;AAAA,EACxB,MAAAC;AAAA,EACA,UAAAC;AAAA;AAAA,EAEA,MAAMC,IAAc;AAAA,EACpB,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAcC;AAAA,EACd,qBAAAC,IAAsB;AAAA,EACtB,sBAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,iBAAAC,IAAkB;AAAA,EAClB,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,oBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,GAAGC;AACL,MAAsB;AACpB,QAAM,CAACC,GAAcC,CAAe,IAAIC;AAAA,IACtCd;AAAA,IACAE;AAAA,IACAD;AAAA,EAAA,GAGI,CAACc,GAAaC,CAAc,IAAIC,EAAStB,KAAQ,EAAE,GAEnD,CAACuB,GAAMC,CAAO,IAAIF,EAASpB,CAAW,GAEtCuB,IAAarB,KAAWA,EAAQ,SAAS;AAE/C,EAAAsB,EAAU,MAAM;AACd,QAAID,GAAY;AACd,YAAME,IAAUvB,EAAQa,CAAY,GAAG,QAAQ,IACzCW,IAAUxB,EAAQa,CAAY,GAAG,QAAQf;AAC/C,MAAAmB,EAAeM,CAAO,GACtBH,EAAQI,CAAO;AAAA,IACjB;AAAA,EACF,GAAG;AAAA,IACD5B;AAAA,IACAiB;AAAA,IACAX;AAAA,IACAF;AAAA,IACAF;AAAA,IACAuB;AAAA,IACAP;AAAA,EAAA,CACD;AAED,QAAM,CAACW,GAAgBC,CAAiB,IAAIR,EAASd,CAAQ,GACvD,CAACuB,GAAaC,CAAc,IAAIV,EAAS,EAAK,GAE9CW,IAAaC,EAAY,MAAM;AACnC,UAAMC,IAAcf,KAA4BgB,GAAkBnC,CAAQ;AAC1E,QAAI;AACF,gBAAU,UAAU,UAAUkC,CAAW,EAAE,KAAK,MAAM;AACpD,QAAAL,EAAkBrB,CAAe,GACjCuB,EAAe,EAAI,GACfpB,OAAeuB,CAAW;AAAA,MAChC,CAAC;AAAA,IACH,QAAY;AACV,MAAAL,EAAkB,gBAAgB;AAAA,IACpC;AAAA,EACF,GAAG,CAACV,GAAanB,GAAUQ,GAAiBG,CAAM,CAAC,GAE7CyB,IAAmBH,EAAY,MAAM;AACzC,IAAAJ,EAAkBtB,CAAQ,GAC1BwB,EAAe,EAAK;AAAA,EACtB,GAAG,CAACxB,CAAQ,CAAC,GAEP8B,IAAMC,GAAA,GACN,EAAE,OAAOC,EAAA,IAA4BC,GAAA,GAErCC,IAAc,MAClB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,
|
|
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 } from \"../utils\";\nimport type { CodeBlockProps } from \"./types\";\n\n// Import component-specific styles\nimport \"./style.css\";\nimport { useTheme } from \"../theme-provider\";\n\nconst THEME_MAP = {\n dark: themes.vsDark,\n light: themes.vsLight,\n};\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 theme = \"auto\",\n themeProviderProps,\n scrollAreaProps,\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 const { theme: currentThemeFromContext } = useTheme();\n\n const renderInner = () => (\n <div\n className={clsx(cls(\"code-block\"), className, classNames?.root)}\n {...rest}\n >\n {hasOptions && (\n <div className={clsx(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={clsx(cls(\"code-block-content\"), classNames?.content)}\n style={{\n maxHeight:\n maxHeight &&\n (typeof maxHeight === \"number\" ? `${maxHeight}px` : maxHeight),\n }}\n >\n <ScrollArea orientation=\"both\" {...scrollAreaProps}>\n {currentCode ? (\n <Highlight\n language={lang}\n code={currentCode}\n theme={\n theme == \"auto\"\n ? THEME_MAP[currentThemeFromContext]\n : THEME_MAP[theme]\n }\n >\n {({ className, style, tokens, getLineProps, getTokenProps }) => (\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 </div>\n );\n\n return theme == \"auto\" ? (\n renderInner()\n ) : (\n <ThemeProvider\n theme={theme}\n appendClassesToChildren\n {...themeProviderProps}\n >\n {renderInner()}\n </ThemeProvider>\n );\n};\n"],"names":["THEME_MAP","themes","CodeBlock","code","children","defaultLang","className","options","controlledActiveOption","defaultActiveOption","onActiveOptionChange","copyText","copySuccessText","classNames","maxHeight","onCopy","theme","themeProviderProps","scrollAreaProps","rest","activeOption","setActiveOption","useControlledState","currentCode","setCurrentCode","useState","lang","setLang","hasOptions","useEffect","newCode","newLang","tooltipContent","setTooltipContent","copySuccess","setCopySuccess","handleCopy","useCallback","codeContent","reactNodeToString","handleMouseLeave","cls","useCls","currentThemeFromContext","useTheme","renderInner","jsxs","clsx","jsx","Segmented","opt","index","IconButton","CheckIcon","CopyIcon","ScrollArea","Highlight","style","tokens","getLineProps","getTokenProps","line","i","token","key","ThemeProvider"],"mappings":"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"}
|
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as a } from "react/jsx-runtime";
|
|
3
3
|
import { Collapse as r } from "antd";
|
|
4
|
-
import { forwardRef as
|
|
4
|
+
import { forwardRef as p } from "react";
|
|
5
5
|
import './style.css';/* empty css */
|
|
6
6
|
import { useCls as t } from "../utils/antdUtils.js";
|
|
7
|
-
import { clsx as
|
|
7
|
+
import { clsx as n } from "../utils/cn.js";
|
|
8
8
|
const m = (s, e) => {
|
|
9
|
-
const { className: o, ...l } = s,
|
|
9
|
+
const { className: o, ...l } = s, c = t();
|
|
10
10
|
return /* @__PURE__ */ a(
|
|
11
11
|
r,
|
|
12
12
|
{
|
|
13
13
|
ref: e,
|
|
14
|
-
className: n("collapse", o),
|
|
14
|
+
className: n(c("collapse"), o),
|
|
15
15
|
...l
|
|
16
16
|
}
|
|
17
17
|
);
|
|
18
|
-
}, i =
|
|
18
|
+
}, i = p(m), f = (s) => {
|
|
19
19
|
const { className: e, ...o } = s, l = t();
|
|
20
20
|
return console.warn(
|
|
21
21
|
"[bioturing-ds] Collapse.Panel is deprecated. Please use items prop instead."
|
|
22
22
|
), /* @__PURE__ */ a(
|
|
23
23
|
r.Panel,
|
|
24
24
|
{
|
|
25
|
-
className:
|
|
25
|
+
className: n(l("collapse-panel"), e),
|
|
26
26
|
...o
|
|
27
27
|
}
|
|
28
28
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../src/components/collapse/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n Collapse as AntCollapse,\n type CollapseProps as AntCollapseProps,\n type CollapsePanelProps as AntCollapsePanelProps,\n} from \"antd\";\nimport { type ForwardedRef, forwardRef } from \"react\";\nimport { useCls, clsx } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Define props interface extending Ant Design's CollapseProps\nexport interface CollapseProps extends AntCollapseProps {}\n\n// Define props interface extending Ant Design's CollapsePanelProps\nexport interface CollapsePanelProps extends AntCollapsePanelProps {}\n\n// Create inner function with forwarded ref\nconst CollapseInner = (\n props: CollapseProps,\n ref: ForwardedRef<HTMLDivElement>\n) => {\n const { className, ...restProps } = props;\n const cls = useCls();\n return (\n <AntCollapse\n ref={ref}\n className={cls(\"collapse\", className)}\n {...restProps}\n />\n );\n};\n\n// Use forwardRef with type assertion\nconst MainCollapse = forwardRef(CollapseInner) as (\n props: CollapseProps & {\n ref?: React.ForwardedRef<HTMLDivElement>;\n }\n) => ReturnType<typeof CollapseInner>;\n\n// Create the Panel component (deprecated)\nconst Panel = (props: CollapsePanelProps) => {\n const { className, ...restProps } = props;\n const cls = useCls();\n console.warn(\n \"[bioturing-ds] Collapse.Panel is deprecated. Please use items prop instead.\"\n );\n return (\n <AntCollapse.Panel\n className={clsx(cls(\"collapse-panel\"), className)}\n {...restProps}\n />\n );\n};\n\n// Create the final component with Panel property\nexport const Collapse = Object.assign(MainCollapse, {\n Panel: Panel,\n});\n"],"names":["CollapseInner","props","ref","className","restProps","cls","useCls","jsx","AntCollapse","MainCollapse","forwardRef","Panel","
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../src/components/collapse/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n Collapse as AntCollapse,\n type CollapseProps as AntCollapseProps,\n type CollapsePanelProps as AntCollapsePanelProps,\n} from \"antd\";\nimport { type ForwardedRef, forwardRef } from \"react\";\nimport { useCls, clsx } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Define props interface extending Ant Design's CollapseProps\nexport interface CollapseProps extends AntCollapseProps {}\n\n// Define props interface extending Ant Design's CollapsePanelProps\nexport interface CollapsePanelProps extends AntCollapsePanelProps {}\n\n// Create inner function with forwarded ref\nconst CollapseInner = (\n props: CollapseProps,\n ref: ForwardedRef<HTMLDivElement>\n) => {\n const { className, ...restProps } = props;\n const cls = useCls();\n return (\n <AntCollapse\n ref={ref}\n className={clsx(cls(\"collapse\"), className)}\n {...restProps}\n />\n );\n};\n\n// Use forwardRef with type assertion\nconst MainCollapse = forwardRef(CollapseInner) as (\n props: CollapseProps & {\n ref?: React.ForwardedRef<HTMLDivElement>;\n }\n) => ReturnType<typeof CollapseInner>;\n\n// Create the Panel component (deprecated)\nconst Panel = (props: CollapsePanelProps) => {\n const { className, ...restProps } = props;\n const cls = useCls();\n console.warn(\n \"[bioturing-ds] Collapse.Panel is deprecated. Please use items prop instead.\"\n );\n return (\n <AntCollapse.Panel\n className={clsx(cls(\"collapse-panel\"), className)}\n {...restProps}\n />\n );\n};\n\n// Create the final component with Panel property\nexport const Collapse = Object.assign(MainCollapse, {\n Panel: Panel,\n});\n"],"names":["CollapseInner","props","ref","className","restProps","cls","useCls","jsx","AntCollapse","clsx","MainCollapse","forwardRef","Panel","Collapse"],"mappings":";;;;;;;AAmBA,MAAMA,IAAgB,CACpBC,GACAC,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,GAAGC,EAAA,IAAcH,GAC9BI,IAAMC,EAAA;AACZ,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAN;AAAA,MACA,WAAWO,EAAKJ,EAAI,UAAU,GAAGF,CAAS;AAAA,MACzC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV,GAGMM,IAAeC,EAAWX,CAAa,GAOvCY,IAAQ,CAACX,MAA8B;AAC3C,QAAM,EAAE,WAAAE,GAAW,GAAGC,EAAA,IAAcH,GAC9BI,IAAMC,EAAA;AACZ,iBAAQ;AAAA,IACN;AAAA,EAAA,GAGA,gBAAAC;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,WAAWC,EAAKJ,EAAI,gBAAgB,GAAGF,CAAS;AAAA,MAC/C,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV,GAGaS,IAAW,OAAO,OAAOH,GAAc;AAAA,EAClD,OAAAE;AACF,CAAC;"}
|
|
@@ -55,6 +55,13 @@ export interface ComboboxProps<T extends React.Key, M extends boolean, O extends
|
|
|
55
55
|
/** Custom render for options */
|
|
56
56
|
optionRender?: (option: ComboboxOption<T, O>, props: React.HTMLAttributes<HTMLElement>) => React.ReactElement;
|
|
57
57
|
/** Filter function for search */
|
|
58
|
+
/**
|
|
59
|
+
* Filter function for search
|
|
60
|
+
* - `true` or `undefined`: default filtering (splits by tokenSeparators if provided)
|
|
61
|
+
* - `false`: disables filtering
|
|
62
|
+
* - custom function: `(input, option) => boolean`
|
|
63
|
+
* @default true
|
|
64
|
+
*/
|
|
58
65
|
filterOption?: boolean | ((input: string, option: ComboboxOption<T, O>) => boolean);
|
|
59
66
|
/** Callback when search input changes */
|
|
60
67
|
onSearch?: (value: string) => void;
|
|
@@ -87,8 +94,32 @@ export interface ComboboxProps<T extends React.Key, M extends boolean, O extends
|
|
|
87
94
|
* Render function for the option label
|
|
88
95
|
*/
|
|
89
96
|
optionLabelRender?: (option: ComboboxOption<T, O>, props?: React.HTMLAttributes<HTMLElement>) => React.ReactElement;
|
|
97
|
+
/**
|
|
98
|
+
* Whether the popup width should match the trigger width.
|
|
99
|
+
* When `false`, the popup can exceed the trigger width to fit long option labels.
|
|
100
|
+
* @default true
|
|
101
|
+
*/
|
|
102
|
+
popupMatchSelectWidth?: boolean;
|
|
103
|
+
/**
|
|
104
|
+
* Allow adding items by typing the exact label or value and pressing Enter.
|
|
105
|
+
* @default false
|
|
106
|
+
*/
|
|
107
|
+
addOnEnter?: boolean;
|
|
108
|
+
/**
|
|
109
|
+
* Characters to split input by when adding multiple items on Enter.
|
|
110
|
+
* Only applies when `addOnEnter` and `multiple` are true.
|
|
111
|
+
* @default undefined
|
|
112
|
+
*/
|
|
113
|
+
tokenSeparators?: string[];
|
|
114
|
+
/**
|
|
115
|
+
* Automatically highlight the first matching item while filtering.
|
|
116
|
+
* When enabled in single-select mode, Enter selects the highlighted
|
|
117
|
+
* item natively and `addOnEnter` is ignored to avoid conflicts.
|
|
118
|
+
* @default true
|
|
119
|
+
*/
|
|
120
|
+
autoHighlight?: boolean;
|
|
90
121
|
}
|
|
91
|
-
declare const ComboboxInner: <T extends React.Key, M extends boolean, O extends Record<string, unknown> = {}>({ options, value: controlledValue, defaultValue, onChange, placeholder, disabled: disabledProp, status: statusProp, allowClear, multiple, showSearch: _showSearch, open: controlledOpen, onOpenChange, className, classNames, size, optionRender, onSearch, clearIcon, suffixIcon, showSelectAll, optionLabelRender, getOptionKeywords: _getOptionKeywords, ...rest }: ComboboxProps<T, M, O>, ref: React.ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
|
|
122
|
+
declare const ComboboxInner: <T extends React.Key, M extends boolean, O extends Record<string, unknown> = {}>({ options, value: controlledValue, defaultValue, onChange, placeholder, disabled: disabledProp, status: statusProp, allowClear, multiple, showSearch: _showSearch, open: controlledOpen, onOpenChange, className, classNames, size, optionRender, onSearch, clearIcon, suffixIcon, placement, showSelectAll, optionLabelRender, getOptionKeywords: _getOptionKeywords, popupMatchSelectWidth, addOnEnter, tokenSeparators, autoHighlight, filterOption, ...rest }: ComboboxProps<T, M, O>, ref: React.ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
|
|
92
123
|
export declare const Combobox: <T extends React.Key, M extends boolean, O extends Record<string, unknown> = {}>(props: ComboboxProps<T, M, O> & {
|
|
93
124
|
ref?: ForwardedRef<HTMLDivElement>;
|
|
94
125
|
}) => ReturnType<typeof ComboboxInner>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/component.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,EACZ,YAAY,
|
|
1
|
+
{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/component.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,EACZ,YAAY,EAOb,MAAM,OAAO,CAAC;AAUf,OAAO,aAAa,CAAC;AAQrB,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,EAAE,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,EAAE,IAAI;IACxF,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,GAAG,CAAC,CAAC;AAEN,MAAM,WAAW,aAAa,CAC5B,CAAC,SAAS,KAAK,CAAC,GAAG,EACnB,CAAC,SAAS,OAAO,EACjB,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,EAAE;IAEtC,uDAAuD;IACvD,OAAO,CAAC,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IACjC,oCAAoC;IACpC,KAAK,CAAC,EAAE,CAAC,SAAS,IAAI,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;IACjC,sCAAsC;IACtC,YAAY,CAAC,EAAE,CAAC,SAAS,IAAI,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;IACxC,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,SAAS,IAAI,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACrD,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,CAAC;IACb,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,gCAAgC;IAChC,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE;QACX,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,2BAA2B;IAC3B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gCAAgC;IAChC,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,EAC5B,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KACrC,KAAK,CAAC,YAAY,CAAC;IACxB,iCAAiC;IACjC;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC;IACpF,yCAAyC;IACzC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,6BAA6B;IAC7B,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,YAAY,CAAC;IAClE,wBAAwB;IACxB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,yBAAyB;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAW7B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QACxB,WAAW,EAAE,MAAM,IAAI,CAAC;QACxB,aAAa,EAAE,MAAM,IAAI,CAAC;QAC1B,OAAO,EAAE,OAAO,CAAC;QACjB,aAAa,EAAE,OAAO,CAAC;KACxB,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,MAAM,EAAE,CAAC;IAC/D;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAClB,MAAM,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,EAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KACtC,KAAK,CAAC,YAAY,CAAC;IACxB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,QAAA,MAAM,aAAa,GACjB,CAAC,SAAS,KAAK,CAAC,GAAG,EACnB,CAAC,SAAS,OAAO,EACjB,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,EAAE,EAEtC,mcAmCG,aAAa,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACzB,KAAK,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,4CA+dxC,CAAC;AAUF,eAAO,MAAM,QAAQ,GAPnB,CAAC,SAAS,KAAK,CAAC,GAAG,EACnB,CAAC,SAAS,OAAO,EACjB,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,cAE1B,aAAa,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;CAAE,KACnE,UAAU,CAAC,OAAO,aAAa,CAIlC,CAAC;AAEH,eAAe,QAAQ,CAAC"}
|