@digdir/designsystemet-react 0.0.0-ci-snapshot-release-pr-comment-20260612060845

package/dist/esm/components/table/table-body.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+/**
+ * TableBody component, used to display the body of a table. Renders a native HTML tbody element.
+ *
+ * @example
+ * <TableBody>
+ *   <TableRow>
+ *     <TableCell>John</TableCell>
+ *     <TableCell>25</TableCell>
+ *   </TableRow>
+ * </TableBody>
+ */
+const TableBody = forwardRef(function TableBody(rest, ref) {
+    return jsx("tbody", { ref: ref, ...rest });
+});
+
+export { TableBody };

package/dist/esm/components/table/table-cell.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+/**
+ * TableCell component, used to display the cells of a table. Renders a native HTML td element.
+ *
+ * @example
+ * <TableCell>John</TableCell>
+ */
+const TableCell = forwardRef(function TableCell(rest, ref) {
+    return jsx("td", { ref: ref, ...rest });
+});
+
+export { TableCell };

package/dist/esm/components/table/table-foot.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+/**
+ * TableFoot component, used to display the footer of a table. Renders a native HTML tfoot element.
+ *
+ * @example
+ * <TableFoot>
+ *   <TableRow>
+ *     <TableCell>Total</TableCell>
+ *     <TableCell>2</TableCell>
+ *   </TableRow>
+ * </TableFoot>
+ */
+const TableFoot = forwardRef(function TableFoot(rest, ref) {
+    return jsx("tfoot", { ref: ref, ...rest });
+});
+
+export { TableFoot };

package/dist/esm/components/table/table-head.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+/**
+ * TableHead component, used to display the header of a table. Renders a native HTML thead element.
+ *
+ * @example
+ * <TableHead>
+ *   <TableRow>
+ *     <TableHeaderCell>Name</TableHeaderCell>
+ *     <TableHeaderCell>Age</TableHeaderCell>
+ *   </TableRow>
+ * </TableHead>
+ */
+const TableHead = forwardRef(function TableHead(rest, ref) {
+    return jsx("thead", { ref: ref, ...rest });
+});
+
+export { TableHead };

package/dist/esm/components/table/table-header-cell.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+/**
+ * TableHeaderCell component, used to display the header cells of a table. Renders a native HTML th element.
+ *
+ * @example
+ * <TableHeaderCell>Name</TableHeaderCell>
+ */
+const TableHeaderCell = forwardRef(function TableHeaderCell({ sort, children, ...rest }, ref) {
+    return (jsx("th", { "aria-sort": sort, ref: ref, ...rest, children: sort ? jsx("button", { type: 'button', children: children }) : children }));
+});
+
+export { TableHeaderCell };

package/dist/esm/components/table/table-row.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+/**
+ * TableRow component, used to display the rows of a table. Renders a native HTML tr element.
+ *
+ * @example
+ * <TableRow>
+ *   <TableCell>John</TableCell>
+ *   <TableCell>25</TableCell>
+ * </TableRow>
+ */
+const TableRow = forwardRef(function TableRow(rest, ref) {
+    return jsx("tr", { ref: ref, ...rest });
+});
+
+export { TableRow };

package/dist/esm/components/table/table.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Table component, used to display tabular data. Renders a native HTML table element.
+ *
+ * @example
+ * <Table>
+ *   <Table.Head>
+ *     <Table.Row>
+ *       <Table.HeaderCell>Name</Table.HeaderCell>
+ *       <Table.HeaderCell>Age</Table.HeaderCell>
+ *     </Table.Row>
+ *   </Table.Head>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <Table.Cell>John</Table.Cell>
+ *       <Table.Cell>25</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ *   <Table.Foot>
+ *     <Table.Row>
+ *       <Table.Cell>Total</Table.Cell>
+ *       <Table.Cell>2</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Foot>
+ * </Table>
+ */
+const Table = forwardRef(function Table({ zebra = false, stickyHeader = false, border = false, hover = false, className, children, ...rest }, ref) {
+    return (jsx("table", { className: cl('ds-table', className), "data-border": border || undefined, "data-hover": hover || undefined, "data-sticky-header": stickyHeader || undefined, "data-zebra": zebra || undefined, ref: ref, ...rest, children: children }));
+});
+
+export { Table };

package/dist/esm/components/tabs/index.js

