@bioturing/components 0.28.1 → 0.29.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.
Files changed (39) hide show
  1. package/dist/components/breadcrumb/style.css +1 -1
  2. package/dist/components/checkbox/style.css +1 -1
  3. package/dist/components/choice-list/component.js +102 -42
  4. package/dist/components/choice-list/component.js.map +1 -1
  5. package/dist/components/choice-list/style.css +1 -1
  6. package/dist/components/color-select/style.css +1 -1
  7. package/dist/components/combobox/component.js +171 -141
  8. package/dist/components/combobox/component.js.map +1 -1
  9. package/dist/components/combobox/style.css +1 -1
  10. package/dist/components/drag-drop/style.css +1 -1
  11. package/dist/components/dropdown-menu/component.js +113 -105
  12. package/dist/components/dropdown-menu/component.js.map +1 -1
  13. package/dist/components/dropdown-menu/item.css +1 -1
  14. package/dist/components/dropdown-menu/style.css +1 -1
  15. package/dist/components/ds-root/component.js +22 -17
  16. package/dist/components/ds-root/component.js.map +1 -1
  17. package/dist/components/ds-root/style.css +1 -1
  18. package/dist/components/form/style.css +1 -1
  19. package/dist/components/modal/style.css +1 -1
  20. package/dist/components/nav/style.css +1 -1
  21. package/dist/components/scroll-area/component.js +70 -24
  22. package/dist/components/scroll-area/component.js.map +1 -1
  23. package/dist/components/scroll-area/style.css +1 -1
  24. package/dist/components/select-trigger/component.js +150 -0
  25. package/dist/components/select-trigger/component.js.map +1 -0
  26. package/dist/components/select-trigger/style.css +1 -0
  27. package/dist/components/switch/style.css +1 -1
  28. package/dist/components/table/style.css +1 -1
  29. package/dist/components/theme-provider/component.js.map +1 -1
  30. package/dist/components/theme-provider/style.css +1 -1
  31. package/dist/components/tour/style.css +1 -1
  32. package/dist/components/utils/WithRenderProp.js.map +1 -1
  33. package/dist/index.d.ts +72 -41
  34. package/dist/index.js +125 -125
  35. package/dist/tokens/and-theme/tokens.js +12 -12
  36. package/dist/tokens/and-theme/tokens.js.map +1 -1
  37. package/package.json +6 -6
  38. package/dist/components/combobox/trigger.js +0 -89
  39. package/dist/components/combobox/trigger.js.map +0 -1
@@ -1,22 +1,27 @@
1
1
  "use client";
2
- import { jsx as r, jsxs as p } from "react/jsx-runtime";
3
- import { ThemeProvider as l } from "../theme-provider/component.js";
4
- import { Modal as n } from "../modal/index.js";
5
- import c from "antd/es/app/App";
6
- import { DSRootContextProvider as s } from "./context.js";
2
+ import { jsx as o, jsxs as p } from "react/jsx-runtime";
3
+ import { ThemeProvider as c } from "../theme-provider/component.js";
4
+ import { Modal as d } from "../modal/index.js";
5
+ import n from "antd/es/app/App";
6
+ import { DSRootContextProvider as f } from "./context.js";
7
7
  import './style.css';/* empty css */
8
- import { Toast as i } from "../toast/component.js";
9
- const j = ({
10
- className: t,
11
- appendClassesTo: e = "html",
12
- children: m,
13
- theme: o,
14
- ...d
15
- }) => /* @__PURE__ */ r(s, { value: { theme: o }, children: /* @__PURE__ */ r(l, { theme: o, ...d, appendClassesTo: e, children: /* @__PURE__ */ r(c, { className: t, children: /* @__PURE__ */ r(i.Provider, { children: /* @__PURE__ */ p(n.Provider, { children: [
16
- /* @__PURE__ */ r(i.List, {}),
17
- m
18
- ] }) }) }) }) });
8
+ import { Toast as t } from "../toast/component.js";
9
+ import { useCls as a } from "../utils/antdUtils.js";
10
+ import { clsx as h } from "../utils/cn.js";
11
+ const T = ({
12
+ className: i,
13
+ appendClassesTo: m = "html",
14
+ children: e,
15
+ theme: r,
16
+ ...s
17
+ }) => {
18
+ const l = a();
19
+ return /* @__PURE__ */ o(f, { value: { theme: r }, children: /* @__PURE__ */ o(c, { theme: r, ...s, appendClassesTo: m, children: /* @__PURE__ */ o(t.Provider, { children: /* @__PURE__ */ p(d.Provider, { children: [
20
+ /* @__PURE__ */ o(t.List, {}),
21
+ /* @__PURE__ */ o(n, { className: h(l("root"), i), children: e })
22
+ ] }) }) }) });
23
+ };
19
24
  export {
20
- j as DSRoot
25
+ T as DSRoot
21
26
  };
22
27
  //# sourceMappingURL=component.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"component.js","sources":["../../../src/components/ds-root/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n ThemeProvider,\n type ThemeProviderProps,\n} from \"../theme-provider/component\";\nimport { Toast } from \"../toast\";\nimport { Modal } from \"../modal\";\nimport App from \"antd/es/app/App\";\nimport { DSRootContextProvider } from \"./context\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface DSRootProps extends ThemeProviderProps {\n /**\n * Classname passed to App component\n */\n className?: string;\n\n /**\n * Element to which the theme classes are appended\n * @default \"html\"\n */\n appendClassesTo?: string | HTMLElement;\n}\n\nexport const DSRoot = ({\n className,\n appendClassesTo = \"html\",\n children,\n theme,\n ...props\n}: DSRootProps) => {\n return (\n <DSRootContextProvider value={{ theme: theme }}>\n <ThemeProvider theme={theme} {...props} appendClassesTo={appendClassesTo}>\n <App className={className}>\n <Toast.Provider>\n <Modal.Provider>\n <Toast.List />\n {children}\n </Modal.Provider>\n </Toast.Provider>\n </App>\n </ThemeProvider>\n </DSRootContextProvider>\n );\n};\n"],"names":["DSRoot","className","appendClassesTo","children","theme","props","jsx","DSRootContextProvider","ThemeProvider","App","Toast","jsxs","Modal"],"mappings":";;;;;;;;AA0BO,MAAMA,IAAS,CAAC;AAAA,EACrB,WAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC,EAACC,KAAsB,OAAO,EAAE,OAAAH,EAC9B,GAAA,UAAA,gBAAAE,EAACE,GAAc,EAAA,OAAAJ,GAAe,GAAGC,GAAO,iBAAAH,GACtC,UAAC,gBAAAI,EAAAG,GAAA,EAAI,WAAAR,GACH,UAAC,gBAAAK,EAAAI,EAAM,UAAN,EACC,UAAA,gBAAAC,EAACC,EAAM,UAAN,EACC,UAAA;AAAA,EAAC,gBAAAN,EAAAI,EAAM,MAAN,EAAW;AAAA,EACXP;AACH,EAAA,CAAA,EACF,CAAA,GACF,EAAA,CACF,EACF,CAAA;"}
