@neo4j-ndl/react 4.25.7 → 5.0.0-alpha.0.3d763f7

package/lib/types/tree-view/TreeView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../../src/tree-view/TreeView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAcL,KAAK,gBAAgB,EAGtB,MAAM,eAAe,CAAC;AAMvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,QAAQ,EACb,KAAK,iBAAiB,EACvB,MAAM,mBAAmB,CAAC;AA4C3B,MAAM,WAAW,aAAa,CAC5B,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,CAAC,SAAS,WAAW,CACrB,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC9C,iDAAiD;IACjD,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,uEAAuE;IACvE,cAAc,EAAE,CACd,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,EACvB,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,CAAC,KACpC,IAAI,CAAC;IACV,kGAAkG;IAClG,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC5C,sBAAsB;IACtB,cAAc,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;CACvC;AA8cD,eAAO,MAAM,QAAQ,IA3cnB,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,CAAC,SAAS,WAAW,8EAOpB,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC;;;;;;;;;;;;;;;;;;WAvBZ,CAAA;;CA0dkE,CAAC"}
+{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../../src/tree-view/TreeView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAcL,KAAK,gBAAgB,EAGtB,MAAM,eAAe,CAAC;AAMvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,QAAQ,EACb,KAAK,iBAAiB,EACvB,MAAM,mBAAmB,CAAC;AA4C3B,MAAM,WAAW,aAAa,CAC5B,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,CAAC,SAAS,WAAW,CACrB,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC9C,iDAAiD;IACjD,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,uEAAuE;IACvE,cAAc,EAAE,CACd,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,EACvB,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,CAAC,KACpC,IAAI,CAAC;IACV,kGAAkG;IAClG,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC5C,sBAAsB;IACtB,cAAc,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;CACvC;AA8cD;;GAEG;AACH,eAAO,MAAM,QAAQ,IA9cnB,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,CAAC,SAAS,WAAW,8EAOpB,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC;;;;;;;;;;;;;;;;;;WAvBZ,CAAA;;CA6dkE,CAAC"}

package/lib/types/tree-view/TreeViewItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeViewItem.d.ts","sourceRoot":"","sources":["../../../src/tree-view/TreeViewItem.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACvB,MAAM,mBAAmB,CAAC;AAG3B,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mCAAmC;IAGnC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oCAAoC;IAGpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,wCAAwC;IAGxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+BAA+B;IAC/B,gBAAgB,EAAE,MAAM,CAAC;IACzB,yBAAyB;IACzB,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC3B,kDAAkD;IAClD,MAAM,EAAE,OAAO,CAAC;IAChB,+BAA+B;IAC/B,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACpC,8CAA8C;IAC9C,UAAU,CAAC,CAAC,EAAE,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACxC,4CAA4C;IAC5C,QAAQ,CAAC,CAAC,EAAE,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACtC,sCAAsC;IACtC,UAAU,CAAC,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAC;CACxC;AAOD,KAAK,qBAAqB,CACxB,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,CAAC,SAAS,WAAW,IACnB,aAAa,CAAC,CAAC,CAAC,GAAG;IACrB,EAAE,EAAE,gBAAgB,CAAC;IACrB,uDAAuD;IACvD,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC3C,uDAAuD;IACvD,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAAC;IACjD,6DAA6D;IAG7D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iDAAiD;IACjD,MAAM,EAAE,CAAC,MAAM,GAAG,UAAU,GAAG,iBAAiB,GAAG,QAAQ,CAAC,EAAE,CAAC;IAC/D,iDAAiD;IACjD,cAAc,EAAE,CACd,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAChC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,CAAC,KACpC,IAAI,CAAC;IACV,4BAA4B;IAC5B,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,+BAA+B,GACnC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,CAAC,SAAS,WAAW,EACrB,iOAsBC,qBAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,4CA8D7B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAE5B,OAAO,+BAA+B,CAAC"}
+{"version":3,"file":"TreeViewItem.d.ts","sourceRoot":"","sources":["../../../src/tree-view/TreeViewItem.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACvB,MAAM,mBAAmB,CAAC;AAG3B,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mCAAmC;IAEnC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oCAAoC;IAEpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,wCAAwC;IAExC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+BAA+B;IAC/B,gBAAgB,EAAE,MAAM,CAAC;IACzB,yBAAyB;IACzB,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC3B,kDAAkD;IAClD,MAAM,EAAE,OAAO,CAAC;IAChB,+BAA+B;IAC/B,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACpC,8CAA8C;IAC9C,UAAU,CAAC,CAAC,EAAE,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACxC,4CAA4C;IAC5C,QAAQ,CAAC,CAAC,EAAE,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACtC,sCAAsC;IACtC,UAAU,CAAC,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAC;CACxC;AAOD,KAAK,qBAAqB,CACxB,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,CAAC,SAAS,WAAW,IACnB,aAAa,CAAC,CAAC,CAAC,GAAG;IACrB,EAAE,EAAE,gBAAgB,CAAC;IACrB,uDAAuD;IACvD,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC3C,uDAAuD;IACvD,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAAC;IACjD,6DAA6D;IAE7D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iDAAiD;IACjD,MAAM,EAAE,CAAC,MAAM,GAAG,UAAU,GAAG,iBAAiB,GAAG,QAAQ,CAAC,EAAE,CAAC;IAC/D,iDAAiD;IACjD,cAAc,EAAE,CACd,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAChC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,CAAC,KACpC,IAAI,CAAC;IACV,4BAA4B;IAC5B,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,+BAA+B,GACnC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,CAAC,SAAS,WAAW,EACrB,iOAsBC,qBAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,4CA8D7B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAE5B,OAAO,+BAA+B,CAAC"}

package/lib/types/tree-view/tree-view-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-view-utils.d.ts","sourceRoot":"","sources":["../../../src/tree-view/tree-view-utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI,SAAS,CAAC;IACvC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,GAAI,CAAC,EAC3B,MAAM,QAAQ,CAAC,CAAC,CAAC,EAAE,EACnB,cAAS,EACT,WAAU,gBAAgB,GAAG,IAAW,KACvC,iBAAiB,CAAC,CAAC,CAAC,EAoBtB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAC7B,GAAG,EAAE,gBAAgB,EAAE,0BAYxB;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,CAqCzE;AA0BD;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAC7B,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAC7B,QAAQ,EAAE,gBAAgB,EAC1B,MAAM,EAAE,gBAAgB,EACxB,UAAU,EAAE,MAAM,EAClB,gBAAgB,EAAE,MAAM;;;;;EA4CzB;AACD;;;;GAIG;AAEH,eAAO,MAAM,iBAAiB,GAAI,WAAW;IAC3C,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IAGf,CAAC,EAAE,MAAM,CAAC;IAGV,CAAC,EAAE,MAAM,CAAC;CACX,WAEA,CAAC"}
+{"version":3,"file":"tree-view-utils.d.ts","sourceRoot":"","sources":["../../../src/tree-view/tree-view-utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI,SAAS,CAAC;IACvC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,GAAI,CAAC,EAC3B,MAAM,QAAQ,CAAC,CAAC,CAAC,EAAE,EACnB,cAAS,EACT,WAAU,gBAAgB,GAAG,IAAW,KACvC,iBAAiB,CAAC,CAAC,CAAC,EAoBtB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAC7B,GAAG,EAAE,gBAAgB,EAAE,0BAYxB;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,CAqCzE;AA0BD;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAC7B,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAC7B,QAAQ,EAAE,gBAAgB,EAC1B,MAAM,EAAE,gBAAgB,EACxB,UAAU,EAAE,MAAM,EAClB,gBAAgB,EAAE,MAAM;;;;;EA4CzB;AACD;;;;GAIG;AAEH,eAAO,MAAM,iBAAiB,GAAI,WAAW;IAC3C,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IAEf,CAAC,EAAE,MAAM,CAAC;IAEV,CAAC,EAAE,MAAM,CAAC;CACX,WAEA,CAAC"}

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

@@ -27,6 +27,12 @@ type TypographyProps = {
     /** Content displayed inside the component */
     children?: React.ReactNode;
 };
+/**
+ * @remarks
+ * Renders the public `ndl-typography-<variant>` class from `@neo4j-ndl/base`
+ * (for example `ndl-typography-body-medium`). The same classes can be applied
+ * to any element directly when the component cannot be used.
+ */
 export declare const Typography: <T extends React.ElementType = "span">(props: PolymorphicCommonProps<T, TypographyProps>) => React.ReactElement | null;
 export {};
 //# sourceMappingURL=Typography.d.ts.map

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,kDAAkD;IAClD,OAAO,EAAE,kBAAkB,CAAC;IAC5B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF;;;;;GAKG;AACH,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.25.7",
+  "version": "5.0.0-alpha.0.3d763f7",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [
@@ -424,7 +424,7 @@
     "@tanstack/react-table": "8.21.3",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
-    "@neo4j-ndl/base": "^4.23.7"
+    "@neo4j-ndl/base": "^5.0.0-alpha.0.3d763f7"
   },
   "dependencies": {
     "@dnd-kit/core": "6.3.1",
@@ -448,11 +448,12 @@
     "react-stately": "3.41.0",
     "react-syntax-highlighter": "16.1.1",
     "sonner": "2.0.7",
-    "streamdown": "1.6.11",
+    "streamdown": "2.7.0",
     "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": "5.0.0-alpha.0.3d763f7"
   },
   "scripts": {
     "generate-component": "node ./scripts/component-generator.js",

package/skills/ndl-react/SKILL.md

@@ -2,7 +2,7 @@
 name: ndl-react
 metadata:
   package: '@neo4j-ndl/react'
-  version: '4.25.7'
+  version: '5.0.0-alpha.0.3d763f7'
 description: >-
   Build and edit UI with the Neo4j Needle React design system
   (@neo4j-ndl/react). Use when adding, composing, or modifying Needle components
@@ -15,7 +15,7 @@ description: >-
 
 # Neo4j Needle (@neo4j-ndl/react)
 
-> 📌 Shipped with `@neo4j-ndl/react` v4.25.7. Once installed into your repo (e.g. via
+> 📌 Shipped with `@neo4j-ndl/react` v5.0.0-alpha.0.3d763f7. Once installed into your repo (e.g. via
 > `npx skills add`) this folder is detached from the package — the installed
 > package (TypeScript types in `node_modules/@neo4j-ndl/react`) is the source of
 > truth.
@@ -49,9 +49,9 @@ Use Neo4j Needle components instead of hand-rolling equivalent UI.
   1. **Component props** (e.g. `gap="8"`, `variant="danger"`, `size="small"`) —
      always preferred; type-checked and token-constrained.
   2. **`className`** — for utility classes the component doesn't cover (e.g.
-     `n-text-neutral-text-weak` or `n-body-small` on a plain element or when
-     composing). Verify every class against the stylesheet; see the class-names
-     rule below.
+     `text-neutral-text-weak` or `ndl-typography-body-small` on a plain
+     element or when composing). Verify every class against the stylesheet; see
+     the class-names rule below.
   3. **`htmlAttributes`** — for native HTML attributes, `aria-*`, and `data-*`
      the component doesn't expose as props. Valid reasons include:
      - `id` — for `aria-controls` references, portal targets, or form label wiring
@@ -68,25 +68,27 @@ Use Neo4j Needle components instead of hand-rolling equivalent UI.
   `Tooltip.Content`). Follow each component's own doc — don't assume one
   component's compound shape matches another's.
 - **Class names are unchecked strings, and the prefix is not fixed.** A wrong
-  prop fails the build, but `className="n-justify-between"` compiles and
+  prop fails the build, but `className="justify-between"` compiles and
   silently renders nothing. Which utility classes exist — and whether they carry
-  an `n-` prefix at all — depends on the consuming app, so establish that first
-  rather than assuming:
+  a prefix — depends on the consuming app, so establish that first rather than
+  assuming:
   - No Tailwind build: only classes literally present in
     `node_modules/@neo4j-ndl/base/lib/neo4j-ds-styles.css` apply. That means
-    the typography classes (`n-body-medium`, `n-title-1`, …) and the
-    safelisted color classes (`n-text-*`, `n-bg-*`, `n-border-*`) — no
-    layout or spacing utilities such as `n-flex` or `n-gap-token-8`. Grep it
+    the typography classes (`ndl-typography-body-medium`,
+    `ndl-typography-title-1`, …; the legacy `n-body-medium` aliases still
+    work) and the safelisted color classes (`text-*`, `bg-*`, `border-*`)
+    — no layout or spacing utilities such as `flex` or `gap-token-8`. Grep it
     for the exact class.
-  - Tailwind with the published preset and no override: the preset sets
-    `prefix: 'n-'`, so `n-flex` works and `flex` does not.
-  - Tailwind where the app's own config sets `prefix` (it overrides the preset,
-    and `prefix: ''` is common): the theme is Needle's but the classes are
-    unprefixed — `flex` and `text-neutral-text-weaker` work, `n-flex` does not.
+  - Tailwind with the published preset and no override (the default since
+    `@neo4j-ndl/base` v5): the preset sets no prefix, so `flex` and
+    `text-neutral-text-weaker` work and `n-flex` does not.
+  - Tailwind where the app's own config sets `prefix` (it overrides the preset;
+    apps on `@neo4j-ndl/base` v4 got `n-` by default): the theme is Needle's
+    but every utility carries that prefix — `n-flex` works, `flex` does not.
 
   Check the app's Tailwind config for `prefix` and follow the surrounding code.