@@ -0,0 +1,31 @@
+'use client';
+import { Tabs } from './tabs.js';
+import { TabsList } from './tabs-list.js';
+import { TabsPanel } from './tabs-panel.js';
+import { TabsTab } from './tabs-tab.js';
+
+/**
+ * Display a group of tabs that can be toggled between.
+ *
+ * @example
+ * <Tabs onChange={(value) => console.log(value)}>
+ *   <Tabs.List>
+ *     <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ *     <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
+ *     <Tabs.Tab value='3'>Tab 3</Tabs.Tab>
+ *   </Tabs.List>
+ *   <Tabs.Panel value='1'>content 1</Tabs.Panel>
+ *   <Tabs.Panel value='2'>content 2</Tabs.Panel>
+ *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
+ * </Tabs>
+ */
+const TabsComponent = Object.assign(Tabs, {
+    List: TabsList,
+    Tab: TabsTab,
+    Panel: TabsPanel,
+});
+TabsComponent.Tab.displayName = 'Tabs.Tab';
+TabsComponent.List.displayName = 'Tabs.List';
+TabsComponent.Panel.displayName = 'Tabs.Panel';
+
+export { TabsComponent as Tabs, TabsList, TabsPanel, TabsTab };

package/dist/esm/components/tabs/tabs-list.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import '@digdir/designsystemet-web';
+import { forwardRef } from 'react';
+
+/**
+ * The container for all `Tab` components.
+ *
+ * @example
+ * <TabsList>
+ *  <TabsTab value='1'>Tab 1</TabsTab>
+ *  <TabsTab value='2'>Tab 2</TabsTab>
+ * </TabsList>
+ */
+const TabsList = forwardRef(function TabsList({ className, children, ...rest }, ref) {
+    return (jsx("ds-tablist", { suppressHydrationWarning // Since <ds-tablist> adds attributes
+        : true, ref: ref, class: className, ...rest, children: children }));
+});
+
+export { TabsList };

package/dist/esm/components/tabs/tabs-panel.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import '@digdir/designsystemet-web';
+import { forwardRef, useContext } from 'react';
+import { Context } from './tabs.js';
+
+/**
+ * A single content item in a Tabs component.
+ *
+ * @example
+ * <TabsPanel value='1'>content 1</TabsPanel>
+ */
+const TabsPanel = forwardRef(function TabsPanel({ children, value, id, className, ...rest }, ref) {
+    const { getPrefixedValue } = useContext(Context);
+    return (jsx("ds-tabpanel", { suppressHydrationWarning // Since <ds-tablist> adds attributes
+        : true, ref: ref, id: id ?? getPrefixedValue?.(value), class: className, ...rest, children: children }));
+});
+
+export { TabsPanel };

package/dist/esm/components/tabs/tabs-tab.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import '@digdir/designsystemet-web';
+import { forwardRef, useContext } from 'react';
+import { Context } from './tabs.js';
+
+/**
+ * A single item in a Tabs component.
+ *
+ * @example
+ * <TabsTab value='1'>Tab 1</TabsTab>
+ */
+const TabsTab = forwardRef(function TabsTab({ value, className, onClick, onClickCapture, ...rest }, ref) {
+    const { onChange, getPrefixedValue, isControlled, currentValue } = useContext(Context);
+    return (jsx("ds-tab", { "aria-controls": rest['aria-controls'] ?? getPrefixedValue?.(value), "data-value": value, ref: ref, suppressHydrationWarning // Since <ds-tablist> adds attributes
+        : true, onClickCapture: (e) => {
+            onClickCapture?.(e);
+            if (isControlled && currentValue !== value)
+                e.preventDefault(); // In controlled mode, prevent click in event capture phase
+        }, onClick: (e) => {
+            if (currentValue !== value)
+                onChange?.(value); // Only call onChange when actual value change
+            onClick?.(e);
+        }, class: className, ...rest, children: rest.children }));
+});
+
+export { TabsTab };

package/dist/esm/components/tabs/tabs.js

