@wallarm-org/design-system 1.20.4 → 1.22.0

package/dist/components/Table/TableRow.js

@@ -2,9 +2,11 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useCallback } from "react";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
+import { DROP_INDICATOR_BASE } from "./classes.js";
 import { TABLE_DRAG_HANDLE_COLUMN_ID, TABLE_EXPAND_COLUMN_ID, TABLE_SELECT_COLUMN_ID, useRowDnd } from "./lib/index.js";
 import { Td, Tr } from "./primitives/index.js";
 import { TableBodyCell } from "./TableBody/TableBodyCell.js";
+import { useRowDndIndicator } from "./TableBody/TableBodyRowDndContext.js";
 import { useTableContext } from "./TableContext/index.js";
 import { TableRowExpanded } from "./TableRowExpanded.js";
 const SYSTEM_COLUMN_IDS = new Set([
@@ -13,9 +15,10 @@ const SYSTEM_COLUMN_IDS = new Set([
     TABLE_DRAG_HANDLE_COLUMN_ID
 ]);
 const TableRowInner = ({ row, ref, 'data-index': dataIndex })=>{
-    const { table, expandingEnabled, activeRowId, isLoading, renderExpandedRow } = useTableContext();
+    const { table, expandingEnabled, activeRowId, isLoading, renderExpandedRow, stretch, hasSubRowGrouping, allLeafColumns } = useTableContext();
     const testId = useTestId('row');
     const { canDnd, isDragging, setNodeRef, style: dndStyle, attributes, listeners } = useRowDnd(row);
+    const { activeId, overId } = useRowDndIndicator();
     const isGroupParent = row.subRows.length > 0;
     const isSelected = isGroupParent ? row.getIsAllSubRowsSelected() : row.getIsSelected();
     const isPreviewActive = activeRowId === row.id;
@@ -38,6 +41,11 @@ const TableRowInner = ({ row, ref, 'data-index': dataIndex })=>{
         const systemCells = cells.filter((c)=>SYSTEM_COLUMN_IDS.has(c.column.id));
         const dataCells = cells.filter((c)=>!SYSTEM_COLUMN_IDS.has(c.column.id));
         const firstDataCell = dataCells[0];
+        const stickyStyle = hasSubRowGrouping && row.getIsExpanded() ? {
+            position: 'sticky',
+            top: allLeafColumns.some((c)=>c.columnDef.meta?.description?.type === 'text') ? 48 : 32,
+            zIndex: 20
+        } : void 0;
         return /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsxs(Tr, {
@@ -49,6 +57,7 @@ const TableRowInner = ({ row, ref, 'data-index': dataIndex })=>{
                     "data-selected": isSelected || void 0,
                     "data-preview-active": isPreviewActive || void 0,
                     "aria-selected": isSelected || void 0,
+                    style: stickyStyle,
                     children: [
                         systemCells.map((cell)=>/*#__PURE__*/ jsx(TableBodyCell, {
                                 cell: cell,
@@ -67,7 +76,11 @@ const TableRowInner = ({ row, ref, 'data-index': dataIndex })=>{
                                     width: cell.column.getSize()
                                 },
                                 "aria-hidden": "true"
-                            }, cell.id))
+                            }, cell.id)),
+                        !stretch && /*#__PURE__*/ jsx(Td, {
+                            pinned: false,
+                            "aria-hidden": true
+                        })
                     ]
                 }),
                 expandingEnabled && /*#__PURE__*/ jsx(TableRowExpanded, {
@@ -77,9 +90,15 @@ const TableRowInner = ({ row, ref, 'data-index': dataIndex })=>{
             ]
         });
     }
+    let dropIndicator;
+    if (overId === row.id && null != activeId && activeId !== row.id) {
+        const activeIndex = flatRows.findIndex((r)=>r.id === activeId);
+        const overIndex = flatRows.findIndex((r)=>r.id === row.id);
+        if (-1 !== activeIndex && -1 !== overIndex) dropIndicator = activeIndex < overIndex ? 'below' : 'above';
+    }
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsx(Tr, {
+            /*#__PURE__*/ jsxs(Tr, {
                 ref: composedRef,
                 "data-index": dataIndex,
                 "data-row-id": row.id,
@@ -91,15 +110,26 @@ const TableRowInner = ({ row, ref, 'data-index': dataIndex })=>{
                 "aria-selected": isSelected || void 0,
                 "data-depth": row.depth > 0 ? row.depth : void 0,
                 style: dndStyle,
-                children: row.getVisibleCells().map((cell)=>{
-                    const isDragHandle = cell.column.id === TABLE_DRAG_HANDLE_COLUMN_ID;
-                    return /*#__PURE__*/ jsx(TableBodyCell, {
-                        cell: cell,
-                        dragListeners: isDragHandle ? listeners : void 0,
-                        dragAttributes: isDragHandle ? attributes : void 0,
-                        lastRow: isLastRow
-                    }, cell.id);
-                })
+                children: [
+                    row.getVisibleCells().map((cell)=>{
+                        const isDragHandle = cell.column.id === TABLE_DRAG_HANDLE_COLUMN_ID;
+                        return /*#__PURE__*/ jsx(TableBodyCell, {
+                            cell: cell,
+                            dragListeners: isDragHandle ? listeners : void 0,
+                            dragAttributes: isDragHandle ? attributes : void 0,
+                            lastRow: isLastRow,
+                            dropIndicator: dropIndicator
+                        }, cell.id);
+                    }),
+                    !stretch && /*#__PURE__*/ jsx(Td, {
+                        pinned: false,
+                        "aria-hidden": true,
+                        className: cn(dropIndicator && DROP_INDICATOR_BASE, 'above' === dropIndicator && 'after:top-0', 'below' === dropIndicator && 'after:-bottom-px'),
+                        style: dropIndicator ? {
+                            overflow: 'visible'
+                        } : void 0
+                    })
+                ]
             }),
             expandingEnabled && /*#__PURE__*/ jsx(TableRowExpanded, {
                 row: row,

package/dist/components/Table/TableRowExpanded.js

@@ -5,12 +5,13 @@ import { TABLE_EXPAND_COLUMN_ID } from "./lib/index.js";
 import { Td, Tr } from "./primitives/index.js";
 import { useTableContext } from "./TableContext/index.js";
 const TableRowExpanded = ({ row, dndStyle, lastRow })=>{
-    const { table, renderExpandedRow } = useTableContext();
+    const { table, stretch, renderExpandedRow } = useTableContext();
     const testId = useTestId('row-expanded');
     if (!row.getIsExpanded() || !renderExpandedRow) return null;
     const visibleColumns = table.getVisibleLeafColumns();
     const hasExpandColumn = visibleColumns.some((col)=>col.id === TABLE_EXPAND_COLUMN_ID);
-    const contentColSpan = hasExpandColumn ? visibleColumns.length - 1 : visibleColumns.length;
+    const fillerOffset = stretch ? 0 : 1;
+    const contentColSpan = (hasExpandColumn ? visibleColumns.length - 1 : visibleColumns.length) + fillerOffset;
     return /*#__PURE__*/ jsxs(Tr, {
         "data-testid": testId,
         style: dndStyle,

package/dist/components/Table/classes.d.ts

@@ -16,5 +16,10 @@ export declare const tableContainerVariants: (props?: ({
     virtualized?: "container" | "window" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const tableRowVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * Drop-indicator ::after pseudo-element (shared by TableBodyCell & filler Td).
+ * Positioned above borders so the line is uninterrupted across columns.
+ */
+export declare const DROP_INDICATOR_BASE = "after:content-[''] after:absolute after:left-0 after:-right-px after:h-[2px] after:bg-[var(--color-border-strong-brand)] after:pointer-events-none after:z-[1]";
 /** Small icon button used in table header (sort, scroll, menu triggers) */
 export declare const tableHeaderButtonClass: string;

package/dist/components/Table/classes.js

@@ -73,5 +73,6 @@ const tableContainerVariants = cva('rounded-12 border border-border-primary-ligh
     }
 });
 const tableRowVariants = cva('transition-colors');
+const DROP_INDICATOR_BASE = "after:content-[''] after:absolute after:left-0 after:-right-px after:h-[2px] after:bg-[var(--color-border-strong-brand)] after:pointer-events-none after:z-[1]";
 const tableHeaderButtonClass = cn('w-16 h-16 shrink-0 hover:text-text-primary', 'focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-focus-primary rounded-2', 'transition-colors cursor-pointer', 'inline-flex items-center justify-center bg-transparent border-0 p-0');
-export { tableBodyCellVariants, tableContainerVariants, tableHeadCellVariants, tableHeaderButtonClass, tableRowVariants };
+export { DROP_INDICATOR_BASE, tableBodyCellVariants, tableContainerVariants, tableHeadCellVariants, tableHeaderButtonClass, tableRowVariants };

package/dist/components/Table/hooks/useStickyGroupParent.js

@@ -55,6 +55,7 @@ const useStickyGroupParent = (options)=>{
     const [pushUpOffset, setPushUpOffset] = useState(0);
     const rafRef = useRef(0);
     const prevStickyRowIdRef = useRef(null);
+    const prevOffsetRef = useRef(0);
     const compute = useCallback(()=>{
         if (!enabled) {
             if (null !== prevStickyRowIdRef.current) {
@@ -98,8 +99,9 @@ const useStickyGroupParent = (options)=>{
             }
         }
         const newId = foundRow?.id ?? null;
-        if (newId !== prevStickyRowIdRef.current || 0 !== offset) {
+        if (newId !== prevStickyRowIdRef.current || offset !== prevOffsetRef.current) {
             prevStickyRowIdRef.current = newId;
+            prevOffsetRef.current = offset;
             setStickyRow(foundRow);
             setPushUpOffset(offset);
         }

package/dist/components/Table/lib/constants.d.ts

@@ -8,7 +8,7 @@ export declare const TABLE_SELECT_COLUMN_WIDTH = 33;
 export declare const TABLE_EXPAND_COLUMN_ID = "_expand";
 export declare const TABLE_EXPAND_COLUMN_WIDTH = 33;
 export declare const TABLE_DRAG_HANDLE_COLUMN_ID = "_dragHandle";
-export declare const TABLE_DRAG_HANDLE_COLUMN_WIDTH = 33;
+export declare const TABLE_DRAG_HANDLE_COLUMN_WIDTH = 24;
 export declare const TABLE_END_REACHED_THRESHOLD = 200;
 export declare const TABLE_START_REACHED_THRESHOLD = 200;
 /** Minimum time (ms) between successive edge-reached callbacks. */

package/dist/components/Table/lib/constants.js

@@ -7,7 +7,7 @@ const TABLE_SELECT_COLUMN_WIDTH = 33;
 const TABLE_EXPAND_COLUMN_ID = '_expand';
 const TABLE_EXPAND_COLUMN_WIDTH = 33;
 const TABLE_DRAG_HANDLE_COLUMN_ID = '_dragHandle';
-const TABLE_DRAG_HANDLE_COLUMN_WIDTH = 33;
+const TABLE_DRAG_HANDLE_COLUMN_WIDTH = 24;
 const TABLE_END_REACHED_THRESHOLD = 200;
 const TABLE_START_REACHED_THRESHOLD = 200;
 const SCROLL_EDGE_COOLDOWN_MS = 200;

package/dist/components/Table/lib/createDragHandleColumn.js

@@ -11,13 +11,13 @@ const createDragHandleColumn = ()=>({
         enableHiding: false,
         enablePinning: false,
         meta: {
-            headerClassName: 'px-8 py-4',
-            cellClassName: 'px-8 py-8'
+            headerClassName: 'px-4 py-4',
+            cellClassName: 'px-4 py-8 align-middle text-center'
         },
         header: ()=>null,
         cell: ()=>/*#__PURE__*/ jsx(GripVertical, {
                 size: "sm",
-                className: "text-text-tertiary"
+                className: "text-text-secondary"
             })
     });
 export { createDragHandleColumn };

package/dist/components/Table/lib/useRowDnd.js

@@ -1,24 +1,14 @@
 import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
 import { useTableContext } from "../TableContext/useTableContext.js";
 const useRowDnd = (row)=>{
     const { rowDndEnabled } = useTableContext();
     const canDnd = rowDndEnabled && 0 === row.subRows.length;
-    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    const { attributes, listeners, setNodeRef, isDragging } = useSortable({
         id: row.id,
         disabled: !canDnd
     });
-    const style = canDnd ? {
-        transform: CSS.Translate.toString(transform ? {
-            ...transform,
-            x: 0
-        } : null),
-        transition,
-        ...isDragging && {
-            opacity: 0.5,
-            position: 'relative',
-            zIndex: 100
-        }
+    const style = canDnd && isDragging ? {
+        opacity: 0.4
     } : {};
     return {
         canDnd,

package/dist/components/Table/types.d.ts

@@ -247,6 +247,14 @@ export interface TableProps<T> extends TestableProps {
     onSettingsOpenChange?: (open: boolean) => void;
     /** Enable row virtualization. `'container'` virtualizes within the scroll container; `'window'` virtualizes against the browser window. */
     virtualized?: TableVirtualized;
+    /**
+     * Whether columns stretch proportionally to fill the container width.
+     * When `false`, columns use their defined sizes and the table may be
+     * narrower than its container.
+     *
+     * Default: `true`.
+     */
+    stretch?: boolean;
     estimateRowHeight?: (index: number) => number;
     overscan?: number;
     /** Callback fired when the user scrolls near the end (bottom) of the table */

package/dist/hooks/index.d.ts

@@ -1,6 +1,5 @@
 export { useArrowNav } from './useArrowNav';
 export { useControlled } from './useControlled';
 export { useCopyToClipboard } from './useCopyToClipboard';
-export { useCopyTooltip } from './useCopyTooltip';
 export { useIsKeyPressed } from './useIsKeyPressed';
 export { type UseOverflowItemsOptions, type UseOverflowItemsResult, useOverflowItems, } from './useOverflowItems';

package/dist/hooks/index.js

@@ -1,6 +1,5 @@
 export { useArrowNav } from "./useArrowNav.js";
 export { useControlled } from "./useControlled.js";
 export { useCopyToClipboard } from "./useCopyToClipboard.js";
-export { useCopyTooltip } from "./useCopyTooltip.js";
 export { useIsKeyPressed } from "./useIsKeyPressed.js";
 export { useOverflowItems } from "./useOverflowItems.js";

package/dist/hooks/useCopyToClipboard.d.ts

@@ -1,23 +1,22 @@
 /**
  * Hook for copying text to clipboard with status tracking.
  *
+ * Uses the Clipboard API with an `execCommand` fallback for older browsers.
+ * The `copied` flag auto-resets after `resetDelay` ms.
+ *
  * @param resetDelay - Time in ms before `copied` resets to false (default: 2000)
- * @returns Object with `copied` state, `copy` function, `reset` function, and `isSupported` flag
+ * @returns `{ copied, copy }` — `copied` is `true` while the feedback window is active
  *
  * @example
  * ```tsx
- * const { copied, copy, reset, isSupported } = useCopyToClipboard();
+ * const { copied, copy } = useCopyToClipboard();
  *
- * {isSupported && (
- *   <button onClick={() => copy('text to copy')}>
- *     {copied ? 'Copied!' : 'Copy'}
- *   </button>
- * )}
+ * <button onClick={() => copy('text to copy')}>
+ *   {copied ? 'Copied!' : 'Copy'}
+ * </button>
  * ```
  */
 export declare function useCopyToClipboard(resetDelay?: number): {
     copied: boolean;
-    copy: (text: string) => Promise<boolean>;
-    reset: () => void;
-    isSupported: boolean;
+    copy: (text: string) => void;
 };

package/dist/hooks/useCopyToClipboard.js

@@ -1,31 +1,19 @@
 import { useCallback, useRef, useState } from "react";
-const isClipboardSupported = "u" > typeof navigator && void 0 !== navigator.clipboard && 'function' == typeof navigator.clipboard.writeText;
+import { copyText } from "../utils/copyText.js";
 function useCopyToClipboard(resetDelay = 2000) {
     const [copied, setCopied] = useState(false);
     const timeoutRef = useRef(void 0);
-    const reset = useCallback(()=>{
+    const copy = useCallback((text)=>{
+        copyText(text);
+        setCopied(true);
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
-        setCopied(false);
-    }, []);
-    const copy = useCallback(async (text)=>{
-        if (!isClipboardSupported) return false;
-        try {
-            await navigator.clipboard.writeText(text);
-            setCopied(true);
-            if (timeoutRef.current) clearTimeout(timeoutRef.current);
-            timeoutRef.current = setTimeout(()=>setCopied(false), resetDelay);
-            return true;
-        } catch  {
-            return false;
-        }
+        timeoutRef.current = setTimeout(()=>setCopied(false), resetDelay);
     }, [
         resetDelay
     ]);
     return {
         copied,
-        copy,
-        reset,
-        isSupported: isClipboardSupported
+        copy
     };
 }
 export { useCopyToClipboard };

package/dist/index.d.ts

@@ -25,7 +25,7 @@ export { Calendar, CalendarApplyButton, type CalendarApplyButtonProps, CalendarB
 export { Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, cardVariants, } from './components/Card';
 export { Checkbox, CheckboxDescription, type CheckboxDescriptionProps, CheckboxGroup, type CheckboxGroupProps, CheckboxIndicator, CheckboxLabel, type CheckboxLabelProps, type CheckboxProps, } from './components/Checkbox';
 export { Code, type CodeProps } from './components/Code';
-export { CopyButton, type CopyButtonProps } from './components/CopyButton';
+export { Copyable, CopyableIcon, type CopyableIconProps, CopyableLabel, type CopyableLabelProps, type CopyableProps, useCopyable, } from './components/Copyable';
 export { Country, CountryFlag, type CountryFlagProps, CountryName, type CountryNameProps, type CountryProps, } from './components/Country';
 export { type DateFormatContextValue, DateFormatProvider, type DateFormatProviderProps, type DateOrder, useDateFormat, } from './components/DateFormatProvider';
 export { DateInput, type DateInputProps } from './components/DateInput';
@@ -68,12 +68,14 @@ export { type BreadcrumbSegment, findFirstLinkPath, type NavConfig, type NavConf
 export { ResizableHandle, type ResizableHandleProps, ResizablePanel, ResizablePanelGroup, type ResizablePanelGroupProps, type ResizablePanelProps, } from './components/Resizable';
 export { getResponseCodeCategory, RESPONSE_CODE_COLOR, ResponseCode, type ResponseCodeCategory, type ResponseCodeProps, } from './components/ResponseCode';
 export { ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaCornerProps, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaViewport, type ScrollAreaViewportProps, } from './components/ScrollArea';
+export { SearchInput, type SearchInputProps } from './components/SearchInput';
 export { SearchModal, SearchModalBody, type SearchModalBodyProps, SearchModalContent, type SearchModalContentProps, SearchModalEmpty, type SearchModalEmptyProps, SearchModalFooter, type SearchModalFooterProps, SearchModalGroup, SearchModalGroupLabel, type SearchModalGroupLabelProps, type SearchModalGroupProps, SearchModalInput, type SearchModalInputProps, SearchModalItem, type SearchModalItemProps, type SearchModalProps, SearchModalTrigger, type SearchModalTriggerProps, useSearchModalContext, } from './components/SearchModal';
 export { SegmentedControl, SegmentedControlButton, type SegmentedControlButtonProps, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, SegmentedControlSeparator, type SegmentedControlSeparatorProps, } from './components/SegmentedControl';
 export { SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, } from './components/SegmentedTabs';
 export { createListCollection, Select, SelectButton, SelectClearTrigger, SelectContent, type SelectDataItem, SelectEmptyState, type SelectEmptyStateProps, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, type UseSelectSearchOptions, type UseSelectSearchResult, useSelectSearch, } from './components/Select';
 export { Selection, SelectionAll, type SelectionAllProps, SelectionBulkBar, type SelectionBulkBarPlacement, type SelectionBulkBarProps, type SelectionContextValue, SelectionItem, type SelectionItemProps, type SelectionProps, useSelectionContext, } from './components/Selection';
 export { Separator, type SeparatorProps } from './components/Separator';
+export { SettingsHeader, SettingsHeaderActions, type SettingsHeaderActionsProps, SettingsHeaderBreadcrumbs, type SettingsHeaderBreadcrumbsProps, SettingsHeaderDescription, type SettingsHeaderDescriptionProps, SettingsHeaderFilters, type SettingsHeaderFiltersProps, SettingsHeaderHeading, type SettingsHeaderHeadingProps, type SettingsHeaderProps, SettingsHeaderTitle, type SettingsHeaderTitleProps, } from './components/SettingsHeader';
 export { Skeleton, type SkeletonProps } from './components/Skeleton';
 export { Slider, SliderControl, type SliderControlProps, SliderInput, type SliderInputProps, type SliderMark, SliderMarks, type SliderMarksProps, type SliderProps, SliderThumb, type SliderThumbProps, SliderValue, type SliderValueProps, } from './components/Slider';
 export { SplashScreen, type SplashScreenProps } from './components/SplashScreen';

package/dist/index.js

@@ -14,7 +14,7 @@ export { Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarD
 export { Card, CardContent, CardFooter, CardHeader, CardTitle, cardVariants } from "./components/Card/index.js";
 export { Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel } from "./components/Checkbox/index.js";
 export { Code } from "./components/Code/index.js";
-export { CopyButton } from "./components/CopyButton/index.js";
+export { Copyable, CopyableIcon, CopyableLabel, useCopyable } from "./components/Copyable/index.js";
 export { Country, CountryFlag, CountryName } from "./components/Country/index.js";
 export { DateFormatProvider, useDateFormat } from "./components/DateFormatProvider/index.js";
 export { DateInput } from "./components/DateInput/index.js";
@@ -57,12 +57,14 @@ export { RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPane
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./components/Resizable/index.js";
 export { RESPONSE_CODE_COLOR, ResponseCode, getResponseCodeCategory } from "./components/ResponseCode/index.js";
 export { ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport } from "./components/ScrollArea/index.js";
+export { SearchInput } from "./components/SearchInput/index.js";
 export { SearchModal, SearchModalBody, SearchModalContent, SearchModalEmpty, SearchModalFooter, SearchModalGroup, SearchModalGroupLabel, SearchModalInput, SearchModalItem, SearchModalTrigger, useSearchModalContext } from "./components/SearchModal/index.js";
 export { SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator } from "./components/SegmentedControl/index.js";
 export { SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton } from "./components/SegmentedTabs/index.js";
 export { Select, SelectButton, SelectClearTrigger, SelectContent, SelectEmptyState, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, createListCollection, useSelectSearch } from "./components/Select/index.js";
 export { Selection, SelectionAll, SelectionBulkBar, SelectionItem, useSelectionContext } from "./components/Selection/index.js";
 export { Separator } from "./components/Separator/index.js";
+export { SettingsHeader, SettingsHeaderActions, SettingsHeaderBreadcrumbs, SettingsHeaderDescription, SettingsHeaderFilters, SettingsHeaderHeading, SettingsHeaderTitle } from "./components/SettingsHeader/index.js";
 export { Skeleton } from "./components/Skeleton/index.js";
 export { Slider, SliderControl, SliderInput, SliderMarks, SliderThumb, SliderValue } from "./components/Slider/index.js";
 export { SplashScreen } from "./components/SplashScreen/index.js";