@node-core/ui-components 0.0.1 → 1.0.1-f948ce8a25da149fc61135f90a43e189c4909f5d

package/Icons/OperatingSystem/Microsoft.tsx

@@ -0,0 +1,19 @@
+import type { FC, SVGProps } from 'react';
+
+const Microsoft: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path fill="#FEBA08" d="M17 17h10v10H17z" />
+    <path fill="#05A6F0" d="M5 17h10v10H5z" />
+    <path fill="#80BC06" d="M17 5h10v10H17z" />
+    <path fill="#F25325" d="M5 5h10v10H5z" />
+  </svg>
+);
+
+export default Microsoft;

package/Icons/OperatingSystem/index.ts

@@ -0,0 +1,6 @@
+import AIX from '#ui/Icons/OperatingSystem/AIX';
+import Apple from '#ui/Icons/OperatingSystem/Apple';
+import Linux from '#ui/Icons/OperatingSystem/Linux';
+import Microsoft from '#ui/Icons/OperatingSystem/Microsoft';
+
+export { AIX, Apple, Linux, Microsoft };

package/Icons/PackageManager/Npm.tsx

@@ -0,0 +1,21 @@
+import type { FC, SVGProps } from 'react';
+
+const NpmIcon: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="32px"
+    height="32px"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g fill="none" fillRule="evenodd">
+      <rect width="24" height="24" fill="#D40001" />
+      <path
+        fill="#fff"
+        d="M16.7179487,7.92840493 L12.2051282,7.92840493 L12.2051282,20.2494172 L4,20.2494172 L4,3 L12.2051282,3 L20,3 L20,7.92840493 L20,20.2494172 L16.7179487,20.2494172 L16.7179487,7.92840493 Z"
+      />
+    </g>
+  </svg>
+);
+
+export default NpmIcon;

package/Icons/PackageManager/Pnpm.tsx

@@ -0,0 +1,22 @@
+import type { FC, SVGProps } from 'react';
+
+const PnpmIcon: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="32px"
+    height="32px"
+    viewBox="0 0 32 32"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M30,10.75H21.251V2H30Z" fill="#f9ad00" />
+    <path d="M20.374,10.75h-8.75V2h8.75Z" fill="#f9ad00" />
+    <path d="M10.749,10.75H2V2h8.749Z" fill="#f9ad00" />
+    <path d="M30,20.375H21.251v-8.75H30Z" fill="#f9ad00" />
+    <path d="M20.374,20.375h-8.75v-8.75h8.75Z" fill="#4e4e4e" />
+    <path d="M20.374,30h-8.75V21.25h8.75Z" fill="#4e4e4e" />
+    <path d="M30,30H21.251V21.25H30Z" fill="#4e4e4e" />
+    <path d="M10.749,30H2V21.25h8.749Z" fill="#4e4e4e" />
+  </svg>
+);
+
+export default PnpmIcon;

package/Icons/PackageManager/Yarn.tsx

