@xyd-js/components 0.1.0-build.168

package/src/writer/IconSocial/IconSocial.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+
+import { Social } from "@xyd-js/core"
+
+export interface IconSocialProps extends React.SVGProps<SVGSVGElement> {
+    kind: Social
+}
+
+export function IconSocial({ kind, ...props }: IconSocialProps) {
+    switch (kind) {
+        case "x":
+            return <IconSocial.Twitter {...props} />
+        case "facebook":
+            return <IconSocial.Facebook {...props} />
+        case "youtube":
+            return <IconSocial.Youtube {...props} />
+        case "discord":
+            return <IconSocial.Discord {...props} />
+        case "slack":
+            return <IconSocial.Slack {...props} />
+        case "github":
+            return <IconSocial.Github {...props} />
+        case "linkedin":
+            return <IconSocial.Linkedin {...props} />
+        case "instagram":
+            return <IconSocial.Intagram {...props} />
+        case "hackernews":
+            return <IconSocial.HackerNews {...props} />
+        case "medium":
+            return <IconSocial.Medium {...props} />
+        case "telegram":
+            return <IconSocial.Telegram {...props} />
+        case "bluesky":
+            return <IconSocial.Bluesky {...props} />
+        case "reddit":
+            return <IconSocial.Reddit {...props} />
+    }
+
+    return null
+}
+
+IconSocial.Twitter = function IconSocialTwitter(props: React.SVGProps<SVGSVGElement>) {
+    return <svg xmlns="http://www.w3.org/2000/svg" color="currentColor" width="24" height="24" viewBox="0 0 512 512" style={{color: "currentcolor", fill: "currentcolor"}} {...props}>
+        <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
+    </svg>
+}
+
+IconSocial.Facebook = function IconSocialFacebook(props: React.SVGProps<SVGSVGElement>) {
+    return <svg xmlns="http://www.w3.org/2000/svg" color="currentColor" width="24" height="24" viewBox="0 0 512 512" style={{color: "currentcolor", fill: "currentcolor"}} {...props}>
+        <path d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z" />
+    </svg>
+}
+IconSocial.Youtube = function IconSocialYoutube(props: React.SVGProps<SVGSVGElement>) {
+    return <svg xmlns="http://www.w3.org/2000/svg" color="currentColor" width="24" height="24" viewBox="0 0 576 512" style={{color: "currentcolor", fill: "currentcolor"}} {...props}>
+        <path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z" />
+    </svg>
+}
+IconSocial.Discord = function IconSocialDiscord(props: React.SVGProps<SVGSVGElement>) {
+    return <svg xmlns="http://www.w3.org/2000/svg" color="currentColor" width="24" height="24" viewBox="0 0 640 512" style={{color: "currentcolor", fill: "currentcolor"}} {...props}>
+        <path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z" />
+    </svg>
+}
+IconSocial.Slack = function IconSocialSlack(props: React.SVGProps<SVGSVGElement>) {
+    return <svg xmlns="http://www.w3.org/2000/svg" color="currentColor" width="24" height="24" viewBox="0 0 448 512" style={{color: "currentcolor", fill: "currentcolor"}} {...props}>
+        <path d="M94.12 315.1c0 25.9-21.16 47.06-47.06 47.06S0 341 0 315.1c0-25.9 21.16-47.06 47.06-47.06h47.06v47.06zm23.72 0c0-25.9 21.16-47.06 47.06-47.06s47.06 21.16 47.06 47.06v117.84c0 25.9-21.16 47.06-47.06 47.06s-47.06-21.16-47.06-47.06V315.1zm47.06-188.98c-25.9 0-47.06-21.16-47.06-47.06S139 32 164.9 32s47.06 21.16 47.06 47.06v47.06H164.9zm0 23.72c25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06H47.06C21.16 243.96 0 222.8 0 196.9s21.16-47.06 47.06-47.06H164.9zm188.98 47.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06h-47.06V196.9zm-23.72 0c0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06V79.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06V196.9zM283.1 385.88c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06v-47.06h47.06zm0-23.72c-25.9 0-47.06-21.16-47.06-47.06 0-25.9 21.16-47.06 47.06-47.06h117.84c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06H283.1z" />
+    </svg>
+}
+IconSocial.Github = function IconSocialGithub(props: React.SVGProps<SVGSVGElement>) {
+    return <svg xmlns="http://www.w3.org/2000/svg" color="currentColor" width="24" height="24" viewBox="0 0 496 512" style={{color: "currentcolor", fill: "currentcolor"}} {...props}>
+        <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
+    </svg>
+}
+IconSocial.Linkedin = function IconSocialLinkedin(props: React.SVGProps<SVGSVGElement>) {
+    return <svg xmlns="http://www.w3.org/2000/svg" color="currentColor" width="24" height="24" viewBox="0 0 448 512" style={{color: "currentcolor", fill: "currentcolor"}} {...props}>
+        <path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" />
+    </svg>
+}
+IconSocial.Intagram = function IconSocialIntagram(props: React.SVGProps<SVGSVGElement>) {
+    return <svg xmlns="http://www.w3.org/2000/svg" color="currentColor" width="24" height="24" viewBox="0 0 448 512" style={{color: "currentcolor", fill: "currentcolor"}} {...props}>
+        <path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z" />
+    </svg>
+}
+IconSocial.HackerNews = function IconSocialHackerNews(props: React.SVGProps<SVGSVGElement>) {
+    return <svg xmlns="http://www.w3.org/2000/svg" color="currentColor" width="24" height="24" viewBox="0 0 448 512" style={{color: "currentcolor", fill: "currentcolor"}} {...props}>
+        <path d="M0 32v448h448V32H0zm21.2 197.2H21c.1-.1.2-.3.3-.4 0 .1 0 .3-.1.4zm218 53.9V384h-31.4V281.3L128 128h37.3c52.5 98.3 49.2 101.2 59.3 125.6 12.3-27 5.8-24.4 60.6-125.6H320l-80.8 155.1z" />
+    </svg>
+}
+IconSocial.Medium = function IconSocialMedium(props: React.SVGProps<SVGSVGElement>) {
+    return <svg xmlns="http://www.w3.org/2000/svg" color="currentColor" width="24" height="24" viewBox="0 0 640 512" style={{color: "currentcolor", fill: "currentcolor"}} {...props}>
+        <path d="M180.5,74.262C80.813,74.262,0,155.633,0,256S80.819,437.738,180.5,437.738,361,356.373,361,256,280.191,74.262,180.5,74.262Zm288.25,10.646c-49.845,0-90.245,76.619-90.245,171.095s40.406,171.1,90.251,171.1,90.251-76.619,90.251-171.1H559C559,161.5,518.6,84.908,468.752,84.908Zm139.506,17.821c-17.526,0-31.735,68.628-31.735,153.274s14.2,153.274,31.735,153.274S640,340.631,640,256C640,171.351,625.785,102.729,608.258,102.729Z" />
+    </svg>
+}
+IconSocial.Telegram = function IconSocialTelegram(props: React.SVGProps<SVGSVGElement>) {
+    return <svg xmlns="http://www.w3.org/2000/svg" color="currentColor" width="24" height="24" viewBox="0 0 496 512" style={{color: "currentcolor", fill: "currentcolor"}} {...props}>
+        <path d="M248,8C111.033,8,0,119.033,0,256S111.033,504,248,504,496,392.967,496,256,384.967,8,248,8ZM362.952,176.66c-3.732,39.215-19.881,134.378-28.1,178.3-3.476,18.584-10.322,24.816-16.948,25.425-14.4,1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25,5.342-39.5,3.652-3.793,67.107-61.51,68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608,69.142-14.845,10.194-26.894,9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7,18.45-13.7,108.446-47.248,144.628-62.3c68.872-28.647,83.183-33.623,92.511-33.789,2.052-.034,6.639.474,9.61,2.885a10.452,10.452,0,0,1,3.53,6.716A43.765,43.765,0,0,1,362.952,176.66Z" />
+    </svg>
+}
+IconSocial.Bluesky = function IconSocialBluesky(props: React.SVGProps<SVGSVGElement>) {
+    return <svg xmlns="http://www.w3.org/2000/svg" color="currentColor" width="24" height="24" viewBox="0 0 576 512" style={{color: "currentcolor", fill: "currentcolor"}} {...props}>
+        <path d="M407.8 294.7c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3zM288 227.1C261.9 176.4 190.9 81.9 124.9 35.3C61.6-9.4 37.5-1.7 21.6 5.5C3.3 13.8 0 41.9 0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7c3.3-.5 6.6-.9 10-1.4c-3.3 .5-6.6 1-10 1.4C74.3 308.6-9.1 342.8 100.3 464.5C220.6 589.1 265.1 437.8 288 361.1c22.9 76.7 49.2 222.5 185.6 103.4c102.4-103.4 28.1-156-65.8-169.9c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3c64.1 7.1 133.6-15.1 153.2-80.7C566.9 194 576 75 576 58.4s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8C385.1 81.9 314.1 176.4 288 227.1z" />
+    </svg>
+}
+IconSocial.Reddit = function IconSocialReddit(props: React.SVGProps<SVGSVGElement>) {
+    return <svg xmlns="http://www.w3.org/2000/svg" color="currentColor" width="24" height="24" viewBox="0 0 512 512" style={{color: "currentcolor", fill: "currentcolor"}} {...props}>
+        <path d="M0 256C0 114.6 114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256L37.1 512c-13.7 0-20.5-16.5-10.9-26.2L75 437C28.7 390.7 0 326.7 0 256zM349.6 153.6c23.6 0 42.7-19.1 42.7-42.7s-19.1-42.7-42.7-42.7c-20.6 0-37.8 14.6-41.8 34c-34.5 3.7-61.4 33-61.4 68.4l0 .2c-37.5 1.6-71.8 12.3-99 29.1c-10.1-7.8-22.8-12.5-36.5-12.5c-33 0-59.8 26.8-59.8 59.8c0 24 14.1 44.6 34.4 54.1c2 69.4 77.6 125.2 170.6 125.2s168.7-55.9 170.6-125.3c20.2-9.6 34.1-30.2 34.1-54c0-33-26.8-59.8-59.8-59.8c-13.7 0-26.3 4.6-36.4 12.4c-27.4-17-62.1-27.7-100-29.1l0-.2c0-25.4 18.9-46.5 43.4-49.9l0 0c4.4 18.8 21.3 32.8 41.5 32.8zM177.1 246.9c16.7 0 29.5 17.6 28.5 39.3s-13.5 29.6-30.3 29.6s-31.4-8.8-30.4-30.5s15.4-38.3 32.1-38.3zm190.1 38.3c1 21.7-13.7 30.5-30.4 30.5s-29.3-7.9-30.3-29.6c-1-21.7 11.8-39.3 28.5-39.3s31.2 16.6 32.1 38.3zm-48.1 56.7c-10.3 24.6-34.6 41.9-63 41.9s-52.7-17.3-63-41.9c-1.2-2.9 .8-6.2 3.9-6.5c18.4-1.9 38.3-2.9 59.1-2.9s40.7 1 59.1 2.9c3.1 .3 5.1 3.6 3.9 6.5z" />
+    </svg>
+}

