@node-core/ui-components 1.0.1-49d65845ae6ff8d53a36f08f2f6353edc12d9b2f → 1.0.1-4ebead0c76b580d1bf722ebcd0f644e82dc06c0d

package/Common/Modal/index.module.css

@@ -17,6 +17,7 @@
       w-full
       max-w-3xl
       flex-col
+      gap-2
       overflow-y-auto
       rounded
       border
@@ -47,8 +48,7 @@
   }
 
   .title {
-    @apply mb-2
-      text-3xl
+    @apply text-3xl
       font-semibold
       text-neutral-900
       dark:text-white;
@@ -56,7 +56,7 @@
 
   .description {
     @apply font-regular
-      mb-4
+      mb-2
       text-lg
       text-neutral-800
       dark:text-neutral-200;

package/Common/Modal/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import Modal from '#ui/Common/Modal';
+import { Modal, Title, Description, Content } from '#ui/Common/Modal';
 
 type Story = StoryObj<typeof Modal>;
 type Meta = MetaObj<typeof Modal>;
@@ -8,10 +8,12 @@ type Meta = MetaObj<typeof Modal>;
 export const Default: Story = {
   args: {
     open: true,
-    heading: 'Node.js Versions Information',
-    subheading: 'Get all information about Node.js versions and their changes.',
     children: (
-      <>
+      <Content>
+        <Title>Node.js Versions Information</Title>
+        <Description>
+          Get all information about Node.js versions and their changes.
+        </Description>
         <p>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto
           atque sint doloremque, sapiente recusandae debitis libero nostrum
@@ -24,7 +26,7 @@ export const Default: Story = {
           amet minus sit architecto blanditiis hic sed odit cumque numquam
           dignissimos delectus.
         </p>
-      </>
+      </Content>
     ),
   },
 };

package/Common/Modal/index.tsx

@@ -7,15 +7,11 @@ import type { FC, PropsWithChildren } from 'react';
 import styles from './index.module.css';
 
 type ModalProps = PropsWithChildren<{
-  heading: string;
-  subheading?: string;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
 }>;
 
 const Modal: FC<ModalProps> = ({
-  heading,
-  subheading,
   children,
   open = false,
   onOpenChange = () => {},
@@ -28,15 +24,7 @@ const Modal: FC<ModalProps> = ({
             <XMarkIcon />
           </Dialog.Trigger>
 
-          <Dialog.Title className={styles.title}>{heading}</Dialog.Title>
-
-          {subheading && (
-            <Dialog.Description className={styles.description}>
-              {subheading}
-            </Dialog.Description>
-          )}
-
-          <main className={styles.wrapper}>{children}</main>
+          {children}
 
           <Dialog.Close />
         </Dialog.Content>
@@ -45,4 +33,18 @@ const Modal: FC<ModalProps> = ({
   </Dialog.Root>
 );
 
-export default Modal;
+const Title = ({ children }: PropsWithChildren) => (
+  <Dialog.Title className={styles.title}>{children}</Dialog.Title>
+);
+
+const Description = ({ children }: PropsWithChildren) => (
+  <Dialog.Description className={styles.description}>
+    {children}
+  </Dialog.Description>
+);
+
+const Content = ({ children }: PropsWithChildren) => (
+  <main className={styles.wrapper}>{children}</main>
+);
+
+export { Modal, Title, Description, Content };

package/Icons/Logos/Nodejs.tsx

@@ -72,7 +72,7 @@ const NodejsIcon: FC<NodeJsLogoProps> = ({
         />
 
         {variant === 'pride' ? (
-          <g clip-path="url(#clip0_1_1661)">
+          <g clipPath="url(#clip0_1_1661)">
             <mask
               id="mask1_1_1661"
               style={{ maskType: 'alpha' }}
@@ -183,7 +183,7 @@ const NodejsIcon: FC<NodeJsLogoProps> = ({
             filterUnits="userSpaceOnUse"
             color-interpolation-filters="sRGB"
           >
-            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feFlood floodOpacity="0" result="BackgroundImageFix" />
             <feColorMatrix
               in="SourceAlpha"
               type="matrix"
@@ -218,7 +218,7 @@ const NodejsIcon: FC<NodeJsLogoProps> = ({
             filterUnits="userSpaceOnUse"
             color-interpolation-filters="sRGB"
           >
-            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feFlood floodOpacity="0" result="BackgroundImageFix" />
             <feColorMatrix
               in="SourceAlpha"
               type="matrix"

package/package.json

@@ -30,21 +30,21 @@
     "@radix-ui/react-tabs": "~1.1.12",
     "@radix-ui/react-toast": "~1.2.14",
     "@radix-ui/react-tooltip": "~1.2.7",
-    "@tailwindcss/postcss": "~4.1.8",
+    "@tailwindcss/postcss": "~4.1.11",
     "@vcarl/remark-headings": "~0.1.0",
     "classnames": "~2.5.1",
     "postcss-calc": "^10.1.1",
     "tailwindcss": "~4.0.17"
   },
   "devDependencies": {
-    "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-themes": "^9.0.3",
+    "@storybook/addon-styling-webpack": "^2.0.0",
+    "@storybook/addon-themes": "^9.0.15",
     "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-    "@storybook/react": "^9.0.3",
-    "@storybook/react-webpack5": "^9.0.3",
+    "@storybook/react": "^9.0.15",
+    "@storybook/react-webpack5": "^9.0.15",
     "@testing-library/user-event": "~14.6.1",
     "@types/node": "22.15.3",
-    "@types/react": "^19.1.6",
+    "@types/react": "^19.1.8",
     "cross-env": "^7.0.3",
     "css-loader": "~7.1.2",
     "eslint-plugin-react": "~7.37.4",
@@ -52,13 +52,13 @@
     "global-jsdom": "^26.0.0",
     "postcss-loader": "~8.1.1",
     "react": "^19.1.0",
-    "storybook": "^9.0.3",
+    "storybook": "^9.0.15",
     "style-loader": "~4.0.0",
     "stylelint": "^16.20.0",
     "stylelint-config-standard": "^38.0.0",
     "stylelint-order": "7.0.0",
     "stylelint-selector-bem-pattern": "4.0.1",
-    "tsx": "^4.19.3",
+    "tsx": "^4.20.3",
     "typescript": "~5.8.2",
     "typescript-eslint": "~8.33.1"
   },
@@ -74,7 +74,7 @@
   "engines": {
     "node": ">=20"
   },
-  "version": "1.0.1-49d65845ae6ff8d53a36f08f2f6353edc12d9b2f",
+  "version": "1.0.1-4ebead0c76b580d1bf722ebcd0f644e82dc06c0d",
   "scripts": {
     "lint": "turbo run lint:js lint:css",
     "lint:css": "stylelint \"**/*.css\" --allow-empty-input --cache --cache-strategy=content --cache-location=.stylelintcache",

package/styles/markdown.css

@@ -157,7 +157,7 @@ main {
       @apply font-semibold;
     }
 
-    tr:last-child td {
+    tr:last-child > td {
       @apply sm:border-b-0;
 
       &:last-child {