@xyd-js/ui 0.1.0-xyd.0 → 0.1.0-xyd.2

package/dist/index.css

@@ -0,0 +1,51 @@
+.h1vu90xp{position:sticky;top:0;z-index:20;width:100%;background:transparent;display:flex;}
+.s1i2i14o{pointer-events:none;position:absolute;z-index:-1;height:100%;width:100%;background-color:white;}
+.n1oemxra{display:flex;width:100%;height:var(--xyd-navbar-height);align-items:center;justify-content:flex-end;gap:8px;padding-left:calc(max(env(safe-area-inset-left), 16px));padding-right:calc(max(env(safe-area-inset-right), 16px));}
+.ny6xn1c{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;}
+.hj2rxb1{display:flex;align-items:center;justify-content:center;gap:8px;}
+.hcz0c13{font-size:14px;position:relative;white-space:nowrap;color:#4b5563;padding:6px 16px;display:flex;align-items:center;justify-content:center;}
+.hcz0c13:hover{color:#1f2937;}
+.hcz0c13[data-state="active"]{font-weight:bold;background:#f9f9f9;border-radius:8px;}
+.t1lsj05a{position:absolute;inset:0;text-align:center;align-items:center;display:flex;justify-content:center;}
+.t138ur9z{visibility:hidden;font-weight:500;}
+.hso30gp{display:flex;align-items:center;margin-right:auto;}
+
+.hptag3l{background:#f9f9f9;height:100%;border-radius:0.5rem;display:flex;flex-direction:column;}
+.uead4fo{overflow-y:auto;overflow-x:hidden;height:100%;padding:1rem;}
+.h1hrlfak{padding:1rem;box-shadow:0 -2px 10px rgba(237, 237, 237, .1);border-top:1px solid #ededed;}
+.i1btwdcv{display:flex;width:100%;padding:2px;color:#6e6e80;}
+.i1801o7t{display:flex;align-items:center;width:100%;gap:7px;font-size:14px;padding:4px 8px;}
+.i1801o7t:hover{background:#ececf1;color:#111827;border-radius:4px;}
+.i1801o7t:hover svg{fill:#111827;}
+.i1801o7t svg{fill:#6e6e80;font-size:18px;width:18px;height:18px;}
+.hs1gieu{color:#6e6e80;font-size:14px;}
+.l1s9ffav{display:flex;width:100%;padding:2px;font-weight:500;}
+.l1041tva{background:#fff;color:#7051d4;border-radius:4px;}
+.l1hsy03l{background:unset;color:#111827;font-weight:500;}
+.lz6cy9y{display:flex;width:100%;padding:4px 8px;}
+.lz6cy9y:hover{background:#ececf1;color:#111827;border-radius:4px;}
+.hnhdi2c{margin-left:8px;}
+.hj0z21i{padding-left:10px;margin-bottom:6px;margin-top:16px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:1px;color:#111827;}
+
+.c12fwmxc{transform:translateZ(0);overflow:hidden;transition:all 300ms ease-in-out;}
+.bfe0v98{opacity:0;transition:opacity 500ms ease-in-out;}
+.oza7km2{opacity:1;}
+
+.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;}
+.p1ncaln9{color:#44474a;font-size:12px;font-weight:600;padding-left:0.50rem;padding-right:1.50rem;position:relative;text-transform:uppercase;}
+.p1ncaln9:after{background:#d2d5d8;border-radius:1px;content:" ";height:0.75rem;position:absolute;right:0.50rem;top:50%;transform:translateY(-50%);width:2px;}
+.u3wpqhn{display:flex;flex-direction:row;height:100%;}
+.lc3ej8u{display:flex;height:100%;align-items:center;position:relative;}
+.lc3ej8u[data-state="active"]{font-weight:500;}
+.lc3ej8u[data-state="active"] a{color:#202223;}
+.lc3ej8u[data-state="active"] a:after{background-color:#7051d4;border-radius:1px;bottom:0;content:" ";height:2px;left:0;position:absolute;width:100%;}
+.l1taqsnk{color:#4b5563;line-height:2.75rem;display:block;height:100%;padding:0 0.50rem;}
+.l1taqsnk:hover{color:#202223;}
+
+.h19g75q2{position:relative;padding-left:16px;}
+.ueg7kxf{margin:0;padding:0;list-style:none;}
+.lagigsw{position:relative;line-height:1.5;margin:0 0 10px;padding:0;}
+.lylqcp3{display:inline-block;font-size:14px;color:#6e6e80;line-height:1.4;text-wrap:pretty;transition:color .15s ease;}
+.l16swvpi{font-weight:500;color:#353740;}
+.ht0m6aa{position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#ececf1;}
+.sfp1vxs{position:absolute;top:0;left:0;width:2px;height:var(--active-track-height);transform:translateY(var(--active-track-top));background-color:#353740;transition:height .4s cubic-bezier(.19, 1, .22, 1),transform .4s cubic-bezier(.19, 1, .22, 1);}

package/dist/index.d.ts

@@ -0,0 +1,105 @@
+import React from 'react';
+
+interface NavProps {
+    children: React.ReactNode;
+    value: string;
+    onChange: (value: string) => void;
+    logo?: React.ReactNode;
+    kind?: "middle";
+}
+declare function Nav({ children, value, onChange, logo, kind }: NavProps): React.JSX.Element;
+declare namespace Nav {
+    var Item: ({ children, value, href }: {
+        children: any;
+        value: any;
+        href: any;
+    }) => React.JSX.Element;
+}
+interface NavItemProps {
+    children: React.ReactNode;
+    href: string;
+    value: string;
+}
+
+interface UISidebarProps {
+    children: React.ReactNode;
+    footerItems?: React.ReactNode;
+}
+declare function UISidebar({ children, footerItems }: UISidebarProps): React.JSX.Element;
+declare namespace UISidebar {
+    var Item: ({ children, button, href, active, activeTheme, onClick }: UISidebarItemProps) => React.JSX.Element;
+    var ItemHeader: ({ children }: UISidebarItemHeaderProps) => React.JSX.Element;
+    var SubTree: ({ children, isOpen }: UISidebarSubTreeProps) => React.JSX.Element;
+    var FooterItem: ({ children, href, icon }: SidebarFooterItemProps) => React.JSX.Element;
+}
+interface UISidebarItemProps {
+    children: React.ReactNode;
+    button?: boolean;
+    href?: string;
+    active?: boolean;
+    activeTheme?: "secondary";
+    onClick?: (v: any) => void;
+}
+interface UISidebarItemHeaderProps {
+    children: React.ReactNode;
+}
+interface UISidebarSubTreeProps {
+    children: React.ReactNode;
+    isOpen?: boolean;
+}
+interface SidebarFooterItemProps {
+    children: React.ReactNode;
+    href?: string;
+    icon?: React.ReactNode;
+}
+
+interface SubNavProps {
+    children: React.ReactNode;
+    title: string;
+    value: string;
+    onChange: (value: string) => void;
+}
+declare function SubNav({ children, title, value, onChange }: SubNavProps): React.JSX.Element;
+declare namespace SubNav {
+    var Item: ({ children, value, href }: SubNavItemProps) => React.JSX.Element;
+}
+interface SubNavItemProps {
+    children: React.ReactNode;
+    value: string;
+    href?: string;
+}
+
+interface TocProps {
+    children: React.ReactNode;
+    defaultValue?: string;
+}
+declare function Toc({ children, defaultValue }: TocProps): React.JSX.Element;
+declare namespace Toc {
+    var Item: ({ children, value, }: TocItemProps) => React.JSX.Element;
+}
+interface TocItemProps {
+    children: React.ReactNode;
+    value: string;
+}
+
+interface ITOC {
+    depth: number;
+    value: string;
+    children: ITOC[];
+}
+interface IBreadcrumb {
+    title: string;
+    href: string;
+}
+interface INavLinks {
+    prev?: {
+        title: string;
+        href: string;
+    };
+    next?: {
+        title: string;
+        href: string;
+    };
+}
+
+export { type IBreadcrumb, type INavLinks, type ITOC, Nav, type NavItemProps, type NavProps, type SidebarFooterItemProps, SubNav, type SubNavProps, Toc, UISidebar, type UISidebarItemHeaderProps, type UISidebarItemProps, type UISidebarProps };

package/dist/index.js

@@ -0,0 +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};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyd-js/ui",
-  "version": "0.1.0-xyd.0",
+  "version": "0.1.0-xyd.2",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -13,13 +13,36 @@
     }
   },
   "dependencies": {
+    "@headlessui/react": "^2.2.0",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-menu": "^2.1.2",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.447.0",
     "react": "^18.3.1",
-    "scroll-into-view-if-needed": "^3.1.0"
+    "react-syntax-highlighter": "^15.5.0"
   },
   "devDependencies": {
+    "@babel/preset-typescript": "^7.26.0",
+    "@babel/preset-react": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-flow": "^7.25.9",
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@wyw-in-js/rollup": "^0.5.5",
+    "@wyw-in-js/vite": "^0.5.5",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.47",
-    "postcss-import": "^16.1.0"
+    "postcss-import": "^16.1.0",
+    "rollup": "^4.27.4",
+    "rollup-plugin-css-only": "^4.5.2",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "tsup": "^8.3.0"
   },
   "scripts": {
     "clean": "rimraf build",

package/rollup.config.js

@@ -23,7 +23,7 @@ const external = Object.keys(dependencies);
 export default [
     {
         input: {
-            index: 'index.ts'
+            index: 'index.ts',
         },
         output: [
             {

package/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "module": "esnext",
     "esModuleInterop": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler", // Update this line
     "target": "ES6",
     "lib": [
       "dom",
@@ -22,7 +22,12 @@
         "name": "next"
       }
     ],
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "allowImportingTsExtensions": true,
+    "baseUrl": ".",
+    "paths": {
+      "*": ["*", "*.ts"]
+    }
   },
   "include": [
     "next-env.d.ts",
@@ -33,4 +38,4 @@
   "exclude": [
     "node_modules"
   ]
-}
+}