-  Tailwind-shaped guesses (`n-justify-between`, `n-items-baseline`) and
-  near-misses on real scales (`n-gap-token-1` when the scale is 2/4/6/8/12/16)
+  Tailwind-shaped guesses (`justify-between`, `items-baseline`) and
+  near-misses on real scales (`gap-token-1` when the scale is 2/4/6/8/12/16)
   become invisible layout bugs, not errors. `Flex`, `Box` and `Typography` with
   token props sidestep the question entirely — prefer them. For the full token
   list and class verification, see [references/styling.md](references/styling.md).
@@ -195,7 +197,7 @@ Import from `@neo4j-ndl/react`.
 | `TextArea` | [components/text-area.md](components/text-area.md) | ✅ | 8 |
 | `TextButton` | [components/text-button.md](components/text-button.md) |  | 0 |
 | `TextInput` | [components/text-input.md](components/text-input.md) | ✅ | 16 |
-| `TextLink` | [components/text-link.md](components/text-link.md) | ✅ | 5 |
+| `TextLink` | [components/text-link.md](components/text-link.md) | ✅ | 2 |
 | `TimePicker` | [components/time-picker.md](components/time-picker.md) |  | 5 |
 | `TimeZonePicker` | [components/timezone-picker.md](components/timezone-picker.md) |  | 10 |
 | `Tooltip` | [components/tooltip.md](components/tooltip.md) | ✅ | 13 |