1
+ {"version":3,"file":"component.js","sources":["../../../src/components/ds-root/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n ThemeProvider,\n type ThemeProviderProps,\n} from \"../theme-provider/component\";\nimport { Toast } from \"../toast\";\nimport { Modal } from \"../modal\";\nimport App from \"antd/es/app/App\";\nimport { DSRootContextProvider } from \"./context\";\nimport { useCls, clsx } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface DSRootProps extends ThemeProviderProps {\n /**\n * Classname passed to App component\n */\n className?: string;\n\n /**\n * Element to which the theme classes are appended\n * @default \"html\"\n */\n appendClassesTo?: string | HTMLElement;\n}\n\nexport const DSRoot = ({\n className,\n appendClassesTo = \"html\",\n children,\n theme,\n ...props\n}: DSRootProps) => {\n const cls = useCls();\n return (\n <DSRootContextProvider value={{ theme: theme }}>\n <ThemeProvider theme={theme} {...props} appendClassesTo={appendClassesTo}>\n <Toast.Provider>\n <Modal.Provider>\n <Toast.List />\n <App className={clsx(cls(\"root\"), className)}>{children}</App>\n </Modal.Provider>\n </Toast.Provider>\n </ThemeProvider>\n </DSRootContextProvider>\n );\n};\n"],"names":["DSRoot","className","appendClassesTo","children","theme","props","cls","useCls","DSRootContextProvider","ThemeProvider","Toast","jsxs","Modal","jsx","App","clsx"],"mappings":";;;;;;;;;;AA2BO,MAAMA,IAAS,CAAC;AAAA,EACrB,WAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAAmB;AACjB,QAAMC,IAAMC,EAAO;AACnB,2BACGC,GAAsB,EAAA,OAAO,EAAE,OAAAJ,KAC9B,4BAACK,GAAc,EAAA,OAAAL,GAAe,GAAGC,GAAO,iBAAAH,GACtC,4BAACQ,EAAM,UAAN,EACC,UAAC,gBAAAC,EAAAC,EAAM,UAAN,EACC,UAAA;AAAA,IAAC,gBAAAC,EAAAH,EAAM,MAAN,EAAW;AAAA,IACZ,gBAAAG,EAACC,KAAI,WAAWC,EAAKT,EAAI,MAAM,GAAGL,CAAS,GAAI,UAAAE,EAAS,CAAA;AAAA,EAAA,GAC1D,EAAA,CACF,EACF,CAAA,GACF;AAEJ;"}
@@ -1 +1 @@
1
- @layer base{body{margin:0;padding:0}a[href],button:not(:disabled){cursor:pointer}svg{vertical-align:baseline}}@layer components{.ds-root{display:contents}@supports (scrollbar-width: auto){*{scrollbar-color:var(--ds-scrollbar-color-thumb) var(--ds-scrollbar-color-track);scrollbar-width:var(--ds-scrollbar-width)}}@supports selector(::-webkit-scrollbar){*::-webkit-scrollbar-thumb{background:var(--ds-scrollbar-color-thumb)}*::-webkit-scrollbar-track{background:var(--ds-scrollbar-color-track)}*::-webkit-scrollbar{max-width:var(--ds-scrollbar-width-legacy);max-height:var(--ds-scrollbar-width-legacy)}}}
1
+ @layer base{body{margin:0;padding:0}html{overflow:hidden}a[href],button:not(:disabled){cursor:pointer}svg{vertical-align:baseline}}@layer components{.ds-root{isolation:isolate}@supports (scrollbar-width: auto){*{scrollbar-color:var(--ds-scrollbar-color-thumb) var(--ds-scrollbar-color-track);scrollbar-width:var(--ds-scrollbar-width)}}@supports selector(::-webkit-scrollbar){*::-webkit-scrollbar-thumb{background:var(--ds-scrollbar-color-thumb)}*::-webkit-scrollbar-track{background:var(--ds-scrollbar-color-track)}*::-webkit-scrollbar{max-width:var(--ds-scrollbar-width-legacy);max-height:var(--ds-scrollbar-width-legacy)}}}
@@ -1 +1 @@
1
- @layer components{.ds-form-item-label-inner{display:inline-flex;align-items:center;gap:.25rem}.ds-form-item-label-optional-mark{color:var(--ds-color-text-tertiary)}:is(.ds-form-item-label>label.ds-form-item-required):after{display:none}:is(.ds-form-item-label>label.ds-form-item-required):before{display:none}.ds-form-item-label-required-mark{display:inline-block;font-size:var(--ds-font-size);font-family:Inter,sans-serif;line-height:1;content:"*"}.ds-form-item-label-required-mark.ds-form-item-label-required-mark-asterisk{color:var(--ds-form-label-required-mark-color)}.ds-form-item .ds-form-item-label>label:after{display:none}.ds-form-horizontal .ds-form-item .ds-form-item-label .ds-form-item-label-inner:after{content:":";position:relative;margin-block:0;margin-inline-start:var(--ds-form-label-colon-margin-inline-start);margin-inline-end:var(--ds-form-label-colon-margin-inline-end)}.ds-form-item-explain{margin-top:.25rem}.ds-form-item-margin-offset{margin:0!important}.ds-form-item-label{overflow:visible}.ds-form-item-row .ds-form-item-label label{width:100%}}
1
+ @layer components{.ds-form-item-label-inner{display:inline-flex;align-items:center;gap:.25rem}.ds-form-item-label-optional-mark{color:var(--ds-color-text-tertiary)}.ds-form-item-label>label.ds-form-item-required:after{display:none}.ds-form-item-label>label.ds-form-item-required:before{display:none}.ds-form-item-label-required-mark{display:inline-block;font-size:var(--ds-font-size);font-family:Inter,sans-serif;line-height:1;content:"*"}.ds-form-item-label-required-mark.ds-form-item-label-required-mark-asterisk{color:var(--ds-form-label-required-mark-color)}.ds-form-item .ds-form-item-label>label:after{display:none}.ds-form-horizontal .ds-form-item .ds-form-item-label .ds-form-item-label-inner:after{content:":";position:relative;margin-block:0;margin-inline-start:var(--ds-form-label-colon-margin-inline-start);margin-inline-end:var(--ds-form-label-colon-margin-inline-end)}.ds-form-item-explain{margin-top:.25rem}.ds-form-item-margin-offset{margin:0!important}.ds-form-item-label{overflow:visible}.ds-form-item-row .ds-form-item-label label{width:100%}}
@@ -1 +1 @@
1
- @layer components{.ds-modal-wrap{max-height:100vh}.ds-modal-wrap .ds-modal-close-x{width:100%;display:flex}.ds-modal-wrap .ds-modal{padding-bottom:0;margin-top:0;margin-bottom:0;max-height:100vh;top:0}:is(.ds-modal-wrap .ds-modal) .ds-modal-content{display:flex;flex-direction:column;padding:0;box-shadow:var(--ds-box-shadow-secondary);background:var(--ds-modal-bg, var(--ds-modal-content-bg))}:is(.ds-modal-wrap .ds-modal) .ds-modal-body{padding:var(--ds-modal-content-padding);flex-grow:1;flex-shrink:1;min-height:0;overflow:auto}:is(.ds-modal-wrap .ds-modal) .ds-modal-header{padding:calc(var(--ds-modal-padding) * 2 / 3) var(--ds-modal-padding) 0 var(--ds-modal-padding);margin-bottom:0;background:transparent}:is(.ds-modal-wrap .ds-modal) .ds-modal-footer{padding:0 var(--ds-modal-padding) var(--ds-modal-padding) var(--ds-modal-padding);margin-top:0;background:transparent}:is(.ds-modal-wrap .ds-modal) .ds-modal-close{top:calc(var(--ds-modal-padding) * 2 / 3 - 4px)}.ds-modal-wrap:not(.ds-modal-centered) .ds-modal-inner{margin-top:4rem}.ds-modal-wrap:not(.ds-modal-fullscreen) .ds-modal-content{max-height:calc(100vh - var(--ds-modal-edge-padding) * 2);margin:var(--ds-modal-edge-padding)}.ds-modal-wrap:not(.ds-modal-fullscreen) .ds-modal>div[tabindex="0"]{max-height:calc(100vh - var(--ds-modal-edge-padding) * 2)}.ds-modal-no-body-scroll .ds-modal{max-height:100%}:is(.ds-modal-no-body-scroll .ds-modal) .ds-modal-body{overflow:hidden;display:grid}:is(:is(.ds-modal-no-body-scroll .ds-modal) .ds-modal-body)>*{min-height:0}.ds-modal-fullscreen .ds-modal>div[tabindex="0"]{height:100%}.ds-modal-fullscreen .ds-modal .ds-modal-inner{height:100%}.ds-modal-fullscreen .ds-modal .ds-modal-content{border-radius:0;height:100%;width:100%}:is(.ds-modal-fixed .ds-modal) .ds-modal-footer{border-top:1px solid var(--ds-color-split);margin-top:0;padding:calc(var(--ds-modal-padding) / 2) var(--ds-modal-padding)}:is(.ds-modal-fixed .ds-modal) .ds-modal-header{border-bottom:1px solid var(--ds-color-split);margin-bottom:0;padding:calc(var(--ds-modal-padding) / 2) var(--ds-modal-padding)}:is(.ds-modal-fixed .ds-modal) .ds-modal-close{top:8px}:is(.ds-modal-content-overflow .ds-modal) .ds-modal-inner{margin-top:0}}
1
+ @layer components{.ds-modal-wrap{max-height:100vh}.ds-modal-wrap .ds-modal-close-x{width:100%;display:flex}.ds-modal-wrap .ds-modal{padding-bottom:0;margin-top:0;margin-bottom:0;max-height:100vh;top:0}.ds-modal-wrap .ds-modal .ds-modal-content{display:flex;flex-direction:column;padding:0;box-shadow:var(--ds-box-shadow-secondary);background:var(--ds-modal-bg, var(--ds-modal-content-bg))}.ds-modal-wrap .ds-modal .ds-modal-body{padding:var(--ds-modal-content-padding);flex-grow:1;flex-shrink:1;min-height:0;overflow:auto}.ds-modal-wrap .ds-modal .ds-modal-header{padding:calc(var(--ds-modal-padding) * 2 / 3) var(--ds-modal-padding) 0 var(--ds-modal-padding);margin-bottom:0;background:transparent}.ds-modal-wrap .ds-modal .ds-modal-footer{padding:0 var(--ds-modal-padding) var(--ds-modal-padding) var(--ds-modal-padding);margin-top:0;background:transparent}.ds-modal-wrap .ds-modal .ds-modal-close{top:calc(var(--ds-modal-padding) * 2 / 3 - 4px)}.ds-modal-wrap:not(.ds-modal-centered) .ds-modal-inner{margin-top:4rem}.ds-modal-wrap:not(.ds-modal-fullscreen) .ds-modal-content{max-height:calc(100vh - var(--ds-modal-edge-padding) * 2);margin:var(--ds-modal-edge-padding)}.ds-modal-wrap:not(.ds-modal-fullscreen) .ds-modal>div[tabindex="0"]{max-height:calc(100vh - var(--ds-modal-edge-padding) * 2)}.ds-modal-no-body-scroll .ds-modal{max-height:100%}.ds-modal-no-body-scroll .ds-modal .ds-modal-body{overflow:hidden;display:grid}.ds-modal-no-body-scroll .ds-modal .ds-modal-body>*{min-height:0}.ds-modal-fullscreen .ds-modal>div[tabindex="0"]{height:100%}.ds-modal-fullscreen .ds-modal .ds-modal-inner{height:100%}.ds-modal-fullscreen .ds-modal .ds-modal-content{border-radius:0;height:100%;width:100%}.ds-modal-fixed .ds-modal .ds-modal-footer{border-top:1px solid var(--ds-color-split);margin-top:0;padding:calc(var(--ds-modal-padding) / 2) var(--ds-modal-padding)}.ds-modal-fixed .ds-modal .ds-modal-header{border-bottom:1px solid var(--ds-color-split);margin-bottom:0;padding:calc(var(--ds-modal-padding) / 2) var(--ds-modal-padding)}.ds-modal-fixed .ds-modal .ds-modal-close{top:8px}.ds-modal-content-overflow .ds-modal .ds-modal-inner{margin-top:0}}
@@ -1 +1 @@
1
- @layer components{.ds-nav-group{display:flex;flex-direction:column;gap:.25rem}.ds-nav-item{width:100%;display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;font-size:1.25rem;color:var(--ds-color-icon);background:transparent;border-radius:var(--ds-border-radius);transition:background-color var(--ds-motion-duration-mid),color var(--ds-motion-duration-mid)}.ds-nav-item:hover{background-color:var(--ds-color-fill-tertiary);color:var(--ds-color-icon-hover)}.ds-nav-item[data-active=true]{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-text);font-weight:500}.ds-nav-item[aria-expanded=true]{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-text)}.ds-nav-item:disabled{background:transparent;color:var(--ds-color-text-disabled);cursor:not-allowed}.ds-nav-item .ds-nav-item-icon{font-size:1.25rem;line-height:1;transition:all .1s}.ds-nav-item .ds-nav-item-content{flex:1;display:flex;align-items:center;white-space:nowrap;overflow:hidden;font-size:.875rem;line-height:1rem;transition:max-width .15s,opacity .15s}.ds-nav-small .ds-nav-item,.ds-nav-item.ds-nav-item-small{padding:.25rem .5rem}:is(.ds-nav-small .ds-nav-item,.ds-nav-item.ds-nav-item-small) .ds-nav-item-icon{font-size:1rem}.ds-nav-large .ds-nav-item,.ds-nav-item.ds-nav-item-large{padding:.5rem 1rem}:is(.ds-nav-large .ds-nav-item,.ds-nav-item.ds-nav-item-large) .ds-nav-item-icon{font-size:1.5rem}:is(.ds-nav-large .ds-nav-item,.ds-nav-item.ds-nav-item-large) .ds-nav-item-content{font-size:1rem;line-height:1.5rem}.ds-nav-heading{width:100%;height:.875rem;position:relative;color:var(--ds-color-text-tertiary);text-transform:uppercase;font-weight:500;letter-spacing:.002em;font-size:.75rem;line-height:1rem;margin-bottom:.5rem}.ds-nav-small .ds-nav-heading{font-size:.625rem;line-height:1.4}.ds-nav-heading-text{display:inline-block;overflow:hidden;text-overflow:ellipsis;position:absolute;transition:all .1s;white-space:nowrap}}
1
+ @layer components{.ds-nav-group{display:flex;flex-direction:column;gap:.25rem}.ds-nav-item{width:100%;display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;font-size:1.25rem;color:var(--ds-color-icon);background:transparent;border-radius:var(--ds-border-radius);transition:background-color var(--ds-motion-duration-mid),color var(--ds-motion-duration-mid)}.ds-nav-item:hover{background-color:var(--ds-color-fill-tertiary);color:var(--ds-color-icon-hover)}.ds-nav-item[data-active=true]{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-text);font-weight:500}.ds-nav-item[aria-expanded=true]{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-text)}.ds-nav-item:disabled{background:transparent;color:var(--ds-color-text-disabled);cursor:not-allowed}.ds-nav-item .ds-nav-item-icon{font-size:1.25rem;line-height:1;transition:all .1s}.ds-nav-item .ds-nav-item-content{flex:1;display:flex;align-items:center;white-space:nowrap;overflow:hidden;font-size:.875rem;line-height:1rem;transition:max-width .15s,opacity .15s}.ds-nav-small .ds-nav-item,.ds-nav-item.ds-nav-item-small{padding:.25rem .5rem}.ds-nav-small .ds-nav-item .ds-nav-item-icon,.ds-nav-item.ds-nav-item-small .ds-nav-item-icon{font-size:1rem}.ds-nav-large .ds-nav-item,.ds-nav-item.ds-nav-item-large{padding:.5rem 1rem}.ds-nav-large .ds-nav-item .ds-nav-item-icon,.ds-nav-item.ds-nav-item-large .ds-nav-item-icon{font-size:1.5rem}.ds-nav-large .ds-nav-item .ds-nav-item-content,.ds-nav-item.ds-nav-item-large .ds-nav-item-content{font-size:1rem;line-height:1.5rem}.ds-nav-heading{width:100%;height:.875rem;position:relative;color:var(--ds-color-text-tertiary);text-transform:uppercase;font-weight:500;letter-spacing:.002em;font-size:.75rem;line-height:1rem;margin-bottom:.5rem}.ds-nav-small .ds-nav-heading{font-size:.625rem;line-height:1.4}.ds-nav-heading-text{display:inline-block;overflow:hidden;text-overflow:ellipsis;position:absolute;transition:all .1s;white-space:nowrap}}
@@ -1,34 +1,80 @@
1
1
  "use client";
