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

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/Modal/Modal.js

@@ -9,6 +9,29 @@ var react = require('react');
 var ModalTriggerContext = require('./ModalTriggerContext.js');
 var Button = require('../Button/Button.js');
 
+/**
+ * Modal component, used to display a modal dialog.
+ *
+ * @example with TriggerContext
+ * <Modal.TriggerContext>
+ *   <Modal.Trigger>Open Modal</Modal.Trigger>
+ *   <Modal>
+ *     <Modal.Block>
+ *       Content
+ *     </Modal.Block>
+ *   </Modal>
+ * </Modal.TriggerContext>
+ *
+ * @example without TriggerContext
+ * const modalRef = useRef<HTMLDialogElement>(null);
+ *
+ * ...
+ *
+ * <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>
+ * <Modal ref={modalRef}>
+ *   Content
+ * </Modal>
+ */
 const Modal = react.forwardRef(function Modal({ asChild, children, className, closeButton = 'Lukk dialogvindu', onClose, open, backdropClose = false, ...rest }, ref) {
     const contextRef = react.useContext(ModalTriggerContext.Context);
     const modalRef = react.useRef(null); // This local ref is used to make sure the modal works without a ModalTriggerContext

package/dist/cjs/components/Modal/ModalBlock.js

@@ -6,6 +6,22 @@ var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
 
+/**
+ * ModalBlock component, used to separate content in a modal.
+ *
+ * @example
+ * <Modal>
+ *   <Modal.Block>
+ *     Header
+ *   </Modal.Block>
+ *   <Modal.Block>
+ *     Content
+ *   </Modal.Block>
+ *   <Modal.Block>
+ *     Footer
+ *   </Modal.Block>
+ * </Modal>
+ */
 const ModalBlock = react.forwardRef(function ModalBlock({ asChild, className, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'div';
     return (jsxRuntime.jsx(Component, { className: cl('ds-modal__block', className), ref: ref, ...rest }));

package/dist/cjs/components/Modal/ModalTrigger.js

@@ -7,6 +7,17 @@ var react = require('react');
 var Button = require('../Button/Button.js');
 var ModalTriggerContext = require('./ModalTriggerContext.js');
 
+/**
+ * ModalTrigger component, used within a Modal.TriggerContext to open a modal.
+ *
+ * @example
+ * <Modal.TriggerContext>
+ *   <Modal.Trigger>Open Modal</Modal.Trigger>
+ *   <Modal>
+ *     Content
+ *   </Modal>
+ * </Modal.TriggerContext>
+ */
 const ModalTrigger = react.forwardRef(function ModalTrigger({ asChild, ...rest }, ref) {
     const contextRef = react.useContext(ModalTriggerContext.Context);
     const Component = asChild ? reactSlot.Slot : Button.Button;

package/dist/cjs/components/Modal/ModalTriggerContext.js

@@ -7,6 +7,17 @@ var react = require('react');
 const Context = react.createContext({
     current: null,
 });
+/**
+ * ModalTriggerContext component, used to provide a context for a modal trigger.
+ *
+ * @example
+ * <Modal.TriggerContext>
+ *   <Modal.Trigger>Open Modal</Modal.Trigger>
+ *   <Modal>
+ *     Content
+ *   </Modal>
+ * </Modal.TriggerContext>
+ */
 const ModalTriggerContext = ({ children }) => {
     const contextRef = react.useRef(null);
     return jsxRuntime.jsx(Context.Provider, { value: contextRef, children: children });

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

@@ -6,6 +6,19 @@ var ModalBlock = require('./ModalBlock.js');
 var ModalTrigger = require('./ModalTrigger.js');
 var ModalTriggerContext = require('./ModalTriggerContext.js');
 
+/**
+ * Modal component, used to display a modal dialog.
+ *
+ * @example
+ * <Modal.TriggerContext>
+ *   <Modal.Trigger>Open Modal</Modal.Trigger>
+ *   <Modal>
+ *     <Modal.Block>
+ *       Content
+ *     </Modal.Block>
+ *   </Modal>
+ * </Modal.TriggerContext>
+ */
 const Modal = Object.assign(Modal$1.Modal, {
     Block: ModalBlock.ModalBlock,
     TriggerContext: ModalTriggerContext.ModalTriggerContext,

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/Pagination/usePagination.js

@@ -14,7 +14,35 @@ const getSteps = (now, max, show) => {
         pages.splice(-2, 2, 0, max);
     return pages;
 };
-/** Hook to help manage pagination state */
+/**
+ * Hook to help manage pagination state
+ *
+ * @example
+ * const { pages, nextButtonProps, prevButtonProps } = usePagination({
+ *   currentPage: page,
+ *   totalPages: 10,
+ *   showPages: 7,
+ *   setCurrentPage,
+ * })
+ *
+ * <Pagination>
+ *   <Pagination.Item>
+ *     <Pagination.Button {...prevButtonProps}>Forrige</Pagination.Button>
+ *   </Pagination.Item>
+ *   {pages.map(({ page, itemKey, buttonProps }) => (
+ *     <Pagination.Item key={itemKey}>
+ *       {typeof page === 'number' && (
+ *         <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
+ *           {page}
+ *         </Pagination.Button>
+ *       )}
+ *     </Pagination.Item>
+ *   ))}
+ *   <Pagination.Item>
+ *     <Pagination.Button {...nextButtonProps}>Neste</Pagination.Button>
+ *   </Pagination.Item>
+ * </Pagination>
+ **/
 const usePagination = ({ currentPage = 1, setCurrentPage, onChange, totalPages, showPages = 7, }) => react.useMemo(() => {
     const hasNext = currentPage < totalPages;
     const hasPrev = currentPage !== 1;

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,6 +9,23 @@ var cl = require('clsx/lite');
 var react = require('react');
 var PopoverTriggerContext = require('./PopoverTriggerContext.js');
 
+/**
+ * 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, placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'div';
     const popoverRef = react.useRef(null);

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;

package/dist/cjs/components/Search/Search.js

@@ -5,6 +5,22 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 
+/**
+ * Search component, use to display different variations of a search input
+ *
+ * @example with button
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ *   <Search.Button />
+ * </Search>
+ *
+ * @example with icon
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ * </Search>
+ */
 const Search = react.forwardRef(function Search({ className, ...rest }, ref) {
     return jsxRuntime.jsx("div", { ref: ref, className: cl('ds-search', className), ...rest });
 });

package/dist/cjs/components/Search/SearchButton.js

@@ -5,6 +5,15 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var Button = require('../Button/Button.js');
 
+/**
+ * SearchButton component, used to display a search button within a Search component.
+ *
+ * @example
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Button>Søk</Search.Button>
+ * </Search>
+ */
 const SearchButton = react.forwardRef(function SearchButton({ children = 'Søk', ...rest }, ref) {
     return (jsxRuntime.jsx(Button.Button, { ref: ref, type: 'submit', ...rest, children: children }));
 });

package/dist/cjs/components/Search/SearchClear.js

@@ -6,6 +6,15 @@ var react = require('react');
 var utilities = require('../Combobox/utilities.js');
 var Button = require('../Button/Button.js');
 
+/**
+ * SearchClear component, used to display a clear buttun when the search input is not empty.
+ *
+ * @example
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ * </Search>
+ */
 const SearchClear = react.forwardRef(function SearchClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
     const handleClear = (e) => {
         const target = e.target;

package/dist/cjs/components/Search/SearchInput.js

@@ -5,6 +5,14 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var Input = require('../Input/Input.js');
 
+/**
+ * SearchInput component, used to display a search input within the Search component.
+ *
+ * @example
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ * </Search>
+ */
 const SearchInput = react.forwardRef(function SearchInput({ ...rest }, ref) {
     return (jsxRuntime.jsx(Input.Input, { ref: ref, type: 'search', 
         /* We need an empty placeholder for the clear button to be able to show/hide */

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

@@ -7,16 +7,20 @@ var SearchClear = require('./SearchClear.js');
 var SearchInput = require('./SearchInput.js');
 
 /**
- * Search field
+ * Search component, use to display different variations of a search input
  *
- * @example
- * ```tsx
+ * @example with button
  * <Search>
- *  <Search.Input aria-label='Søk' />
- *  <Search.Clear />
- *  <Search.Button />
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ *   <Search.Button />
+ * </Search>
+ *
+ * @example with icon
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
  * </Search>
- * ```
  */
 const Search = Object.assign(Search$1.Search, {
     Clear: SearchClear.SearchClear,

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

@@ -5,6 +5,15 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 
+/**
+ * Select component, used to display a native select.
+ *
+ * @example
+ * <Select>
+ *   <Select.Option value='1'>Option 1</Select.Option>
+ *   <Select.Option value='2'>Option 2</Select.Option>
+ * </Select>
+ */
 const Select = react.forwardRef(function Select({ className, onKeyDown, onMouseDown, width, ...rest }, ref) {
     return (jsxRuntime.jsx("select", { className: cl('ds-input', className), "data-width": width, ref: ref, onKeyDown: (event) => {
             if (event.key === 'Tab')

package/dist/cjs/components/Select/SelectOptgroup.js

@@ -5,6 +5,17 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
 
+/**
+ * SelectOptgroup component, used to display a native optgroup within a select.
+ *
+ * @example
+ * <Select>
+ *   <Select.Optgroup label='Group 1'>
+ *     <Select.Option value='1'>Option 1</Select.Option>
+ *     <Select.Option value='2'>Option 2</Select.Option>
+ *   </Select.Optgroup>
+ * </Select>
+ */
 const SelectOptgroup = react.forwardRef(function SelectOptgroup({ asChild, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'optgroup';
     return jsxRuntime.jsx(Component, { ...rest, ref: ref });

package/dist/cjs/components/Select/SelectOption.js

@@ -5,6 +5,15 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
 
+/**
+ * SelectOption component, used to display a native option within a select.
+ *
+ * @example
+ * <Select>
+ *   <Select.Option value='1'>Option 1</Select.Option>
+ *   <Select.Option value='2'>Option 2</Select.Option>
+ * </Select>
+ */
 const SelectOption = react.forwardRef(function SelectOption({ asChild, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'option';
     return jsxRuntime.jsx(Component, { ...rest, ref: ref });