@digdir/designsystemet-react 1.0.0-next.34 → 1.0.0-next.36

package/dist/cjs/components/form/Select/index.js

@@ -5,9 +5,10 @@ var Select$1 = require('./Select.js');
 var SelectOptgroup = require('./SelectOptgroup.js');
 var SelectOption = require('./SelectOption.js');
 
-const Select = Select$1.Select;
-Select.Option = SelectOption.SelectOption;
-Select.Optgroup = SelectOptgroup.SelectOptgroup;
+const Select = Object.assign(Select$1.Select, {
+    Option: SelectOption.SelectOption,
+    Optgroup: SelectOptgroup.SelectOptgroup,
+});
 Select.Option.displayName = 'Select.Option';
 Select.Optgroup.displayName = 'Select.Optgroup';
 

package/dist/cjs/components/form/Switch/Switch.js

@@ -2,19 +2,18 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var akselIcons = require('@navikt/aksel-icons');
-var cl = require('clsx/lite');
 var react = require('react');
-var useSwitch = require('./useSwitch.js');
-var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
-var omit = require('../../../utilities/omit/omit.js');
-var Label = require('../../Typography/Label/Label.js');
+var index = require('../Field/index.js');
+var Input = require('../Input/Input.js');
+var Label = require('../../Label/Label.js');
 
-const Switch = react.forwardRef((props, ref) => {
-    const { children, description, position = 'left', className, ...rest } = props;
-    const { inputProps, descriptionId, size = 'md', readOnly, } = useSwitch.useSwitch(props);
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: cl(`ds-switch`, `ds-switch--${size}`, inputProps.disabled && `ds-switch--disabled`, readOnly && `ds-switch--readonly`, className), children: [jsxRuntime.jsx("input", { className: `ds-switch__input`, disabled: inputProps.disabled, ref: ref, ...omit.omit(['size', 'error'], rest), ...inputProps }), jsxRuntime.jsxs(Label.Label, { className: cl(`ds-switch__label`, position === 'right' && `ds-switch__label--right`), htmlFor: inputProps.id, size: size, weight: 'regular', children: [jsxRuntime.jsx("span", { className: `ds-switch__track`, children: jsxRuntime.jsx("span", { className: `ds-switch__thumb` }) }), readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: `ds-switch__readonly__icon` })), children && jsxRuntime.jsx("span", { children: children })] }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: `ds-switch__description`, children: description }) }))] }) }));
+/**
+ * Switch used to toggle options.
+ * @example
+ * <Switch label="I agree" value="agree" />
+ */
+const Switch = react.forwardRef(function Switch({ 'data-size': size, children, className, description, label, position, style, ...rest }, ref) {
+    return (jsxRuntime.jsxs(index.Field, { className: className, "data-position": position, "data-size": size, style: style, children: [jsxRuntime.jsx(Input.Input, { type: 'checkbox', role: 'switch', ref: ref, ...rest }), !!label && jsxRuntime.jsx(Label.Label, { weight: 'regular', children: label }), !!description && jsxRuntime.jsx("div", { "data-field": 'description', children: description })] }));
 });
-Switch.displayName = 'Switch';
 
 exports.Switch = Switch;

package/dist/cjs/components/form/Textarea/Textarea.js

@@ -2,35 +2,18 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var akselIcons = require('@navikt/aksel-icons');
 var cl = require('clsx/lite');
 var react = require('react');
-var CharacterCounter = require('../CharacterCounter.js');
-var useTextarea = require('./useTextarea.js');
-var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
-var Label = require('../../Typography/Label/Label.js');
-var omit = require('../../../utilities/omit/omit.js');
-var ValidationMessage = require('../../Typography/ValidationMessage/ValidationMessage.js');
 
 /** Textarea field
  *
  * @example
  * ```tsx
- * <Textarea label="Textarea label">
+ * <Textarea />
  * ```
  */
