@xyd-js/ui 0.1.0-xyd.10 → 0.1.0-xyd.12

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/index.css CHANGED
@@ -20,16 +20,16 @@
20
20
  .i1801o7t svg{fill:#6e6e80;font-size:18px;width:18px;height:18px;}
21
21
  .hs1gieu{color:#6e6e80;font-size:14px;}
22
22
  .l1s9ffav{display:flex;width:100%;padding:2px;font-weight:500;}
23
- .l1041tva{background:#fff;color:#7051d4;border-radius:4px;}
24
- .l1hsy03l{background:unset;color:#111827;font-weight:500;}
25
- .lz6cy9y{display:flex;width:100%;padding:4px 8px;}
26
- .lz6cy9y:hover{background:#ececf1;color:#111827;border-radius:4px;}
27
- .hnhdi2c{margin-left:8px;}
28
- .hj0z21i{padding-left:10px;margin-bottom:6px;margin-top:16px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:1px;color:#111827;}
23
+ .l1041tva{background:#fff;color:#111827;border-radius:4px;position:relative;}
24
+ .l1041tva::before{background:#7051d4;border-radius:0 2px 2px 0;bottom:7px;content:"";left:1px;position:absolute;top:7px;width:4px;border-radius:10px;}
25
+ .l1hsy03l{color:#111827;font-weight:600;background:transparent;}
26
+ .lz6cy9y{background:unset;color:#111827;font-weight:500;}
27
+ .lnhdi2c{display:flex;width:100%;padding:8px 12px;position:relative;font-size:15px;}
28
+ .lnhdi2c:hover{background:#ececf1;color:#111827;border-radius:4px;}
29
+ .hj0z21i{margin-left:12px;}
30
+ .h12ipj9g{padding-left:12px;margin-bottom:8px;margin-top:24px;font-size:13px;line-height:16px;font-weight:600;letter-spacing:0.5px;color:#111827;text-transform:uppercase;}
29
31
 
30
- .c12fwmxc{transform:translateZ(0);overflow:hidden;transition:all 300ms ease-in-out;}
31
- .bfe0v98{opacity:0;transition:opacity 500ms ease-in-out;}
32
- .oza7km2{opacity:1;}
32
+ .c12fwmxc{transform:translateZ(0);overflow:hidden;transition:width 300ms cubic-bezier(0.4, 0, 0.2, 1),height 300ms cubic-bezier(0.4, 0, 0.2, 1);will-change:width,height;}@media (prefers-reduced-motion: reduce){.c12fwmxc{transition:none;}}.bfe0v98{opacity:0;transition:opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);will-change:opacity;}@media (prefers-reduced-motion: reduce){.bfe0v98{transition:none;}}.oza7km2{opacity:1;}
33
33
 
34
34
  .h4ah3ok{align-items:center;background-color:#f6f6f7;border-radius:0.50rem;display:flex;flex-direction:row;width:100%;height:44px;margin-top:3px;padding:0 0.25rem;}
35
35
  .p1ncaln9{color:#44474a;font-size:12px;font-weight:600;padding-left:0.50rem;padding-right:1.50rem;position:relative;text-transform:uppercase;}
package/dist/index.d.ts CHANGED
@@ -27,7 +27,7 @@ interface UISidebarProps {
27
27
  }
28
28
  declare function UISidebar({ children, footerItems }: UISidebarProps): React.JSX.Element;
29
29
  declare namespace UISidebar {
30
- var Item: ({ children, button, href, active, activeTheme, onClick }: UISidebarItemProps) => React.JSX.Element;
30
+ var Item: ({ children, button, href, active, activeTheme, isParentActive, onClick }: UISidebarItemProps) => React.JSX.Element;
31
31
  var ItemHeader: ({ children }: UISidebarItemHeaderProps) => React.JSX.Element;
32
32
  var SubTree: ({ children, isOpen }: UISidebarSubTreeProps) => React.JSX.Element;
33
33
  var FooterItem: ({ children, href, icon }: SidebarFooterItemProps) => React.JSX.Element;
@@ -38,6 +38,7 @@ interface UISidebarItemProps {
38
38
  href?: string;
39
39
  active?: boolean;
40
40
  activeTheme?: "secondary";
41
+ isParentActive?: boolean;
41
42
  onClick?: (v: any) => void;
42
43
  }
43
44
  interface UISidebarItemHeaderProps {
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import e,{useRef as t,useEffect as n,useState as r,useContext as a}from"react";import*as c from"@radix-ui/react-tabs";var l="h1vu90xp",o="s1i2i14o",i="n1oemxra",s="ny6xn1c",u="hj2rxb1",m="hcz0c13",f="t1lsj05a",h="t138ur9z",d="hso30gp";function v(t){var n=t.children,r=t.value,a=t.onChange,m=t.logo,f=t.kind;return e.createElement(c.Root,{asChild:!0,value:r,onValueChange:a},e.createElement("div",{className:"".concat(l)},e.createElement("div",{className:o}),e.createElement("nav",{className:"\n ".concat(i,"\n ").concat("middle"===f&&s,"\n ")},e.createElement("div",{className:"\n ".concat(d,"\n xyd_ui-comp-nav-logo\n ")},m),e.createElement(c.List,{asChild:!0},e.createElement("div",{className:u},n)),"middle"===f&&e.createElement("div",null))))}function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function y(e){if(Array.isArray(e))return e}function E(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function g(e,t){return y(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,c,l,o=[],i=!0,s=!1;try{if(c=(n=n.call(e)).next,0===t);else for(;!(i=(r=c.call(n)).done)&&(o.push(r.value),o.length!==t);i=!0);}catch(e){s=!0,a=e}finally{try{if(!i&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(s)throw a}}return o}}(e,t)||b(e,t)||E()}function N(e){return y(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||b(e)||E()}function b(e,t){if(e){if("string"==typeof e)return p(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?p(e,t):void 0}}v.Item=function(t){var n=t.children,r=t.value,a=t.href;return e.createElement(c.Trigger,{asChild:!0,value:r},e.createElement("a",{href:a,className:"".concat(m)},e.createElement("span",{className:f},n),e.createElement("span",{className:h},n)))},"function"==typeof SuppressedError&&SuppressedError;var x="hptag3l",w="uead4fo",C="h1hrlfak",O="i1btwdcv",S="i1801o7t",I="hs1gieu",j="l1s9ffav",k="l1041tva",T="l1hsy03l",A="lz6cy9y",H="hnhdi2c",q="hj0z21i",z="c12fwmxc",P="bfe0v98",V="oza7km2";function W(r){var a=r.children,c=r.isOpen,l=r.horizontal,o=void 0!==l&&l,i=t(null),s=t(null),u=t(null),m=t(c),f=t(!0);return n((function(){var e=i.current,t=s.current;if(u.current&&clearTimeout(u.current),!f.current&&e&&t)if(c)o?(t.style.width="".concat(t.scrollWidth,"px"),e.style.width="".concat(t.scrollWidth,"px")):(t.style.height="".concat(t.scrollHeight,"px"),e.style.height="".concat(t.scrollHeight,"px")),u.current=window.setTimeout((function(){e.style.removeProperty(o?"width":"height")}),300);else if(o){var n=e.scrollWidth;e.style.width="".concat(n,"px"),e.offsetWidth,e.style.width="0px"}else{var r=e.scrollHeight;e.style.height="".concat(r,"px"),e.offsetHeight,e.style.height="0px"}}),[o,c]),n((function(){f.current=!1}),[]),e.createElement("div",{ref:i,className:"".concat(z),style:m.current||o?void 0:{height:0}},e.createElement("div",{ref:s,className:"".concat(P," ").concat(c?V:"")},a))}function L(t){var n=t.children,r=t.footerItems;return e.createElement("div",{className:"\n ".concat(x,"\n xyd_ui-comp-sidebar\n ")},e.createElement("ul",{className:w},n),r&&e.createElement(M,null,r))}function R(t){var n=t.children,r=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n}(t,["children"]);return e.createElement("a",Object.assign({},r),n)}function M(t){var n=t.children;return e.createElement("div",{className:C},e.createElement("ul",null,n))}L.Item=function(t){var n=t.children,r=t.button,a=t.href,c=t.active,l=t.activeTheme,o=t.onClick,i=N(e.Children.toArray(n)),s=i[0],u=i.slice(1),m=r?"button":R;return e.createElement("li",{className:I},e.createElement(m,{href:r?void 0:a,onClick:r?o:void 0,className:"\n ".concat(j,"\n ")},e.createElement("div",{className:"\n ".concat(A,"\n ").concat(c&&k,"\n ").concat(c&&"secondary"===l&&T,"\n ")},s)),u)},L.ItemHeader=function(t){var n=t.children;return e.createElement("li",{className:q},n)},L.SubTree=function(t){var n=t.children,r=t.isOpen;return e.createElement("ul",{className:H},e.createElement(W,{isOpen:r||!1},n))},L.FooterItem=function(t){var n=t.children,r=t.href,a=t.icon;return e.createElement("li",{className:O},e.createElement("a",{className:S,href:r},a,n))};var _="h4ah3ok",B="p1ncaln9",D="u3wpqhn",F="lc3ej8u",U="l1taqsnk";function $(t){var n=t.children,r=t.title,a=t.value,l=t.onChange;return e.createElement(c.Root,{asChild:!0,value:a,onValueChange:l},e.createElement("nav",{className:_},e.createElement("div",{className:B},r),e.createElement(c.List,{asChild:!0},e.createElement("ul",{className:D},n))))}$.Item=function(t){var n=t.children,r=t.value,a=t.href;return e.createElement(c.Trigger,{asChild:!0,value:r},e.createElement("li",{className:F},e.createElement("a",{href:a,className:"".concat(U)},n)))};var G="h19g75q2",J="ueg7kxf",K="lagigsw",Q="lylqcp3",X="l16swvpi",Y="ht0m6aa",Z="sfp1vxs",ee=e.createContext({value:"",onChange:function(e){}});function te(t){var a=t.children,c=t.defaultValue,l=g(r(0),2),o=l[0],i=l[1],s=g(r(0),2),u=s[0],m=s[1],f=g(r(c||""),2),h=f[0],d=f[1];return n((function(){var e=new IntersectionObserver((function(e){var t=!1;e.forEach((function(e){if(!t&&e.isIntersecting&&e.target instanceof HTMLHeadingElement){var n=e.target.getBoundingClientRect();n.top>=0&&n.bottom<=window.innerHeight&&(t=!0,d(e.target.innerText))}}))}),{threshold:.3});return document.querySelectorAll("h2").forEach((function(t){t&&e.observe(t)})),function(){e.disconnect()}}),[]),n((function(){!function(){var e=document.querySelector(".".concat(X));if(e){var t=e.offsetHeight;if(i(t),null==e?void 0:e.parentElement){var n=e.parentElement.offsetTop;m(n)}}}()}),[h]),e.createElement(ee.Provider,{value:{value:h,onChange:function(e){d(e)}}},e.createElement("div",{className:G},e.createElement("div",{className:Y},e.createElement("div",{style:{"--active-track-height":"".concat(o,"px"),"--active-track-top":"".concat(u,"px")},className:Z})),e.createElement("ul",{className:J},a)))}te.Item=function(t){var n=t.children,r=t.value,c=void 0===r?"#":r,l=a(ee),o=l.value,i=l.onChange,s="#"+c,u=o===c;return e.createElement("li",{className:K},e.createElement("a",{className:"".concat(Q," ").concat(u&&X),href:s,onClick:function(e){e.preventDefault(),i(c);var t=!1;document.querySelectorAll("h2").forEach((function(e){t||e.innerText===c&&(t=!0,e.scrollIntoView())}))}},n))};export{v as Nav,$ as SubNav,te as Toc,L as UISidebar};
1
+ import e,{useRef as t,useEffect as n,useState as r,useContext as a}from"react";import*as c from"@radix-ui/react-tabs";var l="h1vu90xp",o="s1i2i14o",i="n1oemxra",s="ny6xn1c",u="hj2rxb1",m="hcz0c13",f="t1lsj05a",h="t138ur9z",v="hso30gp";function d(t){var n=t.children,r=t.value,a=t.onChange,m=t.logo,f=t.kind;return e.createElement(c.Root,{asChild:!0,value:r,onValueChange:a},e.createElement("div",{className:"".concat(l)},e.createElement("div",{className:o}),e.createElement("nav",{className:"\n ".concat(i,"\n ").concat("middle"===f&&s,"\n ")},e.createElement("div",{className:"\n ".concat(v,"\n xyd_ui-comp-nav-logo\n ")},m),e.createElement(c.List,{asChild:!0},e.createElement("div",{className:u},n)),"middle"===f&&e.createElement("div",null))))}function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function y(e){if(Array.isArray(e))return e}function g(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function E(e,t){return y(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,c,l,o=[],i=!0,s=!1;try{if(c=(n=n.call(e)).next,0===t);else for(;!(i=(r=c.call(n)).done)&&(o.push(r.value),o.length!==t);i=!0);}catch(e){s=!0,a=e}finally{try{if(!i&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(s)throw a}}return o}}(e,t)||N(e,t)||g()}function b(e){return y(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||N(e)||g()}function N(e,t){if(e){if("string"==typeof e)return p(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?p(e,t):void 0}}d.Item=function(t){var n=t.children,r=t.value,a=t.href;return e.createElement(c.Trigger,{asChild:!0,value:r},e.createElement("a",{href:a,className:"".concat(m)},e.createElement("span",{className:f},n),e.createElement("span",{className:h},n)))},"function"==typeof SuppressedError&&SuppressedError;var w="hptag3l",x="uead4fo",C="h1hrlfak",O="i1btwdcv",S="i1801o7t",I="hs1gieu",j="l1s9ffav",T="l1041tva",A="l1hsy03l",k="lz6cy9y",H="lnhdi2c",q="hj0z21i",P="h12ipj9g",z="c12fwmxc",L="bfe0v98",M="oza7km2";function V(r){var a=r.children,c=r.isOpen,l=r.horizontal,o=void 0!==l&&l,i=t(null),s=t(null),u=t(null),m=t(c),f=t(!0),h=t(null),v=function(){var e=i.current,t=s.current;if(e&&t){var n=t.querySelectorAll('[class*="collapse"]'),r=[];if(n.forEach((function(e){e instanceof HTMLElement&&(r.push({element:e,height:e.style.height,overflow:e.style.overflow}),e.style.height="auto",e.style.overflow="visible")})),o){var a=t.scrollWidth;e.style.width="".concat(a,"px"),t.style.width="".concat(a,"px")}else{var c=t.scrollHeight;e.style.height="".concat(c,"px"),t.style.height="".concat(c,"px")}r.forEach((function(e){var t=e.element,n=e.height,r=e.overflow;t.style.height=n,t.style.overflow=r}))}};return n((function(){var e=i.current,t=s.current;if(u.current&&clearTimeout(u.current),!f.current&&e&&t){if(h.current&&h.current.disconnect(),c)v(),h.current=new MutationObserver((function(e){e.some((function(e){var t;return"childList"===e.type||"attributes"===e.type||"characterData"===e.type&&(null===(t=e.target.parentElement)||void 0===t?void 0:t.closest('[class*="collapse"]'))}))&&v()})),h.current.observe(t,{childList:!0,subtree:!0,characterData:!0,attributes:!0}),u.current=window.setTimeout((function(){e.style.removeProperty(o?"width":"height"),t.style.removeProperty(o?"width":"height"),h.current&&h.current.disconnect()}),300);else if(o){var n=e.scrollWidth;e.style.width="".concat(n,"px"),e.offsetWidth,e.style.width="0px"}else{var r=e.scrollHeight;e.style.height="".concat(r,"px"),e.offsetHeight,e.style.height="0px"}return function(){h.current&&h.current.disconnect(),u.current&&clearTimeout(u.current)}}}),[o,c]),n((function(){f.current=!1}),[]),e.createElement("div",{ref:i,className:"".concat(z),style:m.current||o?void 0:{height:0}},e.createElement("div",{ref:s,className:"".concat(L," ").concat(c?M:"")},a))}function D(t){var n=t.children,r=t.footerItems;return e.createElement("div",{className:"\n ".concat(w,"\n xyd_ui-comp-sidebar\n ")},e.createElement("ul",{className:x},n),r&&e.createElement(W,null,r))}function R(t){var n=t.children,r=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n}(t,["children"]);return e.createElement("a",Object.assign({},r),n)}function W(t){var n=t.children;return e.createElement("div",{className:C},e.createElement("ul",null,n))}D.Item=function(t){var n=t.children,r=t.button,a=t.href,c=t.active,l=t.activeTheme,o=t.isParentActive,i=t.onClick,s=b(e.Children.toArray(n)),u=s[0],m=s.slice(1),f=r?"button":R;return e.createElement("li",{className:I},e.createElement(f,{href:r?void 0:a,onClick:r?i:void 0,className:"\n ".concat(j,"\n ")},e.createElement("div",{className:"\n ".concat(H,"\n ").concat(c&&T,"\n ").concat(o&&A,"\n ").concat(c&&"secondary"===l&&k,"\n ")},u)),m)},D.ItemHeader=function(t){var n=t.children;return e.createElement("li",{className:P},n)},D.SubTree=function(t){var n=t.children,r=t.isOpen;return e.createElement("ul",{className:q},e.createElement(V,{isOpen:r||!1},n))},D.FooterItem=function(t){var n=t.children,r=t.href,a=t.icon;return e.createElement("li",{className:O},e.createElement("a",{className:S,href:r},a,n))};var _="h4ah3ok",B="p1ncaln9",F="u3wpqhn",U="lc3ej8u",$="l1taqsnk";function G(t){var n=t.children,r=t.title,a=t.value,l=t.onChange;return e.createElement(c.Root,{asChild:!0,value:a,onValueChange:l},e.createElement("nav",{className:_},e.createElement("div",{className:B},r),e.createElement(c.List,{asChild:!0},e.createElement("ul",{className:F},n))))}G.Item=function(t){var n=t.children,r=t.value,a=t.href;return e.createElement(c.Trigger,{asChild:!0,value:r},e.createElement("li",{className:U},e.createElement("a",{href:a,className:"".concat($)},n)))};var J="h19g75q2",K="ueg7kxf",Q="lagigsw",X="lylqcp3",Y="l16swvpi",Z="ht0m6aa",ee="sfp1vxs",te=e.createContext({value:"",onChange:function(e){}});function ne(t){var a=t.children,c=t.defaultValue,l=E(r(0),2),o=l[0],i=l[1],s=E(r(0),2),u=s[0],m=s[1],f=E(r(c||""),2),h=f[0],v=f[1];return n((function(){var e=new IntersectionObserver((function(e){var t=!1;e.forEach((function(e){if(!t&&e.isIntersecting&&e.target instanceof HTMLHeadingElement){var n=e.target.getBoundingClientRect();n.top>=0&&n.bottom<=window.innerHeight&&(t=!0,v(e.target.innerText))}}))}),{threshold:.3});return document.querySelectorAll("h2").forEach((function(t){t&&e.observe(t)})),function(){e.disconnect()}}),[]),n((function(){!function(){var e=document.querySelector(".".concat(Y));if(e){var t=e.offsetHeight;if(i(t),null==e?void 0:e.parentElement){var n=e.parentElement.offsetTop;m(n)}}}()}),[h]),e.createElement(te.Provider,{value:{value:h,onChange:function(e){v(e)}}},e.createElement("div",{className:J},e.createElement("div",{className:Z},e.createElement("div",{style:{"--active-track-height":"".concat(o,"px"),"--active-track-top":"".concat(u,"px")},className:ee})),e.createElement("ul",{className:K},a)))}ne.Item=function(t){var n=t.children,r=t.value,c=void 0===r?"#":r,l=a(te),o=l.value,i=l.onChange,s="#"+c,u=o===c;return e.createElement("li",{className:Q},e.createElement("a",{className:"".concat(X," ").concat(u&&Y),href:s,onClick:function(e){e.preventDefault(),i(c);var t=!1;document.querySelectorAll("h2").forEach((function(e){t||e.innerText===c&&(t=!0,e.scrollIntoView())}))}},n))};export{d as Nav,G as SubNav,ne as Toc,D as UISidebar};
2
2
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/components/Nav/Nav.styles.tsx","../src/components/Nav/Nav.tsx","../../../node_modules/.pnpm/@rollup+plugin-typescript@12.1.2_rollup@4.37.0_tslib@2.8.1_typescript@5.8.2/node_modules/tslib/tslib.es6.js","../src/components/Sidebar/Sidebar.styles.tsx","../src/components/Sidebar/Collapse.styles.tsx","../src/components/Sidebar/Collapse.tsx","../src/components/Sidebar/Sidebar.tsx","../src/components/SubNav/SubNav.styles.tsx","../src/components/SubNav/SubNav.tsx","../src/components/Toc/Toc.styles.tsx","../src/components/Toc/Toc.tsx"],"sourcesContent":["import {css} from \"@linaria/core\";\n\nexport const $nav = {\n host: css`\n position: sticky;\n top: 0;\n z-index: 20;\n width: 100%;\n background: transparent;\n display: flex;\n `,\n shadow: css`\n pointer-events: none;\n position: absolute;\n z-index: -1;\n height: 100%;\n width: 100%;\n background-color: white;\n `,\n nav: css`\n display: flex;\n width: 100%;\n height: var(--xyd-navbar-height);\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n padding-left: calc(max(env(safe-area-inset-left), 16px));\n padding-right: calc(max(env(safe-area-inset-right), 16px));\n `,\n nav$$middle: css`\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n align-items: center;\n `\n};\n\nexport const $list = {\n host: css`\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n `,\n}\n\nexport const $item = {\n host: css`\n font-size: 14px; /* 0.875rem */\n position: relative;\n white-space: nowrap;\n color: #4b5563; /* Gray-600 */\n padding: 6px 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n \n &:hover {\n color: #1f2937; /* Gray-800 */\n }\n\n &[data-state=\"active\"] {\n font-weight: bold;\n background: #f9f9f9;\n border-radius: 8px;\n }\n `,\n title1: css`\n position: absolute;\n inset: 0;\n text-align: center;\n align-items: center;\n display: flex;\n justify-content: center;\n `,\n title2: css`\n visibility: hidden;\n font-weight: 500;\n `,\n};\n\nexport const $logo = {\n host: css`\n display: flex;\n align-items: center;\n margin-right: auto;\n `\n}","import React from \"react\";\nimport * as RadixTabs from \"@radix-ui/react-tabs\";\n\nimport {$nav, $list, $item, $logo} from \"./Nav.styles\";\n\nexport interface NavProps {\n children: React.ReactNode\n value: string\n onChange: (value: string) => void\n logo?: React.ReactNode;\n kind?: \"middle\"\n}\n\nexport function Nav({children, value, onChange, logo, kind}: NavProps) {\n return <RadixTabs.Root asChild value={value} onValueChange={onChange}>\n <div className={`${$nav.host}`}>\n <div className={$nav.shadow}/>\n <nav className={`\n ${$nav.nav}\n ${kind === \"middle\" && $nav.nav$$middle}\n `}>\n <div className={`\n ${$logo.host}\n xyd_ui-comp-nav-logo\n `}>\n {logo}\n </div>\n <RadixTabs.List asChild>\n <div className={$list.host}>\n {children}\n </div>\n </RadixTabs.List>\n {kind === \"middle\" && <div/>}\n </nav>\n </div>\n </RadixTabs.Root>\n}\n\nexport interface NavItemProps {\n children: React.ReactNode;\n href: string;\n value: string;\n}\n\nNav.Item = function NavItem({children, value, href}) {\n return <RadixTabs.Trigger asChild value={value}>\n <a\n href={href}\n className={`${$item.host}`}\n >\n <span className={$item.title1}>{children}</span>\n <span className={$item.title2}>{children}</span>\n </a>\n </RadixTabs.Trigger>\n};\n\n","/******************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise, SuppressedError, Symbol, Iterator */\r\n\r\nvar extendStatics = function(d, b) {\r\n extendStatics = Object.setPrototypeOf ||\r\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\r\n return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n if (typeof b !== \"function\" && b !== null)\r\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\r\n extendStatics(d, b);\r\n function __() { this.constructor = d; }\r\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n __assign = Object.assign || function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n }\r\n return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n var t = {};\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n t[p] = s[p];\r\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n t[p[i]] = s[p[i]];\r\n }\r\n return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\r\n function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\r\n var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\r\n var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\r\n var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\r\n var _, done = false;\r\n for (var i = decorators.length - 1; i >= 0; i--) {\r\n var context = {};\r\n for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\r\n for (var p in contextIn.access) context.access[p] = contextIn.access[p];\r\n context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\r\n var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\r\n if (kind === \"accessor\") {\r\n if (result === void 0) continue;\r\n if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\r\n if (_ = accept(result.get)) descriptor.get = _;\r\n if (_ = accept(result.set)) descriptor.set = _;\r\n if (_ = accept(result.init)) initializers.unshift(_);\r\n }\r\n else if (_ = accept(result)) {\r\n if (kind === \"field\") initializers.unshift(_);\r\n else descriptor[key] = _;\r\n }\r\n }\r\n if (target) Object.defineProperty(target, contextIn.name, descriptor);\r\n done = true;\r\n};\r\n\r\nexport function __runInitializers(thisArg, initializers, value) {\r\n var useValue = arguments.length > 2;\r\n for (var i = 0; i < initializers.length; i++) {\r\n value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\r\n }\r\n return useValue ? value : void 0;\r\n};\r\n\r\nexport function __propKey(x) {\r\n return typeof x === \"symbol\" ? x : \"\".concat(x);\r\n};\r\n\r\nexport function __setFunctionName(f, name, prefix) {\r\n if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\r\n return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\r\n};\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n return new (P || (P = Promise))(function (resolve, reject) {\r\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === \"function\" ? Iterator : Object).prototype);\r\n return g.next = verb(0), g[\"throw\"] = verb(1), g[\"return\"] = verb(2), typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n function verb(n) { return function (v) { return step([n, v]); }; }\r\n function step(op) {\r\n if (f) throw new TypeError(\"Generator is already executing.\");\r\n while (g && (g = 0, op[0] && (_ = 0)), _) try {\r\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n if (y = 0, t) op = [op[0] & 2, t.value];\r\n switch (op[0]) {\r\n case 0: case 1: t = op; break;\r\n case 4: _.label++; return { value: op[1], done: false };\r\n case 5: _.label++; y = op[1]; op = [0]; continue;\r\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n default:\r\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n if (t[2]) _.ops.pop();\r\n _.trys.pop(); continue;\r\n }\r\n op = body.call(thisArg, _);\r\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n }\r\n}\r\n\r\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n var desc = Object.getOwnPropertyDescriptor(m, k);\r\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\r\n desc = { enumerable: true, get: function() { return m[k]; } };\r\n }\r\n Object.defineProperty(o, k2, desc);\r\n}) : (function(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n o[k2] = m[k];\r\n});\r\n\r\nexport function __exportStar(m, o) {\r\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\r\n}\r\n\r\nexport function __values(o) {\r\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n if (m) return m.call(o);\r\n if (o && typeof o.length === \"number\") return {\r\n next: function () {\r\n if (o && i >= o.length) o = void 0;\r\n return { value: o && o[i++], done: !o };\r\n }\r\n };\r\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n if (!m) return o;\r\n var i = m.call(o), r, ar = [], e;\r\n try {\r\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n }\r\n catch (error) { e = { error: error }; }\r\n finally {\r\n try {\r\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n }\r\n finally { if (e) throw e.error; }\r\n }\r\n return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spread() {\r\n for (var ar = [], i = 0; i < arguments.length; i++)\r\n ar = ar.concat(__read(arguments[i]));\r\n return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spreadArrays() {\r\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n r[k] = a[j];\r\n return r;\r\n}\r\n\r\nexport function __spreadArray(to, from, pack) {\r\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\r\n if (ar || !(i in from)) {\r\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\r\n ar[i] = from[i];\r\n }\r\n }\r\n return to.concat(ar || Array.prototype.slice.call(from));\r\n}\r\n\r\nexport function __await(v) {\r\n return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n return i = Object.create((typeof AsyncIterator === \"function\" ? AsyncIterator : Object).prototype), verb(\"next\"), verb(\"throw\"), verb(\"return\", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }\r\n function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }\r\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n function fulfill(value) { resume(\"next\", value); }\r\n function reject(value) { resume(\"throw\", value); }\r\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n var i, p;\r\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var m = o[Symbol.asyncIterator], i;\r\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n return cooked;\r\n};\r\n\r\nvar __setModuleDefault = Object.create ? (function(o, v) {\r\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\r\n}) : function(o, v) {\r\n o[\"default\"] = v;\r\n};\r\n\r\nvar ownKeys = function(o) {\r\n ownKeys = Object.getOwnPropertyNames || function (o) {\r\n var ar = [];\r\n for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;\r\n return ar;\r\n };\r\n return ownKeys(o);\r\n};\r\n\r\nexport function __importStar(mod) {\r\n if (mod && mod.__esModule) return mod;\r\n var result = {};\r\n if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== \"default\") __createBinding(result, mod, k[i]);\r\n __setModuleDefault(result, mod);\r\n return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\r\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\r\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\r\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\r\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\r\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\r\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\r\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\r\n}\r\n\r\nexport function __classPrivateFieldIn(state, receiver) {\r\n if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\r\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\r\n}\r\n\r\nexport function __addDisposableResource(env, value, async) {\r\n if (value !== null && value !== void 0) {\r\n if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\r\n var dispose, inner;\r\n if (async) {\r\n if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\r\n dispose = value[Symbol.asyncDispose];\r\n }\r\n if (dispose === void 0) {\r\n if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\r\n dispose = value[Symbol.dispose];\r\n if (async) inner = dispose;\r\n }\r\n if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\r\n if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };\r\n env.stack.push({ value: value, dispose: dispose, async: async });\r\n }\r\n else if (async) {\r\n env.stack.push({ async: true });\r\n }\r\n return value;\r\n\r\n}\r\n\r\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\r\n var e = new Error(message);\r\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\r\n};\r\n\r\nexport function __disposeResources(env) {\r\n function fail(e) {\r\n env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\r\n env.hasError = true;\r\n }\r\n var r, s = 0;\r\n function next() {\r\n while (r = env.stack.pop()) {\r\n try {\r\n if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);\r\n if (r.dispose) {\r\n var result = r.dispose.call(r.value);\r\n if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\r\n }\r\n else s |= 1;\r\n }\r\n catch (e) {\r\n fail(e);\r\n }\r\n }\r\n if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();\r\n if (env.hasError) throw env.error;\r\n }\r\n return next();\r\n}\r\n\r\nexport function __rewriteRelativeImportExtension(path, preserveJsx) {\r\n if (typeof path === \"string\" && /^\\.\\.?\\//.test(path)) {\r\n return path.replace(/\\.(tsx)$|((?:\\.d)?)((?:\\.[^./]+?)?)\\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {\r\n return tsx ? preserveJsx ? \".jsx\" : \".js\" : d && (!ext || !cm) ? m : (d + ext + \".\" + cm.toLowerCase() + \"js\");\r\n });\r\n }\r\n return path;\r\n}\r\n\r\nexport default {\r\n __extends: __extends,\r\n __assign: __assign,\r\n __rest: __rest,\r\n __decorate: __decorate,\r\n __param: __param,\r\n __esDecorate: __esDecorate,\r\n __runInitializers: __runInitializers,\r\n __propKey: __propKey,\r\n __setFunctionName: __setFunctionName,\r\n __metadata: __metadata,\r\n __awaiter: __awaiter,\r\n __generator: __generator,\r\n __createBinding: __createBinding,\r\n __exportStar: __exportStar,\r\n __values: __values,\r\n __read: __read,\r\n __spread: __spread,\r\n __spreadArrays: __spreadArrays,\r\n __spreadArray: __spreadArray,\r\n __await: __await,\r\n __asyncGenerator: __asyncGenerator,\r\n __asyncDelegator: __asyncDelegator,\r\n __asyncValues: __asyncValues,\r\n __makeTemplateObject: __makeTemplateObject,\r\n __importStar: __importStar,\r\n __importDefault: __importDefault,\r\n __classPrivateFieldGet: __classPrivateFieldGet,\r\n __classPrivateFieldSet: __classPrivateFieldSet,\r\n __classPrivateFieldIn: __classPrivateFieldIn,\r\n __addDisposableResource: __addDisposableResource,\r\n __disposeResources: __disposeResources,\r\n __rewriteRelativeImportExtension: __rewriteRelativeImportExtension,\r\n};\r\n","import {css} from \"@linaria/core\";\n\nexport const $sidebar = {\n host: css`\n background: #f9f9f9;\n height: 100%;\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n `,\n ul: css`\n overflow-y: auto;\n overflow-x: hidden;\n height: 100%;\n padding: 1rem;\n\n // TODO: get height of top\n //height: calc(100vh - 54px);\n `\n}\n\nexport const $footer = {\n host: css`\n padding: 1rem;\n //box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);\n box-shadow: 0 -2px 10px rgba(237, 237, 237, .1);\n //border: 1px solid rgb(227, 227, 235);\n //border-top: 1px solid rgb(227, 227, 235);\n border-top: 1px solid #ededed;\n `,\n item$host: css`\n display: flex;\n width: 100%;\n padding: 2px;\n color: #6e6e80;\n `,\n item: css`\n display: flex;\n align-items: center;\n width: 100%;\n gap: 7px;\n font-size: 14px;\n padding: 4px 8px;\n\n &:hover {\n background: #ececf1;\n color: #111827;\n border-radius: 4px;\n\n svg {\n fill: #111827;\n }\n }\n\n svg {\n fill: #6e6e80;\n font-size: 18px;\n width: 18px;\n height: 18px;\n }\n `\n}\n\nexport const $item = {\n host: css`\n color: #6e6e80;\n font-size: 14px;\n `,\n link: css`\n display: flex;\n width: 100%;\n padding: 2px;\n font-weight: 500;\n `,\n link$$active: css`\n background: #fff;\n color: #7051d4;\n border-radius: 4px;\n `,\n link$$activeSecondary: css`\n background: unset;\n color: #111827;\n font-weight: 500;\n `,\n link$item: css`\n display: flex;\n width: 100%;\n padding: 4px 8px;\n\n &:hover {\n background: #ececf1;\n color: #111827;\n border-radius: 4px;\n }\n `\n}\n\nexport const $tree = {\n host: css`\n margin-left: 8px;\n `,\n}\n\nexport const $itemHeader = {\n host: css`\n // TODO: calc based on items?\n padding-left: 10px;\n margin-bottom: 6px;\n margin-top: 16px;\n font-size: 12px;\n line-height: 16px;\n font-weight: 600;\n letter-spacing: 1px;\n color: #111827;\n `\n}\n\n","import { css } from \"@linaria/core\";\n\nexport const $collapse = {\n container: css`\n transform: translateZ(0);\n overflow: hidden;\n transition: all 300ms ease-in-out;\n\n //@media (prefers-reduced-motion: reduce) {\n // transition: none;\n //}\n `,\n base: css`\n opacity: 0;\n transition: opacity 500ms ease-in-out;\n\n //@media (prefers-reduced-motion: reduce) {\n // transition: none;\n //}\n `,\n open: css`\n opacity: 1;\n `,\n};\n","import React, {useEffect, useRef} from \"react\";\nimport type {ReactElement, ReactNode} from \"react\";\nimport {$collapse} from \"./Collapse.styles\";\n\nexport interface UICollapseProps {\n children: ReactNode;\n isOpen: boolean;\n horizontal?: boolean;\n}\n\nexport function UICollapse({\n children,\n isOpen,\n horizontal = false,\n }: UICollapseProps): ReactElement {\n const containerRef = useRef<HTMLDivElement>(null);\n const innerRef = useRef<HTMLDivElement>(null);\n const animationRef = useRef<number | null>(null);\n const initialOpen = useRef(isOpen);\n const initialRender = useRef(true);\n\n useEffect(() => {\n const container = containerRef.current;\n const inner = innerRef.current;\n\n if (animationRef.current) {\n clearTimeout(animationRef.current);\n }\n if (initialRender.current || !container || !inner) return;\n\n if (isOpen) {\n // Opening animation\n if (horizontal) {\n inner.style.width = `${inner.scrollWidth}px`;\n container.style.width = `${inner.scrollWidth}px`;\n } else {\n inner.style.height = `${inner.scrollHeight}px`;\n container.style.height = `${inner.scrollHeight}px`;\n }\n\n animationRef.current = window.setTimeout(() => {\n container.style.removeProperty(horizontal ? \"width\" : \"height\");\n }, 300);\n } else {\n // Closing animation\n if (horizontal) {\n const width = container.scrollWidth; // Cache current width\n container.style.width = `${width}px`; // Set to fixed width first\n\n // Force reflow for Firefox\n container.offsetWidth;\n\n container.style.width = \"0px\";\n } else {\n const height = container.scrollHeight; // Cache current height\n container.style.height = `${height}px`; // Set to fixed height first\n\n // Force reflow for Firefox\n container.offsetHeight;\n\n container.style.height = \"0px\";\n }\n }\n }, [horizontal, isOpen]);\n\n useEffect(() => {\n initialRender.current = false;\n }, []);\n\n return (\n <div\n ref={containerRef}\n className={`${$collapse.container}`}\n style={initialOpen.current || horizontal ? undefined : {height: 0}}\n >\n <div\n ref={innerRef}\n className={`${$collapse.base} ${isOpen ? $collapse.open : \"\"}`}\n >\n {children}\n </div>\n </div>\n );\n}\n","import React from \"react\"\n\nimport {$sidebar, $footer, $item, $tree, $itemHeader} from \"./Sidebar.styles\";\nimport {UICollapse} from \"./Collapse\";\n\nexport interface UISidebarProps {\n children: React.ReactNode;\n footerItems?: React.ReactNode;\n}\n\nexport function UISidebar({children, footerItems}: UISidebarProps) {\n // TODO: in the future theming api?\n return <div className={`\n ${$sidebar.host}\n xyd_ui-comp-sidebar\n `}>\n <ul className={$sidebar.ul}>\n {children}\n </ul>\n {footerItems && <SidebarFooter>\n {footerItems}\n </SidebarFooter>}\n </div>\n}\n\nexport interface UISidebarItemProps {\n children: React.ReactNode;\n button?: boolean;\n href?: string;\n active?: boolean;\n activeTheme?: \"secondary\";\n onClick?: (v: any) => void\n}\n\n// TODO: move to ui\nfunction Link({children, ...props}) {\n return <a {...props}>\n {children}\n </a>\n}\n\nUISidebar.Item = function SidebarItem({\n children,\n button,\n href,\n active,\n activeTheme,\n onClick\n }: UISidebarItemProps) {\n const [firstChild, ...restChilds] = React.Children.toArray(children)\n\n const ButtonOrAnchor = button ? 'button' : Link\n\n return <li\n className={$item.host}\n >\n <ButtonOrAnchor\n href={button ? undefined : href}\n onClick={button ? onClick : undefined}\n className={`\n ${$item.link}\n `}\n >\n <div className={`\n ${$item.link$item}\n ${active && $item.link$$active}\n ${active && activeTheme === \"secondary\" && $item.link$$activeSecondary}\n `}>\n {firstChild}\n </div>\n </ButtonOrAnchor>\n {restChilds}\n </li>\n}\n\nexport interface UISidebarItemHeaderProps {\n children: React.ReactNode;\n}\n\nUISidebar.ItemHeader = function SidebarItemHeader({children}: UISidebarItemHeaderProps) {\n return <li className={$itemHeader.host}>\n {children}\n </li>\n}\n\nexport interface UISidebarSubTreeProps {\n children: React.ReactNode;\n isOpen?: boolean;\n}\n\nUISidebar.SubTree = function SidebarSubItem({children, isOpen}: UISidebarSubTreeProps) {\n return <ul className={$tree.host}>\n <UICollapse isOpen={isOpen || false}>\n {children}\n </UICollapse>\n </ul>\n}\n\nfunction SidebarFooter({children}: { children: React.ReactNode }) {\n return <div className={$footer.host}>\n <ul>\n {children}\n </ul>\n </div>\n}\n\nexport interface SidebarFooterItemProps {\n children: React.ReactNode;\n href?: string;\n icon?: React.ReactNode;\n}\n\nUISidebar.FooterItem = function SidebarFooter({children, href, icon}: SidebarFooterItemProps) {\n return <li className={$footer.item$host}>\n <a className={$footer.item} href={href}>\n {icon}\n {children}\n </a>\n </li>\n}\n\n","import {css} from \"@linaria/core\";\n\nexport const $subNav = {\n host: css`\n align-items: center;\n background-color: #f6f6f7;\n border-radius: 0.50rem;\n display: flex;\n flex-direction: row;\n\n width: 100%;\n height: 44px;\n margin-top: 3px;\n padding: 0 0.25rem;\n `,\n prefix: css`\n color: #44474a;\n //font: var(--font-sans-font-nav-category-base);\n font-size: 12px;\n font-weight: 600;\n padding-left: 0.50rem;\n padding-right: 1.50rem;\n position: relative;\n text-transform: uppercase;\n\n &:after {\n background: #d2d5d8;\n border-radius: 1px;\n content: \" \";\n height: 0.75rem;\n position: absolute;\n right: 0.50rem;\n top: 50%;\n transform: translateY(-50%);\n width: 2px;\n }\n `,\n ul: css`\n display: flex;\n flex-direction: row;\n height: 100%;\n `,\n li: css`\n display: flex;\n height: 100%;\n\n align-items: center;\n position: relative;\n\n &[data-state=\"active\"] {\n font-weight: 500;\n\n a {\n color: #202223;\n }\n\n a:after {\n background-color: #7051d4;\n border-radius: 1px;\n bottom: 0;\n content: \" \";\n height: 2px;\n left: 0;\n position: absolute;\n width: 100%;\n }\n }\n `,\n link: css`\n color: #4b5563;\n //font: var(--font-sans-font-nav-item-active-base);\n line-height: 2.75rem;\n display: block;\n height: 100%;\n padding: 0 0.50rem;\n\n &:hover {\n color: #202223;\n }\n `\n}","import React from \"react\"\nimport * as RadixTabs from \"@radix-ui/react-tabs\";\n\nimport {$subNav} from \"./SubNav.styles\";\n\nexport interface SubNavProps {\n children: React.ReactNode\n title: string\n value: string\n onChange: (value: string) => void\n}\n\nexport function SubNav({children, title, value, onChange}: SubNavProps) {\n return <RadixTabs.Root asChild value={value} onValueChange={onChange}>\n <nav className={$subNav.host}>\n <div className={$subNav.prefix}>\n {title}\n </div>\n <RadixTabs.List asChild>\n <ul className={$subNav.ul}>\n {children}\n </ul>\n </RadixTabs.List>\n </nav>\n </RadixTabs.Root>\n}\n\nexport interface SubNavItemProps {\n children: React.ReactNode\n value: string\n href?: string\n}\n\nSubNav.Item = function SubNavItem({children, value, href}: SubNavItemProps) {\n return <RadixTabs.Trigger asChild value={value}>\n <li className={$subNav.li}>\n <a href={href} className={`${$subNav.link}`}>\n {children}\n </a>\n </li>\n </RadixTabs.Trigger>\n}","import {css} from '@linaria/core';\n\nexport const $toc = {\n host: css`\n position: relative;\n padding-left: 16px;\n `,\n ul: css`\n margin: 0;\n padding: 0;\n list-style: none;\n `,\n li: css`\n position: relative;\n line-height: 1.5;\n\n margin: 0 0 10px;\n padding: 0;\n `,\n link: css`\n display: inline-block;\n font-size: 14px;\n color: #6e6e80;\n line-height: 1.4;\n text-wrap: pretty;\n transition: color .15s ease;\n `,\n link$$active: css`\n font-weight: 500;\n color: #353740;\n `\n}\n\nconst cubizEnter = 'cubic-bezier(.19, 1, .22, 1)';\n\nexport const $scroller = {\n host: css`\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 2px;\n\n background-color: #ececf1;\n `,\n scroll: css`\n position: absolute;\n top: 0;\n left: 0;\n width: 2px;\n height: var(--active-track-height); // TODO: this must be dynamic\n transform: translateY(var(--active-track-top)); // TODO: this must be dynamic\n background-color: #353740;\n transition: height .4s ${cubizEnter}, transform .4s ${cubizEnter};\n `\n}","import React, {useState, useEffect, useContext} from \"react\"\n\nimport {$toc, $scroller} from \"./Toc.styles\";\n\nexport interface TocProps {\n children: React.ReactNode;\n defaultValue?: string\n}\n\nconst Context = React.createContext({\n value: \"\",\n onChange: (v: string) => {\n }\n})\n\n// TODO: based on scroller?\nexport function Toc({children, defaultValue}: TocProps) {\n const [activeTrackHeight, setActiveTrackHeight] = useState(0)\n const [activeTrackTop, setActiveTrackTop] = useState(0)\n\n const [value, setValue] = useState(defaultValue || \"\")\n\n // TODO: more reactish implt?\n function handleScroll() {\n const activeElement = document.querySelector(`.${$toc.link$$active}`);\n if (!activeElement) {\n return;\n }\n\n const {offsetHeight} = activeElement as HTMLElement;\n setActiveTrackHeight(offsetHeight);\n\n if (!activeElement?.parentElement) {\n return\n }\n\n const {offsetTop} = activeElement.parentElement as HTMLElement;\n setActiveTrackTop(offsetTop);\n }\n\n function onChange(v: string) {\n setValue(v)\n }\n\n\n // TODO: more reactish\n useEffect(() => {\n const observer = new IntersectionObserver(\n (entries) => {\n let set = false\n entries.forEach(entry => {\n if (set) {\n return\n }\n if (!entry.isIntersecting) {\n return\n }\n\n if (entry.target instanceof HTMLHeadingElement) {\n const rect = entry.target.getBoundingClientRect();\n const isVisible = rect.top >= 0 && rect.bottom <= window.innerHeight;\n\n if (isVisible) {\n set = true\n setValue(entry.target.innerText);\n }\n }\n });\n },\n {threshold: 0.3}\n );\n\n document.querySelectorAll(\"h2\").forEach(ref => {\n if (ref) observer.observe(ref);\n });\n\n return () => {\n observer.disconnect();\n };\n }, []);\n\n useEffect(() => {\n handleScroll(); // Initial call to set the values\n }, [value]);\n\n return <Context.Provider value={{\n value: value,\n onChange\n }}>\n <div className={$toc.host}>\n <div className={$scroller.host}>\n <div\n style={{\n // @ts-ignore\n \"--active-track-height\": `${activeTrackHeight}px`,\n \"--active-track-top\": `${activeTrackTop}px`,\n }}\n className={$scroller.scroll}\n />\n </div>\n <ul className={$toc.ul}>\n {children}\n </ul>\n </div>\n </Context.Provider>\n}\n\nexport interface TocItemProps {\n children: React.ReactNode;\n value: string;\n}\n\nToc.Item = function TocItem({\n children,\n value = \"#\",\n }: TocItemProps) {\n const {\n value: rootValue,\n onChange\n } = useContext(Context);\n\n const href = \"#\" + value\n const active = rootValue === value;\n\n return <li className={$toc.li}>\n <a\n className={`${$toc.link} ${active && $toc.link$$active}`}\n href={href}\n onClick={(e) => {\n // TODO: use react-router but for some reason does not work\n e.preventDefault()\n onChange(value)\n\n let found = false\n\n // TODO: below is only a temporary solution\n document.querySelectorAll(\"h2\").forEach(e => {\n if (found) {\n return\n }\n\n if (e.innerText === value) {\n found = true\n e.scrollIntoView()\n }\n })\n }}\n >\n {children}\n </a>\n </li>\n}"],"names":["$nav","$list","$item","$logo","Nav","_ref","children","value","onChange","logo","kind","React","createElement","RadixTabs","Root","asChild","onValueChange","className","concat","List","Item","_ref2","href","Trigger","SuppressedError","$sidebar","$footer","$tree","$itemHeader","$collapse","UICollapse","isOpen","_ref$horizontal","horizontal","containerRef","useRef","innerRef","animationRef","initialOpen","initialRender","useEffect","container","current","inner","clearTimeout","style","width","scrollWidth","height","scrollHeight","window","setTimeout","removeProperty","offsetWidth","offsetHeight","ref","undefined","UISidebar","footerItems","SidebarFooter","Link","_a","props","s","e","t","p","Object","prototype","hasOwnProperty","call","indexOf","getOwnPropertySymbols","i","length","propertyIsEnumerable","__rest","assign","_ref5","button","active","activeTheme","onClick","_React$Children$toArr2","_toArray","Children","toArray","firstChild","restChilds","slice","ButtonOrAnchor","ItemHeader","_ref3","SubTree","_ref4","FooterItem","_ref6","icon","$subNav","SubNav","title","$toc","$scroller","Context","createContext","v","Toc","defaultValue","_useState2","_slicedToArray","useState","activeTrackHeight","setActiveTrackHeight","_useState4","activeTrackTop","setActiveTrackTop","_useState6","setValue","observer","IntersectionObserver","entries","set","forEach","entry","isIntersecting","target","HTMLHeadingElement","rect","getBoundingClientRect","top","bottom","innerHeight","innerText","threshold","document","querySelectorAll","observe","disconnect","activeElement","querySelector","parentElement","offsetTop","handleScroll","Provider","_ref2$value","_useContext","useContext","rootValue","preventDefault","found","scrollIntoView"],"mappings":"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","x_google_ignoreList":[2]}
1
+ {"version":3,"file":"index.js","sources":["../src/components/Nav/Nav.styles.tsx","../src/components/Nav/Nav.tsx","../../../node_modules/.pnpm/@rollup+plugin-typescript@12.1.2_rollup@4.38.0_tslib@2.8.1_typescript@5.8.2/node_modules/tslib/tslib.es6.js","../src/components/Sidebar/Sidebar.styles.tsx","../src/components/Sidebar/Collapse.styles.tsx","../src/components/Sidebar/Collapse.tsx","../src/components/Sidebar/Sidebar.tsx","../src/components/SubNav/SubNav.styles.tsx","../src/components/SubNav/SubNav.tsx","../src/components/Toc/Toc.styles.tsx","../src/components/Toc/Toc.tsx"],"sourcesContent":["import {css} from \"@linaria/core\";\n\nexport const $nav = {\n host: css`\n position: sticky;\n top: 0;\n z-index: 20;\n width: 100%;\n background: transparent;\n display: flex;\n `,\n shadow: css`\n pointer-events: none;\n position: absolute;\n z-index: -1;\n height: 100%;\n width: 100%;\n background-color: white;\n `,\n nav: css`\n display: flex;\n width: 100%;\n height: var(--xyd-navbar-height);\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n padding-left: calc(max(env(safe-area-inset-left), 16px));\n padding-right: calc(max(env(safe-area-inset-right), 16px));\n `,\n nav$$middle: css`\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n align-items: center;\n `\n};\n\nexport const $list = {\n host: css`\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n `,\n}\n\nexport const $item = {\n host: css`\n font-size: 14px; /* 0.875rem */\n position: relative;\n white-space: nowrap;\n color: #4b5563; /* Gray-600 */\n padding: 6px 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n \n &:hover {\n color: #1f2937; /* Gray-800 */\n }\n\n &[data-state=\"active\"] {\n font-weight: bold;\n background: #f9f9f9;\n border-radius: 8px;\n }\n `,\n title1: css`\n position: absolute;\n inset: 0;\n text-align: center;\n align-items: center;\n display: flex;\n justify-content: center;\n `,\n title2: css`\n visibility: hidden;\n font-weight: 500;\n `,\n};\n\nexport const $logo = {\n host: css`\n display: flex;\n align-items: center;\n margin-right: auto;\n `\n}","import React from \"react\";\nimport * as RadixTabs from \"@radix-ui/react-tabs\";\n\nimport {$nav, $list, $item, $logo} from \"./Nav.styles\";\n\nexport interface NavProps {\n children: React.ReactNode\n value: string\n onChange: (value: string) => void\n logo?: React.ReactNode;\n kind?: \"middle\"\n}\n\nexport function Nav({children, value, onChange, logo, kind}: NavProps) {\n return <RadixTabs.Root asChild value={value} onValueChange={onChange}>\n <div className={`${$nav.host}`}>\n <div className={$nav.shadow}/>\n <nav className={`\n ${$nav.nav}\n ${kind === \"middle\" && $nav.nav$$middle}\n `}>\n <div className={`\n ${$logo.host}\n xyd_ui-comp-nav-logo\n `}>\n {logo}\n </div>\n <RadixTabs.List asChild>\n <div className={$list.host}>\n {children}\n </div>\n </RadixTabs.List>\n {kind === \"middle\" && <div/>}\n </nav>\n </div>\n </RadixTabs.Root>\n}\n\nexport interface NavItemProps {\n children: React.ReactNode;\n href: string;\n value: string;\n}\n\nNav.Item = function NavItem({children, value, href}) {\n return <RadixTabs.Trigger asChild value={value}>\n <a\n href={href}\n className={`${$item.host}`}\n >\n <span className={$item.title1}>{children}</span>\n <span className={$item.title2}>{children}</span>\n </a>\n </RadixTabs.Trigger>\n};\n\n","/******************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise, SuppressedError, Symbol, Iterator */\r\n\r\nvar extendStatics = function(d, b) {\r\n extendStatics = Object.setPrototypeOf ||\r\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\r\n return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n if (typeof b !== \"function\" && b !== null)\r\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\r\n extendStatics(d, b);\r\n function __() { this.constructor = d; }\r\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n __assign = Object.assign || function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n }\r\n return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n var t = {};\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n t[p] = s[p];\r\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n t[p[i]] = s[p[i]];\r\n }\r\n return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\r\n function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\r\n var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\r\n var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\r\n var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\r\n var _, done = false;\r\n for (var i = decorators.length - 1; i >= 0; i--) {\r\n var context = {};\r\n for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\r\n for (var p in contextIn.access) context.access[p] = contextIn.access[p];\r\n context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\r\n var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\r\n if (kind === \"accessor\") {\r\n if (result === void 0) continue;\r\n if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\r\n if (_ = accept(result.get)) descriptor.get = _;\r\n if (_ = accept(result.set)) descriptor.set = _;\r\n if (_ = accept(result.init)) initializers.unshift(_);\r\n }\r\n else if (_ = accept(result)) {\r\n if (kind === \"field\") initializers.unshift(_);\r\n else descriptor[key] = _;\r\n }\r\n }\r\n if (target) Object.defineProperty(target, contextIn.name, descriptor);\r\n done = true;\r\n};\r\n\r\nexport function __runInitializers(thisArg, initializers, value) {\r\n var useValue = arguments.length > 2;\r\n for (var i = 0; i < initializers.length; i++) {\r\n value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\r\n }\r\n return useValue ? value : void 0;\r\n};\r\n\r\nexport function __propKey(x) {\r\n return typeof x === \"symbol\" ? x : \"\".concat(x);\r\n};\r\n\r\nexport function __setFunctionName(f, name, prefix) {\r\n if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\r\n return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\r\n};\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n return new (P || (P = Promise))(function (resolve, reject) {\r\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === \"function\" ? Iterator : Object).prototype);\r\n return g.next = verb(0), g[\"throw\"] = verb(1), g[\"return\"] = verb(2), typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n function verb(n) { return function (v) { return step([n, v]); }; }\r\n function step(op) {\r\n if (f) throw new TypeError(\"Generator is already executing.\");\r\n while (g && (g = 0, op[0] && (_ = 0)), _) try {\r\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n if (y = 0, t) op = [op[0] & 2, t.value];\r\n switch (op[0]) {\r\n case 0: case 1: t = op; break;\r\n case 4: _.label++; return { value: op[1], done: false };\r\n case 5: _.label++; y = op[1]; op = [0]; continue;\r\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n default:\r\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n if (t[2]) _.ops.pop();\r\n _.trys.pop(); continue;\r\n }\r\n op = body.call(thisArg, _);\r\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n }\r\n}\r\n\r\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n var desc = Object.getOwnPropertyDescriptor(m, k);\r\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\r\n desc = { enumerable: true, get: function() { return m[k]; } };\r\n }\r\n Object.defineProperty(o, k2, desc);\r\n}) : (function(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n o[k2] = m[k];\r\n});\r\n\r\nexport function __exportStar(m, o) {\r\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\r\n}\r\n\r\nexport function __values(o) {\r\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n if (m) return m.call(o);\r\n if (o && typeof o.length === \"number\") return {\r\n next: function () {\r\n if (o && i >= o.length) o = void 0;\r\n return { value: o && o[i++], done: !o };\r\n }\r\n };\r\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n if (!m) return o;\r\n var i = m.call(o), r, ar = [], e;\r\n try {\r\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n }\r\n catch (error) { e = { error: error }; }\r\n finally {\r\n try {\r\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n }\r\n finally { if (e) throw e.error; }\r\n }\r\n return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spread() {\r\n for (var ar = [], i = 0; i < arguments.length; i++)\r\n ar = ar.concat(__read(arguments[i]));\r\n return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spreadArrays() {\r\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n r[k] = a[j];\r\n return r;\r\n}\r\n\r\nexport function __spreadArray(to, from, pack) {\r\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\r\n if (ar || !(i in from)) {\r\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\r\n ar[i] = from[i];\r\n }\r\n }\r\n return to.concat(ar || Array.prototype.slice.call(from));\r\n}\r\n\r\nexport function __await(v) {\r\n return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n return i = Object.create((typeof AsyncIterator === \"function\" ? AsyncIterator : Object).prototype), verb(\"next\"), verb(\"throw\"), verb(\"return\", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }\r\n function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }\r\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n function fulfill(value) { resume(\"next\", value); }\r\n function reject(value) { resume(\"throw\", value); }\r\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n var i, p;\r\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var m = o[Symbol.asyncIterator], i;\r\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n return cooked;\r\n};\r\n\r\nvar __setModuleDefault = Object.create ? (function(o, v) {\r\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\r\n}) : function(o, v) {\r\n o[\"default\"] = v;\r\n};\r\n\r\nvar ownKeys = function(o) {\r\n ownKeys = Object.getOwnPropertyNames || function (o) {\r\n var ar = [];\r\n for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;\r\n return ar;\r\n };\r\n return ownKeys(o);\r\n};\r\n\r\nexport function __importStar(mod) {\r\n if (mod && mod.__esModule) return mod;\r\n var result = {};\r\n if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== \"default\") __createBinding(result, mod, k[i]);\r\n __setModuleDefault(result, mod);\r\n return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\r\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\r\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\r\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\r\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\r\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\r\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\r\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\r\n}\r\n\r\nexport function __classPrivateFieldIn(state, receiver) {\r\n if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\r\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\r\n}\r\n\r\nexport function __addDisposableResource(env, value, async) {\r\n if (value !== null && value !== void 0) {\r\n if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\r\n var dispose, inner;\r\n if (async) {\r\n if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\r\n dispose = value[Symbol.asyncDispose];\r\n }\r\n if (dispose === void 0) {\r\n if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\r\n dispose = value[Symbol.dispose];\r\n if (async) inner = dispose;\r\n }\r\n if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\r\n if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };\r\n env.stack.push({ value: value, dispose: dispose, async: async });\r\n }\r\n else if (async) {\r\n env.stack.push({ async: true });\r\n }\r\n return value;\r\n\r\n}\r\n\r\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\r\n var e = new Error(message);\r\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\r\n};\r\n\r\nexport function __disposeResources(env) {\r\n function fail(e) {\r\n env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\r\n env.hasError = true;\r\n }\r\n var r, s = 0;\r\n function next() {\r\n while (r = env.stack.pop()) {\r\n try {\r\n if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);\r\n if (r.dispose) {\r\n var result = r.dispose.call(r.value);\r\n if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\r\n }\r\n else s |= 1;\r\n }\r\n catch (e) {\r\n fail(e);\r\n }\r\n }\r\n if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();\r\n if (env.hasError) throw env.error;\r\n }\r\n return next();\r\n}\r\n\r\nexport function __rewriteRelativeImportExtension(path, preserveJsx) {\r\n if (typeof path === \"string\" && /^\\.\\.?\\//.test(path)) {\r\n return path.replace(/\\.(tsx)$|((?:\\.d)?)((?:\\.[^./]+?)?)\\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {\r\n return tsx ? preserveJsx ? \".jsx\" : \".js\" : d && (!ext || !cm) ? m : (d + ext + \".\" + cm.toLowerCase() + \"js\");\r\n });\r\n }\r\n return path;\r\n}\r\n\r\nexport default {\r\n __extends: __extends,\r\n __assign: __assign,\r\n __rest: __rest,\r\n __decorate: __decorate,\r\n __param: __param,\r\n __esDecorate: __esDecorate,\r\n __runInitializers: __runInitializers,\r\n __propKey: __propKey,\r\n __setFunctionName: __setFunctionName,\r\n __metadata: __metadata,\r\n __awaiter: __awaiter,\r\n __generator: __generator,\r\n __createBinding: __createBinding,\r\n __exportStar: __exportStar,\r\n __values: __values,\r\n __read: __read,\r\n __spread: __spread,\r\n __spreadArrays: __spreadArrays,\r\n __spreadArray: __spreadArray,\r\n __await: __await,\r\n __asyncGenerator: __asyncGenerator,\r\n __asyncDelegator: __asyncDelegator,\r\n __asyncValues: __asyncValues,\r\n __makeTemplateObject: __makeTemplateObject,\r\n __importStar: __importStar,\r\n __importDefault: __importDefault,\r\n __classPrivateFieldGet: __classPrivateFieldGet,\r\n __classPrivateFieldSet: __classPrivateFieldSet,\r\n __classPrivateFieldIn: __classPrivateFieldIn,\r\n __addDisposableResource: __addDisposableResource,\r\n __disposeResources: __disposeResources,\r\n __rewriteRelativeImportExtension: __rewriteRelativeImportExtension,\r\n};\r\n","import {css} from \"@linaria/core\";\n\nexport const $sidebar = {\n host: css`\n background: #f9f9f9;\n height: 100%;\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n `,\n ul: css`\n overflow-y: auto;\n overflow-x: hidden;\n height: 100%;\n padding: 1rem;\n\n // TODO: get height of top\n //height: calc(100vh - 54px);\n `\n}\n\nexport const $footer = {\n host: css`\n padding: 1rem;\n //box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);\n box-shadow: 0 -2px 10px rgba(237, 237, 237, .1);\n //border: 1px solid rgb(227, 227, 235);\n //border-top: 1px solid rgb(227, 227, 235);\n border-top: 1px solid #ededed;\n `,\n item$host: css`\n display: flex;\n width: 100%;\n padding: 2px;\n color: #6e6e80;\n `,\n item: css`\n display: flex;\n align-items: center;\n width: 100%;\n gap: 7px;\n font-size: 14px;\n padding: 4px 8px;\n\n &:hover {\n background: #ececf1;\n color: #111827;\n border-radius: 4px;\n\n svg {\n fill: #111827;\n }\n }\n\n svg {\n fill: #6e6e80;\n font-size: 18px;\n width: 18px;\n height: 18px;\n }\n `\n}\n\nexport const $item = {\n host: css`\n color: #6e6e80;\n font-size: 14px;\n `,\n link: css`\n display: flex;\n width: 100%;\n padding: 2px;\n font-weight: 500;\n `,\n link$$active: css`\n background: #fff;\n color: #111827;\n border-radius: 4px;\n position: relative;\n \n &::before {\n background: #7051d4;\n border-radius: 0 2px 2px 0;\n bottom: 7px;\n content: \"\";\n left: 1px;\n position: absolute;\n top: 7px;\n width: 4px;\n border-radius: 10px;\n }\n `,\n link$$parentActive: css`\n color: #111827;\n font-weight: 600;\n background: transparent;\n `,\n link$$activeSecondary: css`\n background: unset;\n color: #111827;\n font-weight: 500;\n `,\n link$item: css`\n display: flex;\n width: 100%;\n padding: 8px 12px;\n position: relative;\n font-size: 15px;\n\n &:hover {\n background: #ececf1;\n color: #111827;\n border-radius: 4px;\n }\n `\n}\n\nexport const $tree = {\n host: css`\n margin-left: 12px;\n `,\n}\n\nexport const $itemHeader = {\n host: css`\n // TODO: calc based on items?\n padding-left: 12px;\n margin-bottom: 8px;\n margin-top: 24px;\n font-size: 13px;\n line-height: 16px;\n font-weight: 600;\n letter-spacing: 0.5px;\n color: #111827;\n text-transform: uppercase;\n `\n}\n\n","import { css } from \"@linaria/core\";\n\nexport const $collapse = {\n container: css`\n transform: translateZ(0);\n overflow: hidden;\n transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1),\n height 300ms cubic-bezier(0.4, 0, 0.2, 1);\n will-change: width, height;\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n `,\n base: css`\n opacity: 0;\n transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);\n will-change: opacity;\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n `,\n open: css`\n opacity: 1;\n `,\n};\n","import React, {useEffect, useRef} from \"react\";\nimport type {ReactElement, ReactNode} from \"react\";\nimport {$collapse} from \"./Collapse.styles\";\n\nexport interface UICollapseProps {\n children: ReactNode;\n isOpen: boolean;\n horizontal?: boolean;\n}\n\nexport function UICollapse({\n children,\n isOpen,\n horizontal = false,\n }: UICollapseProps): ReactElement {\n const containerRef = useRef<HTMLDivElement>(null);\n const innerRef = useRef<HTMLDivElement>(null);\n const animationRef = useRef<number | null>(null);\n const initialOpen = useRef(isOpen);\n const initialRender = useRef(true);\n const observerRef = useRef<MutationObserver | null>(null);\n\n const measureAndUpdateDimensions = () => {\n const container = containerRef.current;\n const inner = innerRef.current;\n if (!container || !inner) return;\n\n // Temporarily make all nested content visible for measurement\n const nestedCollapses = inner.querySelectorAll('[class*=\"collapse\"]');\n const originalStyles: Array<{ element: HTMLElement; height: string; overflow: string }> = [];\n\n nestedCollapses.forEach((collapse) => {\n if (collapse instanceof HTMLElement) {\n originalStyles.push({\n element: collapse,\n height: collapse.style.height,\n overflow: collapse.style.overflow\n });\n collapse.style.height = 'auto';\n collapse.style.overflow = 'visible';\n }\n });\n\n if (horizontal) {\n const width = inner.scrollWidth;\n container.style.width = `${width}px`;\n inner.style.width = `${width}px`;\n } else {\n const height = inner.scrollHeight;\n container.style.height = `${height}px`;\n inner.style.height = `${height}px`;\n }\n\n // Restore original styles\n originalStyles.forEach(({element, height, overflow}) => {\n element.style.height = height;\n element.style.overflow = overflow;\n });\n };\n\n useEffect(() => {\n const container = containerRef.current;\n const inner = innerRef.current;\n\n if (animationRef.current) {\n clearTimeout(animationRef.current);\n }\n if (initialRender.current || !container || !inner) return;\n\n // Clean up previous observer\n if (observerRef.current) {\n observerRef.current.disconnect();\n }\n\n if (isOpen) {\n // Opening animation\n measureAndUpdateDimensions();\n\n // Set up mutation observer to watch for content changes\n observerRef.current = new MutationObserver((mutations) => {\n // Check if the mutation affects height\n const shouldUpdate = mutations.some(mutation => {\n return mutation.type === 'childList' ||\n mutation.type === 'attributes' ||\n (mutation.type === 'characterData' && mutation.target.parentElement?.closest('[class*=\"collapse\"]'));\n });\n\n if (shouldUpdate) {\n measureAndUpdateDimensions();\n }\n });\n\n observerRef.current.observe(inner, {\n childList: true,\n subtree: true,\n characterData: true,\n attributes: true\n });\n\n animationRef.current = window.setTimeout(() => {\n container.style.removeProperty(horizontal ? \"width\" : \"height\");\n inner.style.removeProperty(horizontal ? \"width\" : \"height\");\n if (observerRef.current) {\n observerRef.current.disconnect();\n }\n }, 300);\n } else {\n // Closing animation\n if (horizontal) {\n const width = container.scrollWidth;\n container.style.width = `${width}px`;\n container.offsetWidth; // Force reflow\n container.style.width = \"0px\";\n } else {\n const height = container.scrollHeight;\n container.style.height = `${height}px`;\n container.offsetHeight; // Force reflow\n container.style.height = \"0px\";\n }\n }\n\n return () => {\n if (observerRef.current) {\n observerRef.current.disconnect();\n }\n if (animationRef.current) {\n clearTimeout(animationRef.current);\n }\n };\n }, [horizontal, isOpen]);\n\n useEffect(() => {\n initialRender.current = false;\n }, []);\n\n return (\n <div\n ref={containerRef}\n className={`${$collapse.container}`}\n style={initialOpen.current || horizontal ? undefined : {height: 0}}\n >\n <div\n ref={innerRef}\n className={`${$collapse.base} ${isOpen ? $collapse.open : \"\"}`}\n >\n {children}\n </div>\n </div>\n );\n}\n","import React from \"react\"\n\nimport {$sidebar, $footer, $item, $tree, $itemHeader} from \"./Sidebar.styles\";\nimport {UICollapse} from \"./Collapse\";\n\nexport interface UISidebarProps {\n children: React.ReactNode;\n footerItems?: React.ReactNode;\n}\n\nexport function UISidebar({children, footerItems}: UISidebarProps) {\n // TODO: in the future theming api?\n return <div className={`\n ${$sidebar.host}\n xyd_ui-comp-sidebar\n `}>\n <ul className={$sidebar.ul}>\n {children}\n </ul>\n {footerItems && <SidebarFooter>\n {footerItems}\n </SidebarFooter>}\n </div>\n}\n\nexport interface UISidebarItemProps {\n children: React.ReactNode;\n button?: boolean;\n href?: string;\n active?: boolean;\n activeTheme?: \"secondary\";\n isParentActive?: boolean;\n onClick?: (v: any) => void\n}\n\n// TODO: move to ui\nfunction Link({children, ...props}) {\n return <a {...props}>\n {children}\n </a>\n}\n\nUISidebar.Item = function SidebarItem({\n children,\n button,\n href,\n active,\n activeTheme,\n isParentActive,\n onClick\n}: UISidebarItemProps) {\n const [firstChild, ...restChilds] = React.Children.toArray(children)\n\n const ButtonOrAnchor = button ? 'button' : Link\n\n return <li\n className={$item.host}\n >\n <ButtonOrAnchor\n href={button ? undefined : href}\n onClick={button ? onClick : undefined}\n className={`\n ${$item.link}\n `}\n >\n <div className={`\n ${$item.link$item}\n ${active && $item.link$$active}\n ${isParentActive && $item.link$$parentActive}\n ${active && activeTheme === \"secondary\" && $item.link$$activeSecondary}\n `}>\n {firstChild}\n </div>\n </ButtonOrAnchor>\n {restChilds}\n </li>\n}\n\nexport interface UISidebarItemHeaderProps {\n children: React.ReactNode;\n}\n\nUISidebar.ItemHeader = function SidebarItemHeader({children}: UISidebarItemHeaderProps) {\n return <li className={$itemHeader.host}>\n {children}\n </li>\n}\n\nexport interface UISidebarSubTreeProps {\n children: React.ReactNode;\n isOpen?: boolean;\n}\n\nUISidebar.SubTree = function SidebarSubItem({children, isOpen}: UISidebarSubTreeProps) {\n return <ul className={$tree.host}>\n <UICollapse isOpen={isOpen || false}>\n {children}\n </UICollapse>\n </ul>\n}\n\nfunction SidebarFooter({children}: { children: React.ReactNode }) {\n return <div className={$footer.host}>\n <ul>\n {children}\n </ul>\n </div>\n}\n\nexport interface SidebarFooterItemProps {\n children: React.ReactNode;\n href?: string;\n icon?: React.ReactNode;\n}\n\nUISidebar.FooterItem = function SidebarFooter({children, href, icon}: SidebarFooterItemProps) {\n return <li className={$footer.item$host}>\n <a className={$footer.item} href={href}>\n {icon}\n {children}\n </a>\n </li>\n}\n\n","import {css} from \"@linaria/core\";\n\nexport const $subNav = {\n host: css`\n align-items: center;\n background-color: #f6f6f7;\n border-radius: 0.50rem;\n display: flex;\n flex-direction: row;\n\n width: 100%;\n height: 44px;\n margin-top: 3px;\n padding: 0 0.25rem;\n `,\n prefix: css`\n color: #44474a;\n //font: var(--font-sans-font-nav-category-base);\n font-size: 12px;\n font-weight: 600;\n padding-left: 0.50rem;\n padding-right: 1.50rem;\n position: relative;\n text-transform: uppercase;\n\n &:after {\n background: #d2d5d8;\n border-radius: 1px;\n content: \" \";\n height: 0.75rem;\n position: absolute;\n right: 0.50rem;\n top: 50%;\n transform: translateY(-50%);\n width: 2px;\n }\n `,\n ul: css`\n display: flex;\n flex-direction: row;\n height: 100%;\n `,\n li: css`\n display: flex;\n height: 100%;\n\n align-items: center;\n position: relative;\n\n &[data-state=\"active\"] {\n font-weight: 500;\n\n a {\n color: #202223;\n }\n\n a:after {\n background-color: #7051d4;\n border-radius: 1px;\n bottom: 0;\n content: \" \";\n height: 2px;\n left: 0;\n position: absolute;\n width: 100%;\n }\n }\n `,\n link: css`\n color: #4b5563;\n //font: var(--font-sans-font-nav-item-active-base);\n line-height: 2.75rem;\n display: block;\n height: 100%;\n padding: 0 0.50rem;\n\n &:hover {\n color: #202223;\n }\n `\n}","import React from \"react\"\nimport * as RadixTabs from \"@radix-ui/react-tabs\";\n\nimport {$subNav} from \"./SubNav.styles\";\n\nexport interface SubNavProps {\n children: React.ReactNode\n title: string\n value: string\n onChange: (value: string) => void\n}\n\nexport function SubNav({children, title, value, onChange}: SubNavProps) {\n return <RadixTabs.Root asChild value={value} onValueChange={onChange}>\n <nav className={$subNav.host}>\n <div className={$subNav.prefix}>\n {title}\n </div>\n <RadixTabs.List asChild>\n <ul className={$subNav.ul}>\n {children}\n </ul>\n </RadixTabs.List>\n </nav>\n </RadixTabs.Root>\n}\n\nexport interface SubNavItemProps {\n children: React.ReactNode\n value: string\n href?: string\n}\n\nSubNav.Item = function SubNavItem({children, value, href}: SubNavItemProps) {\n return <RadixTabs.Trigger asChild value={value}>\n <li className={$subNav.li}>\n <a href={href} className={`${$subNav.link}`}>\n {children}\n </a>\n </li>\n </RadixTabs.Trigger>\n}","import {css} from '@linaria/core';\n\nexport const $toc = {\n host: css`\n position: relative;\n padding-left: 16px;\n `,\n ul: css`\n margin: 0;\n padding: 0;\n list-style: none;\n `,\n li: css`\n position: relative;\n line-height: 1.5;\n\n margin: 0 0 10px;\n padding: 0;\n `,\n link: css`\n display: inline-block;\n font-size: 14px;\n color: #6e6e80;\n line-height: 1.4;\n text-wrap: pretty;\n transition: color .15s ease;\n `,\n link$$active: css`\n font-weight: 500;\n color: #353740;\n `\n}\n\nconst cubizEnter = 'cubic-bezier(.19, 1, .22, 1)';\n\nexport const $scroller = {\n host: css`\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 2px;\n\n background-color: #ececf1;\n `,\n scroll: css`\n position: absolute;\n top: 0;\n left: 0;\n width: 2px;\n height: var(--active-track-height); // TODO: this must be dynamic\n transform: translateY(var(--active-track-top)); // TODO: this must be dynamic\n background-color: #353740;\n transition: height .4s ${cubizEnter}, transform .4s ${cubizEnter};\n `\n}","import React, {useState, useEffect, useContext} from \"react\"\n\nimport {$toc, $scroller} from \"./Toc.styles\";\n\nexport interface TocProps {\n children: React.ReactNode;\n defaultValue?: string\n}\n\nconst Context = React.createContext({\n value: \"\",\n onChange: (v: string) => {\n }\n})\n\n// TODO: based on scroller?\nexport function Toc({children, defaultValue}: TocProps) {\n const [activeTrackHeight, setActiveTrackHeight] = useState(0)\n const [activeTrackTop, setActiveTrackTop] = useState(0)\n const [value, setValue] = useState(defaultValue || \"\")\n\n function onChange(v: string) {\n setValue(v)\n }\n\n // TODO: more reactish implt?\n function handleScroll() {\n const activeElement = document.querySelector(`.${$toc.link$$active}`);\n if (!activeElement) {\n return;\n }\n\n const {offsetHeight} = activeElement as HTMLElement;\n setActiveTrackHeight(offsetHeight);\n\n if (!activeElement?.parentElement) {\n return\n }\n\n const {offsetTop} = activeElement.parentElement as HTMLElement;\n setActiveTrackTop(offsetTop);\n }\n\n // TODO: more reactish\n useEffect(() => {\n const observer = new IntersectionObserver(\n (entries) => {\n let set = false\n entries.forEach(entry => {\n if (set) {\n return\n }\n if (!entry.isIntersecting) {\n return\n }\n\n if (entry.target instanceof HTMLHeadingElement) {\n const rect = entry.target.getBoundingClientRect();\n const isVisible = rect.top >= 0 && rect.bottom <= window.innerHeight;\n\n if (isVisible) {\n set = true\n setValue(entry.target.innerText);\n }\n }\n });\n },\n {threshold: 0.3}\n );\n\n document.querySelectorAll(\"h2\").forEach(ref => {\n if (ref) observer.observe(ref);\n });\n\n return () => {\n observer.disconnect();\n };\n }, []);\n\n useEffect(() => {\n handleScroll(); // Initial call to set the values\n }, [value]);\n\n return <Context.Provider value={{\n value: value,\n onChange\n }}>\n <div className={$toc.host}>\n <div className={$scroller.host}>\n <div\n style={{\n // @ts-ignore\n \"--active-track-height\": `${activeTrackHeight}px`,\n \"--active-track-top\": `${activeTrackTop}px`,\n }}\n className={$scroller.scroll}\n />\n </div>\n <ul className={$toc.ul}>\n {children}\n </ul>\n </div>\n </Context.Provider>\n}\n\nexport interface TocItemProps {\n children: React.ReactNode;\n value: string;\n}\n\nToc.Item = function TocItem({\n children,\n value = \"#\",\n }: TocItemProps) {\n const {\n value: rootValue,\n onChange\n } = useContext(Context);\n\n const href = \"#\" + value\n const active = rootValue === value;\n\n return <li className={$toc.li}>\n <a\n className={`${$toc.link} ${active && $toc.link$$active}`}\n href={href}\n onClick={(e) => {\n // TODO: use react-router but for some reason does not work\n e.preventDefault()\n onChange(value)\n\n let found = false\n\n // TODO: below is only a temporary solution\n document.querySelectorAll(\"h2\").forEach(e => {\n if (found) {\n return\n }\n\n if (e.innerText === value) {\n found = true\n e.scrollIntoView()\n }\n })\n }}\n >\n {children}\n </a>\n </li>\n}\n"],"names":["$nav","$list","$item","$logo","Nav","_ref","children","value","onChange","logo","kind","React","createElement","RadixTabs","Root","asChild","onValueChange","className","concat","List","Item","_ref2","href","Trigger","SuppressedError","$sidebar","$footer","$tree","$itemHeader","$collapse","UICollapse","isOpen","_ref$horizontal","horizontal","containerRef","useRef","innerRef","animationRef","initialOpen","initialRender","observerRef","measureAndUpdateDimensions","container","current","inner","nestedCollapses","querySelectorAll","originalStyles","forEach","collapse","HTMLElement","push","element","height","style","overflow","width","scrollWidth","scrollHeight","useEffect","clearTimeout","disconnect","MutationObserver","mutations","some","mutation","type","target","parentElement","closest","observe","childList","subtree","characterData","attributes","window","setTimeout","removeProperty","offsetWidth","offsetHeight","ref","undefined","UISidebar","footerItems","SidebarFooter","Link","_a","props","s","e","t","p","Object","prototype","hasOwnProperty","call","indexOf","getOwnPropertySymbols","i","length","propertyIsEnumerable","__rest","assign","_ref5","button","active","activeTheme","isParentActive","onClick","_React$Children$toArr2","_toArray","Children","toArray","firstChild","restChilds","slice","ButtonOrAnchor","ItemHeader","_ref3","SubTree","_ref4","FooterItem","_ref6","icon","$subNav","SubNav","title","$toc","$scroller","Context","createContext","v","Toc","defaultValue","_useState2","_slicedToArray","useState","activeTrackHeight","setActiveTrackHeight","_useState4","activeTrackTop","setActiveTrackTop","_useState6","setValue","observer","IntersectionObserver","entries","set","entry","isIntersecting","HTMLHeadingElement","rect","getBoundingClientRect","top","bottom","innerHeight","innerText","threshold","document","activeElement","querySelector","offsetTop","handleScroll","Provider","_ref2$value","_useContext","useContext","rootValue","preventDefault","found","scrollIntoView"],"mappings":"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","x_google_ignoreList":[2]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xyd-js/ui",
3
- "version": "0.1.0-xyd.10",
3
+ "version": "0.1.0-xyd.12",
4
4
  "description": "",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",