@@ -0,0 +1,63 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import '@digdir/designsystemet-web';
+import cl from 'clsx/lite';
+import { createContext, forwardRef, useState, useRef, useId, useEffect } from 'react';
+import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+
+const Context = createContext({});
+/**
+ * Display a group of tabs that can be toggled between.
+ *
+ * @example
+ * <Tabs onChange={(value) => console.log(value)}>
+ *   <Tabs.List>
+ *     <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ *     <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
+ *     <Tabs.Tab value='3'>Tab 3</Tabs.Tab>
+ *   </Tabs.List>
+ *   <Tabs.Panel value='1'>content 1</Tabs.Panel>
+ *   <Tabs.Panel value='2'>content 2</Tabs.Panel>
+ *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
+ * </Tabs>
+ */
+const Tabs = forwardRef(function Tabs({ value, defaultValue, className, onChange, ...rest }, ref) {
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const tabsRef = useRef(null);
+    const valuePrefix = useId(); // Used to generate unique value-based ids for tabs and panels
+    const mergedRefs = useMergeRefs([ref, tabsRef]);
+    let onValueChange = onChange;
+    if (!isControlled) {
+        onValueChange = (newValue) => {
+            setUncontrolledValue(newValue);
+            onChange?.(newValue);
+        };
+        value = uncontrolledValue;
+    }
+    useEffect(() => {
+        if (!isControlled || !tabsRef.current || value === undefined)
+            return;
+        tabsRef.current?.tabList?.tabs?.forEach((tab) => {
+            if (tab.getAttribute('data-value') === value)
+                tab.setAttribute('aria-selected', 'true');
+        });
+    }, [value, isControlled]);
+    useEffect(() => {
+        if (defaultValue && tabsRef.current) {
+            tabsRef.current?.tabList?.tabs?.forEach((tab) => {
+                if (tab.getAttribute('data-value') === defaultValue)
+                    tab.setAttribute('aria-selected', 'true');
+            });
+        }
+    }, []);
+    return (jsx(Context.Provider, { value: {
+            isControlled,
+            currentValue: value,
+            onChange: onValueChange,
+            getPrefixedValue: (value) => value && `${valuePrefix}-${value}`,
+        }, children: jsx("ds-tabs", { suppressHydrationWarning // Since <ds-tablist> adds attributes
+            : true, ref: mergedRefs, class: cl('ds-tabs', className), ...rest }) }));
+});
+
+export { Context, Tabs };

package/dist/esm/components/tag/tag.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Use `Tag` to display categories or statuses.
+ *
+ * @example
+ * <Tag>Melk</Tag>
+ */
+const Tag = forwardRef(function Tag({ className, variant = 'default', ...rest }, ref) {
+    return (jsx("span", { className: cl('ds-tag', className), ref: ref, "data-variant": variant, ...rest }));
+});
+
+export { Tag };

package/dist/esm/components/textarea/textarea.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Native HTML textarea element.
+ *
+ * @example
+ * <Textarea />
+ */
+const Textarea = forwardRef(function Textarea({ className, ...rest }, ref) {
+    return (jsx("textarea", { className: cl('ds-input', className), ref: ref, ...rest }));
+});
+
+export { Textarea };

package/dist/esm/components/textfield/textfield.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Field as FieldComponent } from '../field/index.js';
+import { Input } from '../input/input.js';
+import { Label } from '../label/label.js';
+import { Textarea } from '../textarea/textarea.js';
+import { ValidationMessage } from '../validation-message/validation-message.js';
+import { FieldDescription } from '../field/field-description.js';
+import { FieldAffixes, FieldAffix } from '../field/field-affix.js';
+
+/**
+ *  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
+ * <Textfield label="Textfield label">
+ */
+const Textfield = forwardRef(function Textfield({ label, description, error, multiline, prefix, suffix, 'data-size': size, counter, style, className, ...rest }, ref) {
+    return (jsxs(FieldComponent, { className: className, "data-size": size, style: style, children: [!!label && jsx(Label, { children: label }), !!description && jsx(FieldDescription, { children: description }), jsxs(FieldAffixes, { children: [prefix === undefined || jsx(FieldAffix, { children: prefix }), multiline === true ? (jsx(Textarea, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })) : (jsx(Input, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })), suffix === undefined || jsx(FieldAffix, { children: suffix })] }), !!counter && (jsx(FieldComponent.Counter, { ...(typeof counter === 'number' ? { limit: counter } : counter) })), !!error && jsx(ValidationMessage, { children: error })] }));
+});
+
+export { Textfield };

package/dist/esm/components/toggle-group/index.js