-const Textarea = react.forwardRef((props, ref) => {
-    const { label, description, style, characterLimit, hideLabel, className, ...rest } = props;
-    const { textareaProps, descriptionId, hasError, errorId, size = 'md', readOnly, } = useTextarea.useTextarea(props);
-    const [value, setValue] = react.useState(props.defaultValue);
-    const characterLimitId = `${textareaProps.id}-charactercount}`;
-    const hasCharacterLimit = characterLimit != null;
-    const describedBy = cl(textareaProps['aria-describedby'], hasCharacterLimit && characterLimitId) || undefined;
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { style: style, className: cl('ds-textarea', `ds-textarea--${size}`, hasError && `ds-textarea--error`, className), children: [label && (jsxRuntime.jsxs(Label.Label, { size: size, weight: 'medium', htmlFor: textareaProps.id, className: cl('ds-textarea__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-textarea__readonly-icon' })), jsxRuntime.jsx("span", { children: label })] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: cl('ds-textarea__description', hideLabel && `ds-sr-only`), children: description }) })), jsxRuntime.jsx("textarea", { className: cl('ds-textarea__input', `ds-focus`), ref: ref, "aria-describedby": describedBy, disabled: textareaProps.disabled, readOnly: readOnly, ...omit.omit(['size', 'error', 'errorId'], rest), ...textareaProps, onChange: (e) => {
-                        textareaProps?.onChange?.(e);
-                        setValue(e.target.value);
-                    } }), hasCharacterLimit && (jsxRuntime.jsx(CharacterCounter.CharacterCounter, { size: size, value: value ? value.toString() : '', id: characterLimitId, ...characterLimit })), jsxRuntime.jsx("div", { className: 'ds-textarea__error-message', id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && (jsxRuntime.jsx(ValidationMessage.ValidationMessage, { size: size, children: props.error })) })] }) }));
+const Textarea = react.forwardRef(function Textarea({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("textarea", { className: cl('ds-input', className), ref: ref, ...rest }));
 });
-Textarea.displayName = 'Textarea';
 
 exports.Textarea = Textarea;

package/dist/cjs/components/form/Textfield/Textfield.js

@@ -2,35 +2,28 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var akselIcons = require('@navikt/aksel-icons');
-var cl = require('clsx/lite');
 var react = require('react');
-var CharacterCounter = require('../CharacterCounter.js');
-var useTextfield = require('./useTextfield.js');
-var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
-var Label = require('../../Typography/Label/Label.js');
-var omit = require('../../../utilities/omit/omit.js');
-var ValidationMessage = require('../../Typography/ValidationMessage/ValidationMessage.js');
+var index = require('../Field/index.js');
+var FieldDescription = require('../Field/FieldDescription.js');
+var FieldAffix = require('../Field/FieldAffix.js');
+var Textarea = require('../Textarea/Textarea.js');
+var Input = require('../Input/Input.js');
+var Label = require('../../Label/Label.js');
+var ValidationMessage = require('../../ValidationMessage/ValidationMessage.js');
 
-/** Text input field
+/**
+ *  Composed text input component using `Field`
  *
+ * `classname` & `style` are passed to the wrapper elements.
+ *
+ * Rest props are passed to the `Input` or `Textarea` component.
  * @example
  * ```tsx
  * <Textfield label="Textfield label">
  * ```
  */