@@ -0,0 +1,22 @@
+import type { FC, SVGProps } from 'react';
+
+const YarnIcon: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="32px"
+    height="32px"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 518 518"
+    {...props}
+  >
+    <path
+      fill="#2c8ebb"
+      d="M259 0c143 0 259 116 259 259S402 518 259 518 0 402 0 259 116 0 259 0z"
+    />
+    <path
+      fill="#fff"
+      d="M435.2 337.5c-1.8-14.2-13.8-24-29.2-23.8-23 .3-42.3 12.2-55.1 20.1-5 3.1-9.3 5.4-13 7.1.8-11.6.1-26.8-5.9-43.5-7.3-20-17.1-32.3-24.1-39.4 8.1-11.8 19.2-29 24.4-55.6 4.5-22.7 3.1-58-7.2-77.8-2.1-4-5.6-6.9-10-8.1-1.8-.5-5.2-1.5-11.9.4C293.1 96 289.6 93.8 286.9 92c-5.6-3.6-12.2-4.4-18.4-2.1-8.3 3-15.4 11-22.1 25.2-1 2.1-1.9 4.1-2.7 6.1-12.7.9-32.7 5.5-49.6 23.8-2.1 2.3-6.2 4-10.5 5.6h.1c-8.8 3.1-12.8 10.3-17.7 23.3-6.8 18.2.2 36.1 7.1 47.7-9.4 8.4-21.9 21.8-28.5 37.5-8.2 19.4-9.1 38.4-8.8 48.7-7 7.4-17.8 21.3-19 36.9-1.6 21.8 6.3 36.6 9.8 42 1 1.6 2.1 2.9 3.3 4.2-.4 2.7-.5 5.6.1 8.6 1.3 7 5.7 12.7 12.4 16.3 13.2 7 31.6 10 45.8 2.9 5.1 5.4 14.4 10.6 31.3 10.6h1c4.3 0 58.9-2.9 74.8-6.8 7.1-1.7 12-4.7 15.2-7.4 10.2-3.2 38.4-12.8 65-30 18.8-12.2 25.3-14.8 39.3-18.2 13.6-3.3 22.1-15.7 20.4-29.4zm-23.8 14.7c-16 3.8-24.1 7.3-43.9 20.2-30.9 20-64.7 29.3-64.7 29.3s-2.8 4.2-10.9 6.1c-14 3.4-66.7 6.3-71.5 6.4-12.9.1-20.8-3.3-23-8.6-6.7-16 9.6-23 9.6-23s-3.6-2.2-5.7-4.2c-1.9-1.9-3.9-5.7-4.5-4.3-2.5 6.1-3.8 21-10.5 27.7-9.2 9.3-26.6 6.2-36.9.8-11.3-6 .8-20.1.8-20.1s-6.1 3.6-11-3.8c-4.4-6.8-8.5-18.4-7.4-32.7 1.2-16.3 19.4-32.1 19.4-32.1s-3.2-24.1 7.3-48.8c9.5-22.5 35.1-40.6 35.1-40.6s-21.5-23.8-13.5-45.2c5.2-14 7.3-13.9 9-14.5 6-2.3 11.8-4.8 16.1-9.5 21.5-23.2 48.9-18.8 48.9-18.8s13-39.5 25-31.8c3.7 2.4 17 32 17 32s14.2-8.3 15.8-5.2c8.6 16.7 9.6 48.6 5.8 68-6.4 32-22.4 49.2-28.8 60-1.5 2.5 17.2 10.4 29 43.1 10.9 29.9 1.2 55 2.9 57.8.3.5.4.7.4.7s12.5 1 37.6-14.5c13.4-8.3 29.3-17.6 47.4-17.8 17.5-.3 18.4 20.2 5.2 23.4z"
+    />
+  </svg>
+);
+
+export default YarnIcon;

package/Icons/PackageManager/index.ts

@@ -0,0 +1,5 @@
+import NPM from '#ui/Icons/PackageManager/Npm';
+import PNPM from '#ui/Icons/PackageManager/Pnpm';
+import YARN from '#ui/Icons/PackageManager/Yarn';
+
+export { NPM, PNPM, YARN };

package/Icons/Social/Bluesky.tsx

@@ -0,0 +1,19 @@
+import type { FC, SVGProps } from 'react';
+
+const BlueskyIcon: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 568 501"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#1185FE"
+      d="M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.135-1.612 123.121 33.664Z"
+    />
+  </svg>
+);
+
+export default BlueskyIcon;

package/Icons/Social/Discord.tsx

@@ -0,0 +1,20 @@
+import type { FC, SVGProps } from 'react';
+
+const Discord: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 -28.5 256 256"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z"
+      fill="#5865F2"
+      fillRule="nonzero"
+    />
+  </svg>
+);
+
+export default Discord;

package/Icons/Social/GitHub.tsx

