@xyd-js/components 0.0.0-build-1760f84-20251129221538 → 0.0.0-build-aebf977-20251203155725
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/CHANGELOG.md +2 -2
- package/dist/Button-DsQ-CpNa.js +2 -0
- package/dist/{Button-D1sRSUU2.js.map → Button-DsQ-CpNa.js.map} +1 -1
- package/dist/CodeSample-C3DnZZbq.js +2 -0
- package/dist/{CodeSample-BgBX-nnN.js.map → CodeSample-C3DnZZbq.js.map} +1 -1
- package/dist/Icon-Bsw2j9bV.js +4 -0
- package/dist/Icon-Bsw2j9bV.js.map +1 -0
- package/dist/PageFirstSlide-a-LXqB8m.js +2 -0
- package/dist/{PageFirstSlide-DaJNENNq.js.map → PageFirstSlide-a-LXqB8m.js.map} +1 -1
- package/dist/{TabsAnalytics-CunSa7pG.js → TabsAnalytics-CZdY7fWP.js} +1 -1
- package/dist/{TabsAnalytics-CunSa7pG.js.map → TabsAnalytics-CZdY7fWP.js.map} +1 -1
- package/dist/Update-BZAgVqnP.js +2 -0
- package/dist/{Update-C8Ig1-78.js.map → Update-BZAgVqnP.js.map} +1 -1
- package/dist/VideoGuide-BbIalYlR.js +2 -0
- package/dist/{VideoGuide-CjFV2soM.js.map → VideoGuide-BbIalYlR.js.map} +1 -1
- package/dist/coder.js +1 -1
- package/dist/coder.js.map +1 -1
- package/dist/content.js +1 -1
- package/dist/content.js.map +1 -1
- package/dist/index.css +25 -26
- package/dist/layouts.js +1 -1
- package/dist/layouts.js.map +1 -1
- package/dist/pages.js +1 -1
- package/dist/pages.js.map +1 -1
- package/dist/system.js +1 -1
- package/dist/system.js.map +1 -1
- package/dist/{useUXClick-w9Bk-N_Y.js → useUXClick-5-G3e-3G.js} +1 -1
- package/dist/{useUXClick-w9Bk-N_Y.js.map → useUXClick-5-G3e-3G.js.map} +1 -1
- package/dist/useUXEvents-Dii3DU11.js +2 -0
- package/dist/{useUXEvents-CVHyMwm7.js.map → useUXEvents-Dii3DU11.js.map} +1 -1
- package/dist/useUXScrollDepth-8_Y9CETh.js +2 -0
- package/dist/{useUXScrollDepth-DuzQBuHV.js.map → useUXScrollDepth-8_Y9CETh.js.map} +1 -1
- package/dist/uxsdk.js +1 -1
- package/dist/uxsdk.js.map +1 -1
- package/dist/views.js.map +1 -1
- package/dist/writer.js +1 -1
- package/dist/writer.js.map +1 -1
- package/package.json +2 -2
- package/rollup.config.js +2 -0
- package/dist/Button-D1sRSUU2.js +0 -2
- package/dist/CodeSample-BgBX-nnN.js +0 -2
- package/dist/Icon-DAUxBCx7.js +0 -4
- package/dist/Icon-DAUxBCx7.js.map +0 -1
- package/dist/PageFirstSlide-DaJNENNq.js +0 -2
- package/dist/Update-C8Ig1-78.js +0 -2
- package/dist/VideoGuide-CjFV2soM.js +0 -2
- package/dist/useUXEvents-CVHyMwm7.js +0 -2
- package/dist/useUXScrollDepth-DuzQBuHV.js +0 -2
package/dist/pages.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pages.js","sources":["../src/pages/PageBlogPost/PageBlogPost.tsx","../src/pages/PageBlogPost/PageBlogPost.styles.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as cn from \"./PageBlogPost.styles\"\n\nexport function PageBlogPost() {\n return <div className={cn.PageBlogPost}>\n Blog Post\n </div>\n}","import { css } from \"@linaria/core\"\n\nexport const PageBlogPost = css`\n `"],"names":["PageBlogPost","React","className"],"mappings":"
|
|
1
|
+
{"version":3,"file":"pages.js","sources":["../src/pages/PageBlogPost/PageBlogPost.tsx","../src/pages/PageBlogPost/PageBlogPost.styles.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as cn from \"./PageBlogPost.styles\"\n\nexport function PageBlogPost() {\n return <div className={cn.PageBlogPost}>\n Blog Post\n </div>\n}","import { css } from \"@linaria/core\"\n\nexport const PageBlogPost = css`\n `"],"names":["PageBlogPost","React","createElement","div","className"],"mappings":"6UAIO,SAASA,IACZ,OAAOC,EAAAC,cAACC,MAAAA,CAAIC,UCHHJ,WDG+B,YAG5C"}
|
package/dist/system.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import*as e from"react";import t,{useEffect as a,useRef as n}from"react";import{B as r}from"./Button-DsQ-CpNa.js";import"./Icon-Bsw2j9bV.js";function l({title:t,toolGroups:a,...n}){return e.createElement("details",{className:"bigwo3e",...n},e.createElement("summary",null,e.createElement("span",{part:"icon"}),e.createElement("div",{part:"title"},t),e.createElement("div",{part:"compatibility"},a.map((t,a)=>e.createElement("span",{part:"tools",key:a},t.map((t,a)=>e.createElement("span",{key:t.tool+(t.label??"")+a,"data-tool":t.tool,"data-supported":!!t.supported||void 0},t.label?t.label:null)))))))}const o="f30yyk8";function i(e){return"minimal"===e.kind?t.createElement(i.Minimal,e):t.createElement("footer",{className:o},t.createElement("div",{part:"container"},t.createElement("div",{part:"content"},e.logo&&t.createElement("div",{part:"first-column"},e.logo),e.links?.length&&t.createElement("div",{part:"columns","data-cols":e.links?.length},e.links?.map((e,a)=>t.createElement("div",{part:"col",key:`${e.header}-${a}`},t.createElement("div",{part:"col-items"},t.createElement("p",null,e.header),e.items?.map(e=>t.createElement("a",{key:`${e.label}-${a}`,target:"_blank",href:e.href},e.label)))))),t.createElement("div",{part:"social-links"},e.socials?.map((e,a)=>t.createElement("div",{key:`${e.href}-${a}`},t.createElement("a",{target:"_blank",href:e.href},e.logo))))),e.footnote&&t.createElement("hr",null),t.createElement("div",{part:"footnote"},e.footnote)))}i.Minimal=function(e){return t.createElement("footer",{className:o,"data-kind":"minimal"},t.createElement("div",{part:"container"},t.createElement("div",{part:"content"},e.links?.length&&t.createElement("div",{part:"columns","data-cols":e.links?.length},t.createElement("div",{part:"col"},t.createElement("div",{part:"col-items"},e.links?.map((e,a)=>t.createElement(r,{key:`${e.label}-${a}`,kind:"tertiary",href:e.href},e.label))))),t.createElement("div",{part:"social-links"},e.socials?.map((e,a)=>t.createElement(r,{key:`${e.href}-${a}`,kind:"tertiary",href:e.href,icon:e.logo}))))))};function c({shortcutKeys:e=["⌘","K"],...r}){return function(e,t){const r=n(t);a(()=>{r.current=t},[t]),a(()=>{if(window.__UNSAFE_xyd_search_button_inited)return;const t=t=>{if(1!==e.length){if(2===e.length){const[a,n]=e,l=t.key.toLowerCase();("⌘"===a&&t.metaKey||"Ctrl"===a&&t.ctrlKey)&&l===n.toLowerCase()&&(t.preventDefault(),r.current())}}else t.key.toLowerCase()===e[0].toLowerCase()&&(t.preventDefault(),r.current())};return window.addEventListener("keydown",t,{capture:!0}),window.addEventListener("keyup",t,{capture:!0}),()=>{window.removeEventListener("keydown",t,{capture:!0}),window.removeEventListener("keyup",t,{capture:!0})}},[])}(e,()=>r.onClick?.()),a(()=>(window.__UNSAFE_xyd_search_button_inited=!0,()=>{window.__UNSAFE_xyd_search_button_inited=!1}),[]),t.createElement("xyd-search-button",{className:"s1f8k5y3","aria-label":"Search",onClick:r.onClick,"data-fullWidth":r.fullWidth},t.createElement("span",{part:"container"},t.createElement("svg",{width:20,height:20,part:"icon",viewBox:"0 0 20 20"},t.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"})),t.createElement("span",{part:"placeholder"},r.placeholder||"Search")),e.length>0&&t.createElement("span",{part:"keys"},e.map((e,a)=>t.createElement("kbd",{key:`${e}-${a}`,part:"key"},e))))}export{l as Baseline,i as Footer,c as SearchButton};
|
|
2
2
|
//# sourceMappingURL=system.js.map
|
package/dist/system.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"system.js","sources":["../src/system/Baseline/Baseline.tsx","../src/system/Baseline/Baseline.styles.tsx","../src/system/Footer/Footer.styles.tsx","../src/system/Footer/Footer.tsx","../src/system/SearchButton/SearchButton.tsx","../src/system/SearchButton/SearchButton.styles.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as cn from './Baseline.styles';\n\nexport interface BaselineTool {\n tool: 'bun' | 'node' | 'npm' | 'pnpm' | string\n supported: boolean;\n label?: React.ReactNode;\n}\n\nexport interface BaselineProps extends React.HTMLAttributes<HTMLDetailsElement> {\n title: string;\n toolGroups: BaselineTool[][];\n}\n\nexport function Baseline({ title, toolGroups, ...props }: BaselineProps) {\n return (\n <details className={cn.BaselineHost} {...props}>\n <summary>\n <span part=\"icon\" />\n <div part=\"title\">{title}</div>\n <div part=\"compatibility\">\n {toolGroups.map((group, i) => (\n <span part=\"tools\" key={i}>\n {group.map((tool, j) => (\n <span\n key={tool.tool + (tool.label ?? '') + j}\n data-tool={tool.tool}\n data-supported={tool.supported ? true : undefined}\n >\n {tool.label ? tool.label : null}\n </span>\n ))}\n </span>\n ))}\n </div>\n </summary>\n </details>\n );\n}","\nimport { css } from \"@linaria/core\";\n\nimport checkUrl from \"./check.svg\"\nimport bunUrl from \"./bun.svg\"\nimport logoUrl from \"./logo.svg\"\nimport pnpmUrl from \"./pnpm.svg\"\nimport nodeUrl from \"./node.svg\"\nimport npmUrl from \"./npm.svg\"\n\nexport const BaselineHost = css`\n --baseline-logo-bun: url(${bunUrl});\n --baseline-logo-node: url(${nodeUrl});\n --baseline-logo-npm: url(${npmUrl});\n\n --baseline-high-bg: #e6f4ea;\n --baseline-high-engine-bg: #ceead6;\n --baseline-high-img: url(${logoUrl});\n --baseline-high-check: #099949;\n\n --baseline-bg: var(--baseline-high-bg);\n --baseline-engine-bg: var(--baseline-high-engine-bg);\n --baseline-img: var(--baseline-high-img);\n --baseline-check: var(--baseline-high-check);\n\n --baseline-cross: var(--baseline-limited-cross);\n --feedback-link-icon: var(--icon-primary);\n background: var(--baseline-bg);\n border-radius: .25rem;\n margin: 1rem 0;\n padding-left: 3.8125rem;\n\n summary {\n --chevron-size: 0.6875rem;\n --chevron-padding-left: 0.75rem;\n --chevron-padding-right: 1.25rem;\n align-items: center;\n cursor: pointer;\n display: flex;\n flex-wrap: wrap;\n gap: .5rem;\n justify-content: space-between;\n padding: 1rem 0;\n padding-right: calc(var(--chevron-padding-left) + var(--chevron-size) + var(--chevron-padding-right));\n position: relative;\n }\n\n [part=\"icon\"] {\n --width: 2.3125rem;\n background-image: var(--baseline-img);\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: contain;\n display: block;\n height: 2.25rem;\n left: calc(-.5rem - var(--width));\n position: absolute;\n top: 1rem;\n width: var(--width);\n }\n\n [part=\"title\"] {\n font-size: 1rem;\n font-weight: 600;\n letter-spacing: 0;\n line-height: 1.5;\n margin: 0;\n padding: .375rem 0;\n }\n\n [part=\"compatibility\"] {\n display: flex;\n flex-wrap: wrap;\n gap: .5rem;\n }\n\n [part=\"tools\"] {\n background: var(--baseline-engine-bg);\n border-radius: 2rem;\n display: flex;\n flex-wrap: wrap;\n gap: .5rem;\n padding: .5rem .625rem;\n\n [data-tool] {\n display: flex;\n --baseline-tool-image: none;\n }\n [data-tool=\"bun\"] {\n --baseline-tool-image: var(--baseline-logo-bun);\n }\n [data-tool=\"node\"] {\n --baseline-tool-image: var(--baseline-logo-node);\n }\n [data-tool=\"npm\"] {\n --baseline-tool-image: var(--baseline-logo-npm);\n }\n [data-tool=\"pnpm\"] {\n --baseline-tool-image: url(${pnpmUrl});\n }\n\n [data-tool]::before {\n background-repeat: no-repeat;\n background-size: contain;\n content: \"\";\n display: block;\n height: 1.25rem;\n width: 1.25rem;\n background-image: var(--baseline-tool-image);\n }\n\n [data-tool]::after {\n background-color: var(--baseline-check);\n mask-image: url(${checkUrl});\n -webkit-mask-image: url(${checkUrl});\n\n content: \"\";\n display: block;\n height: 1.25rem;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: contain;\n mask-size: contain;\n width: 1rem;\n }\n }\n\n`;","import { css } from \"@linaria/core\";\n\nexport const Footer = css`\n --footer-anchor-color: var(--dark48);\n --footer-anchor-color--secondary: var(--dark32);\n --footer-anchor-color--hover: var(--xyd-anchor-color--hover);\n /* transform: translateY(-100%); */\n\n border-top: 1px solid var(--footer-anchor-color--secondary);\n display: flex;\n align-items: center;\n flex-direction: column;\n\n p {\n color: var(--text-primary);\n font-weight: bold;\n }\n hr {\n background: var(--footer-anchor-color--secondary);\n width: 100%;\n height: 1px;\n }\n\n a {\n color: var(--footer-anchor-color);\n font-weight: var(--xyd-font-weight-medium);\n\n &:hover {\n color: var(--footer-anchor-color--hover);\n }\n }\n\n [part=\"container\"] {\n display: flex;\n align-items: center;\n flex-direction: column;\n gap: 24px;\n justify-content: space-between;\n max-width: 1050px;\n width: 100%;\n\n padding: 100px 25px\n }\n &[data-kind=\"minimal\"] [part=\"container\"] {\n max-width: 100%;\n padding: 20px;\n }\n\n [part=\"content\"] {\n display: flex;\n flex-direction: row;\n gap: 32px;\n justify-content: space-between;\n width: 100%;\n\n @media (max-width: 768px) {\n flex-direction: column;\n gap: 24px;\n }\n }\n\n [part=\"first-column\"] {\n display: flex;\n height: 24px;\n\n img, svg {\n height: 28px;\n width: auto;\n }\n\n @media (min-width: 1024px) {\n min-width: 140px;\n }\n\n @media (max-width: 768px) {\n align-self: flex-start;\n }\n }\n\n [part=\"columns\"] {\n display: grid;\n gap: 32px;\n grid-template-columns: repeat(auto-fill, minmax(0, 1fr));\n flex: 1 1 0%;\n\n @media (max-width: 768px) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 24px;\n width: 100%;\n }\n\n @media (max-width: 680px) {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n gap: 20px;\n }\n\n &[data-cols=\"1\"] {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n\n &[data-cols=\"2\"] {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n \n @media (max-width: 680px) {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n }\n\n &[data-cols=\"3\"] {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n \n @media (max-width: 768px) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n \n @media (max-width: 680px) {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n }\n\n &[data-cols=\"4\"] {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n \n @media (max-width: 768px) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n \n @media (max-width: 680px) {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n }\n\n &[data-cols=\"5\"] {\n grid-template-columns: repeat(5, minmax(0, 1fr));\n \n @media (max-width: 768px) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n \n @media (max-width: 680px) {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n }\n }\n &[data-kind=\"minimal\"] [part=\"columns\"] {\n display: flex;\n }\n\n [part=\"col\"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n white-space: nowrap;\n gap: 16px;\n\n @media (max-width: 768px) {\n align-items: flex-start;\n white-space: normal;\n }\n }\n\n [part=\"col-items\"] {\n display: flex;\n flex-direction: column;\n gap: 16px;\n align-items: flex-start;\n\n @media (max-width: 768px) {\n align-items: flex-start;\n }\n }\n &[data-kind=\"minimal\"] [part=\"col-items\"] {\n flex-direction: row;\n flex-wrap: wrap;\n }\n\n [part=\"social-links\"] {\n display: flex;\n gap: 16px;\n justify-content: flex-end;\n flex-wrap: wrap;\n max-width: 492px;\n min-width: 140px;\n\n @media (max-width: 768px) {\n justify-content: flex-start;\n max-width: 100%;\n min-width: auto;\n }\n\n svg {\n width: 24px;\n height: 24px;\n\n color: var(--footer-anchor-color);\n fill: var(--footer-anchor-color);\n\n &:hover {\n color: var(--footer-anchor-color--hover);\n fill: var(--footer-anchor-color--hover);\n }\n }\n }\n\n [part=\"footnote\"] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n @media (max-width: 768px) {\n flex-direction: column;\n gap: 16px;\n align-items: flex-start;\n }\n }\n`;","import React from \"react\";\n\nimport { Button } from \"../../writer/Button\"\nimport * as cn from \"./Footer.styles\";\n\nexport interface FooterLinkItemsProps {\n label: string;\n href: string;\n}\n\nexport interface FooterProps {\n footnote: React.ReactNode;\n\n kind?: \"minimal\"\n\n logo?: React.ReactNode;\n\n socials?: {\n logo: React.ReactNode;\n href: string\n }[]\n\n links?: {\n header: string;\n items?: FooterLinkItemsProps[]\n }[] | FooterLinkItemsProps[]\n}\n\nexport function Footer(props: FooterProps) {\n if (props.kind === \"minimal\") {\n return <Footer.Minimal {...props} />\n }\n\n return <footer className={cn.Footer}>\n <div part=\"container\">\n <div part=\"content\">\n {\n props.logo && <div part=\"first-column\">\n {props.logo}\n </div>\n }\n\n {props.links?.length && <div part=\"columns\" data-cols={props.links?.length}>\n {props.links?.map((link, index) => (\n <div part=\"col\" key={`${link.header}-${index}`}>\n <div part=\"col-items\">\n <p>{link.header}</p>\n {link.items?.map((item) => (\n <a key={`${item.label}-${index}`} target=\"_blank\" href={item.href}>{item.label}</a>\n ))}\n </div>\n </div>\n ))}\n </div>}\n\n\n <div part=\"social-links\">\n {props.socials?.map((social, index) => (\n <div key={`${social.href}-${index}`}>\n <a target=\"_blank\" href={social.href}>{social.logo}</a>\n </div>\n ))}\n </div>\n </div>\n\n {props.footnote && <hr />}\n\n <div part=\"footnote\">\n {props.footnote}\n </div>\n </div>\n </footer>\n}\n\nFooter.Minimal = function MinimalFooter(props: FooterProps) {\n return <footer className={cn.Footer} data-kind=\"minimal\">\n <div part=\"container\">\n <div part=\"content\">\n {\n props.links?.length && <div part=\"columns\" data-cols={props.links?.length}>\n <div part=\"col\">\n <div part=\"col-items\">\n {props.links?.map((item, index) => (\n <Button\n key={`${item.label}-${index}`} kind=\"tertiary\" href={item.href}>\n {item.label}\n </Button>\n ))}\n </div>\n </div>\n </div>\n }\n\n <div part=\"social-links\">\n {props.socials?.map((social, index) => (\n <Button\n key={`${social.href}-${index}`}\n kind=\"tertiary\"\n href={social.href}\n icon={social.logo}\n />\n ))}\n </div>\n </div>\n </div>\n </footer>\n}","import React, { useEffect, useRef } from 'react';\n\nimport * as cn from \"./SearchButton.styles\";\n\ninterface SearchButtonProps {\n onClick?: () => void;\n placeholder?: string;\n shortcutKeys?: string[];\n fullWidth?: boolean;\n}\n\nexport function SearchButton({\n shortcutKeys = ['⌘', 'K'],\n ...props\n}: SearchButtonProps) {\n useShortcuts(shortcutKeys, () => props.onClick?.());\n\n useEffect(() => {\n // @ts-ignore - !!! FIX IN THE FUTURE !!! its a fix for loading virtual-component:Search twice? original and from plugin - check if exists on prod\n window.__UNSAFE_xyd_search_button_inited = true\n\n return () => {\n // @ts-ignore\n window.__UNSAFE_xyd_search_button_inited = false\n }\n }, [])\n\n return (\n <xyd-search-button\n className={cn.SearchButton}\n aria-label=\"Search\"\n onClick={props.onClick}\n data-fullWidth={props.fullWidth}\n >\n <span part=\"container\">\n <svg\n width={20}\n height={20}\n part=\"icon\"\n viewBox=\"0 0 20 20\"\n >\n <path\n d=\"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z\"\n stroke=\"currentColor\"\n fill=\"none\"\n fillRule=\"evenodd\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n <span part=\"placeholder\">{props.placeholder || \"Search\"}</span>\n </span>\n\n {\n shortcutKeys.length > 0 && (\n <span part=\"keys\">\n {shortcutKeys.map((key, index) => (\n <kbd key={`${key}-${index}`} part=\"key\">{key}</kbd>\n ))}\n </span>\n )\n }\n </xyd-search-button>\n )\n}\n\nfunction useShortcuts(shortcutKeys: string[], onTrigger: () => void): void {\n // Keep latest handler reference to avoid stale closures\n const savedHandler = useRef(onTrigger);\n\n useEffect(() => {\n savedHandler.current = onTrigger;\n }, [onTrigger]);\n\n useEffect(() => {\n // @ts-ignore\n if (window.__UNSAFE_xyd_search_button_inited) {\n return\n }\n\n const listener = (event: KeyboardEvent) => {\n // For single key shortcuts\n if (shortcutKeys.length === 1) {\n if (event.key.toLowerCase() === shortcutKeys[0].toLowerCase()) {\n event.preventDefault();\n\n savedHandler.current();\n }\n return;\n }\n\n // For modifier combinations\n if (shortcutKeys.length === 2) {\n const [modifier, key] = shortcutKeys;\n const pressedKey = event.key.toLowerCase();\n\n const isModifierMatch =\n (modifier === '⌘' && event.metaKey) ||\n (modifier === 'Ctrl' && event.ctrlKey);\n\n if (isModifierMatch && pressedKey === key.toLowerCase()) {\n event.preventDefault();\n\n savedHandler.current();\n }\n }\n };\n\n // Use capture phase and listen to both keydown and keyup\n window.addEventListener('keydown', listener, { capture: true });\n window.addEventListener('keyup', listener, { capture: true });\n\n return () => {\n window.removeEventListener('keydown', listener, { capture: true });\n window.removeEventListener('keyup', listener, { capture: true });\n };\n }, []);\n}","import { css } from \"@linaria/core\";\n\nexport const SearchButton = css`\n @layer defaults {\n background-color: transparent;\n border-radius: var(--xyd-border-radius-large);\n border: 1px solid var(--dark32);\n color: var(--text-primary);\n background: var(--dark16);\n font-size: var(--xyd-font-size-small);\n font-weight: var(--xyd-font-weight-semibold);\n height: 36px;\n justify-content: space-between;\n display: flex;\n align-items: center;\n flex: 1;\n\n padding: 0 8px;\n margin: 12px 0 0;\n user-select: none;\n width: 100%;\n transition: border-color .15s ease;\n\n max-width: var(--xyd-search-width, 300px);\n margin: 0;\n\n cursor: pointer;\n\n &[data-fullWidth] {\n max-width: 100%;\n }\n\n &:hover {\n background: var(--dark16);\n box-shadow: none;\n color: var(--dark48);\n outline: none;\n\n box-shadow: none;\n border-color: var(--dark48);\n }\n \n [part=\"container\"] {\n align-items: center;\n display: flex;\n gap: var(--xyd-padding-small);\n }\n\n [part=\"placeholder\"] {\n display: block !important;\n font-size: var(--xyd-font-size-small);\n color: var(--dark48);\n font-weight: var(--xyd-font-weight-normal);\n }\n\n [part=\"icon\"] {\n stroke-width: 1.4;\n color: var(--dark48) !important;\n height: 15px;\n transition: color .15s var(--cubic-enter);\n }\n \n\n [part=\"keys\"] {\n display: flex;\n gap: 4px;\n min-width: auto;\n }\n\n [part=\"key\"] {\n align-items: center;\n background: var(--dark16);\n border-radius: var(--xyd-border-radius-small);\n box-shadow: none;\n color: var(--dark48);\n display: flex;\n height: 18px;\n line-height: 18px;\n justify-content: center;\n font-size: 12px;\n letter-spacing: 1px;\n position: relative;\n padding: 0;\n margin: 0;\n border: 0px;\n top: 0;\n width: 20px;\n }\n }\n`\n"],"names":["Baseline","_a","title","toolGroups","props","__rest","React","className","BaselineHost","createElement","part","map","group","i","key","tool","j","label","supported","undefined","Footer","kind","Minimal","Object","assign","cn","logo","links","length","_b","_c","link","index","header","items","item","target","href","_d","socials","social","footnote","Button","icon","SearchButton","shortcutKeys","onTrigger","savedHandler","useRef","useEffect","current","window","__UNSAFE_xyd_search_button_inited","listener","event","modifier","pressedKey","toLowerCase","metaKey","ctrlKey","preventDefault","addEventListener","capture","removeEventListener","useShortcuts","onClick","call","fullWidth","width","height","viewBox","d","stroke","fill","fillRule","strokeLinecap","strokeLinejoin","placeholder"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"system.js","sources":["../src/system/Baseline/Baseline.tsx","../src/system/Baseline/Baseline.styles.tsx","../src/system/Footer/Footer.styles.tsx","../src/system/Footer/Footer.tsx","../src/system/SearchButton/SearchButton.tsx","../src/system/SearchButton/SearchButton.styles.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as cn from './Baseline.styles';\n\nexport interface BaselineTool {\n tool: 'bun' | 'node' | 'npm' | 'pnpm' | string\n supported: boolean;\n label?: React.ReactNode;\n}\n\nexport interface BaselineProps extends React.HTMLAttributes<HTMLDetailsElement> {\n title: string;\n toolGroups: BaselineTool[][];\n}\n\nexport function Baseline({ title, toolGroups, ...props }: BaselineProps) {\n return (\n <details className={cn.BaselineHost} {...props}>\n <summary>\n <span part=\"icon\" />\n <div part=\"title\">{title}</div>\n <div part=\"compatibility\">\n {toolGroups.map((group, i) => (\n <span part=\"tools\" key={i}>\n {group.map((tool, j) => (\n <span\n key={tool.tool + (tool.label ?? '') + j}\n data-tool={tool.tool}\n data-supported={tool.supported ? true : undefined}\n >\n {tool.label ? tool.label : null}\n </span>\n ))}\n </span>\n ))}\n </div>\n </summary>\n </details>\n );\n}","\nimport { css } from \"@linaria/core\";\n\nimport checkUrl from \"./check.svg\"\nimport bunUrl from \"./bun.svg\"\nimport logoUrl from \"./logo.svg\"\nimport pnpmUrl from \"./pnpm.svg\"\nimport nodeUrl from \"./node.svg\"\nimport npmUrl from \"./npm.svg\"\n\nexport const BaselineHost = css`\n --baseline-logo-bun: url(${bunUrl});\n --baseline-logo-node: url(${nodeUrl});\n --baseline-logo-npm: url(${npmUrl});\n\n --baseline-high-bg: #e6f4ea;\n --baseline-high-engine-bg: #ceead6;\n --baseline-high-img: url(${logoUrl});\n --baseline-high-check: #099949;\n\n --baseline-bg: var(--baseline-high-bg);\n --baseline-engine-bg: var(--baseline-high-engine-bg);\n --baseline-img: var(--baseline-high-img);\n --baseline-check: var(--baseline-high-check);\n\n --baseline-cross: var(--baseline-limited-cross);\n --feedback-link-icon: var(--icon-primary);\n background: var(--baseline-bg);\n border-radius: .25rem;\n margin: 1rem 0;\n padding-left: 3.8125rem;\n\n summary {\n --chevron-size: 0.6875rem;\n --chevron-padding-left: 0.75rem;\n --chevron-padding-right: 1.25rem;\n align-items: center;\n cursor: pointer;\n display: flex;\n flex-wrap: wrap;\n gap: .5rem;\n justify-content: space-between;\n padding: 1rem 0;\n padding-right: calc(var(--chevron-padding-left) + var(--chevron-size) + var(--chevron-padding-right));\n position: relative;\n }\n\n [part=\"icon\"] {\n --width: 2.3125rem;\n background-image: var(--baseline-img);\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: contain;\n display: block;\n height: 2.25rem;\n left: calc(-.5rem - var(--width));\n position: absolute;\n top: 1rem;\n width: var(--width);\n }\n\n [part=\"title\"] {\n font-size: 1rem;\n font-weight: 600;\n letter-spacing: 0;\n line-height: 1.5;\n margin: 0;\n padding: .375rem 0;\n }\n\n [part=\"compatibility\"] {\n display: flex;\n flex-wrap: wrap;\n gap: .5rem;\n }\n\n [part=\"tools\"] {\n background: var(--baseline-engine-bg);\n border-radius: 2rem;\n display: flex;\n flex-wrap: wrap;\n gap: .5rem;\n padding: .5rem .625rem;\n\n [data-tool] {\n display: flex;\n --baseline-tool-image: none;\n }\n [data-tool=\"bun\"] {\n --baseline-tool-image: var(--baseline-logo-bun);\n }\n [data-tool=\"node\"] {\n --baseline-tool-image: var(--baseline-logo-node);\n }\n [data-tool=\"npm\"] {\n --baseline-tool-image: var(--baseline-logo-npm);\n }\n [data-tool=\"pnpm\"] {\n --baseline-tool-image: url(${pnpmUrl});\n }\n\n [data-tool]::before {\n background-repeat: no-repeat;\n background-size: contain;\n content: \"\";\n display: block;\n height: 1.25rem;\n width: 1.25rem;\n background-image: var(--baseline-tool-image);\n }\n\n [data-tool]::after {\n background-color: var(--baseline-check);\n mask-image: url(${checkUrl});\n -webkit-mask-image: url(${checkUrl});\n\n content: \"\";\n display: block;\n height: 1.25rem;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: contain;\n mask-size: contain;\n width: 1rem;\n }\n }\n\n`;","import { css } from \"@linaria/core\";\n\nexport const Footer = css`\n --footer-anchor-color: var(--dark48);\n --footer-anchor-color--secondary: var(--dark32);\n --footer-anchor-color--hover: var(--xyd-anchor-color--hover);\n /* transform: translateY(-100%); */\n\n border-top: 1px solid var(--footer-anchor-color--secondary);\n display: flex;\n align-items: center;\n flex-direction: column;\n\n p {\n color: var(--text-primary);\n font-weight: bold;\n }\n hr {\n background: var(--footer-anchor-color--secondary);\n width: 100%;\n height: 1px;\n }\n\n a {\n color: var(--footer-anchor-color);\n font-weight: var(--xyd-font-weight-medium);\n\n &:hover {\n color: var(--footer-anchor-color--hover);\n }\n }\n\n [part=\"container\"] {\n display: flex;\n align-items: center;\n flex-direction: column;\n gap: 24px;\n justify-content: space-between;\n max-width: 1050px;\n width: 100%;\n\n padding: 100px 25px\n }\n &[data-kind=\"minimal\"] [part=\"container\"] {\n max-width: 100%;\n padding: 20px;\n }\n\n [part=\"content\"] {\n display: flex;\n flex-direction: row;\n gap: 32px;\n justify-content: space-between;\n width: 100%;\n\n @media (max-width: 768px) {\n flex-direction: column;\n gap: 24px;\n }\n }\n\n [part=\"first-column\"] {\n display: flex;\n height: 24px;\n\n img, svg {\n height: 28px;\n width: auto;\n }\n\n @media (min-width: 1024px) {\n min-width: 140px;\n }\n\n @media (max-width: 768px) {\n align-self: flex-start;\n }\n }\n\n [part=\"columns\"] {\n display: grid;\n gap: 32px;\n grid-template-columns: repeat(auto-fill, minmax(0, 1fr));\n flex: 1 1 0%;\n\n @media (max-width: 768px) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 24px;\n width: 100%;\n }\n\n @media (max-width: 680px) {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n gap: 20px;\n }\n\n &[data-cols=\"1\"] {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n\n &[data-cols=\"2\"] {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n \n @media (max-width: 680px) {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n }\n\n &[data-cols=\"3\"] {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n \n @media (max-width: 768px) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n \n @media (max-width: 680px) {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n }\n\n &[data-cols=\"4\"] {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n \n @media (max-width: 768px) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n \n @media (max-width: 680px) {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n }\n\n &[data-cols=\"5\"] {\n grid-template-columns: repeat(5, minmax(0, 1fr));\n \n @media (max-width: 768px) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n \n @media (max-width: 680px) {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n }\n }\n &[data-kind=\"minimal\"] [part=\"columns\"] {\n display: flex;\n }\n\n [part=\"col\"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n white-space: nowrap;\n gap: 16px;\n\n @media (max-width: 768px) {\n align-items: flex-start;\n white-space: normal;\n }\n }\n\n [part=\"col-items\"] {\n display: flex;\n flex-direction: column;\n gap: 16px;\n align-items: flex-start;\n\n @media (max-width: 768px) {\n align-items: flex-start;\n }\n }\n &[data-kind=\"minimal\"] [part=\"col-items\"] {\n flex-direction: row;\n flex-wrap: wrap;\n }\n\n [part=\"social-links\"] {\n display: flex;\n gap: 16px;\n justify-content: flex-end;\n flex-wrap: wrap;\n max-width: 492px;\n min-width: 140px;\n\n @media (max-width: 768px) {\n justify-content: flex-start;\n max-width: 100%;\n min-width: auto;\n }\n\n svg {\n width: 24px;\n height: 24px;\n\n color: var(--footer-anchor-color);\n fill: var(--footer-anchor-color);\n\n &:hover {\n color: var(--footer-anchor-color--hover);\n fill: var(--footer-anchor-color--hover);\n }\n }\n }\n\n [part=\"footnote\"] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n @media (max-width: 768px) {\n flex-direction: column;\n gap: 16px;\n align-items: flex-start;\n }\n }\n`;","import React from \"react\";\n\nimport { Button } from \"../../writer/Button\"\nimport * as cn from \"./Footer.styles\";\n\nexport interface FooterLinkItemsProps {\n label: string;\n href: string;\n}\n\nexport interface FooterProps {\n footnote: React.ReactNode;\n\n kind?: \"minimal\"\n\n logo?: React.ReactNode;\n\n socials?: {\n logo: React.ReactNode;\n href: string\n }[]\n\n links?: {\n header: string;\n items?: FooterLinkItemsProps[]\n }[] | FooterLinkItemsProps[]\n}\n\nexport function Footer(props: FooterProps) {\n if (props.kind === \"minimal\") {\n return <Footer.Minimal {...props} />\n }\n\n return <footer className={cn.Footer}>\n <div part=\"container\">\n <div part=\"content\">\n {\n props.logo && <div part=\"first-column\">\n {props.logo}\n </div>\n }\n\n {props.links?.length && <div part=\"columns\" data-cols={props.links?.length}>\n {props.links?.map((link, index) => (\n <div part=\"col\" key={`${link.header}-${index}`}>\n <div part=\"col-items\">\n <p>{link.header}</p>\n {link.items?.map((item) => (\n <a key={`${item.label}-${index}`} target=\"_blank\" href={item.href}>{item.label}</a>\n ))}\n </div>\n </div>\n ))}\n </div>}\n\n\n <div part=\"social-links\">\n {props.socials?.map((social, index) => (\n <div key={`${social.href}-${index}`}>\n <a target=\"_blank\" href={social.href}>{social.logo}</a>\n </div>\n ))}\n </div>\n </div>\n\n {props.footnote && <hr />}\n\n <div part=\"footnote\">\n {props.footnote}\n </div>\n </div>\n </footer>\n}\n\nFooter.Minimal = function MinimalFooter(props: FooterProps) {\n return <footer className={cn.Footer} data-kind=\"minimal\">\n <div part=\"container\">\n <div part=\"content\">\n {\n props.links?.length && <div part=\"columns\" data-cols={props.links?.length}>\n <div part=\"col\">\n <div part=\"col-items\">\n {props.links?.map((item, index) => (\n <Button\n key={`${item.label}-${index}`} kind=\"tertiary\" href={item.href}>\n {item.label}\n </Button>\n ))}\n </div>\n </div>\n </div>\n }\n\n <div part=\"social-links\">\n {props.socials?.map((social, index) => (\n <Button\n key={`${social.href}-${index}`}\n kind=\"tertiary\"\n href={social.href}\n icon={social.logo}\n />\n ))}\n </div>\n </div>\n </div>\n </footer>\n}","import React, { useEffect, useRef } from 'react';\n\nimport * as cn from \"./SearchButton.styles\";\n\ninterface SearchButtonProps {\n onClick?: () => void;\n placeholder?: string;\n shortcutKeys?: string[];\n fullWidth?: boolean;\n}\n\nexport function SearchButton({\n shortcutKeys = ['⌘', 'K'],\n ...props\n}: SearchButtonProps) {\n useShortcuts(shortcutKeys, () => props.onClick?.());\n\n useEffect(() => {\n // @ts-ignore - !!! FIX IN THE FUTURE !!! its a fix for loading virtual-component:Search twice? original and from plugin - check if exists on prod\n window.__UNSAFE_xyd_search_button_inited = true\n\n return () => {\n // @ts-ignore\n window.__UNSAFE_xyd_search_button_inited = false\n }\n }, [])\n\n return (\n <xyd-search-button\n className={cn.SearchButton}\n aria-label=\"Search\"\n onClick={props.onClick}\n data-fullWidth={props.fullWidth}\n >\n <span part=\"container\">\n <svg\n width={20}\n height={20}\n part=\"icon\"\n viewBox=\"0 0 20 20\"\n >\n <path\n d=\"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z\"\n stroke=\"currentColor\"\n fill=\"none\"\n fillRule=\"evenodd\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n <span part=\"placeholder\">{props.placeholder || \"Search\"}</span>\n </span>\n\n {\n shortcutKeys.length > 0 && (\n <span part=\"keys\">\n {shortcutKeys.map((key, index) => (\n <kbd key={`${key}-${index}`} part=\"key\">{key}</kbd>\n ))}\n </span>\n )\n }\n </xyd-search-button>\n )\n}\n\nfunction useShortcuts(shortcutKeys: string[], onTrigger: () => void): void {\n // Keep latest handler reference to avoid stale closures\n const savedHandler = useRef(onTrigger);\n\n useEffect(() => {\n savedHandler.current = onTrigger;\n }, [onTrigger]);\n\n useEffect(() => {\n // @ts-ignore\n if (window.__UNSAFE_xyd_search_button_inited) {\n return\n }\n\n const listener = (event: KeyboardEvent) => {\n // For single key shortcuts\n if (shortcutKeys.length === 1) {\n if (event.key.toLowerCase() === shortcutKeys[0].toLowerCase()) {\n event.preventDefault();\n\n savedHandler.current();\n }\n return;\n }\n\n // For modifier combinations\n if (shortcutKeys.length === 2) {\n const [modifier, key] = shortcutKeys;\n const pressedKey = event.key.toLowerCase();\n\n const isModifierMatch =\n (modifier === '⌘' && event.metaKey) ||\n (modifier === 'Ctrl' && event.ctrlKey);\n\n if (isModifierMatch && pressedKey === key.toLowerCase()) {\n event.preventDefault();\n\n savedHandler.current();\n }\n }\n };\n\n // Use capture phase and listen to both keydown and keyup\n window.addEventListener('keydown', listener, { capture: true });\n window.addEventListener('keyup', listener, { capture: true });\n\n return () => {\n window.removeEventListener('keydown', listener, { capture: true });\n window.removeEventListener('keyup', listener, { capture: true });\n };\n }, []);\n}","import { css } from \"@linaria/core\";\n\nexport const SearchButton = css`\n @layer defaults {\n background-color: transparent;\n border-radius: var(--xyd-border-radius-large);\n border: 1px solid var(--dark32);\n color: var(--text-primary);\n background: var(--dark16);\n font-size: var(--xyd-font-size-small);\n font-weight: var(--xyd-font-weight-semibold);\n height: 36px;\n justify-content: space-between;\n display: flex;\n align-items: center;\n flex: 1;\n\n padding: 0 8px;\n margin: 12px 0 0;\n user-select: none;\n width: 100%;\n transition: border-color .15s ease;\n\n max-width: var(--xyd-search-width, 300px);\n margin: 0;\n\n cursor: pointer;\n\n &[data-fullWidth] {\n max-width: 100%;\n }\n\n &:hover {\n background: var(--dark16);\n box-shadow: none;\n color: var(--dark48);\n outline: none;\n\n box-shadow: none;\n border-color: var(--dark48);\n }\n \n [part=\"container\"] {\n align-items: center;\n display: flex;\n gap: var(--xyd-padding-small);\n }\n\n [part=\"placeholder\"] {\n display: block !important;\n font-size: var(--xyd-font-size-small);\n color: var(--dark48);\n font-weight: var(--xyd-font-weight-normal);\n }\n\n [part=\"icon\"] {\n stroke-width: 1.4;\n color: var(--dark48) !important;\n height: 15px;\n transition: color .15s var(--cubic-enter);\n }\n \n\n [part=\"keys\"] {\n display: flex;\n gap: 4px;\n min-width: auto;\n }\n\n [part=\"key\"] {\n align-items: center;\n background: var(--dark16);\n border-radius: var(--xyd-border-radius-small);\n box-shadow: none;\n color: var(--dark48);\n display: flex;\n height: 18px;\n line-height: 18px;\n justify-content: center;\n font-size: 12px;\n letter-spacing: 1px;\n position: relative;\n padding: 0;\n margin: 0;\n border: 0px;\n top: 0;\n width: 20px;\n }\n }\n`\n"],"names":["Baseline","title","toolGroups","props","React","createElement","details","className","BaselineHost","summary","span","part","div","map","group","i","key","tool","j","label","data-tool","data-supported","supported","undefined","Footer","kind","Minimal","footer","cn","logo","links","length","data-cols","link","index","header","p","items","item","a","target","href","socials","social","footnote","hr","data-kind","Button","icon","SearchButton","shortcutKeys","onTrigger","savedHandler","useRef","useEffect","current","window","__UNSAFE_xyd_search_button_inited","listener","event","modifier","pressedKey","toLowerCase","metaKey","ctrlKey","preventDefault","addEventListener","capture","removeEventListener","useShortcuts","onClick","xyd-search-button","aria-label","data-fullWidth","fullWidth","svg","width","height","viewBox","path","d","stroke","fill","fillRule","strokeLinecap","strokeLinejoin","placeholder","kbd"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import{useState as t}from"react";function o(o,n,r){const[c,s]=t(!1);return t=>{const e=!c;s(e);const u=r();e?o(u):n(u)}}export{o as u};
|
|
2
|
-
//# sourceMappingURL=useUXClick-
|
|
2
|
+
//# sourceMappingURL=useUXClick-5-G3e-3G.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useUXClick-
|
|
1
|
+
{"version":3,"file":"useUXClick-5-G3e-3G.js","sources":["../src/uxsdk/useUXClick.ts"],"sourcesContent":["import React, {useState} from \"react\";\n\nexport function useUXClick(\n openEvent: (data: any) => void,\n closeEvent: (data: any) => void,\n getData: () => any\n) {\n const [open, setOpen] = useState(false);\n\n return (event: React.MouseEvent) => {\n const newOpen = !open;\n setOpen(newOpen);\n\n const data = getData();\n if (newOpen) {\n openEvent(data);\n } else {\n closeEvent(data);\n }\n };\n}\n"],"names":["useUXClick","openEvent","closeEvent","getData","open","setOpen","useState","event","newOpen","data"],"mappings":"iCAEO,SAASA,EACZC,EACAC,EACAC,GAEA,MAAOC,EAAMC,GAAWC,GAAS,GAEjC,OAAQC,IACJ,MAAMC,GAAWJ,EACjBC,EAAQG,GAER,MAAMC,EAAON,IACTK,EACAP,EAAUQ,GAEVP,EAAWO,GAGvB"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{defineEvents as e}from"openux-js";const a="components.tabs.change",o=e(({CodeSample:e,Framework:a})=>({docs:{code:{example_change:({example:e})=>({...l({Framework:a}),example:e}),tab_change:({tab:o})=>({...r({CodeSample:e,Framework:a}),tab:o}),copy:({code:o})=>({...r({CodeSample:e,Framework:a}),code:(o||"").slice(0,100)+"..."}),scroll_100:()=>({...r({CodeSample:e,Framework:a})}),scroll_depth:({depth:o})=>({...r({CodeSample:e,Framework:a}),depth:o})},details:{open:({label:e})=>({...l({Framework:a}),label:e}),close:({label:e})=>({...l({Framework:a}),label:e})},anchor:{click:({id:e})=>({...l({Framework:a}),id:e})}}}));function r({CodeSample:e,Framework:a}){return{...l({Framework:a}),tab:e?.tab,example:e?.example}}function l({Framework:e}){return{location:e?.location}}export{a as E,o as u};
|
|
2
|
+
//# sourceMappingURL=useUXEvents-Dii3DU11.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useUXEvents-
|
|
1
|
+
{"version":3,"file":"useUXEvents-Dii3DU11.js","sources":["../src/uxsdk/const.ts","../src/uxsdk/useUXEvents.ts"],"sourcesContent":["export const EVENT_COMPONENT_TAB_CHANGE = \"components.tabs.change\"\n","import {defineEvents} from 'openux-js'\n\ninterface NodeCodeSample {\n tab?: string\n example?: string\n code?: string\n}\n\ninterface NodeFramework {\n location: string\n uniformRegion?: string\n}\n\ninterface AnalyticsNodes {\n CodeSample: NodeCodeSample\n Framework: NodeFramework\n}\n\n// TODO: in the future + maybe better API\n// TODO: how to share nodes between packages\n// TODO: node abstraction?\n// TODO: merge abstraction?\nexport const useUXEvents = defineEvents(({CodeSample, Framework}: AnalyticsNodes) => ({\n docs: {\n code: {\n example_change({example}: { example: string }) {\n return {\n ...commonFrameworkProps({Framework}),\n example: example,\n }\n },\n tab_change({tab}: { tab: string }) {\n return {\n ...commonCodeSampleProps({CodeSample, Framework}),\n tab: tab,\n }\n },\n copy({code}: { code: string }) {\n return {\n ...commonCodeSampleProps({CodeSample, Framework}),\n code: (code || \"\").slice(0, 100) + \"...\",\n }\n },\n scroll_100() {\n return {\n ...commonCodeSampleProps({CodeSample, Framework}),\n }\n },\n scroll_depth({depth}: { depth: number }) {\n return {\n ...commonCodeSampleProps({CodeSample, Framework}),\n depth,\n }\n },\n },\n\n details: {\n open({label}: { label: string }) {\n return {\n ...commonFrameworkProps({Framework}),\n label: label,\n }\n },\n close({label}: { label: string }) {\n return {\n ...commonFrameworkProps({Framework}),\n label: label,\n }\n }\n },\n\n anchor: {\n click({id}: { id: string }) {\n return {\n ...commonFrameworkProps({Framework}),\n id: id,\n }\n }\n }\n }\n}))\n\nfunction commonCodeSampleProps({\n CodeSample,\n Framework\n }: {\n CodeSample: NodeCodeSample | undefined\n Framework: NodeFramework | undefined\n}) {\n return {\n ...commonFrameworkProps({Framework}),\n tab: CodeSample?.tab!,\n example: CodeSample?.example!,\n }\n}\n\nfunction commonFrameworkProps({\n Framework\n }: {\n Framework: NodeFramework | undefined\n}) {\n return {\n location: Framework?.location!,\n }\n}\n"],"names":["EVENT_COMPONENT_TAB_CHANGE","useUXEvents","defineEvents","CodeSample","Framework","docs","code","example_change","example","commonFrameworkProps","tab_change","tab","commonCodeSampleProps","copy","slice","scroll_100","scroll_depth","depth","details","open","label","close","anchor","click","id","location"],"mappings":"yCAAO,MAAMA,EAA6B,yBCsB7BC,EAAcC,EAAa,EAAEC,aAAYC,gBAA0B,CAC5EC,KAAM,CACFC,KAAM,CACFC,eAAAA,EAAeC,QAACA,MACL,IACAC,EAAqB,CAACL,cACzBI,QAASA,IAGjBE,WAAAA,EAAWC,IAACA,MACD,IACAC,EAAsB,CAACT,aAAYC,cACtCO,IAAKA,IAGbE,KAAAA,EAAKP,KAACA,MACK,IACAM,EAAsB,CAACT,aAAYC,cACtCE,MAAOA,GAAQ,IAAIQ,MAAM,EAAG,KAAO,QAG3CC,WAAAA,KACW,IACAH,EAAsB,CAACT,aAAYC,gBAG9CY,aAAAA,EAAaC,MAACA,MACH,IACAL,EAAsB,CAACT,aAAYC,cACtCa,WAKZC,QAAS,CACLC,KAAAA,EAAKC,MAACA,MACK,IACAX,EAAqB,CAACL,cACzBgB,MAAOA,IAGfC,MAAAA,EAAMD,MAACA,MACI,IACAX,EAAqB,CAACL,cACzBgB,MAAOA,KAKnBE,OAAQ,CACJC,MAAAA,EAAMC,GAACA,MACI,IACAf,EAAqB,CAACL,cACzBoB,GAAIA,SAOxB,SAASZ,GAAsBT,WACIA,EAAUC,UACVA,IAK/B,MAAO,IACAK,EAAqB,CAACL,cACzBO,IAAKR,GAAYQ,IACjBH,QAASL,GAAYK,QAE7B,CAEA,SAASC,GAAqBL,UACIA,IAI9B,MAAO,CACHqB,SAAUrB,GAAWqB,SAE7B"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{useRef as r,useEffect as t}from"react";function e(e,n={}){const{thresholds:c=[25,50,75,100],onDepthReached:o}=n,s=r(new Set);t(()=>{if(!e.current)return;function r(){const r=e.current;if(!r)return;const{scrollTop:t,scrollHeight:n,clientHeight:u}=r,i=n-u;if(i<=0)return;const l=Math.round(t/i*100);c.forEach(r=>{l>=r&&!s.current.has(r)&&(s.current.add(r),o?.(r))})}const t=e.current;return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}},[e.current,c,o])}export{e as u};
|
|
2
|
+
//# sourceMappingURL=useUXScrollDepth-8_Y9CETh.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useUXScrollDepth-
|
|
1
|
+
{"version":3,"file":"useUXScrollDepth-8_Y9CETh.js","sources":["../src/uxsdk/useUXScrollDepth.ts"],"sourcesContent":["import React, {useEffect, useRef} from \"react\";\n\nexport interface ScrollDepthOptions {\n thresholds?: number[]; // Default: [25, 50, 75, 100]\n onDepthReached?: (depth: number) => void;\n}\n\nexport function useUXScrollDepth(\n ref: React.RefObject<HTMLElement | null>, \n options: ScrollDepthOptions = {}\n) {\n const { thresholds = [25, 50, 75, 100], onDepthReached } = options;\n const reachedDepthsRef = useRef<Set<number>>(new Set());\n\n useEffect(() => {\n if (!ref.current) {\n return\n }\n\n function handleScroll() {\n const element = ref.current;\n if (!element) return;\n\n const { scrollTop, scrollHeight, clientHeight } = element;\n \n // Calculate current scroll percentage\n const scrollableHeight = scrollHeight - clientHeight;\n if (scrollableHeight <= 0) return;\n \n const scrollPercentage = Math.round((scrollTop / scrollableHeight) * 100);\n \n // Check which thresholds have been reached\n thresholds.forEach(threshold => {\n if (scrollPercentage >= threshold && !reachedDepthsRef.current.has(threshold)) {\n reachedDepthsRef.current.add(threshold);\n onDepthReached?.(threshold);\n }\n });\n }\n\n const element = ref.current;\n element.addEventListener('scroll', handleScroll);\n\n return () => {\n element.removeEventListener('scroll', handleScroll);\n };\n }, [ref.current, thresholds, onDepthReached]);\n}\n\n"],"names":["useUXScrollDepth","ref","options","thresholds","onDepthReached","reachedDepthsRef","useRef","Set","useEffect","current","handleScroll","element","scrollTop","scrollHeight","clientHeight","scrollableHeight","scrollPercentage","Math","round","forEach","threshold","has","add","addEventListener","removeEventListener"],"mappings":"8CAOO,SAASA,EACZC,EACAC,EAA8B,IAE9B,MAAMC,WAAEA,EAAa,CAAC,GAAI,GAAI,GAAI,KAAIC,eAAEA,GAAmBF,EACrDG,EAAmBC,EAAoB,IAAIC,KAEjDC,EAAU,KACN,IAAKP,EAAIQ,QACL,OAGJ,SAASC,IACL,MAAMC,EAAUV,EAAIQ,QACpB,IAAKE,EAAS,OAEd,MAAMC,UAAEA,EAASC,aAAEA,EAAYC,aAAEA,GAAiBH,EAG5CI,EAAmBF,EAAeC,EACxC,GAAIC,GAAoB,EAAG,OAE3B,MAAMC,EAAmBC,KAAKC,MAAON,EAAYG,EAAoB,KAGrEZ,EAAWgB,QAAQC,IACXJ,GAAoBI,IAAcf,EAAiBI,QAAQY,IAAID,KAC/Df,EAAiBI,QAAQa,IAAIF,GAC7BhB,IAAiBgB,KAG7B,CAEA,MAAMT,EAAUV,EAAIQ,QAGpB,OAFAE,EAAQY,iBAAiB,SAAUb,GAE5B,KACHC,EAAQa,oBAAoB,SAAUd,KAE3C,CAACT,EAAIQ,QAASN,EAAYC,GACjC"}
|
package/dist/uxsdk.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{E as EVENT_COMPONENT_TAB_CHANGE,u as useUXEvents}from"./useUXEvents-
|
|
1
|
+
export{E as EVENT_COMPONENT_TAB_CHANGE,u as useUXEvents}from"./useUXEvents-Dii3DU11.js";export{u as useUXClick}from"./useUXClick-5-G3e-3G.js";export{u as useUXScrollDepth}from"./useUXScrollDepth-8_Y9CETh.js";import{useRef as e,useCallback as r,useEffect as t}from"react";import"openux-js";function n(n,u,c){const o=e(!1),s=e(!1),i=e(null),l=e(0),m=r(()=>{const e=Date.now();e-l.current>1e3&&(o.current=!0,l.current=e,u())},[u]),a=r(()=>{i.current&&clearTimeout(i.current),i.current=setTimeout(()=>{o.current=!1,i.current=null},50)},[]);t(()=>{if(n.current)return n.current.addEventListener("mouseenter",m),n.current.addEventListener("mouseleave",a),()=>{n.current&&(n.current.removeEventListener("mouseenter",m),n.current.removeEventListener("mouseleave",a)),i.current&&clearTimeout(i.current)}},[n.current,m,a]);const v=r(()=>{i.current&&(clearTimeout(i.current),i.current=null),s.current=!1,o.current&&(o.current=!1,s.current=!0,c())},[c]);t(()=>(document.addEventListener("visibilitychange",v),()=>{document.removeEventListener("visibilitychange",v),i.current&&clearTimeout(i.current)}),[v])}export{n as useUXUnreachableElementTracker};
|
|
2
2
|
//# sourceMappingURL=uxsdk.js.map
|
package/dist/uxsdk.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"uxsdk.js","sources":["../src/uxsdk/useUXUnreachableElementTracker.ts"],"sourcesContent":["import { useEffect, useRef, useCallback } from \"react\"\n\n/**\n * TODO: not ideal solution cuz sometimes has a bug but currently its enough\n * \n * This hook is used to track the hover and click events of an unreachable element.\n */\nexport function useUXUnreachableElementTracker(\n element: React.RefObject<HTMLElement | null>,\n hoverCb: () => void,\n clickCb: () => void\n) {\n const hover = useRef(false)\n const click = useRef(false)\n const mouseLeaveTimeout = useRef<number | null>(null)\n\n const lastHoverTime = useRef(0)\n const DEBOUNCE_DELAY = 1000 // 1 second debounce\n const MOUSE_LEAVE_DELAY = 50 // 50ms delay to allow visibilitychange to fire first\n\n const handleMouseEnter = useCallback(() => {\n const now = Date.now()\n if (now - lastHoverTime.current > DEBOUNCE_DELAY) {\n hover.current = true\n lastHoverTime.current = now\n hoverCb()\n }\n }, [hoverCb])\n\n const handleMouseLeave = useCallback(() => {\n // console.log(\"mouse leave\")\n // Clear any existing timeout\n if (mouseLeaveTimeout.current) {\n clearTimeout(mouseLeaveTimeout.current)\n }\n \n // Delay setting hover to false to allow visibilitychange to fire first\n mouseLeaveTimeout.current = setTimeout(() => {\n hover.current = false\n mouseLeaveTimeout.current = null\n }, MOUSE_LEAVE_DELAY)\n }, [])\n\n useEffect(() => {\n if (!element.current) {\n return\n }\n\n element.current.addEventListener(\"mouseenter\", handleMouseEnter)\n element.current.addEventListener(\"mouseleave\", handleMouseLeave)\n\n return () => {\n if (element.current) {\n element.current.removeEventListener(\"mouseenter\", handleMouseEnter)\n element.current.removeEventListener(\"mouseleave\", handleMouseLeave)\n }\n // Clean up timeout on unmount\n if (mouseLeaveTimeout.current) {\n clearTimeout(mouseLeaveTimeout.current)\n }\n }\n\n }, [element.current, handleMouseEnter, handleMouseLeave])\n\n // detect visibility loss (e.g. new tab opened)\n const handleVisibilityChange = useCallback(() => {\n // Clear the mouseleave timeout since visibility change indicates a click\n if (mouseLeaveTimeout.current) {\n clearTimeout(mouseLeaveTimeout.current)\n mouseLeaveTimeout.current = null\n }\n \n click.current = false\n // console.log(hover, 7777)\n if (hover.current) {\n hover.current = false\n click.current = true\n clickCb()\n }\n }, [clickCb])\n\n useEffect(() => {\n // function handleBeforeUnload() {\n // console.log(hover.current)\n // console.log(111)\n // }\n\n // window.addEventListener('beforeunload', handleBeforeUnload);\n document.addEventListener('visibilitychange', handleVisibilityChange);\n\n return () => {\n // window.removeEventListener('beforeunload', handleBeforeUnload)\n document.removeEventListener('visibilitychange', handleVisibilityChange)\n // Clean up timeout on unmount\n if (mouseLeaveTimeout.current) {\n clearTimeout(mouseLeaveTimeout.current)\n }\n }\n }, [handleVisibilityChange]) // Add handleVisibilityChange back to dependencies since it's now memoized\n}"],"names":["useUXUnreachableElementTracker","element","hoverCb","clickCb","hover","useRef","click","mouseLeaveTimeout","lastHoverTime","handleMouseEnter","useCallback","now","Date","current","handleMouseLeave","clearTimeout","setTimeout","useEffect","addEventListener","removeEventListener","handleVisibilityChange","document"],"mappings":"
|
|
1
|
+
{"version":3,"file":"uxsdk.js","sources":["../src/uxsdk/useUXUnreachableElementTracker.ts"],"sourcesContent":["import { useEffect, useRef, useCallback } from \"react\"\n\n/**\n * TODO: not ideal solution cuz sometimes has a bug but currently its enough\n * \n * This hook is used to track the hover and click events of an unreachable element.\n */\nexport function useUXUnreachableElementTracker(\n element: React.RefObject<HTMLElement | null>,\n hoverCb: () => void,\n clickCb: () => void\n) {\n const hover = useRef(false)\n const click = useRef(false)\n const mouseLeaveTimeout = useRef<number | null>(null)\n\n const lastHoverTime = useRef(0)\n const DEBOUNCE_DELAY = 1000 // 1 second debounce\n const MOUSE_LEAVE_DELAY = 50 // 50ms delay to allow visibilitychange to fire first\n\n const handleMouseEnter = useCallback(() => {\n const now = Date.now()\n if (now - lastHoverTime.current > DEBOUNCE_DELAY) {\n hover.current = true\n lastHoverTime.current = now\n hoverCb()\n }\n }, [hoverCb])\n\n const handleMouseLeave = useCallback(() => {\n // console.log(\"mouse leave\")\n // Clear any existing timeout\n if (mouseLeaveTimeout.current) {\n clearTimeout(mouseLeaveTimeout.current)\n }\n \n // Delay setting hover to false to allow visibilitychange to fire first\n mouseLeaveTimeout.current = setTimeout(() => {\n hover.current = false\n mouseLeaveTimeout.current = null\n }, MOUSE_LEAVE_DELAY)\n }, [])\n\n useEffect(() => {\n if (!element.current) {\n return\n }\n\n element.current.addEventListener(\"mouseenter\", handleMouseEnter)\n element.current.addEventListener(\"mouseleave\", handleMouseLeave)\n\n return () => {\n if (element.current) {\n element.current.removeEventListener(\"mouseenter\", handleMouseEnter)\n element.current.removeEventListener(\"mouseleave\", handleMouseLeave)\n }\n // Clean up timeout on unmount\n if (mouseLeaveTimeout.current) {\n clearTimeout(mouseLeaveTimeout.current)\n }\n }\n\n }, [element.current, handleMouseEnter, handleMouseLeave])\n\n // detect visibility loss (e.g. new tab opened)\n const handleVisibilityChange = useCallback(() => {\n // Clear the mouseleave timeout since visibility change indicates a click\n if (mouseLeaveTimeout.current) {\n clearTimeout(mouseLeaveTimeout.current)\n mouseLeaveTimeout.current = null\n }\n \n click.current = false\n // console.log(hover, 7777)\n if (hover.current) {\n hover.current = false\n click.current = true\n clickCb()\n }\n }, [clickCb])\n\n useEffect(() => {\n // function handleBeforeUnload() {\n // console.log(hover.current)\n // console.log(111)\n // }\n\n // window.addEventListener('beforeunload', handleBeforeUnload);\n document.addEventListener('visibilitychange', handleVisibilityChange);\n\n return () => {\n // window.removeEventListener('beforeunload', handleBeforeUnload)\n document.removeEventListener('visibilitychange', handleVisibilityChange)\n // Clean up timeout on unmount\n if (mouseLeaveTimeout.current) {\n clearTimeout(mouseLeaveTimeout.current)\n }\n }\n }, [handleVisibilityChange]) // Add handleVisibilityChange back to dependencies since it's now memoized\n}"],"names":["useUXUnreachableElementTracker","element","hoverCb","clickCb","hover","useRef","click","mouseLeaveTimeout","lastHoverTime","handleMouseEnter","useCallback","now","Date","current","handleMouseLeave","clearTimeout","setTimeout","useEffect","addEventListener","removeEventListener","handleVisibilityChange","document"],"mappings":"iSAOO,SAASA,EACZC,EACAC,EACAC,GAEA,MAAMC,EAAQC,GAAO,GACfC,EAAQD,GAAO,GACfE,EAAoBF,EAAsB,MAE1CG,EAAgBH,EAAO,GAIvBI,EAAmBC,EAAY,KACjC,MAAMC,EAAMC,KAAKD,MACbA,EAAMH,EAAcK,QALL,MAMfT,EAAMS,SAAU,EAChBL,EAAcK,QAAUF,EACxBT,MAEL,CAACA,IAEEY,EAAmBJ,EAAY,KAG7BH,EAAkBM,SAClBE,aAAaR,EAAkBM,SAInCN,EAAkBM,QAAUG,WAAW,KACnCZ,EAAMS,SAAU,EAChBN,EAAkBM,QAAU,MArBV,KAuBvB,IAEHI,EAAU,KACN,GAAKhB,EAAQY,QAOb,OAHAZ,EAAQY,QAAQK,iBAAiB,aAAcT,GAC/CR,EAAQY,QAAQK,iBAAiB,aAAcJ,GAExC,KACCb,EAAQY,UACRZ,EAAQY,QAAQM,oBAAoB,aAAcV,GAClDR,EAAQY,QAAQM,oBAAoB,aAAcL,IAGlDP,EAAkBM,SAClBE,aAAaR,EAAkBM,WAIxC,CAACZ,EAAQY,QAASJ,EAAkBK,IAGvC,MAAMM,EAAyBV,EAAY,KAEnCH,EAAkBM,UAClBE,aAAaR,EAAkBM,SAC/BN,EAAkBM,QAAU,MAGhCP,EAAMO,SAAU,EAEZT,EAAMS,UACNT,EAAMS,SAAU,EAChBP,EAAMO,SAAU,EAChBV,MAEL,CAACA,IAEJc,EAAU,KAONI,SAASH,iBAAiB,mBAAoBE,GAEvC,KAEHC,SAASF,oBAAoB,mBAAoBC,GAE7Cb,EAAkBM,SAClBE,aAAaR,EAAkBM,WAGxC,CAACO,GACR"}
|
package/dist/views.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"views.js","sources":["../src/views/HomeView/HomeView.tsx","../src/views/HomeView/HomeView.styles.tsx"],"sourcesContent":["import React from \"react\"\nimport * as cn from \"./HomeView.styles\";\n\nexport interface HomeViewProps {\n header: React.ReactNode\n body: React.ReactNode\n footer: React.ReactNode\n}\n\nexport function HomeView({header, body, footer}: HomeViewProps) {\n return <div className={cn.HomeViewHost}>\n {header}\n {body}\n {footer}\n </div>\n}\n\nexport interface HomeViewBodyProps {\n children: React.ReactNode\n kind?: \"secondary\"\n}\n\nHomeView.Body = function HomeViewBody({children, kind}: HomeViewBodyProps) {\n return <div className={`\n ${cn.HomeViewBodyHost}\n ${kind === \"secondary\" ? cn.HomeViewBodyHostSecondary : \"\"}\n `}>\n <div className={cn.HomeViewBodyContent}>\n {children}\n </div>\n </div>\n}\n\n\n","import {css} from \"@linaria/core\";\n\nexport const HomeViewHost = css`\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n`;\n\nexport const HomeViewBodyHost = css`\n background: radial-gradient(circle, hsl(0 0% 9% / .3) 1px, transparent 1px);\n backdrop-filter: sepia(10%);\n background-size: 30px 30px;\n padding: 60px;\n flex: 1;\n`;\n\nexport const HomeViewBodyHostSecondary = css`\n background: repeating-linear-gradient(to right, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px), repeating-linear-gradient(to bottom, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px);\n`;\n\nexport const HomeViewBodyContent = css`\n width: 1200px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n gap: 80px;\n\n @media (max-width: 1200px) {\n width: 100%;\n padding: 0 20px;\n }\n\n @media (max-width: 768px) {\n width: 100%;\n padding: 0 10px;\n }\n`; "],"names":["HomeView","header","body","footer","React","createElement","className","HomeViewHost","Body","children","kind","HomeViewBodyHostSecondary","HomeViewBodyContent"],"mappings":"
|
|
1
|
+
{"version":3,"file":"views.js","sources":["../src/views/HomeView/HomeView.tsx","../src/views/HomeView/HomeView.styles.tsx"],"sourcesContent":["import React from \"react\"\nimport * as cn from \"./HomeView.styles\";\n\nexport interface HomeViewProps {\n header: React.ReactNode\n body: React.ReactNode\n footer: React.ReactNode\n}\n\nexport function HomeView({header, body, footer}: HomeViewProps) {\n return <div className={cn.HomeViewHost}>\n {header}\n {body}\n {footer}\n </div>\n}\n\nexport interface HomeViewBodyProps {\n children: React.ReactNode\n kind?: \"secondary\"\n}\n\nHomeView.Body = function HomeViewBody({children, kind}: HomeViewBodyProps) {\n return <div className={`\n ${cn.HomeViewBodyHost}\n ${kind === \"secondary\" ? cn.HomeViewBodyHostSecondary : \"\"}\n `}>\n <div className={cn.HomeViewBodyContent}>\n {children}\n </div>\n </div>\n}\n\n\n","import {css} from \"@linaria/core\";\n\nexport const HomeViewHost = css`\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n`;\n\nexport const HomeViewBodyHost = css`\n background: radial-gradient(circle, hsl(0 0% 9% / .3) 1px, transparent 1px);\n backdrop-filter: sepia(10%);\n background-size: 30px 30px;\n padding: 60px;\n flex: 1;\n`;\n\nexport const HomeViewBodyHostSecondary = css`\n background: repeating-linear-gradient(to right, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px), repeating-linear-gradient(to bottom, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px);\n`;\n\nexport const HomeViewBodyContent = css`\n width: 1200px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n gap: 80px;\n\n @media (max-width: 1200px) {\n width: 100%;\n padding: 0 20px;\n }\n\n @media (max-width: 768px) {\n width: 100%;\n padding: 0 10px;\n }\n`; "],"names":["HomeView","header","body","footer","React","createElement","div","className","HomeViewHost","Body","children","kind","HomeViewBodyHostSecondary","HomeViewBodyContent"],"mappings":"qBASO,SAASA,GAASC,OAACA,EAAMC,KAAEA,EAAIC,OAAEA,IACpC,OAAOC,EAAAC,cAACC,MAAAA,CAAIC,UCRHC,WDSJP,EACAC,EACAC,EAET,CAOAH,EAASS,KAAO,UAAsBC,SAACA,EAAQC,KAAEA,IAC7C,OAAOP,EAAAC,cAACC,MAAAA,CAAIC,UAAW,8BAER,cAATI,ECTGC,UDSmD,YAExDR,EAAAC,cAACC,MAAAA,CAAIC,UCPAM,YDQAH,GAGb"}
|
package/dist/writer.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{A as Anchor,B as Badge,c as Banner,G as GuideCard,H as Heading,I as IconSocial,L as List,a as ListOl,N as NavLinks,S as Steps,T as Table,b as Tabs,V as VideoGuide}from"./VideoGuide-
|
|
1
|
+
export{A as Anchor,B as Badge,c as Banner,G as GuideCard,H as Heading,I as IconSocial,L as List,a as ListOl,N as NavLinks,S as Steps,T as Table,b as Tabs,V as VideoGuide}from"./VideoGuide-BbIalYlR.js";export{B as Blockquote,c as Breadcrumbs,a as Callout,d as Card,b as Code,C as ColorSchemeButton,D as Details,H as Hr,I as Image,U as Update,u as useColorScheme}from"./Update-BZAgVqnP.js";export{B as Button}from"./Button-DsQ-CpNa.js";import{I as e}from"./Icon-Bsw2j9bV.js";export{a as IconProvider}from"./Icon-Bsw2j9bV.js";import r from"react";export{T as Text}from"./TabsAnalytics-CZdY7fWP.js";import"./useUXEvents-Dii3DU11.js";import"radix-ui";import"lucide-react";import"./useUXClick-5-G3e-3G.js";import"openux-js";function t(e){return e}function s({children:e,className:a}){return r.createElement("pre",{className:`p1vb39qj ${a||""}`},e)}function o(e){return e}var n="TocCard-module_TocCardHost__pT0XJ";function i({title:a,description:t,href:s,className:o,icon:i,as:c}){const m=c||l;return r.createElement("xyd-toccard",{className:`${n} ${o||""}`},r.createElement("div",{part:"container"},r.createElement(m,{part:"link",href:s,target:"_blank",rel:"noreferrer"},r.createElement("div",{part:"title-container"},r.createElement("div",{part:"title"},a),i&&r.createElement(e,{name:i,size:16})),r.createElement("div",{part:"description"},t))))}function l({children:e,href:a,...t}){return r.createElement("a",{href:a,...t},e)}export{t as DetailsPropsProps,e as Icon,s as Pre,o as TabsProps,i as TocCard};
|
|
2
2
|
//# sourceMappingURL=writer.js.map
|
package/dist/writer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"writer.js","sources":["../src/writer/Details/DetailsProps.tsx","../src/writer/Pre/Pre.tsx","../src/writer/Tabs/TabsProps.tsx","../src/writer/TocCard/TocCard.tsx"],"sourcesContent":["export interface DetailsProps {\n /** Content to be displayed inside the details element */\n children: React.ReactNode;\n\n /** Label text displayed in the summary */\n label: string;\n\n /** Optional icon element to be displayed in the summary */\n icon?: React.ReactElement;\n\n /** Optional CSS class name for custom styling */\n className?: string;\n\n /**\n * Which visual style to use.\n * @default 'primary'\n */\n kind?: 'primary' | 'secondary' | 'tertiary';\n\n /**\n * Title text or element displayed in the summary.\n * Required when `kind` is 'secondary' or 'tertiary'.\n */\n title?: React.ReactNode;\n}\n\n/**\n * Props for the Details component\n * \n * @category Component\n */\nexport function DetailsProps(props: DetailsProps) {\n return props\n}","import React from \"react\"\n\nimport * as cn from \"./Pre.styles\"\n\nexport interface PreProps {\n children: React.ReactNode\n className?: string\n}\n\nexport function Pre({ children, className }: PreProps) {\n return <pre className={`${cn.PreHost} ${className || \"\"}`}>\n {children}\n </pre>\n}","export interface TabsProps {\n /** The kind of tabs to render. If not provided, the component will render the primary tabs. */\n kind?: 'secondary' | null\n}\n\n/**\n * Props for the Tabs component\n * \n * @category Component\n */\nexport function TabsProps(props: TabsProps) {\n return props\n}","import React from \"react\";\n\nimport cn from \"./TocCard.module.css\";\nimport { Icon } from \"../../../writer\";\n\ninterface TocCardProps {\n title: string;\n description: string;\n href: string;\n className?: string;\n icon?: string;\n as?: React.ElementType;\n}\n\nexport function TocCard({ title, description, href, className, icon, as }: TocCardProps) {\n const Link = as || $Link;\n\n return <xyd-toccard\n className={`${cn.TocCardHost} ${className || \"\"}`}\n >\n <div part=\"container\">\n <Link\n part=\"link\"\n href={href}\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n <div part=\"title-container\">\n <div part=\"title\">{title}</div>\n {icon && <Icon name={icon} size={16} />}\n </div>\n <div part=\"description\">\n {description}\n </div>\n </Link>\n </div>\n </xyd-toccard>\n}\n\nfunction $Link({ children, href, ...props }: React.ComponentProps<'a'>) {\n return <a href={href} {...props}>{children}</a>\n}"],"names":["DetailsProps","props","Pre","children","className","React","createElement","TabsProps","TocCard","title","description","href","icon","as","Link","$Link","cn","part","target","rel","Icon","name","size","
|
|
1
|
+
{"version":3,"file":"writer.js","sources":["../src/writer/Details/DetailsProps.tsx","../src/writer/Pre/Pre.tsx","../src/writer/Tabs/TabsProps.tsx","../src/writer/TocCard/TocCard.tsx"],"sourcesContent":["export interface DetailsProps {\n /** Content to be displayed inside the details element */\n children: React.ReactNode;\n\n /** Label text displayed in the summary */\n label: string;\n\n /** Optional icon element to be displayed in the summary */\n icon?: React.ReactElement;\n\n /** Optional CSS class name for custom styling */\n className?: string;\n\n /**\n * Which visual style to use.\n * @default 'primary'\n */\n kind?: 'primary' | 'secondary' | 'tertiary';\n\n /**\n * Title text or element displayed in the summary.\n * Required when `kind` is 'secondary' or 'tertiary'.\n */\n title?: React.ReactNode;\n}\n\n/**\n * Props for the Details component\n * \n * @category Component\n */\nexport function DetailsProps(props: DetailsProps) {\n return props\n}","import React from \"react\"\n\nimport * as cn from \"./Pre.styles\"\n\nexport interface PreProps {\n children: React.ReactNode\n className?: string\n}\n\nexport function Pre({ children, className }: PreProps) {\n return <pre className={`${cn.PreHost} ${className || \"\"}`}>\n {children}\n </pre>\n}","export interface TabsProps {\n /** The kind of tabs to render. If not provided, the component will render the primary tabs. */\n kind?: 'secondary' | null\n}\n\n/**\n * Props for the Tabs component\n * \n * @category Component\n */\nexport function TabsProps(props: TabsProps) {\n return props\n}","import React from \"react\";\n\nimport cn from \"./TocCard.module.css\";\nimport { Icon } from \"../../../writer\";\n\ninterface TocCardProps {\n title: string;\n description: string;\n href: string;\n className?: string;\n icon?: string;\n as?: React.ElementType;\n}\n\nexport function TocCard({ title, description, href, className, icon, as }: TocCardProps) {\n const Link = as || $Link;\n\n return <xyd-toccard\n className={`${cn.TocCardHost} ${className || \"\"}`}\n >\n <div part=\"container\">\n <Link\n part=\"link\"\n href={href}\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n <div part=\"title-container\">\n <div part=\"title\">{title}</div>\n {icon && <Icon name={icon} size={16} />}\n </div>\n <div part=\"description\">\n {description}\n </div>\n </Link>\n </div>\n </xyd-toccard>\n}\n\nfunction $Link({ children, href, ...props }: React.ComponentProps<'a'>) {\n return <a href={href} {...props}>{children}</a>\n}"],"names":["DetailsProps","props","Pre","children","className","React","createElement","pre","TabsProps","TocCard","title","description","href","icon","as","Link","$Link","xyd-toccard","cn","div","part","target","rel","Icon","name","size","a"],"mappings":"8sBA+BO,SAASA,EAAaC,GACzB,OAAOA,CACX,CCxBO,SAASC,GAAIC,SAAEA,EAAQC,UAAEA,IAC5B,OAAOC,EAAAC,cAACC,MAAAA,CAAIH,UAAW,YAAiBA,GAAa,MAChDD,EAET,CCHO,SAASK,EAAUP,GACtB,OAAOA,CACX,2CCEO,SAASQ,GAAQC,MAAEA,EAAKC,YAAEA,EAAWC,KAAEA,EAAIR,UAAEA,EAASS,KAAEA,EAAIC,GAAEA,IACjE,MAAMC,EAAOD,GAAME,EAEnB,OAAOX,EAAAC,cAACW,cAAAA,CACJb,UAAW,GAAGc,KAAkBd,GAAa,MAE7CC,EAAAC,cAACa,MAAAA,CAAIC,KAAK,aACNf,EAAAC,cAACS,EAAAA,CACGK,KAAK,OACLR,KAAMA,EACNS,OAAO,SACPC,IAAI,cAEJjB,EAAAC,cAACa,MAAAA,CAAIC,KAAK,mBACNf,EAAAC,cAACa,MAAAA,CAAIC,KAAK,SAASV,GAClBG,GAAQR,EAAAC,cAACiB,EAAAA,CAAKC,KAAMX,EAAMY,KAAM,MAErCpB,EAAAC,cAACa,MAAAA,CAAIC,KAAK,eACLT,KAKrB,CAEA,SAASK,GAAMb,SAAEA,EAAQS,KAAEA,KAASX,IAChC,OAAOI,EAAAC,cAACoB,IAAAA,CAAEd,KAAMA,KAAUX,GAAQE,EACtC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xyd-js/components",
|
|
3
|
-
"version": "0.0.0-build-
|
|
3
|
+
"version": "0.0.0-build-aebf977-20251203155725",
|
|
4
4
|
"description": "",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"@code-hike/lighter": "^1.0.3",
|
|
50
50
|
"openux-js": "0.0.0-pre.1",
|
|
51
51
|
"react": "^19.1.0",
|
|
52
|
-
"@xyd-js/core": "0.0.0-build-
|
|
52
|
+
"@xyd-js/core": "0.0.0-build-aebf977-20251203155725"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@linaria/core": "^6.2.0",
|
package/rollup.config.js
CHANGED
package/dist/Button-D1sRSUU2.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import t from"react";import{I as e}from"./Icon-DAUxBCx7.js";function a({children:a,kind:i="primary",theme:r,size:o="md",className:s,onClick:c,disabled:l=!1,icon:d,iconPosition:m="left",href:p}){let h=p?"a":"button",f={};return p&&!l&&(f={href:p,target:n(p)?"_blank":void 0}),"ghost"===r&&(i=void 0),t.createElement(h,Object.assign({className:`bjtblcp ${s||""}`,"data-button":!0,"data-kind":i,"data-size":o,"data-theme":r,"data-has-icon":!!d,"data-icon-position":m,onClick:c,disabled:l,"aria-disabled":l?"true":void 0},f),d&&"left"===m&&t.createElement("span",{part:"icon"},"string"==typeof d?t.createElement(e,{name:d}):d),a?t.createElement("span",{part:"content"},a):null,d&&"right"===m&&t.createElement("span",{part:"icon"},"string"==typeof d?t.createElement(e,{name:d}):d))}function n(t){return t.startsWith("http")||t.startsWith("//")}export{a as B};
|
|
2
|
-
//# sourceMappingURL=Button-D1sRSUU2.js.map
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import e,{useRef as n,forwardRef as t,useState as r,useEffect as o,createContext as a,use as i,Suspense as l,useContext as c}from"react";import{c as s,d as u,e as d,f,g as m,h as p,i as h,j as v,k as g,_ as y,I as b,a as k}from"./Icon-DAUxBCx7.js";import{u as E,T as x}from"./TabsAnalytics-CunSa7pG.js";import{extractAnnotations as j,highlight as w,LANG_NAMES as N}from"@code-hike/lighter";import _ from"./coder/themes/cosmo.js";import{UXNode as S}from"openux-js";import{u as O,E as C}from"./useUXEvents-CVHyMwm7.js";import{u as A}from"./useUXScrollDepth-DuzQBuHV.js";import{Tabs as L}from"radix-ui";import{CheckCheck as T,Copy as I}from"lucide-react";function z(e,n,t){return R.apply(this,arguments)}function R(){return R=s(u().m(function e(n,t,r){var o,a,i,l,c;return u().w(function(e){for(;;)switch(e.n){case 0:return o=[],a=n,e.n=1,P(a,t,r);case 1:return i=e.v,l=i.code,c=i.annotations,o=[].concat(d(o),d(c)),a=l,e.a(2,{code:a,annotations:o})}},e)})),R.apply(this,arguments)}function P(e,n){return $.apply(this,arguments)}function $(){return $=s(u().m(function e(n,t){var r,o,a,i,l,c=arguments;return u().w(function(e){for(;;)switch(e.n){case 0:return r=c.length>2&&void 0!==c[2]?c[2]:"!",o=function(e){var n,t="(?:\\\\.|[^\\\\/])+",o=new RegExp("\\s*(".concat(r,"?[\\w-]+)?(\\[\\/").concat(t,"\\/[a-zA-Z]*\\])(.*)$")),a=new RegExp("\\s*(".concat(r,"?[\\w-]+)?(\\(\\/").concat(t,"\\/[a-zA-Z]*\\))(.*)$")),i=new RegExp("\\s*(".concat(r,"?[\\w-]+)?(\\([^\\)]*\\)|\\[[^\\]]*\\])?(.*)$")),l=e.match(o)||e.match(a)||e.match(i);if(!l)return null;var c=l[1],s=l[2],u=null===(n=l[3])||void 0===n?void 0:n.trim();return c&&c.startsWith(r)?{name:c.slice(r.length),rangeString:s,query:u}:null},e.n=1,j(n,t,o);case 1:return a=e.v,i=a.code,l=a.annotations,e.a(2,{code:i,annotations:l})}},e)})),$.apply(this,arguments)}function M(e){return!q(e)}function q(e){return e.hasOwnProperty("lineNumber")}function F(e){return"string"==typeof e}var H=["color"];function B(){return B=s(u().m(function e(n,t){var r,o,a,i,l,c,s,d,m,p,h,v,g,y,b=arguments;return u().w(function(e){for(;;)switch(e.n){case 0:return r=b.length>2&&void 0!==b[2]?b[2]:{},o=n.value,a=n.lang,i=void 0===a?"txt":a,N.includes(i)||(console.warn('Code Hike warning: Unknown language "'.concat(i,'"')),i="txt"),e.n=1,z(o,i,r.annotationPrefix||"!");case 1:return l=e.v,c=l.code,s=l.annotations,e.n=2,w(c,i,t,{annotations:[],scopes:!1});case 2:return d=e.v,m=d.lines,p=d.lang,h=d.style,v=U(m),g=W(v),y=X(g),e.a(2,f(f({},n),{},{code:c,tokens:y,lang:p,annotations:D(s),themeName:"string"==typeof t?t:(null==t?void 0:t.name)||"unknown",style:h}))}},e)})),B.apply(this,arguments)}function D(e){var n,t=[],r=m(e);try{for(r.s();!(n=r.n()).done;){var o,a=n.value,i=a.name,l=a.query,c=a.ranges,s=m(c);try{for(s.s();!(o=s.n()).done;){var u=o.value;if(u.lineNumber){var d=u.lineNumber,f=u.fromColumn,p=u.toColumn;t.push({name:i,query:l,lineNumber:d,fromColumn:f,toColumn:p})}else{var h=u.fromLineNumber,v=u.toLineNumber;t.push({name:i,query:l,fromLineNumber:h,toLineNumber:v})}}}catch(e){s.e(e)}finally{s.f()}}}catch(e){r.e(e)}finally{r.f()}return t}function U(e){var n=[];return e.forEach(function(t,r){if("lines"in t)throw new Error("Shouldnt be groups");var o=function(e){return e.map(function(e){if("tokens"in e)throw new Error("Shouldnt be groups");var n=[e.content],t=e.style||{},r=t.color,o=p(t,H);return n.push(r),Object.keys(o).length&&n.push(o),n})}(t.tokens);n.push.apply(n,d(o)),r<e.length-1&&n.push("\n")}),n}function W(e){var n=[];return e.forEach(function(e){if(F(e))n.push(e);else{var t=function(e){var n=e.trim(),t=e.slice(0,e.indexOf(n)),r=e.slice(e.indexOf(n)+n.length);return[t,n,r]}(e[0]),r=h(t,3),o=r[0],a=r[1],i=r[2];if((null==o?void 0:o.length)&&n.push(o),a.length){var l=d(e);l[0]=a,n.push(l)}(null==i?void 0:i.length)&&n.push(i)}}),n}function X(e){var n=[];return e.forEach(function(e){if(F(e)){var t=n[n.length-1];t&&F(t)?n[n.length-1]+=e:""!==e&&n.push(e)}else e[0].length>0&&n.push(e)}),n}var G,V={exports:{}},J={};var K,Y,Z={};function Q(){return K||(K=1,"production"!==process.env.NODE_ENV&&function(){function n(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===_?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case p:return"Fragment";case g:return"Profiler";case h:return"StrictMode";case E:return"Suspense";case x:return"SuspenseList";case N:return"Activity"}if("object"===v(e))switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case m:return"Portal";case b:return e.displayName||"Context";case y:return(e._context.displayName||"Context")+".Consumer";case k:var t=e.render;return(e=e.displayName)||(e=""!==(e=t.displayName||t.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case j:return null!==(t=e.displayName||null)?t:n(e.type)||"Memo";case w:t=e._payload,e=e._init;try{return n(e(t))}catch(e){}}return null}function t(e){return""+e}function r(e){try{t(e);var n=!1}catch(e){n=!0}if(n){var r=(n=console).error,o="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return r.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),t(e)}}function o(e){if(e===p)return"<>";if("object"===v(e)&&null!==e&&e.$$typeof===w)return"<...>";try{var t=n(e);return t?"<"+t+">":"<...>"}catch(e){return"<...>"}}function a(){return Error("react-stack-top-frame")}function i(){var e=n(this.type);return L[e]||(L[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),void 0!==(e=this.props.ref)?e:null}function l(e,t,o,a,l,s){var d,m=t.children;if(void 0!==m)if(a)if(C(m)){for(a=0;a<m.length;a++)c(m[a]);Object.freeze&&Object.freeze(m)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else c(m);if(O.call(t,"key")){m=n(e);var p=Object.keys(t).filter(function(e){return"key"!==e});a=0<p.length?"{key: someKey, "+p.join(": ..., ")+": ...}":"{key: someKey}",z[m+a]||(p=0<p.length?"{"+p.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',a,m,p,m),z[m+a]=!0)}if(m=null,void 0!==o&&(r(o),m=""+o),function(e){if(O.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return void 0!==e.key}(t)&&(r(t.key),m=""+t.key),"key"in t)for(var h in o={},t)"key"!==h&&(o[h]=t[h]);else o=t;return m&&function(e,n){function t(){u||(u=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",n))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(o,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(e,n,t,r,o,a){var l=t.ref;return e={$$typeof:f,type:e,key:n,props:t,_owner:r},null!==(void 0!==l?l:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:i}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:o}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:a}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,m,o,null===(d=S.A)?null:d.getOwner(),l,s)}function c(e){s(e)?e._store&&(e._store.validated=1):"object"===v(e)&&null!==e&&e.$$typeof===w&&("fulfilled"===e._payload.status?s(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function s(e){return"object"===v(e)&&null!==e&&e.$$typeof===f}var u,d=e,f=Symbol.for("react.transitional.element"),m=Symbol.for("react.portal"),p=Symbol.for("react.fragment"),h=Symbol.for("react.strict_mode"),g=Symbol.for("react.profiler"),y=Symbol.for("react.consumer"),b=Symbol.for("react.context"),k=Symbol.for("react.forward_ref"),E=Symbol.for("react.suspense"),x=Symbol.for("react.suspense_list"),j=Symbol.for("react.memo"),w=Symbol.for("react.lazy"),N=Symbol.for("react.activity"),_=Symbol.for("react.client.reference"),S=d.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,O=Object.prototype.hasOwnProperty,C=Array.isArray,A=console.createTask?console.createTask:function(){return null},L={},T=(d={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(d,a)(),I=A(o(a)),z={};Z.Fragment=p,Z.jsx=function(e,n,t){var r=1e4>S.recentlyCreatedOwnerStacks++;return l(e,n,t,!1,r?Error("react-stack-top-frame"):T,r?A(o(e)):I)},Z.jsxs=function(e,n,t){var r=1e4>S.recentlyCreatedOwnerStacks++;return l(e,n,t,!0,r?Error("react-stack-top-frame"):T,r?A(o(e)):I)}}()),Z}var ee=(Y||(Y=1,"production"===process.env.NODE_ENV?V.exports=function(){if(G)return J;G=1;var e=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function t(n,t,r){var o=null;if(void 0!==r&&(o=""+r),void 0!==t.key&&(o=""+t.key),"key"in t)for(var a in r={},t)"key"!==a&&(r[a]=t[a]);else r=t;return t=r.ref,{$$typeof:e,type:n,key:o,ref:void 0!==t?t:null,props:r}}return J.Fragment=n,J.jsx=t,J.jsxs=t,J}():V.exports=Q()),V.exports);function ne(e,n,t){if("children"===n)e.children=t||e.children;else if("_ref"===n)e._ref=t||e._ref;else if("data"===n)e.data=e.data?f(f({},e.data),t):t;else if("className"===n)e.className=[e.className,t].join(" ").trim();else if("style"===n)e.style=f(f({},e.style),t);else if("function"==typeof t){var r=e[n];e[n]=r?function(){r.apply(void 0,arguments),t.apply(void 0,arguments)}:t}else{if(void 0===t||"object"!==v(t)&&t===e[n])return;if(n in e)throw new Error("Didn’t know how to merge prop '".concat(n,"'. ")+"Only 'className', 'style', and event handlers are supported");e[n]=t}}function te(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return 1===n.length?n[0]:n.reduce(function(e,n){for(var t in n)ne(e,t,n[t]);return e},{})}var re=["merge"],oe=["_stack"],ae=["_ref","data","children"],ie=["merge"],le=["_stack"],ce=["lineNumber","totalLines","indentation","data","annotation"],se=["merge"],ue=["_stack"],de=["value","data"],fe=function(e){var n=te(e.merge,p(e,re)),t=n._stack,r=p(n,oe),o=g(t),a=o[0],i=o.slice(1);if(a)return ee.jsx(a,f({_stack:i},r));var l=r._ref;r.data;var c=r.children,s=p(r,ae);return ee.jsx("pre",f(f({},s),{},{ref:l,"data-ch":!0,children:ee.jsx("div",{style:{minWidth:"fit-content"},children:c})}))},me=function(e){var n=te(e.merge,p(e,ie)),t=n._stack,r=p(n,le),o=g(t),a=o[0],i=o.slice(1);if(a){var l=a.Component,c=a.annotation;return ee.jsx(l,f(f({_stack:i},r),{},{annotation:c}))}r.lineNumber,r.totalLines,r.indentation,r.data,r.annotation;var s=p(r,ce);return ee.jsx("div",f({},s))},pe=function(e){var n=te(e.merge,p(e,se)),t=n._stack,r=p(n,ue),o=g(t),a=o[0],i=o.slice(1);if(a){var l=a.Component,c=a.annotation;return ee.jsx(l,f(f({_stack:i},r),{},{annotation:c}))}var s=r.value;r.data;var u=p(r,de);return ee.jsx("span",f(f({},u),{},{children:s}))},he=function(e){var t=n(null),r=e._ref||t;return ee.jsx(fe,{merge:e,_ref:r})};function ve(e,n){var t=[n.fromColumn,n.toColumn],r=ge(e,t[0]);r=ge(r,t[1]+1);var o=[],a=[],i=[];return r.forEach(function(e){e.range[1]<t[0]?o.push(e):e.range[0]>t[1]?i.push(e):a.push(e)}),[].concat(o,[{annotation:n,content:a,range:[a[0].range[0],a[a.length-1].range[1]]}],i)}function ge(e,n){var t=e.findIndex(function(e){return e.range[0]<n&&n<=e.range[1]});if(-1===t)return e;var r=e[t];if(ye(r)){var o,a=ge(r.content,n),i=[],l=[],c=m(a);try{for(c.s();!(o=c.n()).done;){var s=o.value;s.range[1]<n?i.push(s):l.push(s)}}catch(e){c.e(e)}finally{c.f()}return[].concat(d(e.slice(0,t)),[f(f({},r),{},{content:i,range:[r.range[0],n-1]}),f(f({},r),{},{content:l,range:[n,r.range[1]]})],d(e.slice(t+1)))}return[].concat(d(e.slice(0,t)),[f(f({},r),{},{value:r.value.slice(0,n-r.range[0]),range:[r.range[0],n-1]}),f(f({},r),{},{value:r.value.slice(n-r.range[0]),range:[n,r.range[1]]})],d(e.slice(t+1)))}function ye(e){return void 0!==e.content}function be(e){var n=e.content,t=e.handlers,r=e.annotationStack;return n.map(function(e,n){return ye(e)?ee.jsx(Ee,{annotationStack:r,handlers:t,group:e},n):e.style?ee.jsx(ke,{annotationStack:r,handlers:t,token:e},n):e.value})}function ke(e){var n=e.handlers,t=e.token,r=function(e,n){var t=[];return e.forEach(function(e){var r=e.name,o=e.Token,a=e.AnnotatedToken,i=n.filter(function(e){return e.name===r});a&&i.forEach(function(e){return t.push({Component:a,annotation:e})}),o&&(i.length||t.push({Component:o}),i.forEach(function(e){return t.push({Component:o,annotation:e})}))}),t}(n,e.annotationStack);return ee.jsx(pe,{merge:{_stack:r,style:t.style,value:t.value}})}function Ee(e){var n,t=e.group,r=e.handlers,o=e.annotationStack,a=t.annotation,i=t.content,l=a.name,c=be({content:i,handlers:r,annotationStack:[].concat(d(o),[a])}),s=null===(n=r.find(function(e){return e.name===l}))||void 0===n?void 0:n.Inline;return s?ee.jsx(s,{annotation:a,children:c}):c}function xe(e,n){var t=[n.fromLineNumber,n.toLineNumber],r=je(e,t[0]);r=je(r,t[1]+1);var o=[],a=[],i=[];return r.forEach(function(e){e.range[1]<t[0]?o.push(e):e.range[0]>t[1]?i.push(e):a.push(e)}),[].concat(o,[{annotation:n,lines:a,range:[a[0].range[0],a[a.length-1].range[1]]}],i)}function je(e,n){var t=e.findIndex(function(e){return we(e)&&e.range[0]<n&&n<=e.range[1]});if(-1===t)return e;var r=e[t],o=je(r.lines,n),a=[],i=[];return o.forEach(function(e){e.range[1]<n?a.push(e):i.push(e)}),[].concat(d(e.slice(0,t)),[f(f({},r),{},{lines:a,range:[r.range[0],n-1]}),f(f({},r),{},{lines:i,range:[n,r.range[1]]})],d(e.slice(t+1)))}function we(e){return void 0!==e.annotation}function Ne(e){var n=e.linesOrGroups,t=e.handlers,r=e.inlineAnnotations,o=e.annotationStack,a=void 0===o?[]:o;return n.map(function(e){return we(e)?ee.jsx(Se,{group:e,handlers:t,inlineAnnotations:r,annotationStack:a},e.range[0]):ee.jsx(_e,{line:e,handlers:t,inlineAnnotations:r,annotationStack:a},e.lineNumber)})}function _e(e){var n=e.line,t=e.handlers,r=e.inlineAnnotations,o=e.annotationStack,a=void 0===o?[]:o,i=n.lineNumber,l=n.totalLines,c=n.indentation,s=r.filter(function(e){return e.lineNumber===i}),u=function(e,n){for(var t=e,r=n.length-1;r>=0;r--)t=ve(t,n[r]);return t}(n.tokens,s),d=function(e,n){var t=[];return e.forEach(function(e){var r=e.name,o=e.Line,a=e.AnnotatedLine,i=n.filter(function(e){return e.name===r});a&&i.forEach(function(e){t.push({Component:a,annotation:e})}),o&&(i.length||t.push({Component:o}),i.forEach(function(e){t.push({Component:o,annotation:e})}))}),t}(t,a),f=be({content:u,handlers:t,annotationStack:a}),m={lineNumber:i,indentation:c,totalLines:l,_stack:d};return ee.jsx(me,{merge:m,children:f},i)}function Se(e){var n,t=e.group,r=e.handlers,o=e.inlineAnnotations,a=e.annotationStack,i=t.annotation,l=t.lines,c=i.name,s=null===(n=r.find(function(e){return e.name===c}))||void 0===n?void 0:n.Block,u=Ne({linesOrGroups:l,handlers:r,inlineAnnotations:o,annotationStack:[].concat(d(a),[i])});return s?ee.jsx(s,{annotation:i,children:u}):u}var Oe=["code","handlers"],Ce=t(function(e,n){var t=e.code,r=e.handlers,o=void 0===r?[]:r,a=p(e,Oe),i=t.tokens,l=t.themeName,c=t.lang,s=t.annotations;if(!i)throw new Error("Missing tokens in code block. Use the `highlight` function to generate the tokens.");o.filter(function(e){return e.transform}).forEach(function(e){s=s.flatMap(function(n){return e.name!=n.name?n:e.transform(n)||[]})});var u=new Set(s.map(function(e){return e.name})),m=o.filter(function(e){return!e.onlyIfAnnotated||u.has(e.name)}),h=function(e){var n=e.map(function(e){return e.Pre}).filter(Boolean),t=e.map(function(e){return e.PreWithRef}).filter(Boolean);t.length>0&&t.unshift(he);return[].concat(d(n),d(t))}(m),v={_stack:h,_ref:n};return ee.jsx(fe,f(f({merge:v,"data-theme":l,"data-lang":c},a),{},{children:ee.jsx(Ae,{tokens:i,handlers:m,annotations:s})}))});function Ae(e){var n=e.tokens,t=e.handlers,r=e.annotations,o=function(e){for(var n=[[]],t=e.slice(),r=1;t.length;){var o=t.shift();if("string"==typeof o){var a=o.split("\n"),i=g(a),l=i[0],c=i.slice(1);if(l){var s=r;r+=l.length,n[n.length-1].push({value:l,range:[s,r]})}c.length&&(n[n.length-1].push({value:"\n",range:[r,r+1]}),n.push([]),r=1,t.unshift(c.join("\n")))}else{var u=h(o,3),d=u[0],m=u[1],p=u[2],v=void 0===p?{}:p,y=r;r+=d.length,n[n.length-1].push({value:d,style:f({color:m},v),range:[y,r]})}}var b=n.length;return n.map(function(e,n){var t,r,o;return{tokens:e,range:[n+1,n+1],lineNumber:n+1,indentation:(null===(o=null===(r=null===(t=e[0])||void 0===t?void 0:t.value)||void 0===r?void 0:r.replace(/\t/g," ").match(/^\s*/))||void 0===o?void 0:o[0].length)||0,totalLines:b}})}(n),a=r.filter(M),i=r.filter(q),l=function(e,n){for(var t=e,r=n.length-1;r>=0;r--)t=xe(t,n[r]);return t}(o,a);return Ne({linesOrGroups:l,handlers:t,inlineAnnotations:i})}function Le({size:n="medium",className:t}){return e.createElement("xyd-loader",{"data-size":n,className:` lr0mq4l ${t||""} `},e.createElement("div",{part:"dots"},e.createElement("div",{part:"dot"}),e.createElement("div",{part:"dot"}),e.createElement("div",{part:"dot"})))}const Te=a({highlighted:[]});function Ie(){return i(Te)}function ze(n){var t;const[a,i]=r(s(n.codeblocks)),[l,c]=r(!0);function s(e){return e?e.map(e=>{var n;return e.highlighted&&e.highlighted.tokens?Object.assign(Object.assign({},e.highlighted),{meta:(null===(n=e.highlighted)||void 0===n?void 0:n.meta)||e.meta,title:e.title}):null}).filter(Boolean):[]}o(()=>{i(s(n.codeblocks))},[n.codeblocks]),o(()=>{if(!n.codeblocks)return;n.codeblocks.some(e=>!e.highlighted||!e.highlighted.tokens)&&function(){y(this,void 0,void 0,function*(){if(!n.codeblocks)return;if(n.codeblocks.every(e=>e.highlighted))return;const e=yield function(e,n){return y(this,void 0,void 0,function*(){return yield Promise.all(null==e?void 0:e.map(e=>function(e,n){return B.apply(this,arguments)}(e,n)))})}(n.codeblocks,n.theme||_);i(e),c(!1)})}()},[n.codeblocks]);const u=e.createElement(Te,{value:{highlighted:a||[]}},n.children);return(null===(t=n.codeblocks)||void 0===t?void 0:t.every(e=>e.highlighted))?u:l?e.createElement(Le,null):u}const Re="cwih9s3";function Pe(){return e.createElement("xyd-code-loader",{className:Re},e.createElement(Le,null))}const $e=e.createContext({ref:{current:null},setActiveTab:()=>{},setActiveExample:()=>{}});function Me(){return e.useContext($e)}function qe({children:t}){const a=n(null),[i,l]=r(""),[c,s]=r(""),u=E();return o(()=>{s(u.value)},[u.value]),e.createElement($e,{value:{ref:a,setActiveTab:l,setActiveExample:s}},e.createElement(S,{name:"CodeSample",props:{tab:i,example:c,code:""}},e.createElement(Fe,null,t)))}function Fe({children:e}){return function(){const e=E(),n=O();o(()=>{const t=e.tabsRef.current;if(t)return t.addEventListener(C,r),()=>{t.removeEventListener(C,r)};function r(e){const{value:t}=e.detail;n.docs.code.example_change({example:t})}},[e.tabsRef.current])}(),function(){const e=Me(),n=O();A(e.ref,{onDepthReached:e=>{100===e&&n.docs.code.scroll_100({}),n.docs.code.scroll_depth({depth:e})}})}(),e}function He(n){return e.createElement(l,{fallback:e.createElement(Pe,null)},e.createElement(ze,{codeblocks:n.codeblocks,theme:n.theme},n.children))}function Be(){return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",strokeWidth:3,stroke:"currentColor",fill:"none",width:16,strokeLinecap:"round",strokeLinejoin:"round"},e.createElement("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),e.createElement("path",{d:"M12 12l8 -4.5"}),e.createElement("path",{d:"M12 12v9"}),e.createElement("path",{d:"M12 12l-8 -4.5"}),e.createElement("path",{d:"M12 12l8 4.5"}),e.createElement("path",{d:"M12 3v9"}),e.createElement("path",{d:"M12 12l-8 4.5"}))}He.LineNumber=function(n){return n.children&&n.children.length?e.createElement("xyd-code-linenumber",{className:"lyawwu4",style:{minWidth:`${n.width}ch`}},e.createElement("span",{part:"line-number"},n.lineNumber),e.createElement(me,{merge:n})):null},He.Mark=function(n){var t,r,o,a;return e.createElement("xyd-code-mark",{"data-diff":(null===(t=n.annotation)||void 0===t?void 0:t.diff)?"true":void 0,"data-query":(null===(r=n.annotation)||void 0===r?void 0:r.diff)&&(null===(o=n.annotation)||void 0===o?void 0:o.query)?null===(a=n.annotation)||void 0===a?void 0:a.query:void 0,"data-annotated":String(!!n.annotation),className:"m1i5ism5"},e.createElement(me,{part:"line",merge:n}))},He.MarkInline=function(n){var t,r,o,a;return e.createElement("xyd-code-mark-inline",{"data-diff":(null===(t=n.annotation)||void 0===t?void 0:t.diff)?"true":void 0,"data-query":(null===(r=n.annotation)||void 0===r?void 0:r.diff)&&(null===(o=n.annotation)||void 0===o?void 0:o.query)?null===(a=n.annotation)||void 0===a?void 0:a.query:void 0,className:"m1fnx2sm"},n.children)},He.Bg=function(n){return e.createElement("xyd-code-bg",{"data-annotated":String(!!n.annotation),className:"b83ezas"},n.children)},He.Pre=function(n){const t=Me(),{size:r,className:o,codeblock:a,handlers:i}=n;!function(e){const n=e.tokens[e.tokens.length-1];"string"!=typeof n||" "!==n&&"\n"!==n||e.tokens.pop()}(a);let l=null;return(n.descriptionHead||n.descriptionContent)&&(l=e.createElement("div",{part:"code-description",className:"c1sbwmbs"},e.createElement("div",null,n.descriptionIcon?e.createElement(b,{name:n.descriptionIcon,size:16}):e.createElement(Be,null)),e.createElement("div",null,e.createElement(x,{weight:"bold"},n.descriptionHead),e.createElement("span",null,n.descriptionContent)))),e.createElement("xyd-code-pre",null,e.createElement(Ce,{part:"pre","data-size":r,style:(null==a?void 0:a.style)||(null==a?void 0:a.style),className:`${Re} ${o||""}`,code:a,handlers:i,ref:t.ref}),l)};const De={mark:{name:"mark",Line:n=>e.createElement(He.Mark,Object.assign({},n)),Inline:n=>e.createElement(He.MarkInline,Object.assign({},n))},bg:{name:"bg",Inline:n=>e.createElement(He.Bg,Object.assign({},n))},lineNumbers:{name:"line-numbers",Line:n=>{var{annotation:t}=n,r=k(n,["annotation"]);return e.createElement(He.LineNumber,Object.assign({},r))}},diff:{name:"diff",onlyIfAnnotated:!0,transform:e=>[e,Object.assign(Object.assign({},e),{name:"mark",query:e.query,diff:!0})],Line:n=>{var{annotation:t}=n,r=k(n,["annotation"]);return e.createElement(e.Fragment,null,e.createElement("div",null,null==t?void 0:t.query),e.createElement(me,{merge:r}))}}};function Ue({text:n}){const[t,o]=r(!1),a=O();return e.createElement("xyd-code-copy",null,e.createElement("button",{part:"button",className:"ccde3ii","aria-label":"Copy to clipboard",onClick:function(){navigator.clipboard.writeText(n),o(!0),a.docs.code.copy({code:n}),setTimeout(()=>{o(!1)},1200)}},t?e.createElement(T,{size:16}):e.createElement(I,{size:16})))}function We(n){return function(t){var a,i,l,s,u,d;const f=1===(null===(a=null==t?void 0:t.highlighted)||void 0===a?void 0:a.length)&&!t.description,m=(null===(i=t.highlighted[0])||void 0===i?void 0:i.meta)||(null===(l=t.highlighted[0])||void 0===l?void 0:l.lang),[p,h]=r(m),{markdownFormat:v}=c(Je),g=Me(),y=O();if(o(()=>{h(m)},[m]),o(()=>{g.setActiveTab(p)},[]),0===(null===(s=null==t?void 0:t.highlighted)||void 0===s?void 0:s.length))return null;let b=L.Content;return v&&(b=e.Fragment),e.createElement("xyd-codetabs",{className:`c1dmvxug ${t.className||""}`},e.createElement(L.Root,{part:"root","data-single":String(f),"data-nodescription":t.description?void 0:"true",className:"c1pb9ov9",style:null===(u=t.highlighted[0])||void 0===u?void 0:u.style,value:p,onValueChange:function(e){h(e),g.setActiveTab(e),y.docs.code.tab_change({tab:e})}},e.createElement(Xe,{description:t.description,highlighted:t.highlighted}),null===(d=t.highlighted)||void 0===d?void 0:d.map((t,r)=>e.createElement(b,{value:t.meta||t.lang,key:r},e.createElement(n,{style:(null==t?void 0:t.style)||(null==t?void 0:t.style),codeblock:t})))))}}function Xe(n){var t;const r=1===(null===(t=null==n?void 0:n.highlighted)||void 0===t?void 0:t.length)&&!n.description,o=n.highlighted.filter((e,n,t)=>n===t.findIndex(n=>(n.meta||n.lang)===(e.meta||e.lang)));return e.createElement("xyd-codetabs-languages",{"data-single":String(r),className:"\n caeqccf\n "},n.description&&e.createElement("div",{part:"description"},e.createElement("div",{part:"description-item"},n.description)),e.createElement(L.List,{part:"languages-list"},null==o?void 0:o.map(({meta:n,lang:t},o)=>r?null:e.createElement(L.Trigger,{part:"language-trigger",value:n||t,key:o},n||t))),e.createElement("div",{part:"copy"},null==o?void 0:o.map((n,t)=>e.createElement(L.Content,{value:n.meta||n.lang,asChild:!0,key:t},e.createElement(Ue,{text:n.value})))))}const Ge=a({lines:void 0,scroll:void 0});function Ve({children:n,lines:t,scroll:r}){return e.createElement(Ge.Provider,{value:{lines:t,scroll:r}},n)}const Je=e.createContext({});function Ke(n){return e.createElement(qe,null,e.createElement(He,{codeblocks:n.codeblocks,theme:n.theme},e.createElement(Ye,Object.assign({},n))))}function Ye(n){var t;const{highlighted:r}=Ie(),o=c(Ge);if("secondary"===n.kind)return e.createElement(Je,{value:{size:n.size,lineNumbers:n.lineNumbers,descriptionHead:n.descriptionHead,descriptionContent:n.descriptionContent,descriptionIcon:n.descriptionIcon,markdownFormat:n.markdownFormat}},e.createElement(He.Pre,{codeblock:r[0],handlers:[De.mark,De.bg,De.lineNumbers]}));let a;"string"==typeof n.size?a=n.size:"boolean"!=typeof o.scroll||o.scroll||(a="full");const i=null!==(t=n.lineNumbers)&&void 0!==t?t:o.lines;return e.createElement(Je,{value:{size:a,lineNumbers:i,descriptionHead:n.descriptionHead,descriptionContent:n.descriptionContent,descriptionIcon:n.descriptionIcon,markdownFormat:n.markdownFormat}},e.createElement(Ze,{description:n.description,highlighted:r,controlByMeta:n.controlByMeta}))}const Ze=We(n=>{const{lineNumbers:t,size:r,descriptionHead:o,descriptionContent:a,descriptionIcon:i}=e.useContext(Je),l=[De.mark,De.bg,De.diff];return t&&l.push(De.lineNumbers),e.createElement(He.Pre,Object.assign({},n,{descriptionHead:o,descriptionContent:a,descriptionIcon:i,size:r,handlers:l}))});export{He as C,De as a,Pe as b,Ke as c,ze as d,Ve as e,Ie as u,We as w};
|
|
2
|
-
//# sourceMappingURL=CodeSample-BgBX-nnN.js.map
|