package/src/writer/IconSocial/index.ts

@@ -0,0 +1 @@
+export * from "./IconSocial"

package/src/writer/Image/Image.styles.tsx

@@ -0,0 +1,9 @@
+import { css } from "@linaria/core"
+
+export const ImageHost = css`
+    @layer defaults {
+        width: 100%;
+        border-radius: 16px;
+        box-shadow: 0 2px 16px rgba(0,0,0,0.06);
+    }
+`;

package/src/writer/Image/Image.tsx

@@ -0,0 +1,35 @@
+
+
+import React from 'react';
+
+import * as cn from "./Image.styles"
+
+export interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    src: string
+    alt: string
+    style?: React.CSSProperties
+    caption?: string
+}
+
+export function Image(props: ImageProps) {
+    const { src, alt, style, caption, children, ...rest } = props
+
+    const img = <img
+        src={src}
+        alt={alt}
+        style={style}
+        className={cn.ImageHost}
+        {...rest}
+    />
+
+    if (!caption) {
+        return img
+    }
+
+    return <>
+        <figure>
+            {img}
+            <figcaption>{caption}</figcaption>
+        </figure>
+    </>
+}

package/src/writer/Image/index.ts

@@ -0,0 +1 @@
+export { Image } from "./Image"

package/src/writer/List/List.styles.tsx