@@ -0,0 +1,16 @@
+import type { FC, SVGProps } from 'react';
+
+const GitHubIcon: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M10 1.25C5.16562 1.25 1.25 5.16562 1.25 10C1.25 13.8719 3.75469 17.1422 7.23281 18.3016C7.67031 18.3781 7.83437 18.1156 7.83437 17.8859C7.83437 17.6781 7.82344 16.9891 7.82344 16.2563C5.625 16.6609 5.05625 15.7203 4.88125 15.2281C4.78281 14.9766 4.35625 14.2 3.98438 13.9922C3.67812 13.8281 3.24063 13.4234 3.97344 13.4125C4.6625 13.4016 5.15469 14.0469 5.31875 14.3094C6.10625 15.6328 7.36406 15.2609 7.86719 15.0312C7.94375 14.4625 8.17344 14.0797 8.425 13.8609C6.47813 13.6422 4.44375 12.8875 4.44375 9.54062C4.44375 8.58906 4.78281 7.80156 5.34062 7.18906C5.25313 6.97031 4.94687 6.07344 5.42812 4.87031C5.42812 4.87031 6.16094 4.64063 7.83437 5.76719C8.53438 5.57031 9.27813 5.47187 10.0219 5.47187C10.7656 5.47187 11.5094 5.57031 12.2094 5.76719C13.8828 4.62969 14.6156 4.87031 14.6156 4.87031C15.0969 6.07344 14.7906 6.97031 14.7031 7.18906C15.2609 7.80156 15.6 8.57812 15.6 9.54062C15.6 12.8984 13.5547 13.6422 11.6078 13.8609C11.925 14.1344 12.1984 14.6594 12.1984 15.4797C12.1984 16.65 12.1875 17.5906 12.1875 17.8859C12.1875 18.1156 12.3516 18.3891 12.7891 18.3016C14.5261 17.7152 16.0355 16.5988 17.1048 15.1096C18.1741 13.6204 18.7495 11.8333 18.75 10C18.75 5.16562 14.8344 1.25 10 1.25Z" />
+  </svg>
+);
+
+export default GitHubIcon;

package/Icons/Social/LinkedIn.tsx

@@ -0,0 +1,16 @@
+import type { FC, SVGProps } from 'react';
+
+const LinkedInIcon: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z" />
+  </svg>
+);
+
+export default LinkedInIcon;

package/Icons/Social/Mastodon.tsx

