@xyd-js/components 0.1.0-xyd.2 → 0.1.0-xyd.4

package/dist/views.d.ts

@@ -14,4 +14,5 @@ interface HomeViewBodyProps {
     kind?: "secondary";
 }
 
-export { HomeView, type HomeViewBodyProps, type HomeViewProps };
+export { HomeView };
+export type { HomeViewBodyProps, HomeViewProps };

package/dist/views.js

@@ -1,2 +1,2 @@
-export{H as HomeView}from"./HomeView-JIjSATBR.js";import"react";
+export{H as HomeView}from"./HomeView-Byqn8qbO.js";import"react";
 //# sourceMappingURL=views.js.map

package/dist/writer.d.ts

@@ -3,7 +3,7 @@ import React, { ReactElement } from 'react';
 interface BadgeProps {
     children: React.ReactNode;
     size?: "sm";
-    kind?: "warning";
+    kind?: "warning" | "info";
 }
 declare function Badge({ children, size, kind }: BadgeProps): React.JSX.Element;
 
@@ -78,6 +78,17 @@ declare function IconMetrics(): React.JSX.Element;
 declare function IconFunnels(): React.JSX.Element;
 declare function IconCode(): React.JSX.Element;
 declare function IconCustomEvent(): React.JSX.Element;
+declare function IconAlert(): React.JSX.Element;
+declare function IconBrowser(): React.JSX.Element;
+declare function IconREST(): React.JSX.Element;
+declare function IconGraphQL(): React.JSX.Element;
+declare function IconWebhooks(): React.JSX.Element;
+declare function IconJSBrowser(): React.JSX.Element;
+declare function IconJSNode(): React.JSX.Element;
+declare function IconStorybook(): React.JSX.Element;
+declare function IconReactRouter(): React.JSX.Element;
+declare function IconNextJS(): React.JSX.Element;
+declare function IconAppTemplate(): React.JSX.Element;
 
 interface NavLinksProps {
     prev?: {
@@ -154,4 +165,5 @@ interface UnderlineNavItemProps {
     href?: string;
 }
 
-export { Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumbs, type BreadcrumbsProps, Callout, type CalloutProps, Code, type CodeProps, Details, type DetailsProps, GuideCard, Heading, type HeadingProps, Hr, type HrProps, IconCode, IconCustomEvent, IconFunnels, IconMetrics, IconSessionReplay, NavLinks, type NavLinksProps, Pre, type PreProps, Steps, type StepsProps, Table, type TableProps, type TableTdProps, type TableThProps, type TableTrProps, Tabs, type TabsProps$1 as TabsProps, UnderlineNav };
+export { Badge, Blockquote, Breadcrumbs, Callout, Code, Details, GuideCard, Heading, Hr, IconAlert, IconAppTemplate, IconBrowser, IconCode, IconCustomEvent, IconFunnels, IconGraphQL, IconJSBrowser, IconJSNode, IconMetrics, IconNextJS, IconREST, IconReactRouter, IconSessionReplay, IconStorybook, IconWebhooks, NavLinks, Pre, Steps, Table, Tabs, UnderlineNav };
+export type { BadgeProps, BlockquoteProps, BreadcrumbsProps, CalloutProps, CodeProps, DetailsProps, HeadingProps, HrProps, NavLinksProps, PreProps, StepsProps, TableProps, TableTdProps, TableThProps, TableTrProps, TabsProps$1 as TabsProps };

package/dist/writer.js

@@ -1,2 +1,2 @@
-export{c as Badge,B as Blockquote,b as Callout,C as Code,D as Details,H as Heading,a as Hr,f as IconCode,g as IconCustomEvent,e as IconFunnels,d as IconMetrics,I as IconSessionReplay}from"./index-CCn_Wv4c.js";import{_ as t}from"./tslib.es6-DNxqyfMY.js";import r,{Fragment as n}from"react";import{ArrowRightIcon as l,ArrowLeftIcon as s}from"@radix-ui/react-icons";export{G as GuideCard,S as Steps,T as Table,a as Tabs,U as UnderlineNav}from"./UnderlineNav-Ck16YRuC.js";import"./_rollupPluginBabelHelpers-DFryr8Hb.js";import"@radix-ui/react-tabs";import"lucide-react";var i="hwgsk4h",m="i1b95bxl",o="i1a3fa93",u="i1dl7ywj";function h(e){var a=e.children,n=t(e,["children"]);return r.createElement("a",Object.assign({},n),a)}function p(e){return r.createElement("div",{className:i},e.items.map((function(t,a){var s=a===e.items.length-1;return r.createElement(n,{key:t.href+t.title},a>0&&r.createElement(l,{className:m}),r.createElement("div",{className:"\n                            ".concat(o,"\n                            ").concat(s&&u,"\n                        "),title:t.title},t.href&&!s?r.createElement(h,{href:t.href},t.title):t.title))})))}var v="h1xhrk1",E="l1elq7ab",x="i1mmatje";function N(e){var a=e.children,n=t(e,["children"]);return r.createElement("a",Object.assign({},n),a)}function j(e){return r.createElement("div",{className:v},e.prev?r.createElement(N,{href:e.prev.href,title:e.prev.title,className:E},r.createElement(s,{className:x}),e.prev.title):r.createElement("div",null),e.next&&r.createElement(N,{href:e.next.href,title:e.next.title,className:E},e.next.title,r.createElement(l,{className:x})))}var k="h1vb39qj";function q(e){var t=e.children;return r.createElement("pre",{className:k},t)}export{p as Breadcrumbs,j as NavLinks,q as Pre};
+export{b as Badge,B as Blockquote,c as Callout,C as Code,D as Details,a as Heading,H as Hr,m as IconAlert,I as IconAppTemplate,l as IconBrowser,o as IconCode,n as IconCustomEvent,p as IconFunnels,j as IconGraphQL,h as IconJSBrowser,g as IconJSNode,q as IconMetrics,d as IconNextJS,k as IconREST,e as IconReactRouter,r as IconSessionReplay,f as IconStorybook,i as IconWebhooks}from"./index-DBY3gRcL.js";import{_ as t}from"./tslib.es6-COc5mhWS.js";import s,{Fragment as u}from"react";import{ArrowRightIcon as v,ArrowLeftIcon as E}from"@radix-ui/react-icons";export{G as GuideCard,S as Steps,T as Table,a as Tabs,U as UnderlineNav}from"./UnderlineNav-CTBRVoit.js";import"./_rollupPluginBabelHelpers-NA6nV2VK.js";import"@radix-ui/react-tabs";import"lucide-react";var x="hwgsk4h",N="i1b95bxl",w="i1a3fa93",y="i1dl7ywj";function R(e){var a=e.children,r=t(e,["children"]);return s.createElement("a",Object.assign({},r),a)}function J(e){return s.createElement("div",{className:x},e.items.map((function(a,t){var r=t===e.items.length-1;return s.createElement(u,{key:a.href+a.title},t>0&&s.createElement(v,{className:N}),s.createElement("div",{className:"\n                            ".concat(w,"\n                            ").concat(r&&y,"\n                        "),title:a.title},a.href&&!r?s.createElement(R,{href:a.href},a.title):a.title))})))}var A="h1xhrk1",O="l1elq7ab",_="i1mmatje";function F(e){var a=e.children,r=t(e,["children"]);return s.createElement("a",Object.assign({},r),a)}function L(e){return s.createElement("div",{className:A},e.prev?s.createElement(F,{href:e.prev.href,title:e.prev.title,className:O},s.createElement(E,{className:_}),e.prev.title):s.createElement("div",null),e.next&&s.createElement(F,{href:e.next.href,title:e.next.title,className:O},e.next.title,s.createElement(v,{className:_})))}var M="h1vb39qj";function P(e){var a=e.children;return s.createElement("pre",{className:M},a)}export{J as Breadcrumbs,L as NavLinks,P as Pre};
 //# sourceMappingURL=writer.js.map

package/dist/writer.js.map

@@ -1 +1 @@
-{"version":3,"file":"writer.js","sources":["../src/writer/Breadcrumbs/Breadcrumbs.styles.ts","../src/writer/Breadcrumbs/Breadcrumbs.tsx","../src/writer/NavLinks/NavLinks.styles.ts","../src/writer/NavLinks/NavLinks.tsx","../src/writer/Pre/Pre.styles.tsx","../src/writer/Pre/Pre.tsx"],"sourcesContent":["import {css} from \"@linaria/core\";\n\nexport const $breadcrumbs = {\n    host: css`\n        display: flex;\n        overflow: hidden;\n        margin-top: 0.375rem;\n        gap: 0.25rem;\n        align-items: center;\n        font-size: 0.875rem;\n        line-height: 1.25rem;\n        color: #6B7280;\n    `,\n    icon: css`\n        shrink: 0;\n        width: 0.875rem;\n    `,\n    item: css`\n        white-space: nowrap;\n        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 300ms;\n    `,\n    item$$active: css`\n        color: #000;\n        font-weight: bold;\n    `\n};\n","import React, {Fragment} from 'react'\nimport type {ReactElement} from 'react'\nimport {ArrowRightIcon} from '@radix-ui/react-icons'\n\nimport {$breadcrumbs} from './Breadcrumbs.styles'\n\nfunction Anchor({children, ...rest}) {\n    return <a {...rest}>\n        {children}\n    </a>\n}\n\nexport interface BreadcrumbsProps {\n    items: {\n        title: string\n        href?: string\n    }[]\n}\n\nexport function Breadcrumbs(props: BreadcrumbsProps): ReactElement {\n    return (\n        <div className={$breadcrumbs.host}>\n            {props.items.map((item, index) => {\n                const lastActive = index === props.items.length - 1\n\n                return (\n                    <Fragment key={item.href + item.title}>\n                        {index > 0 && <ArrowRightIcon className={$breadcrumbs.icon}/>}\n                        <div className={`\n                            ${$breadcrumbs.item}\n                            ${lastActive && $breadcrumbs.item$$active}\n                        `}\n                             title={item.title}\n                        >\n                            {item.href && !lastActive ? (\n                                <Anchor href={item.href}>{item.title}</Anchor>\n                            ) : (\n                                item.title\n                            )}\n                        </div>\n                    </Fragment>\n                )\n            })}\n        </div>\n    )\n}\n","import {css} from \"@linaria/core\";\n\nexport const $navLinks = {\n    host: css`\n        display: flex;\n        padding-top: 2rem;\n        margin-top: 2rem;\n        margin-bottom: 2rem;\n        justify-content: space-between;\n        align-items: center;\n        border-top-width: 1px;\n    `,\n    link: css`\n        display: flex;\n        padding-top: 1rem;\n        padding-bottom: 1rem;\n        gap: 0.25rem;\n        align-items: center;\n        font-size: 1rem;\n        line-height: 1.5rem;\n        font-weight: 500;\n        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 300ms;\n        max-width: 50%;\n    `,\n    icon: css`\n        display: inline;\n        height: 1.25rem;\n        flex-shrink: 0;\n    `,\n};\n","import React from \"react\"\nimport {ArrowLeftIcon, ArrowRightIcon} from '@radix-ui/react-icons'\n\nimport {$navLinks} from \"./NavLinks.styles\";\n\nfunction Anchor({children, ...rest}) {\n    return <a {...rest}>\n        {children}\n    </a>\n}\n\nexport interface NavLinksProps {\n    prev?: {\n        title: string\n        href: string\n    }\n    next?: {\n        title: string\n        href: string\n    }\n}\n\nexport function NavLinks(props: NavLinksProps) {\n    return (\n        <div className={$navLinks.host}>\n            {props.prev ? (\n                <Anchor\n                    href={props.prev.href}\n                    title={props.prev.title}\n                    className={$navLinks.link}\n                >\n                    <ArrowLeftIcon className={$navLinks.icon}/>\n                    {props.prev.title}\n                </Anchor>\n            ) : <div/>}\n            {props.next && (\n                <Anchor\n                    href={props.next.href}\n                    title={props.next.title}\n                    className={$navLinks.link}\n                >\n                    {props.next.title}\n                    <ArrowRightIcon className={$navLinks.icon}/>\n                </Anchor>\n            )}\n        </div>\n    )\n}\n","import {css} from \"@linaria/core\";\n\nexport const $pre = {\n    host: css`\n        margin-top: 0;\n        border-radius: 6px;\n        padding: 16px;\n        border: 0;\n\n        background-color: rgb(246, 248, 250);\n        overflow: auto;\n    `\n}","import React from \"react\"\n\nimport {$pre} from \"./Pre.styles\"\n\nexport interface PreProps {\n    children: React.ReactNode\n}\n\nexport function Pre({children}: PreProps) {\n    return <pre className={$pre.host}>\n        {children}\n    </pre>\n}"],"names":["$breadcrumbs","Anchor","_a","children","rest","__rest","React","createElement","Object","assign","Breadcrumbs","props","className","items","map","item","index","lastActive","length","Fragment","key","href","title","ArrowRightIcon","concat","$navLinks","NavLinks","prev","ArrowLeftIcon","next","$pre","Pre","_ref"],"mappings":"sjBAEO,IAAMA,EAUR,UAVQA,EAcR,WAdQA,EAoBR,WApBQA,EAqBG,WCjBhB,SAASC,EAAOC,GAAA,IAACC,EAAkBD,EAAlBC,SAAaC,EAAIC,EAAAH,EAAlB,cACZ,OAAOI,EAAOC,cAAA,IAAAC,OAAAC,OAAA,CAAA,EAAAL,GACTD,EAET,CASM,SAAUO,EAAYC,GACxB,OACIL,EAAKC,cAAA,MAAA,CAAAK,UAAWZ,GACXW,EAAME,MAAMC,KAAI,SAACC,EAAMC,GACpB,IAAMC,EAAaD,IAAUL,EAAME,MAAMK,OAAS,EAElD,OACIZ,EAAAC,cAACY,EAAQ,CAACC,IAAKL,EAAKM,KAAON,EAAKO,OAC3BN,EAAQ,GAAKV,EAACC,cAAAgB,EAAe,CAAAX,UAAWZ,IACzCM,EAAAC,cAAA,MAAA,CAAKK,UAASY,iCAAAA,OACRxB,EAAiB,kCAAAwB,OACjBP,GAAcjB,EACnB,8BACIsB,MAAOP,EAAKO,OAEZP,EAAKM,OAASJ,EACXX,EAAAC,cAACN,EAAO,CAAAoB,KAAMN,EAAKM,MAAON,EAAKO,OAE/BP,EAAKO,OAKzB,IAGZ,CC3CO,IAAMG,EASR,UATQA,EAuBR,WAvBQA,EAwBL,WCrBR,SAASxB,EAAOC,GAAA,IAACC,EAAkBD,EAAlBC,SAAaC,EAAIC,EAAAH,EAAlB,cACZ,OAAOI,EAAOC,cAAA,IAAAC,OAAAC,OAAA,CAAA,EAAAL,GACTD,EAET,CAaM,SAAUuB,EAASf,GACrB,OACIL,EAAKC,cAAA,MAAA,CAAAK,UAAWa,GACXd,EAAMgB,KACHrB,EAACC,cAAAN,EACG,CAAAoB,KAAMV,EAAMgB,KAAKN,KACjBC,MAAOX,EAAMgB,KAAKL,MAClBV,UAAWa,GAEXnB,EAAAC,cAACqB,EAAc,CAAAhB,UAAWa,IACzBd,EAAMgB,KAAKL,OAEhBhB,EAAMC,cAAA,MAAA,MACTI,EAAMkB,MACHvB,EAAAC,cAACN,EAAM,CACHoB,KAAMV,EAAMkB,KAAKR,KACjBC,MAAOX,EAAMkB,KAAKP,MAClBV,UAAWa,GAEVd,EAAMkB,KAAKP,MACZhB,EAAAC,cAACgB,EAAc,CAACX,UAAWa,KAK/C,CC7CO,IAAMK,EACL,WCKQ,SAAAC,EAAGC,GAAqB,IAAnB7B,EAAQ6B,EAAR7B,SACjB,OAAOG,EAAAC,cAAA,MAAA,CAAKK,UAAWkB,GAClB3B,EAET"}
+{"version":3,"file":"writer.js","sources":["../src/writer/Breadcrumbs/Breadcrumbs.styles.ts","../src/writer/Breadcrumbs/Breadcrumbs.tsx","../src/writer/NavLinks/NavLinks.styles.ts","../src/writer/NavLinks/NavLinks.tsx","../src/writer/Pre/Pre.styles.tsx","../src/writer/Pre/Pre.tsx"],"sourcesContent":["import {css} from \"@linaria/core\";\n\nexport const $breadcrumbs = {\n    host: css`\n        display: flex;\n        overflow: hidden;\n        margin-top: 0.375rem;\n        gap: 0.25rem;\n        align-items: center;\n        font-size: 0.875rem;\n        line-height: 1.25rem;\n        color: #6B7280;\n    `,\n    icon: css`\n        shrink: 0;\n        width: 0.875rem;\n    `,\n    item: css`\n        white-space: nowrap;\n        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 300ms;\n    `,\n    item$$active: css`\n        color: #000;\n        font-weight: bold;\n    `\n};\n","import React, {Fragment} from 'react'\nimport type {ReactElement} from 'react'\nimport {ArrowRightIcon} from '@radix-ui/react-icons'\n\nimport {$breadcrumbs} from './Breadcrumbs.styles'\n\nfunction Anchor({children, ...rest}) {\n    return <a {...rest}>\n        {children}\n    </a>\n}\n\nexport interface BreadcrumbsProps {\n    items: {\n        title: string\n        href?: string\n    }[]\n}\n\nexport function Breadcrumbs(props: BreadcrumbsProps): ReactElement {\n    return (\n        <div className={$breadcrumbs.host}>\n            {props.items.map((item, index) => {\n                const lastActive = index === props.items.length - 1\n\n                return (\n                    <Fragment key={item.href + item.title}>\n                        {index > 0 && <ArrowRightIcon className={$breadcrumbs.icon}/>}\n                        <div className={`\n                            ${$breadcrumbs.item}\n                            ${lastActive && $breadcrumbs.item$$active}\n                        `}\n                             title={item.title}\n                        >\n                            {item.href && !lastActive ? (\n                                <Anchor href={item.href}>{item.title}</Anchor>\n                            ) : (\n                                item.title\n                            )}\n                        </div>\n                    </Fragment>\n                )\n            })}\n        </div>\n    )\n}\n","import {css} from \"@linaria/core\";\n\nexport const $navLinks = {\n    host: css`\n        display: flex;\n        padding-top: 2rem;\n        margin-top: 2rem;\n        margin-bottom: 2rem;\n        justify-content: space-between;\n        align-items: center;\n        border-top-width: 1px;\n    `,\n    link: css`\n        display: flex;\n        padding-top: 1rem;\n        padding-bottom: 1rem;\n        gap: 0.25rem;\n        align-items: center;\n        font-size: 1rem;\n        line-height: 1.5rem;\n        font-weight: 500;\n        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 300ms;\n        max-width: 50%;\n    `,\n    icon: css`\n        display: inline;\n        height: 1.25rem;\n        flex-shrink: 0;\n    `,\n};\n","import React from \"react\"\nimport {ArrowLeftIcon, ArrowRightIcon} from '@radix-ui/react-icons'\n\nimport {$navLinks} from \"./NavLinks.styles\";\n\nfunction Anchor({children, ...rest}) {\n    return <a {...rest}>\n        {children}\n    </a>\n}\n\nexport interface NavLinksProps {\n    prev?: {\n        title: string\n        href: string\n    }\n    next?: {\n        title: string\n        href: string\n    }\n}\n\nexport function NavLinks(props: NavLinksProps) {\n    return (\n        <div className={$navLinks.host}>\n            {props.prev ? (\n                <Anchor\n                    href={props.prev.href}\n                    title={props.prev.title}\n                    className={$navLinks.link}\n                >\n                    <ArrowLeftIcon className={$navLinks.icon}/>\n                    {props.prev.title}\n                </Anchor>\n            ) : <div/>}\n            {props.next && (\n                <Anchor\n                    href={props.next.href}\n                    title={props.next.title}\n                    className={$navLinks.link}\n                >\n                    {props.next.title}\n                    <ArrowRightIcon className={$navLinks.icon}/>\n                </Anchor>\n            )}\n        </div>\n    )\n}\n","import {css} from \"@linaria/core\";\n\nexport const $pre = {\n    host: css`\n        margin-top: 0;\n        border-radius: 6px;\n        padding: 16px;\n        border: 0;\n\n        background-color: rgb(246, 248, 250);\n        overflow: auto;\n    `\n}","import React from \"react\"\n\nimport {$pre} from \"./Pre.styles\"\n\nexport interface PreProps {\n    children: React.ReactNode\n}\n\nexport function Pre({children}: PreProps) {\n    return <pre className={$pre.host}>\n        {children}\n    </pre>\n}"],"names":["$breadcrumbs","Anchor","_a","children","rest","__rest","React","createElement","Object","assign","Breadcrumbs","props","className","items","map","item","index","lastActive","length","Fragment","key","href","title","ArrowRightIcon","concat","$navLinks","NavLinks","prev","ArrowLeftIcon","next","$pre","Pre","_ref"],"mappings":"uvBAEO,IAAMA,EAUR,UAVQA,EAcR,WAdQA,EAoBR,WApBQA,EAqBG,WCjBhB,SAASC,EAAOC,GAAA,IAACC,EAAkBD,EAAlBC,SAAaC,EAAIC,EAAAH,EAAlB,cACZ,OAAOI,EAAOC,cAAA,IAAAC,OAAAC,OAAA,CAAA,EAAAL,GACTD,EAET,CASM,SAAUO,EAAYC,GACxB,OACIL,EAAKC,cAAA,MAAA,CAAAK,UAAWZ,GACXW,EAAME,MAAMC,KAAI,SAACC,EAAMC,GACpB,IAAMC,EAAaD,IAAUL,EAAME,MAAMK,OAAS,EAElD,OACIZ,EAAAC,cAACY,EAAQ,CAACC,IAAKL,EAAKM,KAAON,EAAKO,OAC3BN,EAAQ,GAAKV,EAACC,cAAAgB,EAAe,CAAAX,UAAWZ,IACzCM,EAAAC,cAAA,MAAA,CAAKK,UAASY,iCAAAA,OACRxB,EAAiB,kCAAAwB,OACjBP,GAAcjB,EACnB,8BACIsB,MAAOP,EAAKO,OAEZP,EAAKM,OAASJ,EACXX,EAAAC,cAACN,EAAO,CAAAoB,KAAMN,EAAKM,MAAON,EAAKO,OAE/BP,EAAKO,OAKzB,IAGZ,CC3CO,IAAMG,EASR,UATQA,EAuBR,WAvBQA,EAwBL,WCrBR,SAASxB,EAAOC,GAAA,IAACC,EAAkBD,EAAlBC,SAAaC,EAAIC,EAAAH,EAAlB,cACZ,OAAOI,EAAOC,cAAA,IAAAC,OAAAC,OAAA,CAAA,EAAAL,GACTD,EAET,CAaM,SAAUuB,EAASf,GACrB,OACIL,EAAKC,cAAA,MAAA,CAAAK,UAAWa,GACXd,EAAMgB,KACHrB,EAACC,cAAAN,EACG,CAAAoB,KAAMV,EAAMgB,KAAKN,KACjBC,MAAOX,EAAMgB,KAAKL,MAClBV,UAAWa,GAEXnB,EAAAC,cAACqB,EAAc,CAAAhB,UAAWa,IACzBd,EAAMgB,KAAKL,OAEhBhB,EAAMC,cAAA,MAAA,MACTI,EAAMkB,MACHvB,EAAAC,cAACN,EAAM,CACHoB,KAAMV,EAAMkB,KAAKR,KACjBC,MAAOX,EAAMkB,KAAKP,MAClBV,UAAWa,GAEVd,EAAMkB,KAAKP,MACZhB,EAAAC,cAACgB,EAAc,CAACX,UAAWa,KAK/C,CC7CO,IAAMK,EACL,WCKQ,SAAAC,EAAGC,GAAqB,IAAnB7B,EAAQ6B,EAAR7B,SACjB,OAAOG,EAAAC,cAAA,MAAA,CAAKK,UAAWkB,GAClB3B,EAET"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyd-js/components",
-  "version": "0.1.0-xyd.2",
+  "version": "0.1.0-xyd.4",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -31,6 +31,9 @@
     },
     "./writer": {
       "import": "./dist/writer.js"
+    },
+    "./coder/themes/*": {
+      "import": "./dist/coder/themes/*"
     }
   },
   "dependencies": {
@@ -40,7 +43,7 @@
     "codehike": "^1.0.3"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "@code-hike/lighter": "^1.0.1"
   },
   "devDependencies": {

package/rollup.config.js

@@ -1,5 +1,6 @@
-import {fileURLToPath} from 'url';
-import {dirname} from 'path';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
 
 import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
@@ -25,6 +26,16 @@ const external = [
     ...Object.keys(devDependencies),
 ];
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const themesDir = path.resolve(__dirname, 'src/coder/themes');
+const themes = fs.readdirSync(themesDir).reduce((acc, file) => {
+    const themeName = path.basename(file, path.extname(file));
+    acc[`coder/themes/${themeName}`] = path.join(themesDir, file);
+    return acc;
+}, {});
+
 export default [
     {
         input: {
@@ -36,6 +47,7 @@ export default [
             pages: 'src/pages/index.ts',
             views: 'src/views/index.ts',
             writer: 'writer.ts',
+            ...themes
         },
         output: [
             {
@@ -150,5 +162,14 @@ export default [
         },
         plugins: [dts()],
         external
-    }
+    },
+    ...Object.keys(themes).map(theme => ({
+        input: themes[theme],
+        output: {
+            file: `dist/${theme}.d.ts`,
+            format: 'es',
+        },
+        plugins: [dts()],
+        external
+    }))
 ];

package/src/coder/Code/Code.styles.tsx

@@ -0,0 +1,50 @@
+import {css} from "@linaria/core";
+
+export const $mark = {
+    host: css`
+        display: flex;
+        border-left-width: 4px;
+        border-color: transparent;
+        margin: 4px 0;
+    `,
+    line: css`
+        flex: 1 1 0%;
+    `,
+    $$annotated: css`
+        border-color: #60A5FA;
+        background-color: #EEF2FF;
+    `
+}
+
+export const $lineNumber = {
+    host: css`
+        margin: 0 12px 0px 4px;
+        //text-align: right;
+        user-select: none;
+        opacity: 0.5;
+    `
+}
+
+export const $code = {
+    host: css`
+        max-height: 400px;
+        background: linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%) !important;
+
+        margin: 0;
+        padding: 8px 16px;
+
+        border-top: 1px solid rgb(236, 236, 241);
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+
+        font-size: 12px;
+        line-height: 20px;
+        white-space: pre-wrap;
+        word-break: break-all;
+
+        overflow-y: scroll;
+    `,
+    host$$full: css`
+        max-height: 100%;   
+    `
+}

package/src/coder/Code/Code.tsx

@@ -0,0 +1,79 @@
+import React, {Suspense} from "react";
+import type {HighlightedCode, AnnotationHandler} from "codehike/code";
+import {InnerLine, Pre} from "codehike/code";
+import {Theme} from "@code-hike/lighter";
+
+import {CodeTheme, type CodeThemeBlockProps} from "../CodeTheme";
+import {$lineNumber, $mark, $code} from "./Code.styles.tsx";
+
+export interface CodeProps {
+    codeblocks: CodeThemeBlockProps[];
+    theme?: Theme
+    children: React.ReactNode
+}
+
+export function Code(props: CodeProps) {
+    return <Suspense fallback={<$Loading/>}>
+        <CodeTheme codeblocks={props.codeblocks} theme={props.theme}>
+            {props.children}
+        </CodeTheme>
+    </Suspense>
+}
+
+function $Loading() {
+    return <>
+        loading...
+    </>
+}
+
+// TODO: fix any
+Code.LineNumber = function LineNumber(props: any) {
+    if (!props.children || !props.children.length) {
+        return null
+    }
+    return (
+        <>
+        <span
+            style={{minWidth: `${props.width}ch`}}
+            className={$lineNumber.host}
+        >
+          {props.lineNumber}
+        </span>
+            <InnerLine merge={props}/>
+        </>
+    )
+}
+
+// TODO: fix any
+Code.Mark = function Mark(props: any) {
+    return <div className={`${$mark.host} ${props.annotation && $mark.$$annotated}`}>
+        <InnerLine
+            merge={props}
+            className={$mark.line}
+        />
+    </div>
+}
+
+// TODO: fix any
+Code.Bg = function CodeLine(props: any) {
+    return <span className={`${props.annotation && $mark.$$annotated}`}>
+        {props.children}
+    </span>
+}
+
+Code.Pre = function CodePre(props: {
+                                codeblock: HighlightedCode,
+                                size?: "full",
+                                handlers: AnnotationHandler[]
+                            }
+) {
+    return <Pre
+        className={`
+            ${$code.host}
+            ${props?.size === "full" && $code.host$$full}
+        `}
+        style={props.codeblock?.style || props.codeblock?.style}
+        code={props.codeblock}
+        handlers={props.handlers}
+    />
+}

package/src/coder/Code/annotations.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import {AnnotationHandler} from "codehike/code";
+
+import {Code} from "./Code.tsx";
+
+const markAnnotation: AnnotationHandler = {
+    name: "mark",
+    Line: (props) => {
+        return <Code.Mark {...props}/>
+    }
+}
+
+const bgAnnotation: AnnotationHandler = {
+    name: "bg",
+    Inline: (props) => {
+        return <Code.Bg {...props}/>
+    }
+}
+
+const lineNumberAnnotation: AnnotationHandler = {
+    name: "line-numbers",
+    Line: ({annotation, ...props}) => {
+        return <Code.LineNumber {...props}/>
+    },
+}
+
+export const annotations = {
+    mark: markAnnotation,
+    bg: bgAnnotation,
+    lineNumbers: lineNumberAnnotation
+}

package/src/coder/Code/highlight.ts

@@ -0,0 +1,170 @@
+import {
+    type CodeAnnotation,
+    type RawCode,
+    type HighlightedCode,
+    type Token
+} from 'codehike/code';
+import {
+    type Lines,
+    type Tokens,
+    highlightSync as lighter,
+    LANG_NAMES,
+    type Theme
+} from '@code-hike/lighter';
+
+type Whitespace = string
+
+type AnyToken = Token | Whitespace
+
+function isWhitespace(token: Token | Whitespace): token is Whitespace {
+    return typeof token === 'string';
+}
+
+export function highlight(
+    data: RawCode,
+    theme: Theme,
+    lang: string
+): HighlightedCode {
+    if (!LANG_NAMES.includes(lang)) {
+        console.warn(`Unknown language "${lang}"`);
+        lang = 'txt';
+    }
+
+    const {
+        lines,
+        lang: lighterLang,
+        style
+    } = lighter(data.value, lang, theme as any, {
+        annotations: [],
+        scopes: false // true for better token transitions, but breaks css themes
+    });
+
+    const tokens = joinLines(lines);
+    // split surrounding whitespace for each token
+    const splitTokens = splitWhitespace(tokens);
+    // join consecutive whitespace tokens
+    const joinedTokens = joinWhitespace(splitTokens);
+
+    return {
+        ...data,
+        code: data.value,
+        tokens: joinedTokens,
+        lang: lighterLang,
+        annotations: [], // TODO: in the future
+        // annotations: compatAnnotations(annotations),
+        themeName: typeof theme === 'string' ? theme : theme?.name || 'unknown',
+        style
+    };
+}
+
+function compatAnnotations(annotations: any[]): CodeAnnotation[] {
+    const newAnnotations: CodeAnnotation[] = [];
+    for (const a of annotations) {
+        const {name, query, ranges} = a;
+        for (const r of ranges) {
+            if (r.lineNumber) {
+                const {lineNumber, fromColumn, toColumn} = r;
+                newAnnotations.push({
+                    name,
+                    query,
+                    lineNumber,
+                    fromColumn,
+                    toColumn
+                });
+            } else {
+                const {fromLineNumber, toLineNumber} = r;
+                newAnnotations.push({
+                    name,
+                    query,
+                    fromLineNumber,
+                    toLineNumber
+                });
+            }
+        }
+    }
+    return newAnnotations;
+}
+
+// group the Lines into one array
+function joinLines(lines: Lines): AnyToken[] {
+    const joinedTokens: AnyToken[] = [];
+    lines.forEach((lineOrGroup, i) => {
+        if ('lines' in lineOrGroup) {
+            throw new Error('Shouldnt be groups');
+        } else {
+            const tokens = joinTokens(lineOrGroup.tokens);
+            joinedTokens.push(...tokens);
+            if (i < lines.length - 1) {
+                joinedTokens.push('\n');
+            }
+        }
+    });
+    return joinedTokens;
+}
+
+function joinTokens(tokens: Tokens): AnyToken[] {
+    return tokens.map((tokenOrGroup) => {
+        if ('tokens' in tokenOrGroup) {
+            throw new Error('Shouldnt be groups');
+        } else {
+            const t = [tokenOrGroup.content] as Token;
+            const {color, ...rest} = tokenOrGroup.style || {};
+            t.push(color);
+            if (Object.keys(rest).length) {
+                t.push(rest);
+            }
+            return t;
+        }
+    });
+}
+
+function splitWhitespace(tokens: AnyToken[]) {
+    const ejected: AnyToken[] = [];
+    tokens.forEach((tokenOrGroup) => {
+        if (isWhitespace(tokenOrGroup)) {
+            ejected.push(tokenOrGroup);
+        } else {
+            const [before, content, after] = splitSurroundingWhitespace(
+                tokenOrGroup[0]
+            );
+            if (before?.length) {
+                ejected.push(before);
+            }
+            if (content.length) {
+                const copy = [...tokenOrGroup] as Token;
+                copy[0] = content;
+                ejected.push(copy);
+            }
+            if (after?.length) {
+                ejected.push(after);
+            }
+        }
+    });
+    return ejected;
+}
+
+function joinWhitespace(tokens: AnyToken[]) {
+    const joinedTokens: AnyToken[] = [];
+    tokens.forEach((tokenOrGroup) => {
+        if (isWhitespace(tokenOrGroup)) {
+            let last = joinedTokens[joinedTokens.length - 1];
+            if (last && isWhitespace(last)) {
+                joinedTokens[joinedTokens.length - 1] += tokenOrGroup;
+            } else if (tokenOrGroup !== '') {
+                joinedTokens.push(tokenOrGroup);
+            }
+        } else if (tokenOrGroup[0].length > 0) {
+            joinedTokens.push(tokenOrGroup);
+        }
+    });
+    return joinedTokens;
+}
+
+// splits " \t foo bar \n" into [" \t ","foo bar"," \n"]
+// "foo bar" -> ["","foo bar",""]
+function splitSurroundingWhitespace(content: string) {
+    const trimmed = content.trim();
+    const before = content.slice(0, content.indexOf(trimmed));
+    const after = content.slice(content.indexOf(trimmed) + trimmed.length);
+    return [before, trimmed, after];
+}

package/src/coder/Code/index.ts

@@ -0,0 +1,12 @@
+export {
+    annotations
+} from "./annotations"
+export type {
+    CodeProps
+} from "./Code"
+export {
+    Code
+} from "./Code"
+export {
+    highlight
+} from "./highlight"