-const Textfield = react.forwardRef((props, ref) => {
-    const { label, description, suffix, prefix, style, characterLimit, hideLabel, type = 'text', htmlSize = 20, className, ...rest } = props;
-    const { inputProps, descriptionId, hasError, errorId, size = 'md', readOnly, } = useTextfield.useTextfield(props);
-    const [inputValue, setInputValue] = react.useState(props.value || props.defaultValue);
-    const characterLimitId = `textfield-charactercount-${react.useId()}`;
-    const hasCharacterLimit = characterLimit != null;
-    const describedBy = cl(inputProps['aria-describedby'], hasCharacterLimit && characterLimitId) || undefined;
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { style: style, className: cl(`ds-textfield`, `ds-textfield--${size}`, readOnly && `ds-textfield--readonly`, hasError && `ds-textfield--error`, className), children: [label && (jsxRuntime.jsxs(Label.Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: cl(`ds-textfield__label`, hideLabel && `ds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-textfield__readonly__icon' })), jsxRuntime.jsx("span", { children: label })] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: cl(`ds-textfield__description`, hideLabel && `ds-sr-only`), children: description }) })), jsxRuntime.jsxs("div", { className: 'ds-textfield__field', children: [prefix && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, variant: 'short', children: jsxRuntime.jsx("div", { className: cl(`ds-textfield__adornment`, `ds-textfield__prefix`), "aria-hidden": 'true', children: prefix }) })), jsxRuntime.jsx("input", { className: cl(`ds-textfield__input`, `ds-focus`, prefix && `ds-textfield__input--with-prefix`, suffix && `ds-textfield__input--with-suffix`), ref: ref, type: type, disabled: inputProps.disabled, "aria-describedby": describedBy, size: htmlSize, ...omit.omit(['size', 'error', 'errorId'], rest), ...inputProps, onChange: (e) => {
-                                inputProps?.onChange?.(e);
-                                setInputValue(e.target.value);
-                            } }), suffix && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, variant: 'short', children: jsxRuntime.jsx("div", { className: cl(`ds-textfield__adornment`, `ds-textfield__suffix`), "aria-hidden": 'true', children: suffix }) }))] }), hasCharacterLimit && (jsxRuntime.jsx(CharacterCounter.CharacterCounter, { size: size, value: inputValue ? inputValue.toString() : '', id: characterLimitId, ...characterLimit })), jsxRuntime.jsx("div", { className: 'ds-textfield__error-message', id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && (jsxRuntime.jsx(ValidationMessage.ValidationMessage, { size: size, children: props.error })) })] }) }));
+const Textfield = react.forwardRef(function Textfield({ label, description, error, multiline, prefix, suffix, 'data-size': size, counter, style, className, ...rest }, ref) {
+    return (jsxRuntime.jsxs(index.Field, { className: className, "data-size": size, style: style, children: [!!label && jsxRuntime.jsx(Label.Label, { children: label }), !!description && jsxRuntime.jsx(FieldDescription.FieldDescription, { children: description }), jsxRuntime.jsxs(FieldAffix.FieldAffixes, { children: [prefix === undefined || jsxRuntime.jsx(FieldAffix.FieldAffix, { children: prefix }), multiline === true ? (jsxRuntime.jsx(Textarea.Textarea, { ref: ref, "aria-invalid": !!error, ...rest })) : (jsxRuntime.jsx(Input.Input, { ref: ref, "aria-invalid": !!error, ...rest })), suffix === undefined || jsxRuntime.jsx(FieldAffix.FieldAffix, { children: suffix })] }), !!error && jsxRuntime.jsx(ValidationMessage.ValidationMessage, { children: error }), !!counter && (jsxRuntime.jsx(index.Field.Counter, { ...(typeof counter === 'number' ? { limit: counter } : counter) }))] }));
 });
-Textfield.displayName = 'Textfield';
 
 exports.Textfield = Textfield;

package/dist/cjs/components/form/useFormField.js

@@ -16,10 +16,8 @@ const useFormField = (props, prefix) => {
     const descriptionId = `${prefix}-description-${randomId}`;
     const size = props.size ?? fieldset?.size ?? 'md';
     const disabled = fieldset?.disabled || props?.disabled;
-    const readOnly = ((fieldset?.readOnly || props?.readOnly) && !disabled) || undefined;
-    const hasError = !disabled && !readOnly && !!(props.error || fieldset?.error);
+    const hasError = !disabled && !!(props.error || fieldset?.error);
     return {
-        readOnly,
         hasError,
         errorId,
         descriptionId,

package/dist/cjs/components/loaders/Skeleton/Skeleton.js

@@ -10,9 +10,10 @@ var useSynchronizedAnimation = require('../../../utilities/hooks/useSynchronized
 
 const Skeleton = react.forwardRef(function Skeleton({ asChild, className, height, style, variant = 'rectangle', width, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'span';
+    const isText = variant === 'text';
     const animationRef = useSynchronizedAnimation.useSynchronizedAnimation('ds-skeleton-opacity-fade');
     const mergedRefs = react$1.useMergeRefs([animationRef, ref]);
-    return (jsxRuntime.jsx(Component, { "aria-hidden": 'true', className: cl('ds-skeleton', className), "data-variant": variant, ref: mergedRefs, style: { width, height, ...style }, ...rest }));
+    return (jsxRuntime.jsx(Component, { "aria-hidden": 'true', className: cl('ds-skeleton', className), "data-text": isText ? '-'.repeat(Number(width) || 1) : undefined, "data-variant": variant, ref: mergedRefs, style: isText ? style : { width, height, ...style }, ...rest }));
 });
 
 exports.Skeleton = Skeleton;

package/dist/cjs/components/loaders/Spinner/Spinner.js

@@ -2,15 +2,17 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@floating-ui/react');
 var cl = require('clsx/lite');
+var react = require('react');
 var useSynchronizedAnimation = require('../../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
 
 /**  Spinner component used for indicating busy or indeterminate loading */
-const Spinner = ({ title, color = 'neutral', size = 'md', className, ...rest }) => {
+const Spinner = react.forwardRef(function Spinner({ 'aria-label': ariaLabel, className, ...rest }, ref) {
     const svgRef = useSynchronizedAnimation.useSynchronizedAnimation('ds-spinner-rotate-animation');
     const strokeRef = useSynchronizedAnimation.useSynchronizedAnimation('ds-spinner-stroke-animation');
-    return (jsxRuntime.jsxs("svg", { className: cl('ds-spinner', className), viewBox: '0 0 50 50', ref: svgRef, "data-color": color, "data-size": size, ...rest, children: [jsxRuntime.jsx("title", { children: title }), jsxRuntime.jsx("circle", { className: cl('ds-spinner__background'), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsxRuntime.jsx("circle", { className: cl(`ds-spinner__circle`), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
-};
-Spinner.displayName = 'Spinner';
+    const mergedRefs = react$1.useMergeRefs([svgRef, ref]);
+    return (jsxRuntime.jsxs("svg", { "aria-label": ariaLabel, className: cl('ds-spinner', className), ref: mergedRefs, role: 'img', viewBox: '0 0 50 50', ...rest, children: [jsxRuntime.jsx("circle", { className: cl('ds-spinner__background'), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsxRuntime.jsx("circle", { className: cl(`ds-spinner__circle`), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
+});
 
 exports.Spinner = Spinner;

package/dist/cjs/index.js

@@ -21,11 +21,10 @@ var Link = require('./components/Link/Link.js');
 var index$1 = require('./components/List/index.js');
 var Lists = require('./components/List/Lists.js');
 var ListItem = require('./components/List/ListItem.js');
-var Paragraph = require('./components/Typography/Paragraph/Paragraph.js');
-var Heading = require('./components/Typography/Heading/Heading.js');
-var Ingress = require('./components/Typography/Ingress/Ingress.js');
-var Label = require('./components/Typography/Label/Label.js');
-var ValidationMessage = require('./components/Typography/ValidationMessage/ValidationMessage.js');
+var Label = require('./components/Label/Label.js');
+var Heading = require('./components/Heading/Heading.js');
+var Paragraph = require('./components/Paragraph/Paragraph.js');
+var ValidationMessage = require('./components/ValidationMessage/ValidationMessage.js');
 var index$2 = require('./components/Accordion/index.js');
 var AccordionItem = require('./components/Accordion/AccordionItem.js');
 var AccordionContent = require('./components/Accordion/AccordionContent.js');
@@ -36,27 +35,29 @@ var SelectOptgroup = require('./components/form/Select/SelectOptgroup.js');
 var Alert = require('./components/Alert/Alert.js');
 var Tag = require('./components/Tag/Tag.js');
 var index$4 = require('./components/Chip/index.js');
-var Group = require('./components/Chip/Group/Group.js');
-var Removable = require('./components/Chip/Removable/Removable.js');
-var Toggle = require('./components/Chip/Toggle/Toggle.js');
+var Chips = require('./components/Chip/Chips.js');
 var usePagination = require('./components/Pagination/usePagination.js');
 var index$5 = require('./components/Pagination/index.js');
-var PaginationRoot = require('./components/Pagination/PaginationRoot.js');
 var PaginationList = require('./components/Pagination/PaginationList.js');
 var PaginationItem = require('./components/Pagination/PaginationItem.js');
 var PaginationButton = require('./components/Pagination/PaginationButton.js');
-var PaginationEllipsis = require('./components/Pagination/PaginationEllipsis.js');
-var PaginationNextPrev = require('./components/Pagination/PaginationNextPrev.js');
 var SkipLink = require('./components/SkipLink/SkipLink.js');
 var Tooltip = require('./components/Tooltip/Tooltip.js');
-var index$6 = require('./components/form/Checkbox/index.js');
-var CheckboxGroup = require('./components/form/Checkbox/CheckboxGroup.js');
-var index$7 = require('./components/form/Radio/index.js');
-var RadioGroup = require('./components/form/Radio/RadioGroup.js');
-var Fieldset = require('./components/form/Fieldset/Fieldset.js');
+var index$6 = require('./components/form/Field/index.js');
+var FieldDescription = require('./components/form/Field/FieldDescription.js');
+var FieldAffix = require('./components/form/Field/FieldAffix.js');
+var FieldCounter = require('./components/form/Field/FieldCounter.js');
+var Checkbox = require('./components/form/Checkbox/Checkbox.js');
+var useCheckboxGroup = require('./utilities/hooks/useCheckboxGroup/useCheckboxGroup.js');
+var Radio = require('./components/form/Radio/Radio.js');
+var useRadioGroup = require('./utilities/hooks/useRadioGroup/useRadioGroup.js');
+var index$7 = require('./components/form/Fieldset/index.js');
+var FieldsetLegend = require('./components/form/Fieldset/FieldsetLegend.js');
+var FieldsetDescription = require('./components/form/Fieldset/FieldsetDescription.js');
 var Switch = require('./components/form/Switch/Switch.js');
 var Textfield = require('./components/form/Textfield/Textfield.js');
 var Textarea = require('./components/form/Textarea/Textarea.js');
+var Input = require('./components/form/Input/Input.js');
 var index$8 = require('./components/Tabs/index.js');
 var TabsTab = require('./components/Tabs/TabsTab.js');
 var TabsList = require('./components/Tabs/TabsList.js');
@@ -64,38 +65,37 @@ var TabsPanel = require('./components/Tabs/TabsPanel.js');
 var index$9 = require('./components/ToggleGroup/index.js');
 var ToggleGroupItem = require('./components/ToggleGroup/ToggleGroupItem.js');
 var index$a = require('./components/Popover/index.js');
-var PopoverContext = require('./components/Popover/PopoverContext.js');
+var PopoverTriggerContext = require('./components/Popover/PopoverTriggerContext.js');
 var PopoverTrigger = require('./components/Popover/PopoverTrigger.js');
 var Divider = require('./components/Divider/Divider.js');
 var index$b = require('./components/Modal/index.js');
-var ModalRoot = require('./components/Modal/ModalRoot.js');
-var ModaContent = require('./components/Modal/ModaContent.js');
-var ModalFooter = require('./components/Modal/ModalFooter.js');
-var ModalHeader = require('./components/Modal/ModalHeader.js');
+var ModalBlock = require('./components/Modal/ModalBlock.js');
+var ModalTriggerContext = require('./components/Modal/ModalTriggerContext.js');
 var ModalTrigger = require('./components/Modal/ModalTrigger.js');
-var ModalDialog = require('./components/Modal/ModalDialog.js');
 var index$c = require('./components/Dropdown/index.js');
-var DropdownContext = require('./components/Dropdown/DropdownContext.js');
+var DropdownTriggerContext = require('./components/Dropdown/DropdownTriggerContext.js');
 var DropdownList = require('./components/Dropdown/DropdownList.js');
 var DropdownHeading = require('./components/Dropdown/DropdownHeading.js');
 var DropdownItem = require('./components/Dropdown/DropdownItem.js');
+var DropdownButton = require('./components/Dropdown/DropdownButton.js');
 var DropdownTrigger = require('./components/Dropdown/DropdownTrigger.js');
-var Search = require('./components/form/Search/Search.js');
-var index$d = require('./components/Card/index.js');
-var CardHeader = require('./components/Card/CardHeader.js');
-var CardContent = require('./components/Card/CardContent.js');
-var CardFooter = require('./components/Card/CardFooter.js');
-var CardMedia = require('./components/Card/CardMedia.js');
-var index$e = require('./components/form/Combobox/index.js');
+var SearchClear = require('./components/form/Search/SearchClear.js');
+var SearchButton = require('./components/form/Search/SearchButton.js');
+var SearchInput = require('./components/form/Search/SearchInput.js');
+var index$d = require('./components/form/Search/index.js');
+var index$e = require('./components/Card/index.js');
+var CardBlock = require('./components/Card/CardBlock.js');
+var index$f = require('./components/form/Combobox/index.js');
 var Option = require('./components/form/Combobox/Option/Option.js');
 var Empty = require('./components/form/Combobox/Empty.js');
-var index$f = require('./components/Table/index.js');
+var index$g = require('./components/Table/index.js');
 var TableHead = require('./components/Table/TableHead.js');
 var TableBody = require('./components/Table/TableBody.js');
 var TableRow = require('./components/Table/TableRow.js');
 var TableCell = require('./components/Table/TableCell.js');
 var TableHeaderCell = require('./components/Table/TableHeaderCell.js');
-var index$g = require('./components/ErrorSummary/index.js');
+var TableFoot = require('./components/Table/TableFoot.js');
+var index$h = require('./components/ErrorSummary/index.js');
 var ErrorSummaryItem = require('./components/ErrorSummary/ErrorSummaryItem.js');
 var ErrorSummaryHeading = require('./components/ErrorSummary/ErrorSummaryHeading.js');
 var ErrorSummaryList = require('./components/ErrorSummary/ErrorSummaryList.js');
@@ -125,10 +125,9 @@ exports.List = index$1.List;
 exports.ListOrdered = Lists.ListOrdered;
 exports.ListUnordered = Lists.ListUnordered;
 exports.ListItem = ListItem.ListItem;
-exports.Paragraph = Paragraph.Paragraph;
-exports.Heading = Heading.Heading;
-exports.Ingress = Ingress.Ingress;
 exports.Label = Label.Label;
+exports.Heading = Heading.Heading;
+exports.Paragraph = Paragraph.Paragraph;
 exports.ValidationMessage = ValidationMessage.ValidationMessage;
 exports.Accordion = index$2.Accordion;
 exports.AccordionItem = AccordionItem.AccordionItem;
@@ -140,28 +139,33 @@ exports.SelectOptgroup = SelectOptgroup.SelectOptgroup;
 exports.Alert = Alert.Alert;
 exports.Tag = Tag.Tag;
 exports.Chip = index$4.Chip;
-exports.ChipGroup = Group.Group;
-exports.ChipRemovable = Removable.RemovableChip;
-exports.ChipToggle = Toggle.ToggleChip;
+exports.ChipButton = Chips.ChipButton;
+exports.ChipCheckbox = Chips.ChipCheckbox;
+exports.ChipRadio = Chips.ChipRadio;
+exports.ChipRemovable = Chips.ChipRemovable;
 exports.usePagination = usePagination.usePagination;
 exports.Pagination = index$5.Pagination;
-exports.PaginationRoot = PaginationRoot.PaginationRoot;
 exports.PaginationList = PaginationList.PaginationList;
 exports.PaginationItem = PaginationItem.PaginationItem;
 exports.PaginationButton = PaginationButton.PaginationButton;
-exports.PaginationEllipsis = PaginationEllipsis.PaginationEllipsis;
-exports.PaginationNext = PaginationNextPrev.PaginationNext;
-exports.PaginationPrevious = PaginationNextPrev.PaginationPrevious;
 exports.SkipLink = SkipLink.SkipLink;
 exports.Tooltip = Tooltip.Tooltip;
-exports.Checkbox = index$6.Checkbox;
-exports.CheckboxGroup = CheckboxGroup.CheckboxGroup;
-exports.Radio = index$7.Radio;
-exports.RadioGroup = RadioGroup.RadioGroup;
-exports.Fieldset = Fieldset.Fieldset;
+exports.Field = index$6.Field;
+exports.FieldDescription = FieldDescription.FieldDescription;
+exports.FieldAffix = FieldAffix.FieldAffix;
+exports.FieldAffixes = FieldAffix.FieldAffixes;
+exports.FieldCounter = FieldCounter.FieldCounter;
+exports.Checkbox = Checkbox.Checkbox;
+exports.useCheckboxGroup = useCheckboxGroup.useCheckboxGroup;
+exports.Radio = Radio.Radio;
+exports.useRadioGroup = useRadioGroup.useRadioGroup;
+exports.Fieldset = index$7.Fieldset;
+exports.FieldsetLegend = FieldsetLegend.FieldsetLegend;
+exports.FieldsetDescription = FieldsetDescription.FieldsetDescription;
 exports.Switch = Switch.Switch;
 exports.Textfield = Textfield.Textfield;
 exports.Textarea = Textarea.Textarea;
+exports.Input = Input.Input;
 exports.Tabs = index$8.Tabs;
 exports.TabsTab = TabsTab.TabsTab;
 exports.TabsList = TabsList.TabsList;
@@ -169,38 +173,37 @@ exports.TabsPanel = TabsPanel.TabsPanel;
 exports.ToggleGroup = index$9.ToggleGroup;
 exports.ToggleGroupItem = ToggleGroupItem.ToggleGroupItem;
 exports.Popover = index$a.Popover;
-exports.PopoverContext = PopoverContext.PopoverContext;
+exports.PopoverTriggerContext = PopoverTriggerContext.PopoverTriggerContext;
 exports.PopoverTrigger = PopoverTrigger.PopoverTrigger;
 exports.Divider = Divider.Divider;
 exports.Modal = index$b.Modal;
-exports.ModalRoot = ModalRoot.ModalRoot;
-exports.ModalContent = ModaContent.ModalContent;
-exports.ModalFooter = ModalFooter.ModalFooter;
-exports.ModalHeader = ModalHeader.ModalHeader;
+exports.ModalBlock = ModalBlock.ModalBlock;
+exports.ModalTriggerContext = ModalTriggerContext.ModalTriggerContext;
 exports.ModalTrigger = ModalTrigger.ModalTrigger;
-exports.ModalDialog = ModalDialog.ModalDialog;
 exports.Dropdown = index$c.Dropdown;
-exports.DropdownContext = DropdownContext.DropdownContext;
+exports.DropdownTriggerContext = DropdownTriggerContext.DropdownTriggerContext;
 exports.DropdownList = DropdownList.DropdownList;
 exports.DropdownHeading = DropdownHeading.DropdownHeading;
 exports.DropdownItem = DropdownItem.DropdownItem;
+exports.DropdownButton = DropdownButton.DropdownButton;
 exports.DropdownTrigger = DropdownTrigger.DropdownTrigger;
-exports.Search = Search.Search;
-exports.Card = index$d.Card;
-exports.CardHeader = CardHeader.CardHeader;
-exports.CardContent = CardContent.CardContent;
-exports.CardFooter = CardFooter.CardFooter;
-exports.CardMedia = CardMedia.CardMedia;
-exports.Combobox = index$e.Combobox;
+exports.SearchClear = SearchClear.SearchClear;
+exports.SearchButton = SearchButton.SearchButton;
+exports.SearchInput = SearchInput.SearchInput;
+exports.Search = index$d.Search;
+exports.Card = index$e.Card;
+exports.CardBlock = CardBlock.CardBlock;
+exports.Combobox = index$f.Combobox;
 exports.ComboboxOption = Option.ComboboxOption;
 exports.ComboboxEmpty = Empty.ComboboxEmpty;
-exports.Table = index$f.Table;
+exports.Table = index$g.Table;
 exports.TableHead = TableHead.TableHead;
 exports.TableBody = TableBody.TableBody;
 exports.TableRow = TableRow.TableRow;
 exports.TableCell = TableCell.TableCell;
 exports.TableHeaderCell = TableHeaderCell.TableHeaderCell;
-exports.ErrorSummary = index$g.ErrorSummary;
+exports.TableFoot = TableFoot.TableFoot;
+exports.ErrorSummary = index$h.ErrorSummary;
 exports.ErrorSummaryItem = ErrorSummaryItem.ErrorSummaryItem;
 exports.ErrorSummaryHeading = ErrorSummaryHeading.ErrorSummaryHeading;
 exports.ErrorSummaryList = ErrorSummaryList.ErrorSummaryList;

package/dist/cjs/utilities/hooks/useCheckboxGroup/useCheckboxGroup.js

@@ -0,0 +1,121 @@
+'use client';
+'use strict';
+
+var react$1 = require('@floating-ui/react');
+var react = require('react');
+
+const toggleIndeterminate = (getIndeterminateInputs, getInputs) => {
+    const inputs = getIndeterminateInputs();
+    const checked = !!getInputs(true).length;
+    const unchecked = !!getInputs(false).length;
+    for (const input of inputs) {
+        input.indeterminate = unchecked && checked;
+        input.checked = !unchecked && checked;
+    }
+};
+function useCheckboxGroup(props) {
+    const { error, name: groupName, onChange, value = [], disabled, readOnly, required, } = props || {};
+    const [groupValue, setGroupValue] = react.useState(value);
+    const namedId = react.useId();
+    const errorId = react.useId();
+    const checkboxRefs = react.useRef(new Set());
+    const indeterminateRefs = react.useRef(new Set());
+    const getInputs = (checked) => Array.from(checkboxRefs.current.values()).filter((input) => input.checked === checked);
+    const getIndeterminateInputs = () => Array.from(indeterminateRefs.current.values());
+    return {
+        /**
+         * Current value of the group.
+         */
+        value: groupValue,
+        /**
+         * Set the value of the group.
+         *
+         * @param value string[]
+         * @returns void
+         */
+        setValue: setGroupValue,
+        /**
+         * Props to send to the `Checkbox` component.
+         * Accepts value or object
+         * @example
+         * <Checkbox {...getCheckboxProps('value')} />
+         *
+         * @example allow indeterminate
+         * <Checkbox {...getCheckboxProps({ value: 'all', allowIndeterminate: true })} />
+         */
+        getCheckboxProps: (propsOrValue) => {
+            const props = typeof propsOrValue === 'string'
+                ? { value: propsOrValue }
+                : propsOrValue || {};
+            const { allowIndeterminate = false, ref = undefined, value = '', ...rest } = props;
+            const inputRef = react.useRef(null);
+            const mergedRefs = react$1.useMergeRefs([ref, inputRef]);
+            const handleChange = () => {
+                const nextGroupValue = Array.from(getInputs(true), ({ value }) => value);
+                setGroupValue(nextGroupValue);
+                onChange?.(nextGroupValue, groupValue);
+            };
+            const indeterminateChange = () => {
+                if (!inputRef.current)
+                    return;
+                const checked = !!inputRef.current.checked;
+                for (const input of getInputs(!checked)) {
+                    /* We use click to send both event and change checked state */
+                    input.click();
+                }
+            };
+            react.useEffect(() => {
+                if (!allowIndeterminate)
+                    return;
+                toggleIndeterminate(getIndeterminateInputs, getInputs);
+            }, [groupValue]);
+            react.useEffect(() => {
+                if (!inputRef.current)
+                    return;
+                const input = inputRef.current;
+                const refs = allowIndeterminate ? indeterminateRefs : checkboxRefs;
+                refs.current.add(input);
+                if (getIndeterminateInputs().length)
+                    toggleIndeterminate(getIndeterminateInputs, getInputs);
+                return () => {
+                    refs.current.delete(input);
+                };
+            }, [value]);
+            return {
+                /* Spread anything the user has set first */
+                ...rest,
+                /* Concat ours with the user prop */
+                'aria-describedby': `${error ? errorId : ''} ${rest['aria-describedby'] || ''}`.trim() ||
+                    undefined,
+                'aria-invalid': !!error || rest['aria-invalid'],
+                checked: allowIndeterminate ? undefined : groupValue.includes(value),
+                name: rest.name || groupName || namedId,
+                onChange: (e) => {
+                    rest.onChange?.(e);
+                    if (e.defaultPrevented)
+                        return;
+                    allowIndeterminate && indeterminateChange();
+                    handleChange();
+                },
+                ref: mergedRefs,
+                value,
+                disabled: disabled || rest.disabled,
+                readOnly: readOnly || rest.readOnly,
+                required: required || rest.required,
+            };
+        },
+        /**
+         * Props to send to the `ValidationMessage` component.
+         *
+         * @example
+         * <ValidationMessage {...validationMessageProps} />
+         */
+        validationMessageProps: {
+            children: error,
+            hidden: !error,
+            id: errorId,
+        },
+    };
+}
+
+exports.useCheckboxGroup = useCheckboxGroup;