@@ -0,0 +1,36 @@
+import type { FC, SVGProps } from 'react';
+
+const MastodonIcon: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 75 79"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M73.8393 17.4898C72.6973 9.00165 65.2994 2.31235 56.5296 1.01614C55.05 0.797115 49.4441 0 36.4582 0H36.3612C23.3717 0 20.585 0.797115 19.1054 1.01614C10.5798 2.27644 2.79399 8.28712 0.904997 16.8758C-0.00358524 21.1056 -0.100549 25.7949 0.0682394 30.0965C0.308852 36.2651 0.355538 42.423 0.91577 48.5665C1.30307 52.6474 1.97872 56.6957 2.93763 60.6812C4.73325 68.042 12.0019 74.1676 19.1233 76.6666C26.7478 79.2728 34.9474 79.7055 42.8039 77.9162C43.6682 77.7151 44.5217 77.4817 45.3645 77.216C47.275 76.6092 49.5123 75.9305 51.1571 74.7385C51.1797 74.7217 51.1982 74.7001 51.2112 74.6753C51.2243 74.6504 51.2316 74.6229 51.2325 74.5948V68.6416C51.2321 68.6154 51.2259 68.5896 51.2142 68.5661C51.2025 68.5426 51.1858 68.522 51.1651 68.5058C51.1444 68.4896 51.1204 68.4783 51.0948 68.4726C51.0692 68.4669 51.0426 68.467 51.0171 68.4729C45.9835 69.675 40.8254 70.2777 35.6502 70.2682C26.7439 70.2682 24.3486 66.042 23.6626 64.2826C23.1113 62.762 22.7612 61.1759 22.6212 59.5646C22.6197 59.5375 22.6247 59.5105 22.6357 59.4857C22.6466 59.4609 22.6633 59.4391 22.6843 59.422C22.7053 59.4048 22.73 59.3929 22.7565 59.3871C22.783 59.3813 22.8104 59.3818 22.8367 59.3886C27.7864 60.5826 32.8604 61.1853 37.9522 61.1839C39.1768 61.1839 40.3978 61.1839 41.6224 61.1516C46.7435 61.008 52.1411 60.7459 57.1796 59.7621C57.3053 59.7369 57.431 59.7154 57.5387 59.6831C65.4861 58.157 73.0493 53.3672 73.8178 41.2381C73.8465 40.7606 73.9184 36.2364 73.9184 35.7409C73.9219 34.0569 74.4606 23.7949 73.8393 17.4898Z"
+      fill="url(#paint0_linear_549_34)"
+    />
+    <path
+      d="M61.2484 27.0263V48.114H52.8916V27.6475C52.8916 23.3388 51.096 21.1413 47.4437 21.1413C43.4287 21.1413 41.4177 23.7409 41.4177 28.8755V40.0782H33.1111V28.8755C33.1111 23.7409 31.0965 21.1413 27.0815 21.1413C23.4507 21.1413 21.6371 23.3388 21.6371 27.6475V48.114H13.2839V27.0263C13.2839 22.7176 14.384 19.2946 16.5843 16.7572C18.8539 14.2258 21.8311 12.926 25.5264 12.926C29.8036 12.926 33.0357 14.5705 35.1905 17.8559L37.2698 21.346L39.3527 17.8559C41.5074 14.5705 44.7395 12.926 49.0095 12.926C52.7013 12.926 55.6784 14.2258 57.9553 16.7572C60.1531 19.2922 61.2508 22.7152 61.2484 27.0263Z"
+      fill="white"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_549_34"
+        x1="37.0692"
+        y1="0"
+        x2="37.0692"
+        y2="79"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#6364FF" />
+        <stop offset="1" stopColor="#563ACC" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+export default MastodonIcon;

package/Icons/Social/Slack.tsx

@@ -0,0 +1,31 @@
+import type { FC, SVGProps } from 'react';
+
+const SlackIcon: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#2EB67D"
+      d="M16.563 9.375A1.562 1.562 0 1 0 15 7.813v1.562h1.563Zm-4.375 0c.862 0 1.562-.7 1.562-1.563V3.438a1.563 1.563 0 0 0-3.125 0v4.374c0 .863.7 1.563 1.563 1.563Z"
+    />
+    <path
+      fill="#E01E5A"
+      d="M3.437 10.625A1.562 1.562 0 1 0 5 12.187v-1.562H3.437Zm4.376 0c-.863 0-1.563.7-1.563 1.563v4.374a1.563 1.563 0 0 0 3.125 0v-4.374c0-.863-.7-1.563-1.563-1.563Z"
+    />
+    <path
+      fill="#ECB22E"
+      d="M10.625 16.563A1.562 1.562 0 1 0 12.187 15h-1.562v1.563Zm0-4.375c0 .862.7 1.562 1.563 1.562h4.374a1.562 1.562 0 1 0 0-3.125h-4.374c-.863 0-1.563.7-1.563 1.563Z"
+    />
+    <path
+      fill="#36C5F0"
+      d="M9.375 3.437A1.562 1.562 0 1 0 7.813 5h1.562V3.437Zm0 4.376c0-.863-.7-1.563-1.563-1.563H3.438a1.563 1.563 0 0 0 0 3.125h4.374c.863 0 1.563-.7 1.563-1.563Z"
+    />
+  </svg>
+);
+
+export default SlackIcon;

package/Icons/Social/X.tsx

@@ -0,0 +1,16 @@
+import type { FC, SVGProps } from 'react';
+
+const XIcon: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
+  </svg>
+);
+
+export default XIcon;

package/Icons/Social/index.ts