@@ -0,0 +1,20 @@
+'use client';
+import { ToggleGroup } from './toggle-group.js';
+import { ToggleGroupItem } from './toggle-group-item.js';
+
+/**
+ * Display a group of buttons that can be toggled between.
+ *
+ * @example
+ * <ToggleGroup data-toggle-group="Label" onChange={(value) => console.log(value)}>
+ *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
+ * </ToggleGroup>
+ */
+const ToggleGroupComponent = Object.assign(ToggleGroup, {
+    Item: ToggleGroupItem,
+});
+ToggleGroupComponent.Item.displayName = 'ToggleGroup.Item';
+
+export { ToggleGroupComponent as ToggleGroup, ToggleGroupItem };

package/dist/esm/components/toggle-group/toggle-group-item.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef, useId, useContext } from 'react';
+import { ToggleGroupContext } from './toggle-group.js';
+
+/**
+ * A single item in a ToggleGroup.
+ * @example
+ * <ToggleGroupItem value='1'>Toggle 1</ToggleGroupItem>
+ */
+const ToggleGroupItem = forwardRef(function ToggleGroupItem({ className, children, icon, value: rawValue, ...rest }, ref) {
+    const genValue = useId();
+    const toggleGroup = useContext(ToggleGroupContext);
+    const value = rawValue ?? genValue;
+    const active = toggleGroup.value === value;
+    const { 'aria-disabled': ariaDisabled, disabled, form, formAction, formEncType, formMethod, formNoValidate, formTarget, required, ...labelProps } = rest;
+    return (jsxs("label", { ref: ref, ...labelProps, className: cl('ds-button', className), "data-variant": 'tertiary', "aria-disabled": ariaDisabled ?? disabled, children: [jsx("input", { "aria-disabled": ariaDisabled, checked: active, disabled: disabled, form: form, formAction: formAction, formEncType: formEncType, formMethod: formMethod, formNoValidate: formNoValidate, formTarget: formTarget, name: toggleGroup.name, onChange: () => toggleGroup.onChange?.(value), required: required, type: 'radio', value: value }), children] }));
+});
+
+export { ToggleGroupItem };

package/dist/esm/components/toggle-group/toggle-group.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { createContext, forwardRef, useId, useState } from 'react';
+
+const ToggleGroupContext = createContext({});
+/**
+ * Display a group of buttons that can be toggled between.
+ *
+ * @example
+ * <ToggleGroup data-toggle-group="Label" onChange={(value) => console.log(value)}>
+ *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
+ * </ToggleGroup>
+ */
+const ToggleGroup = forwardRef(function ToggleGroup({ children, className, defaultValue, name, onChange, value, variant, ...rest }, ref) {
+    const nameId = useId();
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    let onValueChange = onChange;
+    if (!isControlled) {
+        onValueChange = (newValue) => {
+            setUncontrolledValue(newValue);
+            onChange?.(newValue);
+        };
+        value = uncontrolledValue;
+    }
+    return (jsx(ToggleGroupContext.Provider, { value: {
+            defaultValue,
+            name: name ?? `togglegroup-name-${nameId}`,
+            onChange: onValueChange,
+            value,
+            variant,
+        }, children: jsx("fieldset", { className: cl('ds-toggle-group', className), "data-toggle-group": '' // Default to empty string to ensure attribute is present
+            , "data-variant": variant, suppressHydrationWarning // Since @digdir/designsystemet-web adds attributes
+            : true, ref: ref, ...rest, children: children }) }));
+});
+
+export { ToggleGroup, ToggleGroupContext };

package/dist/esm/components/tooltip/tooltip.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import '@digdir/designsystemet-web';
+import { forwardRef } from 'react';
+
+/**
+ * Tooltip component that displays a small piece of information when hovering or focusing on an element.
+ *
+ * @example
+ * <Tooltip content='This is a tooltip'>
+ *  <button>Hover me</button>
+ * </Tooltip>
+ *
+ * @example
+ * <Tooltip content='This is a tooltip'>
+ *  Hover me
+ * </Tooltip>
+ */
+const Tooltip = forwardRef(function Tooltip({ content, placement = 'top', autoPlacement = true, ...rest }, ref) {
+    /* check if children is a string */
+    const isString = typeof rest.children === 'string';
+    return (jsx(Slot, { "data-tooltip": content, "data-placement": placement, "data-autoplacement": autoPlacement, suppressHydrationWarning // Since data-tooltip adds aria-label/aria-description
+        : true, ref: ref, ...rest, children: isString ? jsx("span", { tabIndex: 0, children: rest.children }) : rest.children }));
+});
+
+export { Tooltip };