2
- import { jsxs as p, jsx as e } from "react/jsx-runtime";
3
- import { ScrollArea as t } from "@base-ui-components/react";
2
+ import { jsxs as x, jsx as f } from "react/jsx-runtime";
3
+ import { useRef as y, useState as R, useEffect as T } from "react";
4
+ import { ScrollArea as S } from "@base-ui-components/react";
4
5
  import './style.css';/* empty css */
5
- import { useCls as b } from "../utils/antdUtils.js";
6
- import { clsx as l } from "../utils/cn.js";
7
- const S = ({
8
- children: c,
9
- className: n,
10
- classNames: r = {},
11
- orientation: i = "vertical"
6
+ import { useCls as E } from "../utils/antdUtils.js";
7
+ import { clsx as b } from "../utils/cn.js";
8
+ const I = ({
9
+ children: m,
10
+ className: w,
11
+ classNames: o = {},
12
+ orientation: t = "vertical",
13
+ fadeEdges: e = !1,
14
+ onScroll: h
12
15
  }) => {
13
- const o = b();
14
- return /* @__PURE__ */ p(t.Root, { className: l(o("scroll-area"), n), children: [
15
- /* @__PURE__ */ e(
16
- t.Viewport,
16
+ const l = E(), u = y(null), [r, v] = R({
17
+ isAtStart: !0,
18
+ isAtEnd: !1,
19
+ isScrollable: !1
20
+ });
21
+ return T(() => {
22
+ if (!u.current) return;
23
+ const c = u.current, i = (d) => {
24
+ if (d && h && h(d), e)
25
+ if (t === "vertical") {
26
+ const { scrollTop: s, scrollHeight: a, clientHeight: n } = c, A = a > n;
27
+ v({
28
+ isAtStart: s <= 1,
29
+ isAtEnd: s >= a - n - 1,
30
+ isScrollable: A
31
+ });
32
+ } else {
33
+ const { scrollLeft: s, scrollWidth: a, clientWidth: n } = c, A = a > n + 2;
34
+ v({
35
+ isAtStart: s <= 1,
36
+ isAtEnd: s >= a - n - 1,
37
+ isScrollable: A
38
+ });
39
+ }
40
+ };
41
+ i();
42
+ const z = setTimeout(i, 0);
43
+ c.addEventListener("scroll", i);
44
+ const p = new ResizeObserver(() => {
45
+ i();
46
+ });
47
+ return p.observe(c), () => {
48
+ clearTimeout(z), c.removeEventListener("scroll", i), p.disconnect();
49
+ };
50
+ }, [e, t, h]), /* @__PURE__ */ x(S.Root, { className: b(l("scroll-area"), w), children: [
51
+ /* @__PURE__ */ f(
52
+ S.Viewport,
17
53
  {
18
- className: l(o("scroll-area-viewport"), r == null ? void 0 : r.viewport),
19
- children: /* @__PURE__ */ e(t.Content, { className: l(o("scroll-area-content")), children: c })
54
+ ref: u,
55
+ className: b(
56
+ l("scroll-area-viewport"),
57
+ e && r.isScrollable && t === "vertical" && r.isAtStart && l("scroll-area-fade-bottom-only"),
58
+ e && r.isScrollable && t === "vertical" && r.isAtEnd && l("scroll-area-fade-top-only"),
59
+ e && r.isScrollable && t === "vertical" && !r.isAtStart && !r.isAtEnd && l("scroll-area-fade-both-vertical"),
60
+ e && r.isScrollable && t === "horizontal" && r.isAtStart && l("scroll-area-fade-right-only"),
61
+ e && r.isScrollable && t === "horizontal" && r.isAtEnd && l("scroll-area-fade-left-only"),
62
+ e && r.isScrollable && t === "horizontal" && !r.isAtStart && !r.isAtEnd && l("scroll-area-fade-both-horizontal"),
63
+ o == null ? void 0 : o.viewport
64
+ ),
65
+ children: /* @__PURE__ */ f(S.Content, { className: b(l("scroll-area-content")), children: m })
20
66
  }
21
67
  ),
22
- /* @__PURE__ */ e(
23
- t.Scrollbar,
68
+ /* @__PURE__ */ f(
69
+ S.Scrollbar,
24
70
  {
25
- className: l(o("scroll-area-scrollbar"), r == null ? void 0 : r.scrollbar),
26
- orientation: i,
27
- "data-orientation": i,
28
- children: /* @__PURE__ */ e(
29
- t.Thumb,
71
+ className: b(l("scroll-area-scrollbar"), o == null ? void 0 : o.scrollbar),
72
+ orientation: t,
73
+ "data-orientation": t,
74
+ children: /* @__PURE__ */ f(
75
+ S.Thumb,
30
76
  {
31
- className: l(o("scroll-area-thumb"), r == null ? void 0 : r.thumb)
77
+ className: b(l("scroll-area-thumb"), o == null ? void 0 : o.thumb)
32
78
  }
33
79
  )
34
80
  }
@@ -36,6 +82,6 @@ const S = ({
36
82
  ] });
37
83
  };
38
84
  export {
39
- S as ScrollArea
85
+ I as ScrollArea
40
86
  };
41
87
  //# sourceMappingURL=component.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"component.js","sources":["../../../src/components/scroll-area/component.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactNode } from \"react\";\nimport { ScrollArea as BaseScrollArea } from \"@base-ui-components/react\";\nimport { clsx, useCls } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface ScrollAreaProps {\n children: ReactNode;\n /**\n * Additional class name for the root component\n */\n className?: string;\n /**\n * Custom class names for each part of the scroll area\n */\n classNames?: {\n /**\n * Class name for the viewport element\n */\n viewport?: string;\n /**\n * Class name for the scrollbar element\n */\n scrollbar?: string;\n /**\n * Class name for the thumb element\n */\n thumb?: string;\n };\n /**\n * Orientation of the scrollbar\n * @default \"vertical\"\n */\n orientation?: \"vertical\" | \"horizontal\";\n}\n\nexport const ScrollArea = ({\n children,\n className,\n classNames = {},\n orientation = \"vertical\",\n}: ScrollAreaProps) => {\n const cls = useCls();\n return (\n <BaseScrollArea.Root className={clsx(cls(\"scroll-area\"), className)}>\n <BaseScrollArea.Viewport\n className={clsx(cls(\"scroll-area-viewport\"), classNames?.viewport)}\n >\n <BaseScrollArea.Content className={clsx(cls(\"scroll-area-content\"))}>\n {children}\n </BaseScrollArea.Content>\n </BaseScrollArea.Viewport>\n <BaseScrollArea.Scrollbar\n className={clsx(cls(\"scroll-area-scrollbar\"), classNames?.scrollbar)}\n orientation={orientation}\n data-orientation={orientation}\n >\n <BaseScrollArea.Thumb\n className={clsx(cls(\"scroll-area-thumb\"), classNames?.thumb)}\n />\n </BaseScrollArea.Scrollbar>\n </BaseScrollArea.Root>\n );\n};\n"],"names":["ScrollArea","children","className","classNames","orientation","cls","useCls","jsxs","BaseScrollArea","clsx","jsx"],"mappings":";;;;;;AAsCO,MAAMA,IAAa,CAAC;AAAA,EACzB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC,IAAa,CAAC;AAAA,EACd,aAAAC,IAAc;AAChB,MAAuB;AACrB,QAAMC,IAAMC,EAAO;AAEjB,SAAA,gBAAAC,EAACC,EAAe,MAAf,EAAoB,WAAWC,EAAKJ,EAAI,aAAa,GAAGH,CAAS,GAChE,UAAA;AAAA,IAAA,gBAAAQ;AAAA,MAACF,EAAe;AAAA,MAAf;AAAA,QACC,WAAWC,EAAKJ,EAAI,sBAAsB,GAAGF,KAAA,gBAAAA,EAAY,QAAQ;AAAA,QAEjE,UAAA,gBAAAO,EAACF,EAAe,SAAf,EAAuB,WAAWC,EAAKJ,EAAI,qBAAqB,CAAC,GAC/D,UAAAJ,EACH,CAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACA,gBAAAS;AAAA,MAACF,EAAe;AAAA,MAAf;AAAA,QACC,WAAWC,EAAKJ,EAAI,uBAAuB,GAAGF,KAAA,gBAAAA,EAAY,SAAS;AAAA,QACnE,aAAAC;AAAA,QACA,oBAAkBA;AAAA,QAElB,UAAA,gBAAAM;AAAA,UAACF,EAAe;AAAA,UAAf;AAAA,YACC,WAAWC,EAAKJ,EAAI,mBAAmB,GAAGF,KAAA,gBAAAA,EAAY,KAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAC7D;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
1
+ {"version":3,"file":"component.js","sources":["../../../src/components/scroll-area/component.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactNode, useEffect, useRef, useState } from \"react\";\nimport { ScrollArea as BaseScrollArea } from \"@base-ui-components/react\";\nimport { clsx, useCls } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface ScrollAreaProps {\n children: ReactNode;\n /**\n * Additional class name for the root component\n */\n className?: string;\n /**\n * Custom class names for each part of the scroll area\n */\n classNames?: {\n /**\n * Class name for the viewport element\n */\n viewport?: string;\n /**\n * Class name for the scrollbar element\n */\n scrollbar?: string;\n /**\n * Class name for the thumb element\n */\n thumb?: string;\n };\n /**\n * Orientation of the scrollbar\n * @default \"vertical\"\n */\n orientation?: \"vertical\" | \"horizontal\";\n /**\n * Enable fade-out effect at scrollable edges\n * @default false\n */\n fadeEdges?: boolean;\n /**\n * Callback fired when the scroll position changes\n */\n onScroll?: (event: Event) => void;\n}\n\nexport const ScrollArea = ({\n children,\n className,\n classNames = {},\n orientation = \"vertical\",\n fadeEdges = false,\n onScroll,\n}: ScrollAreaProps) => {\n const cls = useCls();\n const viewportRef = useRef<HTMLDivElement>(null);\n const [scrollState, setScrollState] = useState({\n isAtStart: true,\n isAtEnd: false,\n isScrollable: false,\n });\n\n useEffect(() => {\n if (!viewportRef.current) return;\n\n const viewport = viewportRef.current;\n\n const handleScroll = (event?: Event) => {\n // Call the onScroll callback if provided and event exists\n if (event && onScroll) {\n onScroll(event);\n }\n\n // Handle fade edges state update if enabled\n if (fadeEdges) {\n if (orientation === \"vertical\") {\n const { scrollTop, scrollHeight, clientHeight } = viewport;\n const isScrollable = scrollHeight > clientHeight;\n setScrollState({\n isAtStart: scrollTop <= 1,\n isAtEnd: scrollTop >= scrollHeight - clientHeight - 1,\n isScrollable,\n });\n } else {\n const { scrollLeft, scrollWidth, clientWidth } = viewport;\n // Add a small buffer (2px) to account for rounding errors\n const isScrollable = scrollWidth > clientWidth + 2;\n setScrollState({\n isAtStart: scrollLeft <= 1,\n isAtEnd: scrollLeft >= scrollWidth - clientWidth - 1,\n isScrollable,\n });\n }\n }\n };\n\n // Initial check (without event)\n handleScroll();\n\n // Use a timeout to check again after content might have rendered\n const timeoutId = setTimeout(handleScroll, 0);\n\n viewport.addEventListener(\"scroll\", handleScroll);\n\n // Add resize observer to detect content size changes\n const resizeObserver = new ResizeObserver(() => {\n handleScroll();\n });\n resizeObserver.observe(viewport);\n\n return () => {\n clearTimeout(timeoutId);\n viewport.removeEventListener(\"scroll\", handleScroll);\n resizeObserver.disconnect();\n };\n }, [fadeEdges, orientation, onScroll]);\n return (\n <BaseScrollArea.Root className={clsx(cls(\"scroll-area\"), className)}>\n <BaseScrollArea.Viewport\n ref={viewportRef}\n className={clsx(\n cls(\"scroll-area-viewport\"),\n fadeEdges &&\n scrollState.isScrollable &&\n orientation === \"vertical\" &&\n scrollState.isAtStart &&\n cls(\"scroll-area-fade-bottom-only\"),\n fadeEdges &&\n scrollState.isScrollable &&\n orientation === \"vertical\" &&\n scrollState.isAtEnd &&\n cls(\"scroll-area-fade-top-only\"),\n fadeEdges &&\n scrollState.isScrollable &&\n orientation === \"vertical\" &&\n !scrollState.isAtStart &&\n !scrollState.isAtEnd &&\n cls(\"scroll-area-fade-both-vertical\"),\n fadeEdges &&\n scrollState.isScrollable &&\n orientation === \"horizontal\" &&\n scrollState.isAtStart &&\n cls(\"scroll-area-fade-right-only\"),\n fadeEdges &&\n scrollState.isScrollable &&\n orientation === \"horizontal\" &&\n scrollState.isAtEnd &&\n cls(\"scroll-area-fade-left-only\"),\n fadeEdges &&\n scrollState.isScrollable &&\n orientation === \"horizontal\" &&\n !scrollState.isAtStart &&\n !scrollState.isAtEnd &&\n cls(\"scroll-area-fade-both-horizontal\"),\n classNames?.viewport\n )}\n >\n <BaseScrollArea.Content className={clsx(cls(\"scroll-area-content\"))}>\n {children}\n </BaseScrollArea.Content>\n </BaseScrollArea.Viewport>\n <BaseScrollArea.Scrollbar\n className={clsx(cls(\"scroll-area-scrollbar\"), classNames?.scrollbar)}\n orientation={orientation}\n data-orientation={orientation}\n >\n <BaseScrollArea.Thumb\n className={clsx(cls(\"scroll-area-thumb\"), classNames?.thumb)}\n />\n </BaseScrollArea.Scrollbar>\n </BaseScrollArea.Root>\n );\n};\n"],"names":["ScrollArea","children","className","classNames","orientation","fadeEdges","onScroll","cls","useCls","viewportRef","useRef","scrollState","setScrollState","useState","useEffect","viewport","handleScroll","event","scrollTop","scrollHeight","clientHeight","isScrollable","scrollLeft","scrollWidth","clientWidth","timeoutId","resizeObserver","jsxs","BaseScrollArea","clsx","jsx"],"mappings":"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"}
@@ -1 +1 @@
1
- @layer components{.ds-scroll-area{display:flex;flex-direction:column;height:100%;min-height:0;flex:1}.ds-scroll-area .ds-scroll-area-viewport{flex-shrink:1;height:100%;max-height:100%;overflow:hidden;overscroll-behavior:contain}:is(.ds-scroll-area .ds-scroll-area-viewport):focus-visible{outline-width:2px;outline-offset:4px;outline-color:var(--ds-color-primary)}.ds-scroll-area .ds-scroll-area-scrollbar{padding:.125rem;display:flex;justify-content:center;background-color:transparent;opacity:0;transition-property:opacity;transition-delay:.1s}:is(.ds-scroll-area .ds-scroll-area-scrollbar) .ds-scroll-area-thumb{border-radius:9999px;background-color:var(--ds-color-bg-fill-tertiary);border:1px solid var(--ds-color-border)}[data-orientation=vertical]:is(.ds-scroll-area .ds-scroll-area-scrollbar){width:.625rem}[data-orientation=vertical]:is(.ds-scroll-area .ds-scroll-area-scrollbar) .ds-scroll-area-thumb{width:100%}[data-orientation=horizontal]:is(.ds-scroll-area .ds-scroll-area-scrollbar){width:100%;height:.625rem;flex-direction:column}[data-orientation=horizontal]:is(.ds-scroll-area .ds-scroll-area-scrollbar) .ds-scroll-area-thumb{height:100%}[data-hovering]:is(.ds-scroll-area .ds-scroll-area-scrollbar){opacity:1;transition-delay:0ms;transition-duration:.2s}[data-scrolling]:is(.ds-scroll-area .ds-scroll-area-scrollbar){opacity:1;transition-delay:0ms;transition-duration:.2s}}
1
+ @layer components{.ds-scroll-area{--ds-scroll-area-fade-distance: 20px;display:flex;flex-direction:column;height:100%;min-height:0;flex:1}.ds-scroll-area .ds-scroll-area-viewport{flex-shrink:1;height:100%;max-height:100%;overflow:hidden;overscroll-behavior:contain}.ds-scroll-area .ds-scroll-area-viewport:focus-visible{outline-width:2px;outline-offset:4px;outline-color:var(--ds-color-primary)}.ds-scroll-area .ds-scroll-area-viewport.ds-scroll-area-fade-bottom-only{mask-image:linear-gradient(to bottom,black 0px,black calc(100% - var(--ds-scroll-area-fade-distance)),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,black 0px,black calc(100% - var(--ds-scroll-area-fade-distance)),transparent 100%)}.ds-scroll-area .ds-scroll-area-viewport.ds-scroll-area-fade-top-only{mask-image:linear-gradient(to bottom,transparent 0px,black var(--ds-scroll-area-fade-distance),black 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0px,black var(--ds-scroll-area-fade-distance),black 100%)}.ds-scroll-area .ds-scroll-area-viewport.ds-scroll-area-fade-both-vertical{mask-image:linear-gradient(to bottom,transparent 0px,black var(--ds-scroll-area-fade-distance),black calc(100% - var(--ds-scroll-area-fade-distance)),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0px,black var(--ds-scroll-area-fade-distance),black calc(100% - var(--ds-scroll-area-fade-distance)),transparent 100%)}.ds-scroll-area .ds-scroll-area-viewport.ds-scroll-area-fade-right-only{mask-image:linear-gradient(to right,black 0px,black calc(100% - var(--ds-scroll-area-fade-distance)),transparent 100%);-webkit-mask-image:linear-gradient(to right,black 0px,black calc(100% - var(--ds-scroll-area-fade-distance)),transparent 100%)}.ds-scroll-area .ds-scroll-area-viewport.ds-scroll-area-fade-left-only{mask-image:linear-gradient(to right,transparent 0px,black var(--ds-scroll-area-fade-distance),black 100%);-webkit-mask-image:linear-gradient(to right,transparent 0px,black var(--ds-scroll-area-fade-distance),black 100%)}.ds-scroll-area .ds-scroll-area-viewport.ds-scroll-area-fade-both-horizontal{mask-image:linear-gradient(to right,transparent 0px,black var(--ds-scroll-area-fade-distance),black calc(100% - var(--ds-scroll-area-fade-distance)),transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0px,black var(--ds-scroll-area-fade-distance),black calc(100% - var(--ds-scroll-area-fade-distance)),transparent 100%)}.ds-scroll-area .ds-scroll-area-scrollbar{padding:.125rem;display:flex;justify-content:center;background-color:transparent;opacity:0;transition-property:opacity;transition-delay:.1s}.ds-scroll-area .ds-scroll-area-scrollbar .ds-scroll-area-thumb{border-radius:9999px;background-color:var(--ds-color-bg-fill-tertiary);border:1px solid var(--ds-color-border)}.ds-scroll-area .ds-scroll-area-scrollbar[data-orientation=vertical]{width:.625rem}.ds-scroll-area .ds-scroll-area-scrollbar[data-orientation=vertical] .ds-scroll-area-thumb{width:100%}.ds-scroll-area .ds-scroll-area-scrollbar[data-orientation=horizontal]{width:100%;height:.625rem;flex-direction:column}.ds-scroll-area .ds-scroll-area-scrollbar[data-orientation=horizontal] .ds-scroll-area-thumb{height:100%}.ds-scroll-area .ds-scroll-area-scrollbar[data-hovering],.ds-scroll-area .ds-scroll-area-scrollbar[data-scrolling]{opacity:1;transition-delay:0ms;transition-duration:.2s}}
@@ -0,0 +1,150 @@
1
+ "use client";
2
+ import { jsxs as p, jsx as t } from "react/jsx-runtime";
3
+ import { XCircleIcon as K, CaretDownIcon as V } from "@bioturing/assets";
4
+ import W from "merge-refs";
5
+ import { forwardRef as X, useCallback as E, useRef as q, useEffect as B } from "react";
6
+ import { WithRenderProp as F } from "../utils/WithRenderProp.js";
7
+ import './style.css';/* empty css */
8
+ import { useCls as G } from "../utils/antdUtils.js";
9
+ import { clsx as l } from "../utils/cn.js";
10
+ const H = X(
11
+ ({
12
+ size: h = "middle",
13
+ disabled: n = !1,
14
+ open: o = !1,
15
+ status: w,
16
+ placeholder: b = "Select...",
17
+ value: c,
18
+ prefix: x,
19
+ allowClear: u = !1,
20
+ suffixIcon: k,
21
+ clearIcon: m,
22
+ onClear: d,
23
+ onOpenChange: f,
24
+ classNames: e,
25
+ render: S,
26
+ role: j = "combobox",
27
+ className: L,
28
+ ...P
29
+ }, T) => {
30
+ const r = G(), g = c != null && c !== "", $ = {
31
+ disabled: n,
32
+ open: o,
33
+ hasValue: g,
34
+ size: h
35
+ }, R = E(
36
+ (i) => {
37
+ i.stopPropagation(), d == null || d();
38
+ },
39
+ [d]
40
+ ), y = q(null);
41
+ B(() => {
42
+ const i = y.current;
43
+ if (!i) return;
44
+ const v = (D) => {
45
+ D.key === "ArrowDown" && !n && !o && (D.preventDefault(), f == null || f(!0));
46
+ };
47
+ return i.addEventListener("keydown", v), () => {
48
+ i.removeEventListener("keydown", v);
49
+ };
50
+ }, [n, o, f]);
51
+ const A = E(
52
+ (i) => /* @__PURE__ */ p("button", { ...i, children: [
53
+ /* @__PURE__ */ t(
54
+ "span",
55
+ {
56
+ className: l(r("select-trigger-content"), e == null ? void 0 : e.content),
57
+ children: g ? /* @__PURE__ */ p("span", { className: r("select-trigger-value-with-prefix"), children: [
58
+ x,
59
+ /* @__PURE__ */ t(
60
+ "span",
61
+ {
62
+ className: l(
63
+ r("select-trigger-value"),
64
+ e == null ? void 0 : e.value
65
+ ),
66
+ children: c
67
+ }
68
+ )
69
+ ] }) : /* @__PURE__ */ t(
70
+ "span",
71
+ {
72
+ className: l(
73
+ r("select-trigger-placeholder"),
74
+ e == null ? void 0 : e.placeholder
75
+ ),
76
+ children: b
77
+ }
78
+ )
79
+ }
80
+ ),
81
+ /* @__PURE__ */ p(
82
+ "span",
83
+ {
84
+ className: l(r("select-trigger-suffix"), e == null ? void 0 : e.suffix),
85
+ children: [
86
+ u && g && /* @__PURE__ */ t(
87
+ "span",
88
+ {
89
+ className: r("select-trigger-clear"),
90
+ unselectable: "on",
91
+ "aria-hidden": "true",
92
+ onClick: R,
93
+ children: m || /* @__PURE__ */ t("span", { className: r("select-trigger-clear-icon"), children: /* @__PURE__ */ t(K, { weight: "fill" }) })
94
+ }
95
+ ),
96
+ (!u || !g) && /* @__PURE__ */ t(
97
+ "span",
98
+ {
99
+ className: r("select-trigger-arrow"),
100
+ unselectable: "on",
101
+ "aria-hidden": "true",
102
+ children: k || /* @__PURE__ */ t("span", { className: r("select-trigger-arrow-icon"), children: /* @__PURE__ */ t(V, { weight: "bold" }) })
103
+ }
104
+ )
105
+ ]
106
+ }
107
+ )
108
+ ] }),
109
+ [
110
+ g,
111
+ c,
112
+ x,
113
+ b,
114
+ u,
115
+ k,
116
+ m,
117
+ r,
118
+ e,
119
+ R
120
+ ]
121
+ );
122
+ return /* @__PURE__ */ t(
123
+ F,
124
+ {
125
+ as: "button",
126
+ ref: W(T, y),
127
+ state: $,
128
+ className: l(
129
+ r("select-trigger"),
130
+ r(`select-trigger-${h}`),
131
+ n && r("select-trigger-disabled"),
132
+ o && r("select-trigger-open"),
133
+ w && r(`select-trigger-${w}`),
134
+ e == null ? void 0 : e.trigger,
135
+ L
136
+ ),
137
+ disabled: n,
138
+ role: j,
139
+ "aria-expanded": o,
140
+ render: S || A,
141
+ ...P
142
+ }
143
+ );
144
+ }
145
+ );
146
+ H.displayName = "SelectTrigger";
147
+ export {
148
+ H as SelectTrigger
149
+ };
150
+ //# sourceMappingURL=component.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"component.js","sources":["../../../src/components/select-trigger/component.tsx"],"sourcesContent":["\"use client\";\nimport { CaretDownIcon, XCircleIcon } from \"@bioturing/assets\";\nimport mergeRefs from \"merge-refs\";\nimport React, { forwardRef, useCallback, useEffect, useRef } from \"react\";\nimport { clsx, useCls } from \"../utils\";\nimport { WithRenderProp, WithRenderPropProps } from \"../utils/WithRenderProp\";\nimport { ValidateStatus } from \"antd/es/form/FormItem\";\nimport \"./style.css\";\n\nexport type SelectTriggerState = {\n disabled: boolean;\n open: boolean;\n hasValue: boolean;\n size: \"small\" | \"middle\" | \"large\";\n};\n\nexport interface SelectTriggerProps\n extends Omit<\n WithRenderPropProps<\"button\", SelectTriggerState>,\n \"value\" | \"prefix\"\n > {\n /** Size variant */\n size?: \"small\" | \"middle\" | \"large\";\n /** Whether the component is disabled */\n disabled?: boolean;\n /** Whether the dropdown/popup is open */\n open?: boolean;\n /** Validation status */\n status?: ValidateStatus;\n /** Placeholder text */\n placeholder?: string;\n /** Current value/content to display */\n value?: React.ReactNode;\n /** Prefix content to display before the value (e.g., icon) */\n prefix?: React.ReactNode;\n /** Whether to show clear button when there's a value */\n allowClear?: boolean;\n /** Custom suffix icon (arrow icon) */\n suffixIcon?: React.ReactNode;\n /** Custom clear icon */\n clearIcon?: React.ReactNode;\n /** Clear handler */\n onClear?: () => void;\n /** Open state change handler */\n onOpenChange?: (open: boolean) => void;\n /** Custom class names */\n classNames?: {\n trigger?: string;\n content?: string;\n suffix?: string;\n placeholder?: string;\n value?: string;\n };\n}\n\nexport const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n (\n {\n size = \"middle\",\n disabled = false,\n open = false,\n status,\n placeholder = \"Select...\",\n value,\n prefix,\n allowClear = false,\n suffixIcon,\n clearIcon,\n onClear,\n onOpenChange,\n classNames,\n render,\n role = \"combobox\",\n className,\n ...rest\n },\n ref\n ) => {\n const cls = useCls();\n const hasValue = value !== undefined && value !== null && value !== \"\";\n\n const triggerState: SelectTriggerState = {\n disabled,\n open,\n hasValue,\n size,\n };\n\n const handleClearClick = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation();\n onClear?.();\n },\n [onClear]\n );\n\n // Internal ref for the button element\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n // Handle keyboard shortcuts with addEventListener\n useEffect(() => {\n const buttonElement = buttonRef.current;\n if (!buttonElement) return;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n // Alt + Down Arrow to open dropdown\n if (e.key === \"ArrowDown\" && !disabled && !open) {\n e.preventDefault();\n onOpenChange?.(true);\n }\n // Escape to close dropdown\n // Comment because Popover would handle it\n // if (e.key === \"Escape\" && open) {\n // e.preventDefault();\n // onOpenChange?.(false);\n // }\n };\n\n buttonElement.addEventListener(\"keydown\", handleKeyDown);\n return () => {\n buttonElement.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [disabled, open, onOpenChange]);\n\n const defaultRender = useCallback(\n (props: React.ComponentPropsWithoutRef<\"button\">) => (\n <button {...props}>\n <span\n className={clsx(cls(\"select-trigger-content\"), classNames?.content)}\n >\n {hasValue ? (\n <span className={cls(\"select-trigger-value-with-prefix\")}>\n {prefix}\n <span\n className={clsx(\n cls(\"select-trigger-value\"),\n classNames?.value\n )}\n >\n {value}\n </span>\n </span>\n ) : (\n <span\n className={clsx(\n cls(\"select-trigger-placeholder\"),\n classNames?.placeholder\n )}\n >\n {placeholder}\n </span>\n )}\n </span>\n <span\n className={clsx(cls(\"select-trigger-suffix\"), classNames?.suffix)}\n >\n {allowClear && hasValue && (\n <span\n className={cls(\"select-trigger-clear\")}\n unselectable=\"on\"\n aria-hidden=\"true\"\n onClick={handleClearClick}\n >\n {clearIcon || (\n <span className={cls(\"select-trigger-clear-icon\")}>\n <XCircleIcon weight=\"fill\" />\n </span>\n )}\n </span>\n )}\n {(!allowClear || !hasValue) && (\n <span\n className={cls(\"select-trigger-arrow\")}\n unselectable=\"on\"\n aria-hidden=\"true\"\n >\n {suffixIcon || (\n <span className={cls(\"select-trigger-arrow-icon\")}>\n <CaretDownIcon weight=\"bold\" />\n </span>\n )}\n </span>\n )}\n </span>\n </button>\n ),\n [\n hasValue,\n value,\n prefix,\n placeholder,\n allowClear,\n suffixIcon,\n clearIcon,\n cls,\n classNames,\n handleClearClick,\n ]\n );\n\n return (\n <WithRenderProp\n as=\"button\"\n ref={mergeRefs(ref, buttonRef)}\n state={triggerState}\n className={clsx(\n cls(\"select-trigger\"),\n cls(`select-trigger-${size}`),\n disabled && cls(\"select-trigger-disabled\"),\n open && cls(\"select-trigger-open\"),\n status && cls(`select-trigger-${status}`),\n classNames?.trigger,\n className\n )}\n disabled={disabled}\n role={role}\n aria-expanded={open}\n render={render || defaultRender}\n {...rest}\n />\n );\n }\n);\n\nSelectTrigger.displayName = \"SelectTrigger\";\n"],"names":["SelectTrigger","forwardRef","size","disabled","open","status","placeholder","value","prefix","allowClear","suffixIcon","clearIcon","onClear","onOpenChange","classNames","render","role","className","rest","ref","cls","useCls","hasValue","triggerState","handleClearClick","useCallback","e","buttonRef","useRef","useEffect","buttonElement","handleKeyDown","defaultRender","props","jsxs","jsx","clsx","XCircleIcon","CaretDownIcon","WithRenderProp","mergeRefs"],"mappings":"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"}
@@ -0,0 +1 @@
1
+ @layer components{.ds-select-trigger{position:relative;display:inline-flex;align-items:center;cursor:pointer;width:100%;background-color:var(--ds-control-color-bg);border:1px solid var(--ds-control-color-border);border-radius:var(--ds-control-border-radius);transition:var(--ds-control-transition);text-align:left}.ds-select-trigger:focus,.ds-select-trigger:focus-visible{outline:none}.ds-select-trigger:hover:not(.ds-select-trigger-disabled){border-color:var(--ds-control-color-border-hover)}.ds-select-trigger:focus,.ds-select-trigger:focus-visible,.ds-select-trigger-focused{border:var(--ds-control-border-active);box-shadow:var(--ds-control-shadow-active)}.ds-select-trigger-open{border:var(--ds-control-border-active)}.ds-select-trigger-disabled{background-color:var(--ds-control-color-bg-disabled);border:var(--ds-control-color-border);cursor:not-allowed;color:var(--ds-control-color-text-disabled)}.ds-select-trigger-error{border:var(--ds-control-border-error-active)}.ds-select-trigger-error:focus,.ds-select-trigger-error:focus-visible,.ds-select-trigger-error.ds-select-trigger-focused{border:var(--ds-control-border-error-active);box-shadow:var(--ds-control-shadow-error-active)}.ds-select-trigger-warning{border:var(--ds-control-border-warning-active)}.ds-select-trigger-warning:focus,.ds-select-trigger-warning:focus-visible,.ds-select-trigger-warning.ds-select-trigger-focused{border:var(--ds-control-border-warning-active);box-shadow:var(--ds-control-shadow-warning-active)}.ds-select-trigger-content{display:flex;align-items:center;flex:1;min-width:0;overflow:hidden}.ds-select-trigger-value{flex:1;color:var(--ds-control-color-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.ds-select-trigger-value-with-prefix{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.ds-select-trigger-placeholder{flex:1;color:var(--ds-control-color-text-placeholder);pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.ds-select-trigger-suffix{display:flex;align-items:center;justify-content:center;width:var(--ds-control-icon-size);height:var(--ds-control-icon-size);position:relative;font-size:var(--ds-control-icon-size);flex-shrink:0}.ds-select-trigger-arrow{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--ds-control-color-icon);width:var(--ds-control-icon-size);height:var(--ds-control-icon-size);pointer-events:none}.ds-select-trigger-arrow-icon{display:flex;align-items:center;justify-content:center;transition:transform .2s ease}.ds-select-trigger-open .ds-select-trigger-arrow-icon{transform:rotate(180deg)}.ds-select-trigger-clear{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--ds-control-color-icon);width:var(--ds-control-icon-size);height:var(--ds-control-icon-size);cursor:pointer;transition:color .2s ease}.ds-select-trigger-clear:hover{color:var(--ds-control-color-icon-hover)}.ds-select-trigger-clear-icon{display:flex;align-items:center;justify-content:center}.ds-select-trigger-small{padding:var(--ds-control-padding-small);min-height:var(--ds-control-min-height-small);line-height:var(--ds-control-line-height)}.ds-select-trigger-middle{padding:var(--ds-control-padding-middle);min-height:var(--ds-control-min-height-middle);line-height:var(--ds-control-line-height)}.ds-select-trigger-large{padding:var(--ds-control-padding-large);min-height:var(--ds-control-min-height-large);line-height:var(--ds-control-line-height)}}
@@ -1 +1 @@
1
- @layer components{:is(.ds-switch .ds-switch-inner) span.ds-switch-inner-checked,:is(.ds-switch .ds-switch-inner) span.ds-switch-inner-unchecked{display:flex;justify-items:center;align-items:center}}
1
+ @layer components{.ds-switch .ds-switch-inner span.ds-switch-inner-checked,.ds-switch .ds-switch-inner span.ds-switch-inner-unchecked{display:flex;justify-items:center;align-items:center}}
@@ -1 +1 @@
1
- @layer components{.ds-table-column-sort-icon{display:flex;flex-direction:column}.ds-table-column-sort-icon svg{color:var(--ds-color-text-disabled);font-size:1rem}:is(.ds-table-column-sort-icon svg):hover{color:var(--ds-color-text-secondary)}.ds-table-column-sort-icon.ds-table-column-sort-icon-none svg{font-size:.75rem}.ds-table-column-sort-icon.ds-table-column-sort-icon-none>svg:first-child{margin-bottom:-2px}.ds-table-column-sort-icon.ds-table-column-sort-icon-none>svg:last-child{margin-top:-2px}.ds-table-column-filter-icon{display:flex;flex-direction:column}.ds-table-column-filter-icon svg{color:var(--ds-color-text-disabled);font-size:.875rem}:is(.ds-table-column-filter-icon svg):hover{color:var(--ds-color-text-secondary)}.ds-table-column-filter-icon.ds-table-column-filter-icon-active svg{color:var(--ds-color-primary)}.ds-table-wrapper .ds-table-ping-left .ds-table-cell-fix-left-first:after,.ds-table-wrapper .ds-table-ping-left .ds-table-cell-fix-left-last:after{box-shadow:inset 10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-right .ds-table-cell-fix-right-first:after,.ds-table-wrapper .ds-table-ping-right .ds-table-cell-fix-right-last:after{box-shadow:inset -10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-right:not(.ds-table-has-fix-right) .ds-table-container:after{box-shadow:inset -10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-left:not(.ds-table-has-fix-left) .ds-table-container:before{box-shadow:inset 10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper{display:flex;flex-direction:column}.ds-table-wrapper .ds-spin-nested-loading,.ds-table-wrapper .ds-spin-container{display:flex;flex-direction:column;flex-shrink:1;flex-grow:1;min-height:0}:is(.ds-table-wrapper .ds-spin-container) .ds-table{flex-shrink:1;flex-grow:1;min-height:0}.ds-table{display:flex;flex-direction:column}.ds-table-container{flex-shrink:1;min-height:0;display:flex;flex-direction:column}.ds-table-header{flex-shrink:0}.ds-table-body{flex-shrink:1;min-height:0;min-width:0}.ds-table-zebra .ds-table{background:transparent}:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-thead>tr>th,:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-thead>tr>td{background:transparent}:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-thead>tr>th,:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-thead>tr>td,:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>tr>th,:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>tr>td{border-bottom:0}:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>.ds-table-row:nth-child(2n) .ds-table-cell{background-color:var(--ds-color-fill-tertiary)}:is(:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>.ds-table-row:nth-child(2n) .ds-table-cell):first-child{border-top-left-radius:var(--ds-border-radius);border-bottom-left-radius:var(--ds-border-radius)}:is(:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>.ds-table-row:nth-child(2n) .ds-table-cell):last-child{border-top-right-radius:var(--ds-border-radius);border-bottom-right-radius:var(--ds-border-radius)}:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>.ds-table-row:nth-child(2n)>.ds-table-cell-row-hover{background-color:var(--ds-color-fill-secondary)}:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>tr>td.ds-table-column-sort{background-color:unset}}
1
+ @layer components{.ds-table-column-sort-icon{display:flex;flex-direction:column}.ds-table-column-sort-icon svg{color:var(--ds-color-text-disabled);font-size:1rem}.ds-table-column-sort-icon svg:hover{color:var(--ds-color-text-secondary)}.ds-table-column-sort-icon.ds-table-column-sort-icon-none svg{font-size:.75rem}.ds-table-column-sort-icon.ds-table-column-sort-icon-none>svg:first-child{margin-bottom:-2px}.ds-table-column-sort-icon.ds-table-column-sort-icon-none>svg:last-child{margin-top:-2px}.ds-table-column-filter-icon{display:flex;flex-direction:column}.ds-table-column-filter-icon svg{color:var(--ds-color-text-disabled);font-size:.875rem}.ds-table-column-filter-icon svg:hover{color:var(--ds-color-text-secondary)}.ds-table-column-filter-icon.ds-table-column-filter-icon-active svg{color:var(--ds-color-primary)}.ds-table-wrapper .ds-table-ping-left .ds-table-cell-fix-left-first:after,.ds-table-wrapper .ds-table-ping-left .ds-table-cell-fix-left-last:after{box-shadow:inset 10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-right .ds-table-cell-fix-right-first:after,.ds-table-wrapper .ds-table-ping-right .ds-table-cell-fix-right-last:after{box-shadow:inset -10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-right:not(.ds-table-has-fix-right) .ds-table-container:after{box-shadow:inset -10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-left:not(.ds-table-has-fix-left) .ds-table-container:before{box-shadow:inset 10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper{display:flex;flex-direction:column}.ds-table-wrapper .ds-spin-nested-loading,.ds-table-wrapper .ds-spin-container{display:flex;flex-direction:column;flex-shrink:1;flex-grow:1;min-height:0}.ds-table-wrapper .ds-spin-container .ds-table{flex-shrink:1;flex-grow:1;min-height:0}.ds-table{display:flex;flex-direction:column}.ds-table-container{flex-shrink:1;min-height:0;display:flex;flex-direction:column}.ds-table-header{flex-shrink:0}.ds-table-body{flex-shrink:1;min-height:0;min-width:0}.ds-table-zebra .ds-table{background:transparent}.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table>.ds-table-thead>tr>th,.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table>.ds-table-thead>tr>td{background:transparent}.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table>.ds-table-thead>tr>th,.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table>.ds-table-thead>tr>td,.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table>.ds-table-tbody>tr>th,.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table>.ds-table-tbody>tr>td{border-bottom:0}.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table>.ds-table-tbody>.ds-table-row:nth-child(2n) .ds-table-cell{background-color:var(--ds-color-fill-tertiary)}.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table>.ds-table-tbody>.ds-table-row:nth-child(2n) .ds-table-cell:first-child{border-top-left-radius:var(--ds-border-radius);border-bottom-left-radius:var(--ds-border-radius)}.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table>.ds-table-tbody>.ds-table-row:nth-child(2n) .ds-table-cell:last-child{border-top-right-radius:var(--ds-border-radius);border-bottom-right-radius:var(--ds-border-radius)}.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table>.ds-table-tbody>.ds-table-row:nth-child(2n)>.ds-table-cell-row-hover{background-color:var(--ds-color-fill-secondary)}.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table>.ds-table-tbody>tr>td.ds-table-column-sort{background-color:unset}}
@@ -1 +1 @@
1
- {"version":3,"file":"component.js","sources":["../../../src/components/theme-provider/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n default as ConfigProvider,\n type ConfigProviderProps,\n} from \"antd/es/config-provider\";\nimport { Children, cloneElement, isValidElement, useLayoutEffect } from \"react\";\nimport { darkTheme, lightTheme } from \"../../tokens/and-theme/tokens\";\nimport { useCls, clsx, useAntdCssVarClassname } from \"../utils\";\nimport { StyleProvider } from \"@ant-design/cssinjs\";\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface ThemeProviderProps\n extends Omit<ConfigProviderProps, \"theme\" | \"prefixCls\"> {\n theme: \"light\" | \"dark\";\n appendClassesTo?: string | HTMLElement;\n}\n\nconst DSWrapper = ({\n children,\n theme,\n appendClassesTo,\n}: {\n children: React.ReactNode;\n theme: \"light\" | \"dark\";\n appendClassesTo?: string | HTMLElement;\n}) => {\n const cls = useCls();\n const cssVars = useAntdCssVarClassname();\n const className = clsx(cls(\"theme-provider\"), theme.toString(), cssVars);\n useLayoutEffect(() => {\n const classes = className.split(\" \");\n const el =\n typeof appendClassesTo === \"string\"\n ? document.querySelector(appendClassesTo)\n : appendClassesTo;\n if (el) {\n el.classList.add(...classes);\n }\n return () => {\n if (el) {\n el.classList.remove(...classes);\n }\n };\n }, [appendClassesTo, className]);\n return appendClassesTo === undefined\n ? Children.map(children, (child) => {\n if (isValidElement(child))\n return cloneElement(child, {\n className: clsx(\n (child.props as { className?: string }).className,\n className\n ),\n } as { className: string });\n return child;\n })\n : children;\n};\n\nexport const ThemeProvider = ({\n theme,\n appendClassesTo,\n children,\n}: ThemeProviderProps) => {\n return (\n <StyleProvider layer>\n <ConfigProvider\n theme={theme == \"light\" ? lightTheme : darkTheme}\n prefixCls=\"ds\"\n >\n <DSWrapper theme={theme} appendClassesTo={appendClassesTo}>\n {children}\n </DSWrapper>\n </ConfigProvider>\n </StyleProvider>\n );\n};\n"],"names":["DSWrapper","children","theme","appendClassesTo","cls","useCls","cssVars","useAntdCssVarClassname","className","clsx","useLayoutEffect","classes","el","Children","child","isValidElement","cloneElement","ThemeProvider","jsx","StyleProvider","ConfigProvider","lightTheme","darkTheme"],"mappings":";;;;;;;;;AAkBA,MAAMA,IAAY,CAAC;AAAA,EACjB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAC;AACF,MAIM;AACJ,QAAMC,IAAMC,EAAO,GACbC,IAAUC,EAAuB,GACjCC,IAAYC,EAAKL,EAAI,gBAAgB,GAAGF,EAAM,YAAYI,CAAO;AACvE,SAAAI,EAAgB,MAAM;AACd,UAAAC,IAAUH,EAAU,MAAM,GAAG,GAC7BI,IACJ,OAAOT,KAAoB,WACvB,SAAS,cAAcA,CAAe,IACtCA;AACN,WAAIS,KACCA,EAAA,UAAU,IAAI,GAAGD,CAAO,GAEtB,MAAM;AACX,MAAIC,KACCA,EAAA,UAAU,OAAO,GAAGD,CAAO;AAAA,IAElC;AAAA,EAAA,GACC,CAACR,GAAiBK,CAAS,CAAC,GACxBL,MAAoB,SACvBU,EAAS,IAAIZ,GAAU,CAACa,MAClBC,EAAeD,CAAK,IACfE,EAAaF,GAAO;AAAA,IACzB,WAAWL;AAAA,MACRK,EAAM,MAAiC;AAAA,MACxCN;AAAA,IAAA;AAAA,EACF,CACwB,IACrBM,CACR,IACDb;AACN,GAEagB,IAAgB,CAAC;AAAA,EAC5B,OAAAf;AAAA,EACA,iBAAAC;AAAA,EACA,UAAAF;AACF,MAEI,gBAAAiB,EAACC,GAAc,EAAA,OAAK,IAClB,UAAA,gBAAAD;AAAA,EAACE;AAAA,EAAA;AAAA,IACC,OAAOlB,KAAS,UAAUmB,IAAaC;AAAA,IACvC,WAAU;AAAA,IAEV,UAAC,gBAAAJ,EAAAlB,GAAA,EAAU,OAAAE,GAAc,iBAAAC,GACtB,UAAAF,EACH,CAAA;AAAA,EAAA;AAAA,GAEJ;"}
1
+ {"version":3,"file":"component.js","sources":["../../../src/components/theme-provider/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n default as ConfigProvider,\n type ConfigProviderProps,\n} from \"antd/es/config-provider\";\nimport { Children, cloneElement, isValidElement, useLayoutEffect } from \"react\";\nimport { darkTheme, lightTheme } from \"../../tokens/and-theme/tokens\";\nimport { useCls, clsx, useAntdCssVarClassname } from \"../utils\";\nimport { StyleProvider } from \"@ant-design/cssinjs\";\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface ThemeProviderProps\n extends Omit<ConfigProviderProps, \"theme\" | \"prefixCls\"> {\n theme: \"light\" | \"dark\";\n appendClassesTo?: string | HTMLElement;\n}\n\nconst DSWrapper = ({\n children,\n theme,\n appendClassesTo,\n}: {\n children: React.ReactNode;\n theme: \"light\" | \"dark\";\n appendClassesTo?: string | HTMLElement;\n}) => {\n const cls = useCls();\n const cssVars = useAntdCssVarClassname();\n const className = clsx(cls(\"theme-provider\"), theme.toString(), cssVars);\n useLayoutEffect(() => {\n const classes = className.split(\" \");\n const el =\n typeof appendClassesTo === \"string\"\n ? document.querySelector(appendClassesTo)\n : appendClassesTo;\n if (el) {\n el.classList.add(...classes);\n }\n return () => {\n if (el) {\n el.classList.remove(...classes);\n }\n };\n }, [appendClassesTo, className]);\n return appendClassesTo === undefined\n ? Children.map(children, (child) => {\n if (isValidElement(child))\n return cloneElement(child, {\n className: clsx(\n (child.props as { className?: string }).className,\n className,\n ),\n } as { className: string });\n return child;\n })\n : children;\n};\n\nexport const ThemeProvider = ({\n theme,\n appendClassesTo,\n children,\n}: ThemeProviderProps) => {\n return (\n <StyleProvider layer>\n <ConfigProvider\n theme={theme == \"light\" ? lightTheme : darkTheme}\n prefixCls=\"ds\"\n >\n <DSWrapper theme={theme} appendClassesTo={appendClassesTo}>\n {children}\n </DSWrapper>\n </ConfigProvider>\n </StyleProvider>\n );\n};\n"],"names":["DSWrapper","children","theme","appendClassesTo","cls","useCls","cssVars","useAntdCssVarClassname","className","clsx","useLayoutEffect","classes","el","Children","child","isValidElement","cloneElement","ThemeProvider","jsx","StyleProvider","ConfigProvider","lightTheme","darkTheme"],"mappings":";;;;;;;;;AAkBA,MAAMA,IAAY,CAAC;AAAA,EACjB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAC;AACF,MAIM;AACJ,QAAMC,IAAMC,EAAO,GACbC,IAAUC,EAAuB,GACjCC,IAAYC,EAAKL,EAAI,gBAAgB,GAAGF,EAAM,YAAYI,CAAO;AACvE,SAAAI,EAAgB,MAAM;AACd,UAAAC,IAAUH,EAAU,MAAM,GAAG,GAC7BI,IACJ,OAAOT,KAAoB,WACvB,SAAS,cAAcA,CAAe,IACtCA;AACN,WAAIS,KACCA,EAAA,UAAU,IAAI,GAAGD,CAAO,GAEtB,MAAM;AACX,MAAIC,KACCA,EAAA,UAAU,OAAO,GAAGD,CAAO;AAAA,IAElC;AAAA,EAAA,GACC,CAACR,GAAiBK,CAAS,CAAC,GACxBL,MAAoB,SACvBU,EAAS,IAAIZ,GAAU,CAACa,MAClBC,EAAeD,CAAK,IACfE,EAAaF,GAAO;AAAA,IACzB,WAAWL;AAAA,MACRK,EAAM,MAAiC;AAAA,MACxCN;AAAA,IAAA;AAAA,EACF,CACwB,IACrBM,CACR,IACDb;AACN,GAEagB,IAAgB,CAAC;AAAA,EAC5B,OAAAf;AAAA,EACA,iBAAAC;AAAA,EACA,UAAAF;AACF,MAEI,gBAAAiB,EAACC,GAAc,EAAA,OAAK,IAClB,UAAA,gBAAAD;AAAA,EAACE;AAAA,EAAA;AAAA,IACC,OAAOlB,KAAS,UAAUmB,IAAaC;AAAA,IACvC,WAAU;AAAA,IAEV,UAAC,gBAAAJ,EAAAlB,GAAA,EAAU,OAAAE,GAAc,iBAAAC,GACtB,UAAAF,EACH,CAAA;AAAA,EAAA;AAAA,GAEJ;"}
@@ -1 +1 @@
1
- @layer components{@keyframes ds-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ds-theme-provider{--ds-modal-padding: 24px;--ds-modal-edge-padding: 16px;--ds-popup-panel-padding: 16px;--ds-scrollbar-width: auto;--ds-scrollbar-width-legacy: 15;--ds-box-shadow-popover-arrow: 0px 0px 1px 0px var(--ds-modal-color-border), 2px 2px 5px rgba(0, 0, 0, .05);--ds-input-color-border-active: var(--ds-color-primary);--ds-input-shadow-active: 0 0 0 2px color-mix(in oklab, var(--ds-color-primary) 20%, transparent);--ds-form-label-required-mark-color: var(--ds-color-error);--ds-input-shadow-error-active: 0 0 0 2px color-mix(in oklab, var(--ds-color-error) 20%, transparent);--ds-input-shadow-warning-active: 0 0 0 2px color-mix(in oklab, var(--ds-color-warning) 20%, transparent);--ds-inter: "Inter", Helvetica, Arial, sans-serif;--ds-roboto-mono: "Roboto Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--ds-animate-spin: ds-spin 1s linear infinite}@supports (font-variation-settings: normal){.ds-theme-provider{--ds-inter: "InterVariable", Inter, Helvetica, Arial, sans-serif;--ds-roboto-mono: "Roboto Mono Variable", Roboto Mono, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-optical-sizing:auto}}.ds-theme-provider{--ds-segment-color-bg-active: #ffffff;--ds-scrollbar-color-thumb: rgba(0, 0, 0, .2);--ds-scrollbar-color-track: rgba(0, 0, 0, 0);--ds-color-base-solid: #000000;--ds-color-table-fixed-column-shadow: rgb(0 0 0 / 10%);--ds-modal-color-border: rgba(0, 0, 0, .24)}.ds-theme-provider.dark{--ds-modal-color-border: rgba(255, 255, 255, .55);--ds-segment-color-bg-active: #424248;--ds-scrollbar-color-thumb: rgba(255, 255, 255, .2);--ds-scrollbar-color-track: rgba(0, 0, 0, 0);--ds-color-base-solid: #ffffff;--ds-color-table-fixed-column-shadow: rgb(0 0 0 / 20%)}}
1
+ @layer components{@keyframes ds-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ds-theme-provider{--ds-modal-padding: 24px;--ds-modal-edge-padding: 16px;--ds-popup-panel-padding: 16px;--ds-scrollbar-width: auto;--ds-scrollbar-width-legacy: 15;--ds-box-shadow-popover-arrow: 0px 0px 1px 0px var(--ds-modal-color-border), 2px 2px 5px rgba(0, 0, 0, .05);--ds-control-border-radius: 6px;--ds-control-transition: all .2s;--ds-control-padding-small: 1px 8px;--ds-control-padding-middle: 5px 12px;--ds-control-padding-large: 9px 12px;--ds-control-min-height-small: 24px;--ds-control-min-height-middle: 32px;--ds-control-min-height-large: 40px;--ds-control-line-height: 20px;--ds-control-color-border-hover: var(--ds-color-primary-hover);--ds-control-color-border-focus: var(--ds-color-primary);--ds-control-color-bg-disabled: var(--ds-color-bg-container-disabled);--ds-control-color-text-disabled: var(--ds-color-text-disabled);--ds-control-icon-size: 12px;--ds-control-color-bg: var(--ds-color-bg-container);--ds-control-color-border: var(--ds-color-border);--ds-control-color-border-active: var(--ds-color-primary);--ds-control-color-border-error-active: var(--ds-color-error);--ds-control-color-border-warning-active: var(--ds-color-warning);--ds-control-color-icon: var(--ds-color-text-quaternary);--ds-control-color-icon-hover: var(--ds-color-icon-hover);--ds-control-border: 1px solid var(--ds-control-color-border);--ds-control-border-active: 1px solid var(--ds-control-color-border-active);--ds-control-border-error-active: 1px solid var(--ds-control-color-border-error-active);--ds-control-border-warning-active: 1px solid var(--ds-control-color-border-warning-active);--ds-control-shadow-active: 0 0 0 2px color-mix(in oklab, var(--ds-color-primary) 20%, transparent);--ds-form-label-required-mark-color: var(--ds-color-error);--ds-control-shadow-error-active: 0 0 0 2px color-mix(in oklab, var(--ds-color-error) 20%, transparent);--ds-control-shadow-warning-active: 0 0 0 2px color-mix(in oklab, var(--ds-color-warning) 20%, transparent);--ds-control-color-text-placeholder: var(--ds-color-text-placeholder);--ds-inter: "Inter", Helvetica, Arial, sans-serif;--ds-roboto-mono: "Roboto Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--ds-animate-spin: ds-spin 1s linear infinite;--ds-segment-color-bg-active: #ffffff;--ds-scrollbar-color-thumb: rgba(0, 0, 0, .2);--ds-scrollbar-color-track: rgba(0, 0, 0, 0);--ds-color-base-solid: #000000;--ds-color-table-fixed-column-shadow: rgb(0 0 0 / 10%);--ds-modal-color-border: rgba(0, 0, 0, .24)}@supports (font-variation-settings: normal){.ds-theme-provider{--ds-inter: "InterVariable", Inter, Helvetica, Arial, sans-serif;--ds-roboto-mono: "Roboto Mono Variable", Roboto Mono, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-optical-sizing:auto}}.ds-theme-provider.dark{--ds-modal-color-border: rgba(255, 255, 255, .55);--ds-segment-color-bg-active: #424248;--ds-scrollbar-color-thumb: rgba(255, 255, 255, .2);--ds-scrollbar-color-track: rgba(0, 0, 0, 0);--ds-color-base-solid: #ffffff;--ds-color-table-fixed-column-shadow: rgb(0 0 0 / 20%)}}
@@ -1 +1 @@
1
- @layer components{.ds-tour .ds-tour-header{padding-top:1rem;padding-bottom:.75rem}.ds-tour .ds-tour-title{font-size:var(--text-ds-h5);font-weight:var(--text-ds-h5--font-weight);line-height:var(--text-ds-h5--line-height)}.ds-tour .ds-tour-description{font-size:var(--text-ds-md);font-weight:var(--text-ds-md--font-weight);line-height:var(--text-ds-md--line-height)}:is(:is(.ds-tour .ds-tour-description) p,:is(.ds-tour .ds-tour-description) ul,:is(.ds-tour .ds-tour-description) ol):not(:first-child){margin-top:.875rem}:is(.ds-tour .ds-tour-description) strong{font-weight:600}:is(.ds-tour .ds-tour-description) ul{list-style:disc;padding-left:1rem}:is(.ds-tour .ds-tour-description) ol{list-style:decimal;padding-left:1rem}:is(.ds-tour .ds-tour-description) li{padding-left:.5rem}:is(.ds-tour .ds-tour-description) li:not(:first-child){margin-top:.5rem}:is(.ds-tour .ds-tour-description) li svg{display:inline-block;font-size:1.25rem;margin-bottom:-.25rem}.ds-tour .ds-tour-footer{padding-top:1rem}.ds-tour .ds-tour-indicator-wrapper{display:inline-flex;align-items:center;width:100%;height:100%;gap:.5rem}.ds-tour .ds-tour-indicator-summary-text{font-size:var(--text-ds-sm);font-weight:var(--text-ds-sm--font-weight);line-height:var(--text-ds-sm--line-height);color:var(--ds-color-text-tertiary);display:inline-flex;align-items:center;padding-top:.25rem}}
1
+ @layer components{.ds-tour .ds-tour-header{padding-top:1rem;padding-bottom:.75rem}.ds-tour .ds-tour-title{font-size:var(--text-ds-h5);font-weight:var(--text-ds-h5--font-weight);line-height:var(--text-ds-h5--line-height)}.ds-tour .ds-tour-description{font-size:var(--text-ds-md);font-weight:var(--text-ds-md--font-weight);line-height:var(--text-ds-md--line-height)}.ds-tour .ds-tour-description p:not(:first-child),.ds-tour .ds-tour-description ul:not(:first-child),.ds-tour .ds-tour-description ol:not(:first-child){margin-top:.875rem}.ds-tour .ds-tour-description strong{font-weight:600}.ds-tour .ds-tour-description ul{list-style:disc;padding-left:1rem}.ds-tour .ds-tour-description ol{list-style:decimal;padding-left:1rem}.ds-tour .ds-tour-description li{padding-left:.5rem}.ds-tour .ds-tour-description li:not(:first-child){margin-top:.5rem}.ds-tour .ds-tour-description li svg{display:inline-block;font-size:1.25rem;margin-bottom:-.25rem}.ds-tour .ds-tour-footer{padding-top:1rem}.ds-tour .ds-tour-indicator-wrapper{display:inline-flex;align-items:center;width:100%;height:100%;gap:.5rem}.ds-tour .ds-tour-indicator-summary-text{font-size:var(--text-ds-sm);font-weight:var(--text-ds-sm--font-weight);line-height:var(--text-ds-sm--line-height);color:var(--ds-color-text-tertiary);display:inline-flex;align-items:center;padding-top:.25rem}}
@@ -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\", 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;"}
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 | number | symbol, unknown> = Record<\n string,\n unknown\n >\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":";;;AAgBA,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;"}