@@ -0,0 +1,9 @@
+import Bluesky from '#ui/Icons/Social/Bluesky';
+import Discord from '#ui/Icons/Social/Discord';
+import GitHub from '#ui/Icons/Social/GitHub';
+import LinkedIn from '#ui/Icons/Social/LinkedIn';
+import Mastodon from '#ui/Icons/Social/Mastodon';
+import Slack from '#ui/Icons/Social/Slack';
+import X from '#ui/Icons/Social/X';
+
+export { Bluesky, Discord, GitHub, LinkedIn, Mastodon, Slack, X };

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright Node.js Website WG contributors. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to
+deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+IN THE SOFTWARE.

package/package.json

@@ -1,8 +1,92 @@
 {
   "name": "@node-core/ui-components",
-  "version": "0.0.1",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/nodejs/nodejs.org.git"
+  "type": "module",
+  "exports": {
+    "./*": [
+      "./*",
+      "./*.tsx",
+      "./*/index.tsx",
+      "./*.ts",
+      "./*/index.ts"
+    ]
+  },
+  "files": [
+    "Common",
+    "Containers",
+    "Icons",
+    "styles",
+    "types.ts",
+    "stylelint"
+  ],
+  "dependencies": {
+    "@heroicons/react": "^2.2.0",
+    "@radix-ui/react-avatar": "^1.1.9",
+    "@radix-ui/react-dialog": "^1.1.7",
+    "@radix-ui/react-dropdown-menu": "~2.1.6",
+    "@radix-ui/react-label": "~2.1.2",
+    "@radix-ui/react-select": "~2.2.2",
+    "@radix-ui/react-separator": "~1.1.3",
+    "@radix-ui/react-tabs": "~1.1.3",
+    "@radix-ui/react-toast": "~1.2.6",
+    "@radix-ui/react-tooltip": "~1.2.4",
+    "@tailwindcss/postcss": "~4.1.5",
+    "@vcarl/remark-headings": "~0.1.0",
+    "classnames": "~2.5.1",
+    "postcss-calc": "^10.1.1",
+    "tailwindcss": "~4.0.17"
+  },
+  "devDependencies": {
+    "@storybook/addon-controls": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-styling-webpack": "^1.0.1",
+    "@storybook/addon-themes": "^8.6.12",
+    "@storybook/addon-viewport": "^8.6.12",
+    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-webpack5": "^8.6.12",
+    "@testing-library/user-event": "~14.6.1",
+    "@types/node": "22.15.3",
+    "@types/react": "^19.1.0",
+    "cross-env": "^7.0.3",
+    "css-loader": "~7.1.2",
+    "eslint-plugin-react": "~7.37.4",
+    "eslint-plugin-storybook": "~0.12.0",
+    "global-jsdom": "^26.0.0",
+    "postcss-loader": "~8.1.1",
+    "react": "^19.1.0",
+    "storybook": "^8.6.11",
+    "style-loader": "~4.0.0",
+    "stylelint": "^16.19.1",
+    "stylelint-config-standard": "^38.0.0",
+    "stylelint-order": "7.0.0",
+    "stylelint-selector-bem-pattern": "4.0.1",
+    "tsx": "^4.19.3",
+    "typescript": "~5.8.2",
+    "typescript-eslint": "~8.31.1"
+  },
+  "imports": {
+    "#ui/*": [
+      "./*",
+      "./*.tsx",
+      "./*/index.tsx",
+      "./*.ts",
+      "./*/index.ts"
+    ]
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "version": "1.0.1-f948ce8a25da149fc61135f90a43e189c4909f5d",
+  "scripts": {
+    "check-types": "tsc --noEmit",
+    "lint": "turbo run lint:js lint:css",
+    "lint:css": "stylelint \"**/*.css\" --allow-empty-input --cache --cache-strategy=content --cache-location=.stylelintcache",
+    "lint:fix": "turbo run lint:js lint:css --no-cache -- --fix",
+    "lint:js": "eslint \"**/*.{js,mjs,ts,tsx}\"",
+    "storybook": "cross-env NODE_NO_WARNINGS=1 storybook dev -p 6006 --quiet",
+    "storybook:build": "cross-env NODE_NO_WARNINGS=1 storybook build --quiet --webpack-stats-json",
+    "test": "turbo test:unit",
+    "test:unit": "cross-env NODE_NO_WARNINGS=1 node --experimental-test-coverage --test-coverage-exclude=**/*.test.* --enable-source-maps --import=global-jsdom/register --import=tsx --import=../../tests/setup.mjs --test **/*.test.*",
+    "test:unit:watch": "cross-env NODE_OPTIONS=\"--watch\" pnpm test:unit"
   }
-}
+}

