@neo4j-ndl/react 4.21.0 → 4.21.1-alpha.b78fc61

package/lib/types/typography/Typography.d.ts

@@ -22,7 +22,12 @@ import { type tokens } from '@neo4j-ndl/base';
 import { type PolymorphicCommonProps } from '../_common/types';
 export type TypographyVariants = keyof typeof tokens.typography;
 type TypographyProps = {
-    /** The typography variant to use for the text. */
+    /**
+     * The typography variant to use for the text.
+     *
+     * `label` is deprecated: it is identical to `title-4`, which should be used
+     * instead.
+     */
     variant: TypographyVariants;
     /** Content displayed inside the component */
     children?: React.ReactNode;

package/lib/types/typography/Typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../src/typography/Typography.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAG9C,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAE/D,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,MAAM,CAAC,UAAU,CAAC;AAEhE,KAAK,eAAe,GAAG;IACrB,kDAAkD;IAClD,OAAO,EAAE,kBAAkB,CAAC;IAC5B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAC7D,OAAO,sBAAsB,CAAC,CAAC,EAAE,eAAe,CAAC,KAChD,KAAK,CAAC,YAAY,GAAG,IAmBvB,CAAC"}
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../src/typography/Typography.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAG9C,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAE/D,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,MAAM,CAAC,UAAU,CAAC;AAEhE,KAAK,eAAe,GAAG;IACrB;;;;;OAKG;IACH,OAAO,EAAE,kBAAkB,CAAC;IAC5B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAC7D,OAAO,sBAAsB,CAAC,CAAC,EAAE,eAAe,CAAC,KAChD,KAAK,CAAC,YAAY,GAAG,IAmBvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "4.21.0",
+  "version": "4.21.1-alpha.b78fc61",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [
@@ -404,7 +404,7 @@
     "@tanstack/react-table": "8.21.3",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
-    "@neo4j-ndl/base": "^4.20.0"
+    "@neo4j-ndl/base": "^4.20.1-alpha.b78fc61"
   },
   "dependencies": {
     "@dnd-kit/core": "6.3.1",
@@ -432,7 +432,8 @@
     "temporal-polyfill": "1.0.1",
     "tinycolor2": "1.6.0",
     "usehooks-ts": "3.1.1",
-    "zod": "4.3.6"
+    "zod": "4.3.6",
+    "@neo4j-ndl/base": "4.20.1-alpha.b78fc61"
   },
   "scripts": {
     "generate-component": "node ./scripts/component-generator.js",

package/skills/ndl-react/components/clean-icon-button.md

@@ -242,19 +242,19 @@ const Component = () => {
         <CleanIconButton description="Search" size="small">
           <MagnifyingGlassIconOutline />
         </CleanIconButton>
-        <Typography variant="label"> Small</Typography>
+        <Typography variant="title-4"> Small</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <CleanIconButton description="Search" size="medium">
           <MagnifyingGlassIconOutline />
         </CleanIconButton>
-        <Typography variant="label"> Medium</Typography>
+        <Typography variant="title-4"> Medium</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <CleanIconButton description="Search" size="large">
           <MagnifyingGlassIconOutline />
         </CleanIconButton>
-        <Typography variant="label"> Large</Typography>
+        <Typography variant="title-4"> Large</Typography>
       </div>
     </div>
   );
@@ -278,13 +278,13 @@ const Component = () => {
         <CleanIconButton description="Search" variant="neutral">
           <MagnifyingGlassIconOutline />
         </CleanIconButton>
-        <Typography variant="label">Default</Typography>
+        <Typography variant="title-4">Default</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <CleanIconButton description="Search" variant="danger">
           <MagnifyingGlassIconOutline />
         </CleanIconButton>
-        <Typography variant="label">Danger</Typography>
+        <Typography variant="title-4">Danger</Typography>
       </div>
     </div>
   );

package/skills/ndl-react/components/color-picker.md

@@ -36,10 +36,10 @@ import { ColorPicker } from '../ColorPicker';
 
 const Component = () => {
   const [color, setColor] = useState({
-    a: 1,
-    b: 0,
-    g: 0,
-    r: 0,
+    a: 1, // oxlint-disable-line id-length
+    b: 0, // oxlint-disable-line id-length
+    g: 0, // oxlint-disable-line id-length
+    r: 0, // oxlint-disable-line id-length
   });
 
   return (
@@ -62,10 +62,10 @@ import { ColorPicker } from '../ColorPicker';
 
 const Component = () => {
   const [color, setColor] = useState({
-    a: 1,
-    b: 0,
-    g: 0,
-    r: 0,
+    a: 1, // oxlint-disable-line id-length
+    b: 0, // oxlint-disable-line id-length
+    g: 0, // oxlint-disable-line id-length
+    r: 0, // oxlint-disable-line id-length
   });
 
   return (
@@ -74,28 +74,28 @@ const Component = () => {
       onChange={(newColor) => setColor(newColor.rgb)}
       swatches={[
         {
-          a: 1,
-          b: 0,
-          g: 0,
-          r: 0,
+          a: 1, // oxlint-disable-line id-length
+          b: 0, // oxlint-disable-line id-length
+          g: 0, // oxlint-disable-line id-length
+          r: 0, // oxlint-disable-line id-length
         },
         {
-          a: 1,
-          b: 255,
-          g: 0,
-          r: 0,
+          a: 1, // oxlint-disable-line id-length
+          b: 255, // oxlint-disable-line id-length
+          g: 0, // oxlint-disable-line id-length
+          r: 0, // oxlint-disable-line id-length
         },
         {
-          a: 1,
-          b: 0,
-          g: 255,
-          r: 0,
+          a: 1, // oxlint-disable-line id-length
+          b: 0, // oxlint-disable-line id-length
+          g: 255, // oxlint-disable-line id-length
+          r: 0, // oxlint-disable-line id-length
         },
         {
-          a: 1,
-          b: 0,
-          g: 0,
-          r: 255,
+          a: 1, // oxlint-disable-line id-length
+          b: 0, // oxlint-disable-line id-length
+          g: 0, // oxlint-disable-line id-length
+          r: 255, // oxlint-disable-line id-length
         },
       ]}
     />
@@ -119,10 +119,10 @@ const Component = () => {
   const handleClose = () => setIsOpen(false);
 
   const [color, setColor] = useState({
-    a: 1,
-    b: 0,
-    g: 0,
-    r: 0,
+    a: 1, // oxlint-disable-line id-length
+    b: 0, // oxlint-disable-line id-length
+    g: 0, // oxlint-disable-line id-length
+    r: 0, // oxlint-disable-line id-length
   });
 
   return (
@@ -190,10 +190,10 @@ import { ColorPicker } from '../ColorPicker';
 
 const Component = () => {
   const [color, setColor] = useState({
-    a: 1,
-    b: 0,
-    g: 0,
-    r: 0,
+    a: 1, // oxlint-disable-line id-length
+    b: 0, // oxlint-disable-line id-length
+    g: 0, // oxlint-disable-line id-length
+    r: 0, // oxlint-disable-line id-length
   });
 
   return (

package/skills/ndl-react/components/date-picker.md

@@ -689,7 +689,7 @@ export const DatePickerWithTimeZoneBothMode = () => {
           padding: '16px',
         }}
       >
-        <Typography variant="label">Selected Values:</Typography>
+        <Typography variant="title-4">Selected Values:</Typography>
         <Typography variant="body-small">
           <strong>Date: </strong>
           {selectedDate?.toISOString() ?? 'None'}

package/skills/ndl-react/components/dropzone.md

@@ -157,11 +157,11 @@ import {
 
 // Configuration constants
 const CONFIG = {
-  MAX_FILES: 3,
+  ACCEPTED_EXTENSIONS: ['.txt', '.json'] as string[],
   MAX_FILE_SIZE: 5 * 1024 * 1024, // 5MB
+  MAX_FILES: 3,
   PROGRESS_INCREMENT: 5,
   UPDATE_INTERVAL: 100,
-  ACCEPTED_EXTENSIONS: ['.txt', '.json'] as string[],
 } as const;
 
 enum UploadState {
@@ -198,9 +198,9 @@ const Component = () => {
   const simulateUpload = useCallback((files: File[]) => {
     setUploadData((prev) => ({
       ...prev,
-      state: UploadState.Uploading,
       files,
       progress: 0,
+      state: UploadState.Uploading,
     }));
 
     const interval = setInterval(() => {
@@ -244,7 +244,7 @@ const Component = () => {
         (file) =>
           `${file.file.name}: ${file.errors.map((error) => error.message).join(', ')}`,
       );
-      setUploadData((prev) => ({ ...prev, state: UploadState.Error, errors }));
+      setUploadData((prev) => ({ ...prev, errors, state: UploadState.Error }));
     },
     [],
   );
@@ -253,8 +253,8 @@ const Component = () => {
     console.error('Dropzone error:', error);
     setUploadData((prev) => ({
       ...prev,
-      state: UploadState.Error,
       errors: [error.message],
+      state: UploadState.Error,
     }));
   }, []);
 
@@ -296,7 +296,7 @@ const Component = () => {
               {errors.map((message, index) => (
                 <Typography
                   key={index}
-                  variant="label"
+                  variant="title-4"
                   className="n-text-danger-text n-font-semibold"
                   htmlAttributes={{ role: 'alert' }}
                 >

package/skills/ndl-react/components/icon-button.md

@@ -141,19 +141,19 @@ const Component = () => {
         <IconButton description="Search" size="small">
           <MagnifyingGlassIconOutline />
         </IconButton>
-        <Typography variant="label"> Small</Typography>
+        <Typography variant="title-4"> Small</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <IconButton description="Search" size="medium">
           <MagnifyingGlassIconOutline />
         </IconButton>
-        <Typography variant="label"> Medium</Typography>
+        <Typography variant="title-4"> Medium</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <IconButton description="Search" size="large">
           <MagnifyingGlassIconOutline />
         </IconButton>
-        <Typography variant="label"> Large</Typography>
+        <Typography variant="title-4"> Large</Typography>
       </div>
     </div>
   );
@@ -177,13 +177,13 @@ const Component = () => {
         <IconButton description="Search" variant="neutral">
           <MagnifyingGlassIconOutline />
         </IconButton>
-        <Typography variant="label">Default</Typography>
+        <Typography variant="title-4">Default</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <IconButton description="Search" variant="danger">
           <MagnifyingGlassIconOutline />
         </IconButton>
-        <Typography variant="label">Danger</Typography>
+        <Typography variant="title-4">Danger</Typography>
       </div>
     </div>
   );

package/skills/ndl-react/components/radio.md

@@ -75,7 +75,7 @@ import { Radio, Typography } from '@neo4j-ndl/react';
 const Component = () => {
   return (
     <Radio
-      label={<Typography variant="label">Custom label</Typography>}
+      label={<Typography variant="title-4">Custom label</Typography>}
       ariaLabel="example aria label"
     />
   );

package/skills/ndl-react/components/select-icon-button.md

@@ -55,19 +55,19 @@ const Component = () => {
         <SelectIconButton description="Select" size="small" isOpen={false}>
           <SelectIcon />
         </SelectIconButton>
-        <Typography variant="label"> Small</Typography>
+        <Typography variant="title-4"> Small</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <SelectIconButton description="Select" size="medium" isOpen={false}>
           <SelectIcon />
         </SelectIconButton>
-        <Typography variant="label"> Medium</Typography>
+        <Typography variant="title-4"> Medium</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <SelectIconButton description="Select" size="large" isOpen={false}>
           <SelectIcon />
         </SelectIconButton>
-        <Typography variant="label"> Large</Typography>
+        <Typography variant="title-4"> Large</Typography>
       </div>
     </div>
   );
@@ -96,13 +96,13 @@ const Component = () => {
         >
           <SelectIcon />
         </SelectIconButton>
-        <Typography variant="label"> Disabled</Typography>
+        <Typography variant="title-4"> Disabled</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <SelectIconButton description="Select" size="small" isOpen={true}>
           <SelectIcon />
         </SelectIconButton>
-        <Typography variant="label"> Active</Typography>
+        <Typography variant="title-4"> Active</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <SelectIconButton
@@ -114,7 +114,7 @@ const Component = () => {
         >
           <SelectIcon />
         </SelectIconButton>
-        <Typography variant="label"> Loading</Typography>
+        <Typography variant="title-4"> Loading</Typography>
       </div>
     </div>
   );

package/skills/ndl-react/components/status-indicator.md

@@ -31,23 +31,23 @@ const Component = () => {
     <div className="n-flex n-gap-token-16">
       <div className="n-flex n-flex-col n-items-center n-gap-token-8">
         <StatusIndicator variant="unknown" />
-        <Typography variant="label">Unknown</Typography>
+        <Typography variant="title-4">Unknown</Typography>
       </div>
       <div className="n-flex n-flex-col n-items-center n-gap-token-8">
         <StatusIndicator variant="success" />
-        <Typography variant="label">Success</Typography>
+        <Typography variant="title-4">Success</Typography>
       </div>
       <div className="n-flex n-flex-col n-items-center n-gap-token-8">
         <StatusIndicator variant="info" />
-        <Typography variant="label">Info</Typography>
+        <Typography variant="title-4">Info</Typography>
       </div>
       <div className="n-flex n-flex-col n-items-center n-gap-token-8">
         <StatusIndicator variant="warning" />
-        <Typography variant="label">Warning</Typography>
+        <Typography variant="title-4">Warning</Typography>
       </div>
       <div className="n-flex n-flex-col n-items-center n-gap-token-8">
         <StatusIndicator variant="danger" />
-        <Typography variant="label">Danger</Typography>
+        <Typography variant="title-4">Danger</Typography>
       </div>
     </div>
   );

package/skills/ndl-react/components/tabs.md

@@ -185,7 +185,7 @@ const Component = () => {
   return (
     <div className="n-flex n-gap-token-8">
       <div className="n-flex n-flex-col n-gap-token-32">
-        <Typography variant="label">Underline (Default)</Typography>
+        <Typography variant="title-4">Underline (Default)</Typography>
         <div>
           <Tabs
             value={underlineValue}
@@ -209,7 +209,7 @@ const Component = () => {
       </div>
 
       <div className="n-flex n-flex-col n-gap-token-8">
-        <Typography variant="label">Filled</Typography>
+        <Typography variant="title-4">Filled</Typography>
         <div>
           <Tabs
             value={filledValue}
@@ -320,7 +320,7 @@ const Component = () => {
   return (
     <div className="n-flex n-gap-token-8">
       <div className="n-flex n-flex-col n-gap-token-8">
-        <Typography variant="label">Small Size</Typography>
+        <Typography variant="title-4">Small Size</Typography>
         <div className="n-w-fit">
           <Tabs
             value={smallValue}
@@ -351,7 +351,7 @@ const Component = () => {
       </div>
 
       <div className="n-flex n-flex-col n-gap-token-8">
-        <Typography variant="label">Large Size (Default)</Typography>
+        <Typography variant="title-4">Large Size (Default)</Typography>
         <Tabs
           value={largeValue}
           onChange={setLargeValue}

package/skills/ndl-react/components/typography.md

@@ -11,7 +11,7 @@ Import: `import { Typography } from '@neo4j-ndl/react'`
 | `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
 | `children` | `ReactNode` |  |  | Content displayed inside the component |
 | `ref` | `any` |  |  | A ref to apply to the root element. |
-| `variant` | `'body-large' \| 'body-medium' \| 'body-small' \| 'code' \| 'display' \| 'label' \| 'subheading-large' \| 'subheading-medium' \| 'subheading-small' \| 'title-1' \| 'title-2' \| 'title-3' \| 'title-4'` | ✅ |  | The typography variant to use for the text. |
+| `variant` | `'body-large' \| 'body-medium' \| 'body-small' \| 'code' \| 'display' \| 'label' \| 'subheading-large' \| 'subheading-medium' \| 'subheading-small' \| 'title-1' \| 'title-2' \| 'title-3' \| 'title-4'` | ✅ |  | The typography variant to use for the text.  `label` is deprecated: it is identical to `title-4`, which should be used instead. |
 
 ## Examples