@digdir/designsystemet-react 1.0.0-next.47 → 1.0.0-next.49

package/dist/cjs/components/Dropdown/index.js

@@ -10,17 +10,19 @@ var DropdownTrigger = require('./DropdownTrigger.js');
 var DropdownTriggerContext = require('./DropdownTriggerContext.js');
 
 /**
+ * Dropdown component, used to display a list of options.
+ *
  * @example
  * <Dropdown.TriggerContext>
- *  <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
- *  <Dropdown>
- *    <Dropdown.Heading>Heading</Dropdown.Heading>
- *    <Dropdown.List>
- *      <Dropdown.Item>
- *        <Dropdown.Button>Button 1</Dropdown.Button>
- *      </Dropdown.Item>
- *    </Dropdown.List>
- *  </Dropdown>
+ *   <Dropdown.Trigger>Dropdown trigger</Dropdown.Trigger>
+ *   <Dropdown placement='bottom-end'>
+ *     <Dropdown.Heading>Dropdown</Dropdown.Heading>
+ *     <Dropdown.List>
+ *       <Dropdown.Item>
+ *         <Dropdown.Button>Option</Dropdown.Button>
+ *       </Dropdown.Item>
+ *     </Dropdown.List>
+ *   </Dropdown>
  * </Dropdown.TriggerContext>
  */
 const Dropdown = Object.assign(Dropdown$1.Dropdown, {

package/dist/cjs/components/ErrorSummary/ErrorSummary.js

@@ -2,6 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
 
@@ -9,10 +10,27 @@ const ErrorSummaryContext = react.createContext({
     headingId: 'heading',
     setHeadingId: () => { },
 });
-const ErrorSummary = react.forwardRef(function ErrorSummary({ className, role = 'alert', 'aria-live': ariaLive = 'polite', 'aria-relevant': ariaRelevant = 'all', ...rest }, ref) {
+/**
+ * ErrorSummary component, used to display a list of errors.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
+ *   <ErrorSummary.List>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 1</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 2</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *   </ErrorSummary.List>
+ * </ErrorSummary>
+ */
+const ErrorSummary = react.forwardRef(function ErrorSummary({ asChild, role = 'alert', 'aria-live': ariaLive = 'polite', 'aria-relevant': ariaRelevant = 'all', className, ...rest }, ref) {
     const randomId = react.useId();
     const [headingId, setHeadingId] = react.useState(randomId);
-    return (jsxRuntime.jsx(ErrorSummaryContext.Provider, { value: { headingId, setHeadingId }, children: jsxRuntime.jsx("div", { "aria-labelledby": headingId, "aria-live": ariaLive, "aria-relevant": ariaRelevant, className: cl('ds-error-summary', className), ref: ref, role: role, ...rest }) }));
+    const Component = asChild ? reactSlot.Slot : 'div';
+    return (jsxRuntime.jsx(ErrorSummaryContext.Provider, { value: { headingId, setHeadingId }, children: jsxRuntime.jsx(Component, { "aria-labelledby": headingId, "aria-live": ariaLive, "aria-relevant": ariaRelevant, className: cl('ds-error-summary', className), ref: ref, role: role, ...rest }) }));
 });
 
 exports.ErrorSummary = ErrorSummary;

package/dist/cjs/components/ErrorSummary/ErrorSummaryItem.js

@@ -3,11 +3,17 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var index = require('../List/index.js');
-var Link = require('../Link/Link.js');
+require('../List/index.js');
+var ListItem = require('../List/ListItem.js');
 
-const ErrorSummaryItem = react.forwardRef(function ErrorSummaryItem({ href, asChild, children, ...rest }, ref) {
-    return (jsxRuntime.jsx(index.List.Item, { ...rest, ref: ref, children: jsxRuntime.jsx(Link.Link, { href: href, asChild: asChild, children: children }) }));
+/**
+ * ErrorSummaryItem component, used to display an error link in the ErrorSummary.
+ *
+ * @example
+ * <ErrorSummary.Item href='#'>Link to error</ErrorSummary.Item>
+ */
+const ErrorSummaryItem = react.forwardRef(function ErrorSummaryItem({ ...rest }, ref) {
+    return jsxRuntime.jsx(ListItem.ListItem, { ref: ref, ...rest });
 });
 
 exports.ErrorSummaryItem = ErrorSummaryItem;

package/dist/cjs/components/ErrorSummary/ErrorSummaryLink.js

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Link = require('../Link/Link.js');
+
+/**
+ * Link component used in ErrorSummary.
+ */
+const ErrorSummaryLink = react.forwardRef(function ErrorSummaryLink({ ...rest }, ref) {
+    return jsxRuntime.jsx(Link.Link, { ref: ref, "data-color": 'neutral', ...rest });
+});
+
+exports.ErrorSummaryLink = ErrorSummaryLink;

package/dist/cjs/components/ErrorSummary/index.js

@@ -4,27 +4,38 @@
 var ErrorSummary$1 = require('./ErrorSummary.js');
 var ErrorSummaryHeading = require('./ErrorSummaryHeading.js');
 var ErrorSummaryItem = require('./ErrorSummaryItem.js');
+var ErrorSummaryLink = require('./ErrorSummaryLink.js');
 var ErrorSummaryList = require('./ErrorSummaryList.js');
 
 /**
+ * ErrorSummary component, used to display a list of errors.
+ *
  * @example
  * <ErrorSummary>
- *  <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
- *  <ErrorSummary.List>
- *    <ErrorSummary.Item>Item 1</ErrorSummary.Item>
- *  </ErrorSummary.List>
+ *   <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
+ *   <ErrorSummary.List>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 1</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 2</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *   </ErrorSummary.List>
  * </ErrorSummary>
  */
 const ErrorSummary = Object.assign(ErrorSummary$1.ErrorSummary, {
     Heading: ErrorSummaryHeading.ErrorSummaryHeading,
     Item: ErrorSummaryItem.ErrorSummaryItem,
     List: ErrorSummaryList.ErrorSummaryList,
+    Link: ErrorSummaryLink.ErrorSummaryLink,
 });
 ErrorSummary.Item.displayName = 'ErrorSummary.Item';
 ErrorSummary.Heading.displayName = 'ErrorSummary.Heading';
 ErrorSummary.List.displayName = 'ErrorSummary.List';
+ErrorSummary.Link.displayName = 'ErrorSummary.Link';
 
 exports.ErrorSummaryHeading = ErrorSummaryHeading.ErrorSummaryHeading;
 exports.ErrorSummaryItem = ErrorSummaryItem.ErrorSummaryItem;
+exports.ErrorSummaryLink = ErrorSummaryLink.ErrorSummaryLink;
 exports.ErrorSummaryList = ErrorSummaryList.ErrorSummaryList;
 exports.ErrorSummary = ErrorSummary;

package/dist/cjs/components/Field/Field.js

@@ -7,6 +7,17 @@ var cl = require('clsx/lite');
 var react = require('react');
 var fieldObserver = require('./fieldObserver.js');
 
+/**
+ * Field component, used to wrap a form field.
+ *
+ * @example
+ * <Field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
+ * </Field>
+ */
 const Field = react.forwardRef(function Field({ className, position, ...rest }, ref) {
     const fieldRef = react.useRef(null);
     const mergedRefs = react$1.useMergeRefs([fieldRef, ref]);

package/dist/cjs/components/Field/FieldAffix.js

@@ -5,9 +5,30 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 
+/**
+ * FieldAffixes component, used to wrap a form field.
+ *
+ * @example
+ * <Field.Affixes>
+ *   <Field.Affix>NOK</Field.Affix>
+ *   <Input />
+ *   <Field.Affix>pr. mnd.</Field.Affix>
+ * </Field.Affixes>
+ */
 const FieldAffixes = react.forwardRef(function FieldAffixes({ className, ...rest }, ref) {
     return (jsxRuntime.jsx("div", { className: cl('ds-field-affixes', className), ref: ref, ...rest }));
 });
+/**
+ * FieldAffix component, used to wrap a form field.
+ * Use together with Field.Affixes.
+ *
+ * @example
+ * <Field.Affixes>
+ *   <Field.Affix>NOK</Field.Affix>
+ *   <Input />
+ *   <Field.Affix>pr. mnd.</Field.Affix>
+ * </Field.Affixes>
+ */
 const FieldAffix = react.forwardRef(function FieldAffix({ className, ...rest }, ref) {
     return (jsxRuntime.jsx("span", { className: cl('ds-field-affix', className), "aria-hidden": 'true', ref: ref, ...rest }));
 });

package/dist/cjs/components/Field/FieldCounter.js

@@ -8,6 +8,15 @@ var ValidationMessage = require('../ValidationMessage/ValidationMessage.js');
 var Paragraph = require('../Paragraph/Paragraph.js');
 
 const label = (text, count) => text.replace('%d', Math.abs(count).toString());
+/**
+ * FieldCounter component, used to display a counter for a form field.
+ *
+ * @example
+ * <Field>
+ *   <Input />
+ *   <Field.Counter limit={100} under='%d tegn igjen' over='%d tegn for mye' />
+ * </Field>
+ */
 const FieldCounter = react.forwardRef(function FieldCounter({ limit, under = '%d tegn igjen', over = '%d tegn for mye', ...rest }, ref) {
     const [count, setCount] = react.useState(0);
     const counterRef = react.useRef(null);

package/dist/cjs/components/Field/index.js

@@ -7,12 +7,14 @@ var FieldCounter = require('./FieldCounter.js');
 var FieldDescription = require('./FieldDescription.js');
 
 /**
+ * Field component, used to wrap a form field.
+ *
  * @example
- * <Field>
- *  <Label>Label text</Label>
- *  <Field.Description>Description</Field.Description>
- *  <Input />
- *  <ValidationMessage>Validation message</ValidationMessage>
+ * <Field data-my-field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
  * </Field>
  */
 const Field = Object.assign(Field$1.Field, {

package/dist/cjs/components/Fieldset/Fieldset.js

@@ -5,6 +5,21 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 
+/**
+ * Fieldset component, used to wrap a form field. Uses native `fieldset` element.
+ *
+ * @example
+ * <Fieldset>
+ *   <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ *   <Fieldset.Description>
+ *     Gi en kort beskrivelse i begge feltene
+ *   </Fieldset.Description>
+ *   <Field>
+ *     <Label>Kort beskrivelse</Label>
+ *     <Input />
+ *   </Field>
+ * </Fieldset>
+ */
 const Fieldset = react.forwardRef(function Fieldset({ className, ...rest }, ref) {
     return (jsxRuntime.jsx("fieldset", { className: cl('ds-fieldset', className), ref: ref, ...rest }));
 });

package/dist/cjs/components/Fieldset/FieldsetDescription.js

@@ -5,6 +5,14 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var Paragraph = require('../Paragraph/Paragraph.js');
 
+/**
+ * FieldsetDescription component, used to display a description for a fieldset.
+ *
+ * @example
+ * <Fieldset.Description>
+ *   Gi en kort beskrivelse i begge feltene
+ * </Fieldset.Description>
+ */
 const FieldsetDescription = react.forwardRef(function FieldsetDescription(rest, ref) {
     return jsxRuntime.jsx(Paragraph.Paragraph, { ref: ref, ...rest });
 });

package/dist/cjs/components/Fieldset/FieldsetLegend.js

@@ -5,6 +5,12 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var Label = require('../Label/Label.js');
 
+/**
+ * FieldsetLegend component, used to display a legend for a fieldset.
+ *
+ * @example
+ * <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ */
 const FieldsetLegend = react.forwardRef(function FieldsetLegend(rest, ref) {
     return (jsxRuntime.jsx(Label.Label, { asChild: true, children: jsxRuntime.jsx("legend", { ref: ref, ...rest }) }));
 });

package/dist/cjs/components/Fieldset/index.js

@@ -6,11 +6,18 @@ var FieldsetDescription = require('./FieldsetDescription.js');
 var FieldsetLegend = require('./FieldsetLegend.js');
 
 /**
+ * Fieldset component, used to wrap a form field.
+ *
  * @example
  * <Fieldset>
- *  <Fieldset.Legend>Legend text</Fieldset.Legend>
- *  <Fieldset.Description>Description text</Fieldset.Description>
- *  ...input components
+ *   <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ *   <Fieldset.Description>
+ *     Gi en kort beskrivelse i begge feltene
+ *   </Fieldset.Description>
+ *   <Field>
+ *     <Label>Kort beskrivelse</Label>
+ *     <Input />
+ *   </Field>
  * </Fieldset>
  */
 const Fieldset = Object.assign(Fieldset$1.Fieldset, {

package/dist/cjs/components/Input/Input.js

@@ -5,12 +5,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 
-/** Input field
+/**
+ * Input renders a native `input` element.
  *
  * @example
- * ```tsx
  * <Input />
- * ```
  */
 const Input = react.forwardRef(function Input({ type = 'text', className, onChange, onClick, ...rest }, ref) {
     return (jsxRuntime.jsx("input", { className: cl(`ds-input`, className), ref: ref, type: type, onChange: (event) => rest.readOnly || onChange?.(event), onClick: (event) => {

package/dist/cjs/components/Label/Label.js

@@ -7,10 +7,10 @@ var cl = require('clsx/lite');
 var react = require('react');
 
 /**
- * Use `Label` for labels.
+ * Use `Label` for labels. Renders a native `label` element.
  *
  * @example
- * <Label data-size='lg'>Label</Label>
+ * <Label data-size='lg' weight='medium'>Label</Label>
  */
 const Label = react.forwardRef(function Label({ className, weight = 'medium', asChild, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'label';

package/dist/cjs/components/Link/Link.js

@@ -6,6 +6,12 @@ var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
 
+/**
+ * Link component, renders a native `a` element.
+ *
+ * @example
+ * <Link href='#'>Link</Link>
+ */
 const Link = react.forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? reactSlot.Slot : 'a';
     return (jsxRuntime.jsx(Component, { className: cl('ds-link', className), ref: ref, ...rest }));

package/dist/cjs/components/List/Lists.js

@@ -10,9 +10,29 @@ const render = (tagName, { asChild, className, ...rest }, ref) => {
     const Component = asChild ? reactSlot.Slot : tagName;
     return jsxRuntime.jsx(Component, { className: cl(`ds-list`, className), ref: ref, ...rest });
 };
+/**
+ * ListUnordered component, used to display a list of items.
+ * Renders a native `ul` element.
+ *
+ * @example
+ * <List.Unordered>
+ *   <List.Item>Item 1</List.Item>
+ *   <List.Item>Item 2</List.Item>
+ * </List.Unordered>
+ */
 const ListUnordered = react.forwardRef(function ListUnordered(props, ref) {
     return render('ul', props, ref);
 });
+/**
+ * ListOrdered component, used to display a list of items.
+ * Renders a native `ol` element.
+ *
+ * @example
+ * <List.Ordered>
+ *   <List.Item>Item 1</List.Item>
+ *   <List.Item>Item 2</List.Item>
+ * </List.Ordered>
+ */
 const ListOrdered = react.forwardRef(function ListOrdered(props, ref) {
     return render('ol', props, ref);
 });

package/dist/cjs/components/Pagination/Pagination.js

@@ -6,6 +6,24 @@ var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
 
+/**
+ * Pagination component, used to navigate through a list of items.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 1'>1</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 2'>2</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
 const Pagination = react.forwardRef(function Pagination({ 'aria-label': ariaLabel = 'Sidenavigering', asChild, className, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'nav';
     return (jsxRuntime.jsx(Component, { "aria-label": ariaLabel, className: cl('ds-pagination', className), ref: ref, ...rest }));

package/dist/cjs/components/Pagination/PaginationButton.js

@@ -5,6 +5,14 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var Button = require('../Button/Button.js');
 
+/**
+ * PaginationButton component, use within a Pagination.Item.
+ *
+ * @example
+ * <Pagination.Item>
+ *   <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ * </Pagination.Item>
+ */
 const PaginationButton = react.forwardRef(function PaginationButton(rest, ref) {
     return jsxRuntime.jsx(Button.Button, { ref: ref, ...rest });
 });

package/dist/cjs/components/Pagination/PaginationItem.js

@@ -5,6 +5,16 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
 
+/**
+ * PaginationItem component, use within a Pagination.List.
+ *
+ * @example
+ * <Pagination.List>
+ *   <Pagination.Item>
+ *     <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *   </Pagination.Item>
+ * </Pagination.List>
+ */
 const PaginationItem = react.forwardRef(function PaginationItem({ asChild, className, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'li';
     return jsxRuntime.jsx(Component, { ref: ref, ...rest });

package/dist/cjs/components/Pagination/PaginationList.js

@@ -5,6 +5,18 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
 
+/**
+ * PaginationList component, use within a Pagination.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
 const PaginationList = react.forwardRef(function PaginationList({ asChild, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'ul';
     return jsxRuntime.jsx(Component, { ref: ref, ...rest });

package/dist/cjs/components/Pagination/index.js

@@ -6,6 +6,24 @@ var PaginationButton = require('./PaginationButton.js');
 var PaginationItem = require('./PaginationItem.js');
 var PaginationList = require('./PaginationList.js');
 
+/**
+ * Pagination component, used to navigate through a list of items.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 1'>1</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 2'>2</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
 const Pagination = Object.assign(Pagination$1.Pagination, {
     List: PaginationList.PaginationList,
     Item: PaginationItem.PaginationItem,

package/dist/cjs/components/Paragraph/Paragraph.js

@@ -8,6 +8,7 @@ var react = require('react');
 
 /**
  * Use `Paragraph` to display text with paragraph text styles.
+ * Renders a native `p` element.
  *
  * @example
  * <Paragraph data-size='lg'>Paragraph</Paragraph>

package/dist/cjs/components/Popover/Popover.js

@@ -9,7 +9,24 @@ var cl = require('clsx/lite');
 var react = require('react');
 var PopoverTriggerContext = require('./PopoverTriggerContext.js');
 
-const Popover = react.forwardRef(function Popover({ id, className, onClose, onOpen, open, placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
+/**
+ * Popover component, used to display content in a popover over an element.
+ *
+ * @example with TriggerContext
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ *
+ * @example without TriggerContext
+ * <Button popovertarget="my-popover">Open Popover</Button>
+ * <Popover id="my-popover">
+ *   Content
+ * </Popover>
+ */
+const Popover = react.forwardRef(function Popover({ id, className, onClose, onOpen, open, 'data-variant': variant = 'default', placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'div';
     const popoverRef = react.useRef(null);
     const mergedRefs = react$1.useMergeRefs([popoverRef, ref]);
@@ -80,7 +97,7 @@ const Popover = react.forwardRef(function Popover({ id, className, onClose, onOp
     }, [id]);
     return (jsxRuntime.jsx(Component, { className: cl('ds-popover', className), id: id || popoverId, 
         // @ts-ignore @types/react-dom does not understand popover yet
-        popover: 'manual', ref: mergedRefs, ...rest }));
+        popover: 'manual', "data-variant": variant, ref: mergedRefs, ...rest }));
 });
 const arrowPseudoElement = {
     name: 'ArrowPseudoElement',

package/dist/cjs/components/Popover/PopoverTrigger.js

@@ -7,14 +7,39 @@ var react = require('react');
 var Button = require('../Button/Button.js');
 var PopoverTriggerContext = require('./PopoverTriggerContext.js');
 
+/**
+ * PopoverTrigger component, used to trigger a popover.
+ *
+ * @example
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ *
+ * @example inline
+ * <Popover.TriggerContext>
+ *   <Paragraph>
+ *    We can use it <Popover.Trigger inline={true}>inline</Popover.Trigger>.
+ *   </Paragraph>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ */
 const PopoverTrigger = react.forwardRef(function PopoverTrigger({ id, inline, asChild, ...rest }, ref) {
     const { popoverId } = react.useContext(PopoverTriggerContext.Context);
     const Component = asChild ? reactSlot.Slot : inline ? 'button' : Button.Button;
-    return (jsxRuntime.jsx(Component, { ref: ref, popovertarget: popoverId, ...(inline
+    const popoverProps = Object.assign({
+        [react.version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: popoverId,
+        ...(inline
             ? {
                 'data-popover': 'inline',
             }
-            : {}), ...rest }));
+            : {}),
+    }, rest);
+    return jsxRuntime.jsx(Component, { ref: ref, ...popoverProps });
 });
 
 exports.PopoverTrigger = PopoverTrigger;

package/dist/cjs/components/Popover/PopoverTriggerContext.js

@@ -4,6 +4,17 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 
+/**
+ * PopoverTriggerContext component, use to wrap a Popover.Trigger and Popover.
+ *
+ * @example
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ */
 const PopoverTriggerContext = ({ children, }) => {
     const randomPopoverId = react.useId();
     const [popoverId, setPopoverId] = react.useState(randomPopoverId);

package/dist/cjs/components/Popover/index.js

@@ -5,9 +5,21 @@ var Popover$1 = require('./Popover.js');
 var PopoverTrigger = require('./PopoverTrigger.js');
 var PopoverTriggerContext = require('./PopoverTriggerContext.js');
 
-const Popover = Popover$1.Popover;
-Popover.TriggerContext = PopoverTriggerContext.PopoverTriggerContext;
-Popover.Trigger = PopoverTrigger.PopoverTrigger;
+/**
+ * Popover component, used to display content in a popover over an element.
+ *
+ * @example
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ */
+const Popover = Object.assign(Popover$1.Popover, {
+    TriggerContext: PopoverTriggerContext.PopoverTriggerContext,
+    Trigger: PopoverTrigger.PopoverTrigger,
+});
 Popover.TriggerContext.displayName = 'Popover.TriggerContext';
 Popover.Trigger.displayName = 'Popover.Trigger';
 

package/dist/cjs/components/Radio/Radio.js

@@ -10,11 +10,12 @@ var ValidationMessage = require('../ValidationMessage/ValidationMessage.js');
 
 /**
  * Radio used to select multiple options.
+ *
  * @example
  * <Radio label="I agree" value="agree" />
  */
-const Radio = react.forwardRef(function Radio({ 'data-size': size, className, style, children, label, description, validation, ...rest }, ref) {
-    return (jsxRuntime.jsxs(index.Field, { "data-size": size, className: className, style: style, children: [jsxRuntime.jsx(Input.Input, { type: 'radio', ref: ref, ...rest }), !!label && jsxRuntime.jsx(Label.Label, { weight: 'regular', children: label }), !!description && jsxRuntime.jsx("div", { "data-field": 'description', children: description }), !!validation && jsxRuntime.jsx(ValidationMessage.ValidationMessage, { children: validation })] }));
+const Radio = react.forwardRef(function Radio({ 'data-size': size, className, style, children, label, description, error, ...rest }, ref) {
+    return (jsxRuntime.jsxs(index.Field, { "data-size": size, className: className, style: style, children: [jsxRuntime.jsx(Input.Input, { type: 'radio', ref: ref, ...rest }), !!label && jsxRuntime.jsx(Label.Label, { weight: 'regular', children: label }), !!description && jsxRuntime.jsx("div", { "data-field": 'description', children: description }), !!error && jsxRuntime.jsx(ValidationMessage.ValidationMessage, { children: error })] }));
 });
 
 exports.Radio = Radio;