package/stylelint/__tests__/index.test.mjs

@@ -0,0 +1,80 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+
+import {
+  indentClassNames,
+  cleanClassNames,
+  applyIndentation,
+} from '../utils.mjs';
+
+describe('cleanClassNames', () => {
+  it('removes newlines and extra spaces', () => {
+    const input = '  text-xl   \r   font-bold \n\n   text-center  ';
+    const expected = 'text-xl font-bold text-center';
+
+    assert.equal(cleanClassNames(input), expected);
+  });
+
+  it('trims leading and trailing spaces', () => {
+    const input = '   mt-4   ';
+    const expected = 'mt-4';
+
+    assert.equal(cleanClassNames(input), expected);
+  });
+
+  it('returns empty string when input is empty', () => {
+    assert.equal(cleanClassNames(''), '');
+  });
+});
+
+describe('applyIndentation', () => {
+  it('adds indentation to each class name', () => {
+    const input = 'text-xl font-bold text-center';
+    const indent = '    ';
+    const expected = ['text-xl', '    font-bold', '    text-center'].join('\n');
+
+    assert.equal(applyIndentation(input, indent), expected);
+  });
+});
+
+describe('indentClassNames', () => {
+  it('returns null if rule is missing required properties', () => {
+    assert.equal(indentClassNames(null), null);
+    assert.equal(indentClassNames({}), null);
+    assert.equal(indentClassNames({ params: 'foo' }), null);
+    assert.equal(indentClassNames({ params: 'foo', raws: {} }), null);
+  });
+
+  it('cleans and indents class names correctly', () => {
+    const rule = {
+      params: '  text-xl \n font-bold  \n text-center ',
+      raws: {
+        before: '  ',
+      },
+    };
+
+    const result = indentClassNames({ ...rule });
+    const expectedParams = ['text-xl', '   font-bold', '   text-center'].join(
+      '\n'
+    );
+
+    assert.deepEqual(result, {
+      ...rule,
+      params: expectedParams,
+    });
+  });
+
+  it('returns the same rule object with modified params', () => {
+    const rule = {
+      params: 'p-4 mb-2',
+      raws: { before: '  \n' },
+    };
+
+    const result = indentClassNames(rule);
+
+    assert.deepEqual(result, {
+      ...result,
+      params: 'p-4\n    mb-2',
+    });
+  });
+});

package/stylelint/one-utility-class-per-line.mjs

@@ -0,0 +1,64 @@
+import stylelint from 'stylelint';
+
+import { indentClassNames } from './utils.mjs';
+
+const {
+  createPlugin,
+  utils: { report, ruleMessages },
+} = stylelint;
+
+const name = 'nodejs/one-utility-class-per-line';
+
+const messages = ruleMessages(name, {
+  className: classNames =>
+    `Each line should contain only one Tailwind utility class; "${classNames}"`,
+  spacing: classNames =>
+    `Each utility class used with @apply should be indented by 2 spaces on a new line; ${classNames}`,
+});
+
+const meta = {
+  url: 'https://github.com/nodejs/nodejs.org/blob/main/COLLABORATOR_GUIDE.md#styling-a-component',
+  fixable: true,
+};
+
+/** @type {import('stylelint').Rule} */
+const rule = () => (root, result) => {
+  root.walkAtRules('apply', rule => {
+    if (!rule.params.includes(' ')) {
+      // If there are no spaces in the params, we don't need to check anything
+      return;
+    }
+
+    // Since we use 2 spaces for indentation, each line in the apply rule
+    // should be indented with two extra whitespaces.
+    const classes = rule.params.split(`${rule.raws.before}  `);
+    const classNames = classes.join('');
+
+    // Check if the params contain any spaces
+    if (classNames.includes(' ')) {
+      if (classNames.includes('\n')) {
+        return report({
+          ruleName: name,
+          result: result,
+          message: messages.spacing(JSON.stringify(rule.params)),
+          node: rule,
+          fix: indentClassNames(rule),
+        });
+      }
+
+      return report({
+        ruleName: name,
+        result,
+        message: messages.className(rule.params),
+        node: rule,
+        fix: indentClassNames(rule),
+      });
+    }
+  });
+};
+
+rule.ruleName = name;
+rule.messages = messages;
+rule.meta = meta;
+
+export default createPlugin(name, rule);

