@neo4j-ndl/react 4.24.1 → 4.25.0

package/lib/types/radio-group/stories/radio-group-required.story.d.ts

@@ -0,0 +1,24 @@
+/*!
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+declare const Component: () => import("react/jsx-runtime").JSX.Element;
+export default Component;
+//# sourceMappingURL=radio-group-required.story.d.ts.map

package/lib/types/radio-group/stories/radio-group-required.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group-required.story.d.ts","sourceRoot":"","sources":["../../../../src/radio-group/stories/radio-group-required.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAIjD,QAAA,MAAM,SAAS,+CAad,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/radio-group/stories/radio-group-visually-hidden-label.story.d.ts

@@ -0,0 +1,24 @@
+/*!
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+declare const Component: () => import("react/jsx-runtime").JSX.Element;
+export default Component;
+//# sourceMappingURL=radio-group-visually-hidden-label.story.d.ts.map

package/lib/types/radio-group/stories/radio-group-visually-hidden-label.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group-visually-hidden-label.story.d.ts","sourceRoot":"","sources":["../../../../src/radio-group/stories/radio-group-visually-hidden-label.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAIjD,QAAA,MAAM,SAAS,+CAcd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/segmented-control/SegmentedControl.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/select/Select.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/select-icon-button/SelectIconButton.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/selectable-tag/SelectableTag.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/skeleton/Skeleton.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/slider/Slider.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/slider/stories/slider-custom-step-length.story.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/slider/stories/slider-default.story.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/slider/stories/slider-disabled.story.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/slider/stories/slider-range.story.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/slider/stories/slider-show-steps.story.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/slider/stories/slider-show-values.story.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/slider/stories/slider-single.story.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/spotlight/Spotlight.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/spotlight/SpotlightProvider.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/spotlight/SpotlightTarget.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/status-indicator/StatusIndicator.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/status-label/StatusLabel.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/tabs/Tabs.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/tabs/use-tabs-scroll-overflow.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/tag/Tag.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/tag-base/TagBase.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/text-area/TextArea.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/text-link/TextLink.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/text-overflow/TextOverflow.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/theme/ThemeProvider.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/theme/agnostic.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/time-picker/TimePicker.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/time-picker/time-picker-hooks.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/timezone-picker/TimeZonePicker.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/timezone-picker/timezone-picker-hooks.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/toast/Toast.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/toast/ToastControlled.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/tree-view/TreeItemWrapper.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/tree-view/tree-view-keyboard-helpers.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/typography/stories/typography-anchor.story.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/types/wizard/Wizard.d.ts

@@ -1,4 +1,4 @@
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "4.24.1",
+  "version": "4.25.0",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [
@@ -62,6 +62,11 @@
       "require": "./lib/cjs/checkbox/index.js",
       "import": "./lib/esm/checkbox/index.js"
     },
+    "./checkbox-group": {
+      "types": "./lib/types/checkbox-group/index.d.ts",
+      "require": "./lib/cjs/checkbox-group/index.js",
+      "import": "./lib/esm/checkbox-group/index.js"
+    },
     "./clean-icon-button": {
       "types": "./lib/types/clean-icon-button/index.d.ts",
       "require": "./lib/cjs/clean-icon-button/index.js",
@@ -137,6 +142,11 @@
       "require": "./lib/cjs/dropzone/index.js",
       "import": "./lib/esm/dropzone/index.js"
     },
+    "./fieldset": {
+      "types": "./lib/types/fieldset/index.d.ts",
+      "require": "./lib/cjs/fieldset/index.js",
+      "import": "./lib/esm/fieldset/index.js"
+    },
     "./filled-button": {
       "types": "./lib/types/filled-button/index.d.ts",
       "require": "./lib/cjs/filled-button/index.js",
@@ -227,6 +237,11 @@
       "require": "./lib/cjs/radio/index.js",
       "import": "./lib/esm/radio/index.js"
     },
+    "./radio-group": {
+      "types": "./lib/types/radio-group/index.d.ts",
+      "require": "./lib/cjs/radio-group/index.js",
+      "import": "./lib/esm/radio-group/index.js"
+    },
     "./read-only-tag": {
       "types": "./lib/types/read-only-tag/index.d.ts",
       "require": "./lib/cjs/read-only-tag/index.js",
@@ -409,7 +424,7 @@
     "@tanstack/react-table": "8.21.3",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
-    "@neo4j-ndl/base": "^4.23.0"
+    "@neo4j-ndl/base": "^4.23.2"
   },
   "dependencies": {
     "@dnd-kit/core": "6.3.1",

package/skills/ndl-react/SKILL.md

@@ -2,7 +2,7 @@
 name: ndl-react
 metadata:
   package: '@neo4j-ndl/react'
-  version: '4.24.1'
+  version: '4.25.0'
 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.24.1. Once installed into your repo (e.g. via
+> 📌 Shipped with `@neo4j-ndl/react` v4.25.0. 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.
@@ -140,6 +140,7 @@ Import from `@neo4j-ndl/react`.
 | `Box` | [components/box.md](components/box.md) |  | 1 |
 | `Breadcrumbs` | [components/breadcrumbs.md](components/breadcrumbs.md) | ✅ | 4 |
 | `Checkbox` | [components/checkbox.md](components/checkbox.md) | ✅ | 9 |
+| `CheckboxGroup` | [components/checkbox-group.md](components/checkbox-group.md) | ✅ | 6 |
 | `CleanIconButton` | [components/clean-icon-button.md](components/clean-icon-button.md) | ✅ | 8 |
 | `ClipboardButton` | [components/clipboard-button.md](components/clipboard-button.md) |  | 7 |
 | `Code` | [components/code.md](components/code.md) | ✅ | 2 |
@@ -155,6 +156,7 @@ Import from `@neo4j-ndl/react`.
 | `Drawer` | [components/drawer.md](components/drawer.md) | ✅ | 8 |
 | `DropdownButton` | [components/dropdown-button.md](components/dropdown-button.md) |  | 7 |
 | `Dropzone` | [components/dropzone.md](components/dropzone.md) |  | 6 |
+| `Fieldset` | [components/fieldset.md](components/fieldset.md) | ✅ | 6 |
 | `FilledButton` | [components/filled-button.md](components/filled-button.md) |  | 0 |
 | `Flex` | [components/flex.md](components/flex.md) |  | 1 |
 | `GraphLabel` | [components/graph-label.md](components/graph-label.md) |  | 7 |
@@ -171,6 +173,7 @@ Import from `@neo4j-ndl/react`.
 | `Popover` | [components/popover.md](components/popover.md) | ✅ | 6 |
 | `ProgressBar` | [components/progress-bar.md](components/progress-bar.md) | ✅ | 3 |
 | `Radio` | [components/radio.md](components/radio.md) | ✅ | 7 |
+| `RadioGroup` | [components/radio-group.md](components/radio-group.md) | ✅ | 8 |
 | `ReadOnlyTag` | [components/read-only-tag.md](components/read-only-tag.md) |  | 4 |
 | `SegmentedControl` | [components/segmented-control.md](components/segmented-control.md) | ✅ | 5 |
 | `Select` | [components/select.md](components/select.md) |  | 13 |

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

@@ -0,0 +1,195 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
+# CheckboxGroup
+
+Import: `import { CheckboxGroup } from '@neo4j-ndl/react'`
+
+## Props
+
+### CheckboxGroup
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` | ✅ |  | The controls grouped by the fieldset |
+| `errorText` | `ReactNode` |  |  | Error message displayed below the grouped controls. When provided, it replaces `helpText` |
+| `hasRequiredIndicator` | `boolean` |  |  | Whether Required or Optional is shown at the end of the legend row |
+| `hasVisuallyHiddenLabel` | `boolean` |  |  | Whether the legend is clipped out of the layout, leaving it to screen readers only |
+| `helpText` | `ReactNode` |  |  | Assistive text displayed below the grouped controls |
+| `isDisabled` | `boolean` |  | `false` | Whether all native form controls in the fieldset are disabled |
+| `isRequired` | `boolean` |  | `false` | Whether the grouped field is required |
+| `label` | `ReactNode` | ✅ |  | The accessible label displayed in the fieldset legend |
+| `name` | `string` |  |  | Shared native name for checkbox form values |
+| `ref` | `Ref<HTMLFieldSetElement>` |  |  | A ref to apply to the root element. |
+
+Checked state remains on each `Checkbox`. Browsers cannot natively validate
+an “at least one” checkbox requirement, so applications should set
+`errorText` after validating a required group.
+
+## Accessibility
+
+`CheckboxGroup` renders a native `<fieldset>` and `<legend>`. The legend names
+the group, while every `Checkbox` keeps its own label. A shared `name` can be
+provided when checked values should be submitted under the same form key.
+
+Each native checkbox remains a separate Tab stop and Space toggles the focused
+checkbox. `isDisabled` disables the fieldset and every descendant control.
+
+Browsers cannot express an “at least one checkbox” constraint with native
+`required`; applying `required` to every checkbox would require every option.
+Use `isRequired` for the group’s required presentation, validate the selected
+values in the application, and provide `errorText` when validation fails.
+“Required” is included in the legend's accessible name.
+
+Help and error text are associated with the group through `aria-describedby`;
+individual checkboxes retain only descriptions supplied directly to them. An
+error replaces help text and sets `aria-invalid` on the group and its
+checkboxes.
+
+## Examples
+
+### Default
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Checkbox, CheckboxGroup } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <CheckboxGroup
+      label="Notification channels"
+      name="notification-channel"
+      helpText="Choose every channel you want to use."
+    >
+      <Checkbox label="Email" value="email" isDefaultChecked />
+      <Checkbox label="In-app" value="in-app" />
+      <Checkbox label="Mobile push" value="push" />
+    </CheckboxGroup>
+  );
+};
+
+export default Component;
+```
+
+### Disabled
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Checkbox, CheckboxGroup } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <CheckboxGroup
+      label="Notification channels"
+      name="notification-channel-disabled"
+      isDisabled
+    >
+      <Checkbox label="Email" value="email" isDefaultChecked />
+      <Checkbox label="In-app" value="in-app" />
+      <Checkbox label="Mobile push" value="push" />
+    </CheckboxGroup>
+  );
+};
+
+export default Component;
+```
+
+### Error
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Checkbox, CheckboxGroup } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <CheckboxGroup
+      label="Notification channels"
+      name="notification-channel-error"
+      errorText="Select at least one notification channel."
+    >
+      <Checkbox label="Email" value="email" isDefaultChecked />
+      <Checkbox label="In-app" value="in-app" />
+      <Checkbox label="Mobile push" value="push" />
+    </CheckboxGroup>
+  );
+};
+
+export default Component;
+```
+
+### Optional
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Checkbox, CheckboxGroup } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <CheckboxGroup
+      label="Notification channels"
+      name="notification-channel-optional"
+      hasRequiredIndicator
+    >
+      <Checkbox label="Email" value="email" isDefaultChecked />
+      <Checkbox label="In-app" value="in-app" />
+      <Checkbox label="Mobile push" value="push" />
+    </CheckboxGroup>
+  );
+};
+
+export default Component;
+```
+
+### Required
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Checkbox, CheckboxGroup } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <CheckboxGroup
+      label="Notification channels"
+      name="notification-channel-required"
+      hasRequiredIndicator
+      isRequired
+    >
+      <Checkbox label="Email" value="email" isDefaultChecked />
+      <Checkbox label="In-app" value="in-app" />
+      <Checkbox label="Mobile push" value="push" />
+    </CheckboxGroup>
+  );
+};
+
+export default Component;
+```
+
+### Visually Hidden Label
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Checkbox, CheckboxGroup } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <>
+      <CheckboxGroup
+        label="Notification channels"
+        name="notification-channel-hidden"
+        hasVisuallyHiddenLabel
+      >
+        <Checkbox label="Email" value="email" isDefaultChecked />
+        <Checkbox label="In-app" value="in-app" />
+        <Checkbox label="Mobile push" value="push" />
+      </CheckboxGroup>
+    </>
+  );
+};
+
+export default Component;
+```