package/skills/ndl-react/components/ai/presence.md

@@ -28,8 +28,8 @@ const Component = () => {
   const [isThinking, setIsThinking] = useState(false);
 
   return (
-    <div className="n-flex n-gap-token-8">
-      <Presence className="n-size-token-32" isThinking={isThinking} />
+    <div className="flex gap-token-8">
+      <Presence className="size-token-32" isThinking={isThinking} />
       <FilledButton onClick={() => setIsThinking(!isThinking)}>
         Toggle Thinking
       </FilledButton>
@@ -49,7 +49,7 @@ import { Presence } from '@neo4j-ndl/react/ai';
 
 // TODO: consider this story when happo is ready
 const Component = () => {
-  return <Presence isThinking className="n-size-token-32" />;
+  return <Presence isThinking className="size-token-32" />;
 };
 
 export default Component;

package/skills/ndl-react/components/ai/reasoning.md

@@ -29,10 +29,7 @@ Import: `import { Reasoning } from '@neo4j-ndl/react/ai'`
 |------|------|----------|---------|-------------|
 | `children` | `ReactNode` |  |  | The children of the section |
 | `heading` | `ReactNode` |  |  | The heading of the section |
-| `isDefaultExpanded` | `boolean` |  |  | The default value of the section is expanded. @deprecated - Does nothing, will be removed in v5 |
-| `isExpanded` | `boolean` |  |  | Whether the section is expanded. @deprecated - Does nothing, will be removed in v5 |
 | `leadingVisual` | `ReactNode` |  |  | The visual leading the section |
-| `onExpandChange` | `(isExpanded: boolean) => void` |  |  | Callback function triggered when the section is expanded. @deprecated - Does nothing, will be removed in v5 |
 | `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
 
 ## Examples
@@ -55,7 +52,7 @@ const Component = () => {
   const [isThinking, setThinking] = useState(true);
 
   return (
-    <div className="n-flex n-flex-col n-gap-token-12">
+    <div className="flex flex-col gap-token-12">
       <FilledButton onClick={() => setThinking(!isThinking)}>
         {isThinking ? 'Stop Thinking' : 'Start Thinking'}
       </FilledButton>
@@ -67,7 +64,6 @@ const Component = () => {
         <Reasoning.Section
           leadingVisual={<PencilSquareIconOutline />}
           heading="Creating an action plan"
-          isDefaultExpanded={true}
         >
           Step 1 content
         </Reasoning.Section>
@@ -83,7 +79,7 @@ const Component = () => {
             <Tooltip.Trigger
               htmlAttributes={{ 'aria-label': 'Info about things like tokens' }}
             >
-              <InformationCircleIconOutline className="n-size-token-16" />
+              <InformationCircleIconOutline className="size-token-16" />
             </Tooltip.Trigger>
             <Tooltip.Content>Info about things like tokens</Tooltip.Content>
           </Tooltip>

package/skills/ndl-react/components/ai/response.md

@@ -659,10 +659,10 @@ export const Component = () => {
   };
 
   return (
-    <section className="n-h-screen">
-      <div className="n-w-[440px] n-h-full n-flex n-flex-col n-bg-neutral-bg-weak">
-        <div className="n-flex n-flex-row n-border-b n-border-neutral-border-weak n-p-3">
-          <div className="n-ml-auto">
+    <section className="h-screen">
+      <div className="w-[440px] h-full flex flex-col bg-neutral-bg-weak">
+        <div className="flex flex-row border-b border-neutral-border-weak p-3">
+          <div className="ml-auto">
             <CleanIconButton description="settings" tooltipProps={{}}>
               <Cog6ToothIconOutline />
             </CleanIconButton>
@@ -671,14 +671,14 @@ export const Component = () => {
             </CleanIconButton>
           </div>
         </div>
-        <div className="n-p-4 n-flex n-flex-col n-grow n-overflow-y-auto">
+        <div className="p-4 flex flex-col grow overflow-y-auto">
           {messages.length === 0 ? (
-            <div className="n-flex n-flex-col ">
-              <div className="n-flex n-flex-col n-gap-12">
+            <div className="flex flex-col ">
+              <div className="flex flex-col gap-12">
                 <Typography variant="display">
                   Hi [User], how can I help you today?
                 </Typography>
-                <div className="n-flex n-flex-col n-gap-4">
+                <div className="flex flex-col gap-4">
                   <Typography variant="body-medium">Suggestions</Typography>
                   <Suggestion
                     isPrimary
@@ -712,7 +712,7 @@ export const Component = () => {
                 </div>
                 <Typography variant="body-medium">
                   You can also drag and drop files here, or{' '}
-                  <TextLink as="button" type="internal-underline">
+                  <TextLink as="button" type="internal">
                     browse
                   </TextLink>
                   . Supports CVG, MOV, PDF
@@ -720,16 +720,16 @@ export const Component = () => {
               </div>
             </div>
           ) : (
-            <div className="n-flex n-flex-col n-gap-4 n-pb-4">
+            <div className="flex flex-col gap-4 pb-4">
               {messages.map((msg, idx) => (
                 <div
                   key={idx}
-                  className={`n-flex ${
-                    msg.role === 'user' ? 'n-justify-end' : 'n-justify-start'
+                  className={`flex ${
+                    msg.role === 'user' ? 'justify-end' : 'justify-start'
                   }`}
                 >
                   {msg.role === 'user' ? (
-                    <div className="n-max-w-[85%]">
+                    <div className="max-w-[85%]">
                       <UserBubble
                         avatarProps={{
                           name: 'NM',
@@ -740,18 +740,18 @@ export const Component = () => {
                       </UserBubble>
                     </div>
                   ) : (
-                    <div className="n-w-full n-flex n-flex-col n-gap-2">
+                    <div className="w-full flex flex-col gap-2">
                       {msg.thinkingTime !== undefined && (
                         <Thinking
                           isThinking={false}
                           thinkingMs={msg.thinkingTime}
                         />
                       )}
-                      <div className="n-flex n-flex-col n-gap-2">
+                      <div className="flex flex-col gap-2">
                         <Response>{msg.content}</Response>
 
                         {msg.isDone === true && (
-                          <div className="n-flex n-flex-row n-gap-1.5">
+                          <div className="flex flex-row gap-1.5">
                             <CleanIconButton size="small" description="Dislike">
                               <HandThumbDownIconOutline />
                             </CleanIconButton>
@@ -773,7 +773,7 @@ export const Component = () => {
             </div>
           )}
         </div>
-        <div className="n-px-4 n-pt-4 n-pb-1 n-mt-auto">
+        <div className="px-4 pt-4 pb-1 mt-auto">
           <Prompt
             value={prompt}
             onChange={(event) => setPrompt(event.target.value)}

package/skills/ndl-react/components/ai/suggestion.md

@@ -75,7 +75,7 @@ import { Suggestion } from '@neo4j-ndl/react/ai';
 
 const Component = () => {
   return (
-    <div className="n-flex n-flex-row n-gap-token-8">
+    <div className="flex flex-row gap-token-8">
       <Suggestion size="small">This is a small suggestion</Suggestion>
       <Suggestion size="large">This is a large suggestion</Suggestion>
     </div>

package/skills/ndl-react/components/ai/user-bubble.md

@@ -81,8 +81,8 @@ const Component = () => {
   const anchorRef = useRef<HTMLButtonElement | null>(null);
 
   return (
-    <div className="n-flex n-flex-coln-gap-token-64 n-w-full n-justify-end">
-      <div className="n-flex n-flex-col n-gap-token-8 n-items-end">
+    <div className="flex flex-coln-gap-token-64 w-full justify-end">
+      <div className="flex flex-col gap-token-8 items-end">
         <MoreFiles
           count={3}
           isActive={isMenuOpen}

package/skills/ndl-react/components/announcement-banner.md

@@ -133,7 +133,7 @@ import { GiftIconSolid, RocketLaunchIconSolid } from '@neo4j-ndl/react/icons';
 
 const Component = () => {
   return (
-    <div className="n-flex n-flex-col n-gap-token-8 n-w-full">
+    <div className="flex flex-col gap-token-8 w-full">
       <AnnouncementBanner variant="discovery" hasIcon={true}>
         <AnnouncementBanner.Header>
           Discovery with the default Sparkles icon
@@ -185,7 +185,7 @@ const Component = () => {
   const [isVisible, setIsVisible] = useState(false);
 
   return (
-    <div className="n-flex n-flex-col n-w-full">
+    <div className="flex flex-col w-full">
       {isVisible && (
         <AnnouncementBanner
           variant="discovery"
@@ -199,7 +199,7 @@ const Component = () => {
           </AnnouncementBanner.Header>
         </AnnouncementBanner>
       )}
-      <div className="n-flex n-flex-col n-gap-token-16 n-p-token-24 n-bg-neutral-bg-default">
+      <div className="flex flex-col gap-token-16 p-token-24 bg-neutral-bg-default">
         <OutlinedButton onClick={() => setIsVisible((visible) => !visible)}>
           {isVisible ? 'Hide announcement' : 'Show announcement'}
         </OutlinedButton>
@@ -232,7 +232,7 @@ const Component = () => {
   const [isVisible, setIsVisible] = useState(false);
 
   return (
-    <div className="n-flex n-flex-col n-w-full">
+    <div className="flex flex-col w-full">
       {isVisible && (
         <AnnouncementBanner variant="danger" hasIcon={true} liveRegion="alert">
           <AnnouncementBanner.Header>
@@ -240,7 +240,7 @@ const Component = () => {
           </AnnouncementBanner.Header>
         </AnnouncementBanner>
       )}
-      <div className="n-flex n-flex-col n-gap-token-16 n-p-token-24 n-bg-neutral-bg-default">
+      <div className="flex flex-col gap-token-16 p-token-24 bg-neutral-bg-default">
         <OutlinedButton onClick={() => setIsVisible((visible) => !visible)}>
           {isVisible ? 'Hide announcement' : 'Show announcement'}
         </OutlinedButton>
@@ -267,14 +267,14 @@ import { AnnouncementBanner, Typography } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-flex-col n-w-full">
+    <div className="flex flex-col w-full">
       <AnnouncementBanner variant="danger" hasIcon={true}>
         <AnnouncementBanner.Header>
           Warning: your marketplace subscription will be deprecated on September
           19, 2026.
         </AnnouncementBanner.Header>
       </AnnouncementBanner>
-      <div className="n-p-token-24 n-bg-neutral-bg-default">
+      <div className="p-token-24 bg-neutral-bg-default">
         <Typography variant="body-medium">
           This banner is part of the initial page render, so `liveRegion` is
           omitted. Screen reader users hear it when they reach it in the page,
@@ -297,7 +297,7 @@ import { AnnouncementBanner } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-flex-col n-gap-token-8 n-w-full">
+    <div className="flex flex-col gap-token-8 w-full">
       <AnnouncementBanner variant="info" hasIcon={true}>
         <AnnouncementBanner.Header>Info announcement</AnnouncementBanner.Header>
       </AnnouncementBanner>
@@ -373,7 +373,7 @@ const Component = () => {
   const [isVisible, setIsVisible] = useState(true);
 
   return (
-    <div className="n-flex n-flex-col n-max-w-[768px] n-h-52">
+    <div className="flex flex-col max-w-[768px] h-52">
       {isVisible && (
         <AnnouncementBanner
           variant="warning"
@@ -389,7 +389,7 @@ const Component = () => {
           </AnnouncementBanner.Actions>
         </AnnouncementBanner>
       )}
-      <div className="n-flex n-flex-col n-gap-token-16 n-p-token-24 n-bg-neutral-bg-default n-flex-1 n-min-h-0 n-overflow-y-auto">
+      <div className="flex flex-col gap-token-16 p-token-24 bg-neutral-bg-default flex-1 min-h-0 overflow-y-auto">
         {!isVisible && (
           <div>
             <TextButton onClick={() => setIsVisible(true)}>

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

@@ -59,7 +59,7 @@ import {
 
 const Component = () => {
   return (
-    <div className="n-flex n-gap-token-16">
+    <div className="flex gap-token-16">
       <Avatar type="icon" name="Favorites" icon={<StarIconOutline />} />
       <Avatar type="icon" name="Notifications" icon={<BellIconOutline />} />
       <Avatar type="icon" name="Likes" icon={<HeartIconOutline />} />
@@ -93,7 +93,7 @@ import { Avatar } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-gap-token-16">
+    <div className="flex gap-token-16">
       <Avatar shape="circle" />
       <Avatar shape="square" />
     </div>
@@ -112,7 +112,7 @@ import { Avatar } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-gap-token-16">
+    <div className="flex gap-token-16">
       <Avatar size="x-small" />
       <Avatar size="small" />
       <Avatar size="medium" />
@@ -134,7 +134,7 @@ import { Avatar } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-gap-token-16 n-items-center">
+    <div className="flex gap-token-16 items-center">
       <Avatar hasStatus={false} />
       <Avatar hasStatus status="online" />
       <Avatar hasStatus status="offline" />
@@ -155,7 +155,7 @@ import { Avatar } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-gap-token-16">
+    <div className="flex gap-token-16">
       <Avatar type="icon" name="Karl Morrison" />
       <Avatar type="letters" name="Karl Morrison" />
       <Avatar

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

@@ -101,7 +101,7 @@ import { Banner } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-flex-col n-gap-token-8">
+    <div className="flex flex-col gap-token-8">
       <Banner variant="info">
         <Banner.Header>Info</Banner.Header>
         <Banner.Description>This is a banner of type info.</Banner.Description>
@@ -169,7 +169,7 @@ import { Banner } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-flex-col n-gap-token-8">
+    <div className="flex flex-col gap-token-8">
       <Banner variant="info" hasIcon={true}>
         <Banner.Header>Info</Banner.Header>
         <Banner.Description>This is a banner of type info.</Banner.Description>

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

@@ -137,13 +137,13 @@ const Component = () => {
 
   return (
     <Breadcrumbs shouldWrap={false}>
-      <Breadcrumbs.Item className="n-mr-token-8">
+      <Breadcrumbs.Item className="mr-token-8">
         <button
           type="button"
           aria-label="Home"
-          className="n-rounded-sm focus-visible:n-outline-2 focus-visible:n-outline-offset-[3px] focus-visible:n-outline-primary-focus n-shrink-0"
+          className="rounded-sm focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-primary-focus shrink-0"
         >
-          <Neo4JIconColorIcon className="n-h-6 n-w-[26px]" />
+          <Neo4JIconColorIcon className="h-6 w-[26px]" />
         </button>
       </Breadcrumbs.Item>
       <Breadcrumbs.Item>

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

@@ -142,7 +142,7 @@ const Component = () => {
     !isParentChecked;
 
   return (
-    <div className="n-flex n-flex-col n-items-start n-gap-1">
+    <div className="flex flex-col items-start gap-1">
       <Checkbox
         isChecked={isParentChecked}
         isIndeterminate={isParentIndeterminate}
@@ -152,19 +152,19 @@ const Component = () => {
         }}
       />
       <Checkbox
-        className="n-ml-7"
+        className="ml-7"
         isChecked={childCheckboxes.childOne}
         label="Child checkbox 1"
         onChange={() => handleChildCheckboxChange('childOne')}
       />
       <Checkbox
-        className="n-ml-7"
+        className="ml-7"
         isChecked={childCheckboxes.childTwo}
         label="Child checkbox 2"
         onChange={() => handleChildCheckboxChange('childTwo')}
       />
       <Checkbox
-        className="n-ml-7"
+        className="ml-7"
         isChecked={childCheckboxes.childThree}
         label="Child checkbox 3"
         onChange={() => handleChildCheckboxChange('childThree')}