@@ -0,0 +1,47 @@
+import { css } from '@linaria/core'
+
+export default {
+    List: css`
+        @layer defaults {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+
+            ol& {
+                list-style-type: decimal;
+                padding-inline-start: 1.625em;
+            }
+        }
+    `,
+    Item: css`
+        @layer defaults {
+            ul & {
+                margin-bottom: 0.5rem;
+                position: relative;
+                padding-inline-start: .375em;
+                padding-left: 2em !important;
+            }
+
+            /*  TODO: IN THE FUTURE BETTER SOLUTION IS NEEDED */
+            xyd-grid-decorator ul & {
+                padding-left: 0 !important;
+            }
+
+            ul &::before {
+                content: "";
+                width: .375em;
+                height: .375em;
+                position: absolute;
+                top: 0.5em;
+                left: .5em;
+                border-radius: 50%;
+                background-color: var(--xyd-list-item-bgcolor);
+            }
+
+            ol &::marker {
+                padding-inline-start: .375em;
+                color: var(--xyd-list-marker-color);
+            }
+        }
+    `
+}

package/src/writer/List/List.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+
+import cn from "./List.styles";
+
+export interface ListProps {
+    children: React.ReactNode;
+}
+
+export function List({ children }: ListProps) {
+    return <ul className={cn.List}>
+        {children}
+    </ul>
+}
+
+export function ListOl({ children }: ListProps) {
+    return <ol className={cn.List}>
+        {children}
+    </ol>
+}
+
+export interface ListItemProps {
+    children: React.ReactNode;
+}
+
+function ListItem({ children }: ListItemProps) {
+    return <li className={cn.Item}>{children}</li>
+}
+
+List.Item = ListItem;

