@node-core/ui-components 1.0.1-bc3f4a79ab5f54e7ed1ee525005e7e9f1030495c → 1.0.1-cc5c2626b0639fe2088a736f54169ea3e10ed325

package/Common/CodeTabs/index.module.css

@@ -1,67 +1,56 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .root {
   > [role='tabpanel'] > :first-child {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+    @apply rounded-t-none;
   }
+
   > div:nth-of-type(1) {
-    display: flex;
-    border-top-left-radius: 0.25rem;
-    border-top-right-radius: 0.25rem;
-    border-inline-style: var(--tw-border-style);
-    border-inline-width: 1px;
-    border-top-style: var(--tw-border-style);
-    border-top-width: 1px;
-    border-color: var(--color-neutral-900, #2c3437);
-    background-color: var(--color-neutral-950, #0d121c);
-    padding-inline: calc(var(--spacing, 0.25rem)*2);
-    padding-top: calc(var(--spacing, 0.25rem)*3);
-    @media (width >= 48rem) {
-      padding-inline: calc(var(--spacing, 0.25rem)*4);
-    }
+    @apply flex
+      rounded-t
+      border-x
+      border-t
+      border-neutral-900
+      bg-neutral-950
+      px-2
+      pt-3
+      md:px-4;
+
     .trigger {
-      border-bottom-style: var(--tw-border-style);
-      border-bottom-width: 1px;
-      border-bottom-color: transparent;
-      padding-inline: calc(var(--spacing, 0.25rem)*1);
-      color: var(--color-neutral-200, #e9edf0);
+      @apply border-b
+        border-b-transparent
+        px-1
+        text-neutral-200;
+
       &[data-state='active'] {
-        border-bottom-color: var(--color-green-400, #84ba64);
-        color: var(--color-green-400, #84ba64);
+        @apply border-b-green-400
+          text-green-400;
       }
     }
+
     .link {
-      display: none;
-      align-items: center;
-      gap: calc(var(--spacing, 0.25rem)*2);
-      text-align: center;
-      color: var(--color-neutral-200, #e9edf0);
-      @media (prefers-reduced-motion: no-preference) {
-        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
-        transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
-      }
-      @media (width >= 64rem) {
-        display: flex;
-      }
+      @apply hidden
+        items-center
+        gap-2
+        text-center
+        text-neutral-200
+        motion-safe:transition-colors
+        lg:flex;
+
       & > .icon {
-        width: calc(var(--spacing, 0.25rem)*4);
-        height: calc(var(--spacing, 0.25rem)*4);
-        color: var(--color-neutral-300, #d9e1e4);
+        @apply size-4
+          text-neutral-300;
       }
+
       &:is(:link, :visited) {
         &:hover {
-          color: var(--color-neutral-400, #cbd4d9);
+          @apply text-neutral-400;
+
           & > .icon {
-            color: var(--color-neutral-600, #929fa5);
+            @apply text-neutral-600;
           }
         }
       }
     }
   }
 }
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}

package/Common/CodeTabs/index.stories.tsx

@@ -0,0 +1,73 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { FC } from 'react';
+
+import BaseCodeBox from '#ui/Common/BaseCodeBox';
+import CodeTabs from '#ui/Common/CodeTabs';
+
+type Story = StoryObj<typeof CodeTabs>;
+type Meta = MetaObj<typeof CodeTabs>;
+
+const mjsContent = `import * as http from 'http';
+
+const hostname = '127.0.0.1';
+const port = 3000;
+
+const server = http.createServer((req, res) => {
+  res.statusCode = 200;
+  res.setHeader('Content-Type', 'text/plain');
+  res.end('Hello World');
+});
+
+server.listen(port, hostname, () => {
+  console.log(\`Server running at http://\${hostname}:\${port}/\`);
+});`;
+
+const cjsContent = `const http = require('http');
+
+const hostname = '127.0.0.1';
+const port = 3000;
+
+const server = http.createServer((req, res) => {
+  res.statusCode = 200;
+  res.setHeader('Content-Type', 'text/plain');
+  res.end('Hello World');
+});
+
+server.listen(port, hostname, () => {
+  console.log(\`Server running at http://\${hostname}:\${port}/\`);
+});`;
+
+const boxProps = {
+  onCopy: console.log,
+  buttonText: '[Button Text]',
+};
+
+const TabsContent: FC = () => (
+  <>
+    <TabsPrimitive.Content key="mjs" value="mjs">
+      <BaseCodeBox language="JavaScript (MJS)" {...boxProps}>
+        <code>{mjsContent}</code>
+      </BaseCodeBox>
+    </TabsPrimitive.Content>
+    <TabsPrimitive.Content key="cjs" value="cjs">
+      <BaseCodeBox language="JavaScript (CJS)" {...boxProps}>
+        <code>{cjsContent}</code>
+      </BaseCodeBox>
+    </TabsPrimitive.Content>
+  </>
+);
+
+export const Default: Story = {};
+
+export default {
+  component: CodeTabs,
+  args: {
+    children: <TabsContent />,
+    defaultValue: 'mjs',
+    tabs: [
+      { key: 'mjs', label: 'MJS' },
+      { key: 'cjs', label: 'CJS' },
+    ],
+  },
+} as Meta;

package/Common/CodeTabs/index.tsx

@@ -0,0 +1,16 @@
+import type { ComponentProps, FC } from 'react';
+
+import Tabs from '#ui/Common/Tabs';
+
+import styles from './index.module.css';
+
+type CodeTabsProps = Pick<
+  ComponentProps<typeof Tabs>,
+  'tabs' | 'defaultValue' | 'children' | 'addons'
+>;
+
+const CodeTabs: FC<CodeTabsProps> = ({ ...props }) => (
+  <Tabs {...props} className={styles.root} triggerClassName={styles.trigger} />
+);
+
+export default CodeTabs;

package/Common/DataTag/index.module.css

@@ -1,54 +1,56 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .dataTag {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: calc(infinity*1px);
-  --tw-font-weight: var(--font-weight-semibold, 600);
-  font-weight: var(--font-weight-semibold, 600);
-  color: var(--color-white, #fff);
+  @apply flex
+    items-center
+    justify-center
+    rounded-full
+    font-semibold
+    text-white;
+
   &.lg {
-    width: calc(var(--spacing, 0.25rem)*12);
-    height: calc(var(--spacing, 0.25rem)*12);
-    font-size: var(--text-2xl, 1.5rem);
-    line-height: var(--tw-leading, var(--text-2xl--line-height, 1.33333));
+    @apply size-12
+      text-2xl;
   }
+
   &.md {
-    width: calc(var(--spacing, 0.25rem)*10);
-    height: calc(var(--spacing, 0.25rem)*10);
-    font-size: var(--text-xl, 1.25rem);
-    line-height: var(--tw-leading, var(--text-xl--line-height, 1.4));
+    @apply size-10
+      text-xl;
   }
+
   &.sm {
-    width: calc(var(--spacing, 0.25rem)*8);
-    height: calc(var(--spacing, 0.25rem)*8);
+    @apply size-8;
   }
+
   &.event {
-    background-color: var(--color-accent1-600, #9756d6);
+    @apply bg-accent1-600;
   }
+
   &.method {
-    background-color: var(--color-info-600, #0c7bb3);
+    @apply bg-info-600;
   }
+
   &.property {
-    background-color: var(--color-green-600, #417e38);
+    @apply bg-green-600;
   }
+
   &.class {
-    background-color: var(--color-warning-600, #ae5f00);
+    @apply bg-warning-600;
   }
+
   &.module {
-    background-color: var(--color-red-600, oklch(0.577 0.245 27.325));
+    @apply bg-red-600;
   }
+
   &.classMethod {
-    background-color: var(--color-blue-600, oklch(0.546 0.245 262.881));
+    @apply bg-blue-600;
   }
+
   &.ctor {
-    background-color: var(--color-accent2-600, #d6246e);
+    @apply bg-accent2-600;
   }
+
   &.global {
-    background-color: var(--color-amber-600, oklch(0.666 0.179 58.318));
+    @apply bg-amber-600;
   }
 }
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}

package/Common/DataTag/index.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import DataTag, { type DataTagProps } from '#ui/Common/DataTag';
+
+type Story = StoryObj<typeof DataTag>;
+type Meta = MetaObj<typeof DataTag>;
+
+export const DataTags: Story = {
+  render: () => (
+    <div className="grid grid-cols-3 gap-6 p-6">
+      {[
+        'event',
+        'method',
+        'property',
+        'class',
+        'module',
+        'classMethod',
+        'ctor',
+        'global',
+      ]
+        .map(kind =>
+          ['sm', 'md', 'lg'].map(size => (
+            <div
+              key={`${kind}-${size}`}
+              className="flex justify-center"
+              title={kind}
+            >
+              <DataTag
+                kind={kind as DataTagProps['kind']}
+                size={size as DataTagProps['size']}
+              />
+            </div>
+          ))
+        )
+        .flat()}
+    </div>
+  ),
+};
+
+export default { component: DataTag } as Meta;

package/Common/DataTag/index.tsx

@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+import type { FC } from 'react';
+
+import styles from './index.module.css';
+
+export type DataTagProps = {
+  kind:
+    | 'event'
+    | 'method'
+    | 'property'
+    | 'class'
+    | 'module'
+    | 'classMethod'
+    | 'global'
+    | 'ctor';
+  size?: 'lg' | 'md' | 'sm';
+};
+
+// These symbols match up with the types used in
+// node core, and the ones defined at
+// https://github.com/nodejs/api-docs-tooling/blob/main/src/types.d.ts#L22 (`HeadingMetadataEntry['type']`)
+const symbolMap = {
+  event: 'E',
+  method: 'M',
+  property: 'P',
+  class: 'C',
+  module: 'M',
+  classMethod: 'S',
+  global: 'G',
+  ctor: 'C',
+} as const;
+
+const DataTag: FC<DataTagProps> = ({ kind, size = 'md' }) => (
+  <div className={classNames(styles.dataTag, styles[size], styles[kind])}>
+    <span>{symbolMap[kind]}</span>
+  </div>
+);
+
+export default DataTag;

package/Common/GlowingBackdrop/index.module.css

@@ -1,130 +1,32 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .glowingBackdrop {
-  position: absolute;
-  top: calc(var(--spacing, 0.25rem)*0);
-  left: calc(var(--spacing, 0.25rem)*0);
-  z-index: -10;
-  width: 100%;
-  height: 100%;
-  opacity: 50%;
-  &::after {
-    content: var(--tw-content);
-    position: absolute;
-  }
-  &::after {
-    content: var(--tw-content);
-    inset: calc(var(--spacing, 0.25rem)*0);
-  }
-  &::after {
-    content: var(--tw-content);
-    margin: auto;
-  }
-  &::after {
-    content: var(--tw-content);
-    aspect-ratio: 1 / 1;
-  }
-  &::after {
-    content: var(--tw-content);
-    width: 300px;
-  }
-  &::after {
-    content: var(--tw-content);
-    border-radius: calc(infinity*1px);
-  }
-  &::after {
-    content: var(--tw-content);
-    background-color: var(--color-green-300, #99cc7d);
-  }
-  &::after {
-    content: var(--tw-content);
-    --tw-blur: blur(120px);
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-  }
-  &::after {
-    content: var(--tw-content);
-    --tw-content: '';
-    content: var(--tw-content);
-  }
-  @media (width >= 48rem) {
-    opacity: 100%;
-  }
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    &::after {
-      content: var(--tw-content);
-      background-color: var(--color-green-700, #2c682c);
-    }
-  }
+  @apply absolute
+    left-0
+    top-0
+    -z-10
+    size-full
+    opacity-50
+    after:absolute
+    after:inset-0
+    after:m-auto
+    after:aspect-square
+    after:w-[300px]
+    after:rounded-full
+    after:bg-green-300
+    after:blur-[120px]
+    after:content-['']
+    md:opacity-100
+    dark:after:bg-green-700;
+
   svg {
-    position: absolute;
-    inset: calc(var(--spacing, 0.25rem)*0);
-    margin: auto;
-    aspect-ratio: 1.67;
-    max-width: 1004px;
-    object-fit: cover;
-    color: var(--color-neutral-300, #d9e1e4);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      color: color-mix(in srgb, #2c3437 75%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, var(--color-neutral-900, #2c3437) 75%, transparent);
-      }
-    }
+    @apply absolute
+      inset-0
+      m-auto
+      aspect-[1.67]
+      max-w-[1004px]
+      object-cover
+      text-neutral-300
+      dark:text-neutral-900/75;
   }
 }
-@property --tw-content {
-  syntax: "*";
-  initial-value: "";
-  inherits: false;
-}
-@property --tw-blur {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-brightness {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-contrast {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-grayscale {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-hue-rotate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-invert {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-opacity {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-saturate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-sepia {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-drop-shadow-size {
-  syntax: "*";
-  inherits: false;
-}

package/Common/GlowingBackdrop/index.stories.tsx

@@ -0,0 +1,10 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import GlowingBackdrop from '#ui/Common/GlowingBackdrop';
+
+type Story = StoryObj<typeof GlowingBackdrop>;
+type Meta = MetaObj<typeof GlowingBackdrop>;
+
+export const Default: Story = {};
+
+export default { component: GlowingBackdrop } as Meta;

package/Common/GlowingBackdrop/index.tsx

@@ -0,0 +1,13 @@
+import type { FC } from 'react';
+
+import HexagonGrid from '#ui/Icons/HexagonGrid';
+
+import styles from './index.module.css';
+
+const GlowingBackdrop: FC = () => (
+  <div className={styles.glowingBackdrop}>
+    <HexagonGrid />
+  </div>
+);
+
+export default GlowingBackdrop;