package/stylelint/utils.mjs

@@ -0,0 +1,53 @@
+/**
+ * Adjusts the class names in the rule by cleaning and adding proper indentation.
+ *
+ * @param {Object} rule - The rule object containing the class names to be processed.
+ * @param {string} rule.params - The class names as a string to be formatted.
+ * @param {Object} rule.raws - The raw data of the rule.
+ * @param {string} rule.raws.before - The raw string before to the @apply rule.
+ * @returns {Object|null} The modified rule with properly formatted class names, or null if the rule is invalid.
+ */
+export const indentClassNames = rule => {
+  // Ensure that the rule contains necessary properties
+  if (!rule || !rule.params || !rule.raws || !rule.raws.before) {
+    return null;
+  }
+
+  const indent = ' '.repeat(rule.raws.before.length + 1);
+
+  // Clean and split the class names
+  const cleanedClasses = cleanClassNames(rule.params);
+
+  // Apply the indentation and join the class names back together
+  rule.params = applyIndentation(cleanedClasses, indent);
+
+  return rule;
+};
+
+/**
+ * Cleans the input string by removing unnecessary whitespace and newlines.
+ *
+ * @param {string} params - The class names string to be cleaned.
+ * @returns {string} The cleaned class names string.
+ */
+export const cleanClassNames = params => {
+  return params
+    .replace(/[\n\r]+/g, '') // Remove new lines
+    .replace(/\s+/g, ' ') // Replace multiple spaces with a single space
+    .trim(); // Trim leading/trailing spaces
+};
+
+/**
+ * Applies the correct indentation to each class name in the string.
+ *
+ * @param {string} classes - The cleaned class names as a string.
+ * @param {string} indent - The string used for indentation.
+ * @returns {string} The class names string with applied indentation.
+ */
+export const applyIndentation = (classes, indent) => {
+  return classes
+    .split(' ') // Split into an array of class names
+    .map(className => indent + className) // Add indentation to each class
+    .join('\n') // Join with new lines
+    .trim(); // Remove extra space at the end
+};

package/styles/animations.css

@@ -0,0 +1,47 @@
+@theme {
+  --animate-surf: surf 1s infinite ease-in-out;
+  --animate-pulse: pulse 500ms infinite alternate-reverse;
+  --animate-pulse-dark: pulse-dark 500ms infinite alternate-reverse;
+
+  @keyframes surf {
+    0% {
+      transform: translate(0, 0);
+    }
+
+    25% {
+      transform: translate(0, 6px);
+    }
+
+    50% {
+      transform: translate(0, -6px);
+    }
+
+    75% {
+      transform: translate(0, 3px);
+    }
+
+    100% {
+      transform: translate(0, 0);
+    }
+  }
+
+  @keyframes pulse {
+    from {
+      background: var(--color-pulse-100);
+    }
+
+    to {
+      background: var(--color-pulse-200);
+    }
+  }
+
+  @keyframes pulse-dark {
+    from {
+      background: var(--color-pulse-300);
+    }
+
+    to {
+      background: var(--color-pulse-400);
+    }
+  }
+}