package/src/writer/List/index.ts

@@ -0,0 +1,4 @@
+export {
+    List,
+    ListOl
+} from "./List";

package/src/writer/NavLinks/NavLinks.styles.ts

@@ -0,0 +1,32 @@
+import {css} from "@linaria/core";
+
+export const NavLinksHost = css`
+    @layer defaults {
+        font-weight: var(--xyd-font-weight-semibold);
+        display: flex;
+        padding-top: 2rem;
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+        justify-content: space-between;
+        align-items: center;
+        border-top-width: 1px;
+        border-color: var(--xyd-navlinks-border-color);
+
+        [part="link"] {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+            transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            transition-duration: 300ms;
+            max-width: 50%;
+        }
+
+        [part="icon"] {
+            display: inline;
+            height: 1.25rem;
+            flex-shrink: 0;
+        }
+    }
+`;
+

package/src/writer/NavLinks/NavLinks.tsx

@@ -0,0 +1,95 @@
+import React from "react"
+
+import * as cn from "./NavLinks.styles";
+
+export interface NavLinksProps {
+    prev?: {
+        title: string
+        href: string
+    }
+    next?: {
+        title: string
+        href: string
+    }
+
+    as?: React.ElementType
+
+    className?: string
+}
+
+export function NavLinks(
+    props: NavLinksProps
+) {
+    const Link = props.as || $Anchor
+
+    return (
+        <xyd-navlinks
+            className={`${cn.NavLinksHost} ${props.className || ""}`}
+        >
+            {props.prev ? (
+                <Link
+                    href={props.prev.href}
+                    title={props.prev.title}
+                    part="link"
+                >
+                    <$ArrowLeftIcon part="icon"/>
+                    {props.prev.title}
+                </Link>
+            ) : <div/>}
+            {props.next && (
+                <Link
+                    href={props.next.href}
+                    title={props.next.title}
+                    part="link"
+                >
+                    {props.next.title}
+                    <$ArrowRightIcon part="icon"/>
+                </Link>
+            )}
+        </xyd-navlinks>
+    )
+}
+
+
+function $Anchor({children, ...rest}) {
+    return <a {...rest}>
+        {children}
+    </a>
+}
+
+
+function $ArrowRightIcon(props: React.SVGProps<SVGSVGElement>) {
+    return <svg
+        width={15}
+        height={15}
+        viewBox="0 0 15 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+        <path
+            d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z"
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+        />
+    </svg>
+}
+
+function $ArrowLeftIcon(props: React.SVGProps<SVGSVGElement>) {
+    return  <svg
+        width={15}
+        height={15}
+        viewBox="0 0 15 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+        <path
+            d="M6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355L3.70711 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H3.70711L6.85355 11.1464C7.04882 11.3417 7.04882 11.6583 6.85355 11.8536C6.65829 12.0488 6.34171 12.0488 6.14645 11.8536L2.14645 7.85355C1.95118 7.65829 1.95118 7.34171 2.14645 7.14645L6.14645 3.14645C6.34171 2.95118 6.65829 2.95118 6.85355 3.14645Z"
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+        />
+    </svg>
+}