package/dist/esm/components/validation-message/validation-message.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Use `ValidationMessage` to display validation text
+ *
+ * @example
+ * <ValidationMessage>This is a danger validation message</ValidationMessage>
+ */
+const ValidationMessage = forwardRef(function ValidationMessage({ className, asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'p';
+    return (jsx(Component, { className: cl('ds-validation-message', className), "data-field": 'validation', ref: ref, suppressHydrationWarning // Since <ds-field> adds attributes
+        : true, ...rest }));
+});
+
+export { ValidationMessage };

package/dist/esm/index.js

@@ -0,0 +1,109 @@
+'use client';
+import '@digdir/designsystemet-web';
+export { Alert } from './components/alert/alert.js';
+export { Avatar } from './components/avatar/avatar.js';
+export { EXPERIMENTAL_AvatarStack } from './components/avatar-stack/avatar-stack.js';
+export { Badge } from './components/badge/index.js';
+export { Breadcrumbs } from './components/breadcrumbs/index.js';
+export { Button } from './components/button/button.js';
+export { Combobox } from './components/Combobox/index.js';
+export { Card } from './components/card/index.js';
+export { Checkbox } from './components/checkbox/checkbox.js';
+export { Chip } from './components/chip/index.js';
+export { Details } from './components/details/index.js';
+export { Dialog } from './components/dialog/index.js';
+export { Divider } from './components/divider/divider.js';
+export { Dropdown } from './components/dropdown/index.js';
+export { ErrorSummary } from './components/error-summary/index.js';
+export { Field } from './components/field/index.js';
+export { Fieldset } from './components/fieldset/index.js';
+export { Heading } from './components/heading/heading.js';
+export { Input } from './components/input/input.js';
+export { Label } from './components/label/label.js';
+export { Link } from './components/link/link.js';
+export { List } from './components/list/index.js';
+export { Pagination } from './components/pagination/index.js';
+export { Paragraph } from './components/paragraph/paragraph.js';
+export { Popover } from './components/popover/index.js';
+export { Radio } from './components/radio/radio.js';
+export { Search } from './components/search/index.js';
+export { Select } from './components/select/index.js';
+export { Skeleton } from './components/skeleton/skeleton.js';
+export { SkipLink } from './components/skip-link/skip-link.js';
+export { Spinner } from './components/spinner/spinner.js';
+export { EXPERIMENTAL_Suggestion } from './components/suggestion/index.js';
+export { Switch } from './components/switch/switch.js';
+export { Table } from './components/table/index.js';
+export { Tabs } from './components/tabs/index.js';
+export { Tag } from './components/tag/tag.js';
+export { Textarea } from './components/textarea/textarea.js';
+export { Textfield } from './components/textfield/textfield.js';
+export { ToggleGroup } from './components/toggle-group/index.js';
+export { Tooltip } from './components/tooltip/tooltip.js';
+export { ValidationMessage } from './components/validation-message/validation-message.js';
+export { omit } from './components/Combobox/omit/omit.js';
+export { useDebounceCallback } from './utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js';
+export { useIsomorphicLayoutEffect } from './utilities/hooks/deprecated/use-isomorphic-layout-effect/use-isomorphic-layout-effect.js';
+export { useMediaQuery } from './utilities/hooks/deprecated/use-media-query/use-media-query.js';
+export { useCheckboxGroup } from './utilities/hooks/use-checkbox-group/use-checkbox-group.js';
+import 'react';
+export { usePagination } from './utilities/hooks/use-pagination/use-pagination.js';
+export { useRadioGroup } from './utilities/hooks/use-radio-group/use-radio-group.js';
+export { useSynchronizedAnimation } from './utilities/hooks/use-synchronized-animation/use-synchronized-animation.js';
+export { RovingFocusItem } from './utilities/roving-focus/roving-focus-item.js';
+export { RovingFocusRoot } from './utilities/roving-focus/roving-focus-root.js';
+export { BadgePosition } from './components/badge/badge-position.js';
+export { BreadcrumbsItem } from './components/breadcrumbs/breadcrumbs-item.js';
+export { BreadcrumbsLink } from './components/breadcrumbs/breadcrumbs-link.js';
+export { BreadcrumbsList } from './components/breadcrumbs/breadcrumbs-list.js';
+export { CardBlock } from './components/card/card-block.js';
+export { ChipButton, ChipCheckbox, ChipRadio, ChipRemovable } from './components/chip/chips.js';
+export { ComboboxEmpty } from './components/Combobox/Empty.js';
+export { ComboboxOption } from './components/Combobox/Option/Option.js';
+export { DetailsContent } from './components/details/details-content.js';
+export { DetailsSummary } from './components/details/details-summary.js';
+export { DialogBlock } from './components/dialog/dialog-block.js';
+export { DialogTrigger } from './components/dialog/dialog-trigger.js';
+export { DialogTriggerContext } from './components/dialog/dialog-trigger-context.js';
+export { DropdownButton } from './components/dropdown/dropdown-button.js';
+export { DropdownHeading } from './components/dropdown/dropdown-heading.js';
+export { DropdownItem } from './components/dropdown/dropdown-item.js';
+export { DropdownList } from './components/dropdown/dropdown-list.js';
+export { DropdownTrigger } from './components/dropdown/dropdown-trigger.js';
+export { DropdownTriggerContext } from './components/dropdown/dropdown-trigger-context.js';
+export { SuggestionClear as EXPERIMENTAL_SuggestionClear } from './components/suggestion/suggestion-clear.js';
+export { SuggestionEmpty as EXPERIMENTAL_SuggestionEmpty } from './components/suggestion/suggestion-empty.js';
+export { SuggestionInput as EXPERIMENTAL_SuggestionInput } from './components/suggestion/suggestion-input.js';
+export { SuggestionList as EXPERIMENTAL_SuggestionList } from './components/suggestion/suggestion-list.js';
+export { SuggestionOption as EXPERIMENTAL_SuggestionOption } from './components/suggestion/suggestion-option.js';
+export { ErrorSummaryHeading } from './components/error-summary/error-summary-heading.js';
+export { ErrorSummaryItem } from './components/error-summary/error-summary-item.js';
+export { ErrorSummaryLink } from './components/error-summary/error-summary-link.js';
+export { ErrorSummaryList } from './components/error-summary/error-summary-list.js';
+export { FieldAffix, FieldAffixes } from './components/field/field-affix.js';
+export { FieldCounter } from './components/field/field-counter.js';
+export { FieldDescription } from './components/field/field-description.js';
+export { FieldsetDescription } from './components/fieldset/fieldset-description.js';
+export { FieldsetLegend } from './components/fieldset/fieldset-legend.js';
+export { ListItem } from './components/list/list-item.js';
+export { ListOrdered, ListUnordered } from './components/list/lists.js';
+export { PaginationButton } from './components/pagination/pagination-button.js';
+export { PaginationItem } from './components/pagination/pagination-item.js';
+export { PaginationList } from './components/pagination/pagination-list.js';
+export { PopoverTrigger } from './components/popover/popover-trigger.js';
+export { PopoverTriggerContext } from './components/popover/popover-trigger-context.js';
+export { SearchButton } from './components/search/search-button.js';
+export { SearchClear } from './components/search/search-clear.js';
+export { SearchInput } from './components/search/search-input.js';
+export { SelectOptgroup } from './components/select/select-optgroup.js';
+export { SelectOption } from './components/select/select-option.js';
+export { TableBody } from './components/table/table-body.js';
+export { TableCell } from './components/table/table-cell.js';
+export { TableFoot } from './components/table/table-foot.js';
+export { TableHead } from './components/table/table-head.js';
+export { TableHeaderCell } from './components/table/table-header-cell.js';
+export { TableRow } from './components/table/table-row.js';
+export { TabsList } from './components/tabs/tabs-list.js';
+export { TabsPanel } from './components/tabs/tabs-panel.js';
+export { TabsTab } from './components/tabs/tabs-tab.js';
+export { ToggleGroupItem } from './components/toggle-group/toggle-group-item.js';

package/dist/esm/utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js

@@ -0,0 +1,25 @@
+'use client';
+import { useRef, useEffect } from 'react';
+
+function useDebounceCallback(callback, delay = 50) {
+    const timeoutRef = useRef(null);
+    useEffect(() => {
+        // Cleanup the previous timeout on re-render
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    const debouncedCallback = (...args) => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = window.setTimeout(() => {
+            callback(...args);
+        }, delay);
+    };
+    return debouncedCallback;
+}
+
+export { useDebounceCallback };