package/src/writer/NavLinks/index.ts

@@ -0,0 +1,7 @@
+export {
+    NavLinks
+} from "./NavLinks"
+
+export type {
+    NavLinksProps,
+} from "./NavLinks";

package/src/writer/Pre/Pre.styles.tsx

@@ -0,0 +1,13 @@
+import {css} from "@linaria/core";
+
+export const PreHost = css`
+    @layer defaults {
+        margin-top: 0;
+        border-radius: 6px;
+        padding: 16px;
+        border: 0;
+
+        background-color: var(--xyd-pre-bgcolor);
+        overflow: auto;
+    }
+`;

package/src/writer/Pre/Pre.tsx

@@ -0,0 +1,14 @@
+import React from "react"
+
+import * as cn from "./Pre.styles"
+
+export interface PreProps {
+    children: React.ReactNode
+    className?: string
+}
+
+export function Pre({ children, className }: PreProps) {
+    return <pre className={`${cn.PreHost} ${className || ""}`}>
+        {children}
+    </pre>
+}

package/src/writer/Pre/index.ts

@@ -0,0 +1,3 @@
+export {Pre} from "./Pre"
+
+export type {PreProps} from "./Pre"

package/src/writer/README.md

@@ -0,0 +1 @@
+# @xyd-js/components/writer

package/src/writer/Steps/Steps.styles.tsx

@@ -0,0 +1,91 @@
+import { css } from "@linaria/core";
+
+const bulletPx = 24;
+const lineWidth = 0.5;
+
+export const StepsHost = css`
+    display: block;
+
+    @layer defaults {
+        ol {
+            padding-left: 0;
+            list-style: none;
+            counter-reset: ordered-listitem;
+
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+    
+
+        &[data-kind="secondary"] {
+            li {
+                margin-bottom: 32px;
+            }
+
+            li::before {
+                content: "";
+                position: absolute;
+                border: ${lineWidth}px solid var(--dark32);
+                height: 100%;
+                top: calc(${bulletPx}px + 6px);
+                left: calc(${bulletPx}px / 2 - (${lineWidth}px / 2));
+            }
+        }
+    }
+`;
+
+export const StepsItem = css`
+    @layer defaults {
+        li {
+            padding-left: 32px;
+            position: relative;
+        }
+
+        [part="title"] {
+            display: block;
+            margin-bottom: 32px;
+            font-weight: var(--xyd-font-weight-medium);
+        }
+
+        &[data-numeric="true"] {
+            li::after {
+                position: absolute;
+                top: 0;
+                left: 0;
+                counter-increment: ordered-listitem;
+                content: counter(ordered-listitem);
+
+                background: var(--xyd-steps-marker-bgcolor);
+                color: var(--xyd-steps-marker-color);
+                font-size: var(--xyd-font-size-xsmall);
+                line-height: var(--xyd-line-height-medium);
+                font-weight: var(--xyd-font-weight-medium);
+                text-align: center;
+                height: ${bulletPx}px;
+                width: ${bulletPx}px;
+                border-radius: 12px;
+            }
+        }
+
+        [part="step"] {
+            position: absolute;
+            top: 0;
+            left: 0;
+
+            background: var(--xyd-steps-marker-bgcolor);
+            color: var(--xyd-steps-marker-color);
+            font-size: var(--xyd-font-size-xsmall);
+            line-height: var(--xyd-line-height-medium);
+            font-weight: var(--xyd-font-weight-medium);
+            text-align: center;
+            height: ${bulletPx}px;
+            width: ${bulletPx}px;
+            border-radius: 12px;
+
+            svg {
+                width: 12px !important; // TODO: remove !important
+            }
+        }
+    }
+`;

package/src/writer/Steps/Steps.tsx

@@ -0,0 +1,75 @@
+import React from "react"
+
+import * as cn from "./Steps.styles";
+import { Icon } from "../Icon"
+
+/**
+ * Props for the Steps component
+ */
+export interface StepsProps {
+    /** Content to be rendered inside the steps list */
+    children: React.ReactNode;
+
+    /** Optional CSS class name to be applied to the steps container */
+    className?: string;
+
+    /** Optional kind of steps to be rendered */
+    kind?: "secondary" | undefined;
+}
+
+/**
+ * Steps component that renders a numbered list of steps or stages.
+ * Use this component to display a sequence of steps in a process or workflow.
+ * 
+ * @category Component
+ */
+export function Steps({ children, className, kind }: StepsProps) {
+    return <xyd-steps
+        data-kind={kind}
+        className={`${cn.StepsHost} ${className || ""}`}
+    >
+        <ol>
+            {children}
+        </ol>
+    </xyd-steps>
+}
+
+/**
+ * Props for the Steps.Item component
+ */
+export interface StepsItemProps {
+    /** Content to be rendered inside the step item */
+    children: React.ReactNode;
+
+    /** Optional icon to be displayed in the step item */
+    icon?: string | React.ReactNode;
+
+    /** Optional title to be displayed in the step item */
+    title?: string;
+
+    /** Optional CSS class name to be applied to the step item */
+    className?: string;
+}
+
+/**
+ * Individual step item component that represents a single step in the sequence.
+ * This component should be used as a child of the Steps component.
+ * 
+ * @category Component
+ */
+Steps.Item = function StepsItem({ children, icon, title, className }: StepsItemProps) {
+    const iconElement = typeof icon === "string" ? <Icon name={icon} /> : icon;
+
+    return <xyd-steps-item
+        className={`${cn.StepsItem} ${className || ""}`}
+        data-numeric={!icon ? "true" : undefined}
+    >
+        <li>
+            {title && <span part="title">{title}</span>}
+
+            {children}
+
+            {iconElement && <span part="step">{iconElement}</span>}
+        </li>
+    </xyd-steps-item>
+}

package/src/writer/Steps/index.ts

@@ -0,0 +1,5 @@
+export {
+    Steps
+} from "./Steps";
+
+export type {StepsProps} from "./Steps";