@wallarm-org/design-system 1.21.0 → 1.22.1

package/dist/components/SettingsHeader/SettingsHeaderHeading.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface SettingsHeaderHeadingProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const SettingsHeaderHeading: FC<SettingsHeaderHeadingProps>;

package/dist/components/SettingsHeader/SettingsHeaderHeading.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const SettingsHeaderHeading = ({ ref, children, className, ...props })=>{
+    const testId = useTestId('heading');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-testid": testId,
+        "data-slot": "settings-header-heading",
+        className: cn('flex items-center justify-between gap-16 w-full', className),
+        children: children
+    });
+};
+SettingsHeaderHeading.displayName = 'SettingsHeaderHeading';
+export { SettingsHeaderHeading };

package/dist/components/SettingsHeader/SettingsHeaderTitle.d.ts

@@ -0,0 +1,5 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export interface SettingsHeaderTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    ref?: Ref<HTMLHeadingElement>;
+}
+export declare const SettingsHeaderTitle: FC<SettingsHeaderTitleProps>;

package/dist/components/SettingsHeader/SettingsHeaderTitle.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const SettingsHeaderTitle = ({ ref, children, className, ...props })=>{
+    const testId = useTestId('title');
+    return /*#__PURE__*/ jsx("h1", {
+        ...props,
+        ref: ref,
+        "data-testid": testId,
+        "data-slot": "settings-header-title",
+        className: cn('font-sans-display text-xl font-medium leading-28 text-text-primary truncate', className),
+        children: children
+    });
+};
+SettingsHeaderTitle.displayName = 'SettingsHeaderTitle';
+export { SettingsHeaderTitle };

package/dist/components/SettingsHeader/index.d.ts

@@ -0,0 +1,7 @@
+export { SettingsHeader, type SettingsHeaderProps } from './SettingsHeader';
+export { SettingsHeaderActions, type SettingsHeaderActionsProps, } from './SettingsHeaderActions';
+export { SettingsHeaderBreadcrumbs, type SettingsHeaderBreadcrumbsProps, } from './SettingsHeaderBreadcrumbs';
+export { SettingsHeaderDescription, type SettingsHeaderDescriptionProps, } from './SettingsHeaderDescription';
+export { SettingsHeaderFilters, type SettingsHeaderFiltersProps, } from './SettingsHeaderFilters';
+export { SettingsHeaderHeading, type SettingsHeaderHeadingProps, } from './SettingsHeaderHeading';
+export { SettingsHeaderTitle, type SettingsHeaderTitleProps, } from './SettingsHeaderTitle';

package/dist/components/SettingsHeader/index.js

@@ -0,0 +1,7 @@
+export { SettingsHeader } from "./SettingsHeader.js";
+export { SettingsHeaderActions } from "./SettingsHeaderActions.js";
+export { SettingsHeaderBreadcrumbs } from "./SettingsHeaderBreadcrumbs.js";
+export { SettingsHeaderDescription } from "./SettingsHeaderDescription.js";
+export { SettingsHeaderFilters } from "./SettingsHeaderFilters.js";
+export { SettingsHeaderHeading } from "./SettingsHeaderHeading.js";
+export { SettingsHeaderTitle } from "./SettingsHeaderTitle.js";

package/dist/components/Switch/SwitchControl.js

@@ -21,7 +21,7 @@ const SwitchControl = ()=>{
                 className: "absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 text-white pointer-events-none z-0"
             }),
             /*#__PURE__*/ jsx(Switch.Thumb, {
-                className: cn('w-16 h-12', 'bg-icon-primary-alt rounded-4 shadow-sm transition-all relative z-10', 'translate-x-4', 'data-[state=checked]:translate-x-14')
+                className: cn('w-16 h-12', 'bg-icon-primary-alt rounded-4 shadow-sm transition-all relative z-[9]', 'translate-x-4', 'data-[state=checked]:translate-x-14')
             })
         ]
     });

package/dist/components/Table/EditableCell/EditableSelectCell.js

@@ -22,7 +22,11 @@ const EditableSelectCell = ({ value, onCommit, items, children, placeholder = 'S
         ] : [],
         "data-testid": testId,
         positioning: {
-            placement: 'bottom-start'
+            placement: 'bottom-start',
+            sameWidth: true,
+            offset: {
+                crossAxis: -8
+            }
         },
         onValueChange: (details)=>{
             const next = details.value[0];
@@ -56,6 +60,10 @@ const EditableSelectCell = ({ value, onCommit, items, children, placeholder = 'S
                 })
             }),
             /*#__PURE__*/ jsx(SelectPositioner, {
+                className: "min-w-full max-w-full",
+                style: {
+                    width: 'calc(var(--reference-width) + 16px)'
+                },
                 children: /*#__PURE__*/ jsx(SelectContent, {
                     children: items.map((item)=>/*#__PURE__*/ jsxs(SelectOption, {
                             item: item,

package/dist/components/Table/StickyGroupParent.js

@@ -104,7 +104,7 @@ const StickyGroupParent = ({ tableWidth, headerHeight })=>{
                                         disablePinnedShadow: true
                                     }),
                                     dataCells.slice(1).map((cell)=>/*#__PURE__*/ jsx(Td, {
-                                            className: cn('border-b border-border-primary-light bg-bg-surface-2 overlay', 'group-hover/row:overlay-states-primary-hover group-data-[selected]/row:overlay-states-primary-active'),
+                                            className: cn('border-b border-border-primary-light bg-bg-surface-2 overlay', 'group-hover/row:overlay-states-primary-hover group-data-[selected]/row:overlay-states-primary-active', 'group-data-[preview-active]/row:overlay-states-primary-hover group-has-[[data-state=open]]/row:overlay-states-primary-hover'),
                                             style: {
                                                 width: cell.column.getSize()
                                             },

package/dist/components/Table/TableBody/TableBodyCell.js

@@ -3,15 +3,12 @@ import { flexRender } from "@tanstack/react-table";
 import { cn } from "../../../utils/cn.js";
 import { useTestId } from "../../../utils/testId.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../Tooltip/index.js";
+import { DROP_INDICATOR_BASE } from "../classes.js";
 import { useMasterCell } from "../hooks/index.js";
 import { TABLE_EXPAND_COLUMN_ID, getAlignClass, getExpandBorderClass, getPinningStyles, isLastPinnedLeft, useColumnDnd } from "../lib/index.js";
 import { Td } from "../primitives/index.js";
 import { useTableContext } from "../TableContext/index.js";
 import { TableMasterCellActions } from "../TableMasterCellActions.js";
-const DROP_INDICATOR_SHADOW = {
-    above: 'inset 0 2px 0 0 var(--color-border-strong-warning)',
-    below: 'inset 0 -2px 0 0 var(--color-border-strong-warning)'
-};
 const TableBodyCell = ({ cell, colSpan, className, disablePinnedShadow, lastRow, dragListeners, dragAttributes, dropIndicator })=>{
     const { allLeafColumns, masterColumnId } = useTableContext();
     const testId = useTestId('body-cell');
@@ -65,7 +62,7 @@ const TableBodyCell = ({ cell, colSpan, className, disablePinnedShadow, lastRow,
     };
     return /*#__PURE__*/ jsx(Td, {
         "data-testid": testId,
-        className: cn(getAlignClass(meta), getExpandBorderClass(isExpandColumn, cell.row.depth, lastRow), isCut && 'pr-0', (isMasterTrigger || tooltipText) && 'cursor-pointer', dragListeners && 'cursor-grab active:cursor-grabbing', meta?.cellClassName, className),
+        className: cn(getAlignClass(meta), getExpandBorderClass(isExpandColumn, cell.row.depth, lastRow), isCut && 'pr-0', (isMasterTrigger || tooltipText) && 'cursor-pointer', dragListeners && 'cursor-grab active:cursor-grabbing', dropIndicator && DROP_INDICATOR_BASE, 'above' === dropIndicator && 'after:top-0', 'below' === dropIndicator && 'after:-bottom-px', meta?.cellClassName, className),
         pinned: 'start' === isPinned,
         lastPinnedLeft: disablePinnedShadow ? false : lastLeft,
         expanded: isExpandedToggle,
@@ -80,7 +77,7 @@ const TableBodyCell = ({ cell, colSpan, className, disablePinnedShadow, lastRow,
                 overflow: 'hidden'
             },
             ...dropIndicator && {
-                boxShadow: DROP_INDICATOR_SHADOW[dropIndicator]
+                overflow: 'visible'
             }
         },
         colSpan: colSpan,

package/dist/components/Table/TableMasterCellActions.js

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 const TableMasterCellActions = ({ children })=>/*#__PURE__*/ jsx("div", {
-        className: cn('shrink-0 pl-4 pr-4 flex items-center gap-2', 'opacity-0 pointer-events-none', 'group-hover/row:opacity-100 group-hover/row:pointer-events-auto', 'group-data-[selected]/row:opacity-100 group-data-[selected]/row:pointer-events-auto', 'group-data-[preview-active]/row:opacity-100 group-data-[preview-active]/row:pointer-events-auto'),
+        "data-master-cell-action": "",
+        className: cn('shrink-0 pl-4 pr-4 flex items-center gap-2', 'opacity-0 pointer-events-none', 'group-hover/row:opacity-100 group-hover/row:pointer-events-auto', 'group-data-[selected]/row:opacity-100 group-data-[selected]/row:pointer-events-auto', 'group-data-[preview-active]/row:opacity-100 group-data-[preview-active]/row:pointer-events-auto', 'has-[[data-state=open]]:opacity-100 has-[[data-state=open]]:pointer-events-auto', '[&_[data-state=open]]:overlay [&_[data-state=open]]:overlay-states-primary-hover'),
         children: children
     });
 TableMasterCellActions.displayName = 'TableMasterCellActions';

package/dist/components/Table/TableRow.js

@@ -2,6 +2,7 @@ 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";
@@ -70,7 +71,7 @@ const TableRowInner = ({ row, ref, 'data-index': dataIndex })=>{
                             lastRow: isLastRow
                         }),
                         dataCells.slice(1).map((cell)=>/*#__PURE__*/ jsx(Td, {
-                                className: cn('border-b border-border-primary-light bg-bg-surface-2 overlay', 'group-hover/row:overlay-states-primary-hover group-data-[selected]/row:overlay-states-primary-active', isLastRow && 'border-b-0'),
+                                className: cn('border-b border-border-primary-light bg-bg-surface-2 overlay', 'group-hover/row:overlay-states-primary-hover group-data-[selected]/row:overlay-states-primary-active', 'group-data-[preview-active]/row:overlay-states-primary-hover group-has-[[data-state=open]]/row:overlay-states-primary-hover', isLastRow && 'border-b-0'),
                                 style: {
                                     width: cell.column.getSize()
                                 },
@@ -122,7 +123,11 @@ const TableRowInner = ({ row, ref, 'data-index': dataIndex })=>{
                     }),
                     !stretch && /*#__PURE__*/ jsx(Td, {
                         pinned: false,
-                        "aria-hidden": true
+                        "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
                     })
                 ]
             }),

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

@@ -38,7 +38,7 @@ const tableHeadCellVariants = cva(cn(tableCellBase, 'pl-16 pr-4 py-4 text-xs fon
         dragging: false
     }
 });
-const tableBodyCellVariants = cva(cn(tableCellBase, 'px-16 py-8 text-sm text-text-primary', 'bg-bg-surface-2', 'align-top', 'group-hover/row:overlay-states-primary-hover', 'group-data-[selected]/row:overlay-states-primary-active', 'group-data-[selected]/row:group-hover/row:overlay-states-primary-hover', 'group-data-[preview-active]/row:overlay-states-primary-active', 'group-data-[preview-active]/row:group-hover/row:overlay-states-primary-hover', '[&:has([data-state=open][data-part=context-trigger])]:ring-2', '[&:has([data-state=open][data-part=context-trigger])]:ring-inset', '[&:has([data-state=open][data-part=context-trigger])]:ring-border-strong-brand', '[&:has([data-part=context-trigger])]:p-0', '[&_[data-part=context-trigger]]:w-full', '[&_[data-part=context-trigger]]:px-16 [&_[data-part=context-trigger]]:py-8', '[&_[data-part=context-trigger]]:text-left [&_[data-part=context-trigger]]:outline-none'), {
+const tableBodyCellVariants = cva(cn(tableCellBase, 'px-16 py-8 text-sm text-text-primary', 'bg-bg-surface-2', 'align-top', 'group-hover/row:overlay-states-primary-hover', 'group-data-[selected]/row:overlay-states-primary-active', 'group-data-[selected]/row:group-hover/row:overlay-states-primary-hover', 'group-data-[preview-active]/row:overlay-states-primary-hover', 'group-has-[[data-state=open]]/row:overlay-states-primary-hover', '[&:has([data-state=open][data-part=context-trigger])]:ring-2', '[&:has([data-state=open][data-part=context-trigger])]:ring-inset', '[&:has([data-state=open][data-part=context-trigger])]:ring-border-strong-brand', '[&:has([data-part=context-trigger])]:p-0', '[&_[data-part=context-trigger]]:w-full', '[&_[data-part=context-trigger]]:px-16 [&_[data-part=context-trigger]]:py-8', '[&_[data-part=context-trigger]]:text-left [&_[data-part=context-trigger]]:outline-none'), {
     variants: {
         pinned: {
             true: 'sticky z-10',
@@ -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/useMasterCell.d.ts

@@ -1,3 +1,4 @@
+import type { MouseEvent } from 'react';
 import type { RowData } from '@tanstack/react-table';
 /**
  * Encapsulates master cell click logic for a body cell.
@@ -7,7 +8,7 @@ export declare const useMasterCell: <T extends RowData>(columnId: string, rowId:
     /** Master cell click is enabled */
     isMasterTrigger: boolean;
     /** Fire master cell click for this row */
-    handleClick: () => void;
+    handleClick: (e: MouseEvent) => void;
     /** Tooltip text for master cell hover */
     tooltipText: string | undefined;
 };

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

@@ -4,7 +4,8 @@ const useMasterCell = (columnId, rowId)=>{
     const { masterColumnId, onMasterCellClick } = useTableContext();
     const isMasterColumn = columnId === masterColumnId;
     const hasMasterClick = isMasterColumn && !!onMasterCellClick;
-    const handleClick = useCallback(()=>{
+    const handleClick = useCallback((e)=>{
+        if (e.target.closest('[data-master-cell-action]')) return;
         onMasterCellClick?.(rowId);
     }, [
         onMasterCellClick,

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

@@ -12,7 +12,7 @@ const createDragHandleColumn = ()=>({
         enablePinning: false,
         meta: {
             headerClassName: 'px-4 py-4',
-            cellClassName: 'px-4 py-8'
+            cellClassName: 'px-4 py-8 align-middle text-center'
         },
         header: ()=>null,
         cell: ()=>/*#__PURE__*/ jsx(GripVertical, {

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

@@ -17,6 +17,7 @@ export interface SecurityEvent {
     lastSeen: string;
     endpointMethod: HttpMethodName;
     endpointPath: string;
+    state: boolean;
 }
 export interface SecurityHeaderEntry {
     id: string;

package/dist/components/Table/mocks.js

@@ -12,6 +12,7 @@ import { Ip, IpAddress, IpCountry, IpProvider, sourceLabels } from "../Ip/index.
 import { Link } from "../Link/index.js";
 import { OverflowTooltip, OverflowTooltipContent, OverflowTooltipTrigger } from "../OverflowTooltip/index.js";
 import { HStack, VStack } from "../Stack/index.js";
+import { Switch, SwitchControl } from "../Switch/index.js";
 import { Text } from "../Text/index.js";
 import { createTableColumnHelper } from "./lib/index.js";
 const securityEvents = [
@@ -36,7 +37,8 @@ const securityEvents = [
         cweId: 'CWE-287',
         lastSeen: '5 days ago',
         endpointMethod: 'POST',
-        endpointPath: '/api/v1/payments'
+        endpointPath: '/api/v1/payments',
+        state: true
     },
     {
         id: '2',
@@ -59,7 +61,8 @@ const securityEvents = [
         cweId: 'CWE-416',
         lastSeen: '6 days ago',
         endpointMethod: 'PUT',
-        endpointPath: '/api/v1/users/profile'
+        endpointPath: '/api/v1/users/profile',
+        state: false
     },
     {
         id: '3',
@@ -82,7 +85,8 @@ const securityEvents = [
         cweId: 'CWE-89',
         lastSeen: '7 days ago',
         endpointMethod: 'GET',
-        endpointPath: '/api/v1/users/:id'
+        endpointPath: '/api/v1/users/:id',
+        state: true
     },
     {
         id: '4',
@@ -105,7 +109,8 @@ const securityEvents = [
         cweId: 'CWE-22',
         lastSeen: '1 week ago',
         endpointMethod: 'GET',
-        endpointPath: '/api/v1/errors/debug'
+        endpointPath: '/api/v1/errors/debug',
+        state: true
     },
     {
         id: '5',
@@ -128,7 +133,8 @@ const securityEvents = [
         cweId: 'CWE-200',
         lastSeen: '4 days ago',
         endpointMethod: 'POST',
-        endpointPath: '/api/v1/auth/login'
+        endpointPath: '/api/v1/auth/login',
+        state: false
     },
     {
         id: '6',
@@ -151,7 +157,8 @@ const securityEvents = [
         cweId: 'CWE-352',
         lastSeen: '2 days ago',
         endpointMethod: 'POST',
-        endpointPath: '/api/v1/files/upload'
+        endpointPath: '/api/v1/files/upload',
+        state: true
     },
     {
         id: '7',
@@ -174,7 +181,8 @@ const securityEvents = [
         cweId: 'CWE-125',
         lastSeen: '3 days ago',
         endpointMethod: 'GET',
-        endpointPath: '/api/v1/images/proxy'
+        endpointPath: '/api/v1/images/proxy',
+        state: false
     },
     {
         id: '8',
@@ -197,7 +205,8 @@ const securityEvents = [
         cweId: 'CWE-134',
         lastSeen: '4 days ago',
         endpointMethod: 'GET',
-        endpointPath: '/api/v1/auth/redirect'
+        endpointPath: '/api/v1/auth/redirect',
+        state: true
     },
     {
         id: '9',
@@ -220,7 +229,8 @@ const securityEvents = [
         cweId: 'CWE-79',
         lastSeen: '1 day ago',
         endpointMethod: 'DELETE',
-        endpointPath: '/api/v1/users/:id'
+        endpointPath: '/api/v1/users/:id',
+        state: false
     },
     {
         id: '10',
@@ -243,7 +253,8 @@ const securityEvents = [
         cweId: 'CWE-89',
         lastSeen: '3 days ago',
         endpointMethod: 'PATCH',
-        endpointPath: '/api/v1/content'
+        endpointPath: '/api/v1/content',
+        state: true
     }
 ];
 const securityColumnHelper = createTableColumnHelper();
@@ -274,6 +285,14 @@ const securityColumns = [
                 ]
             })
     }),
+    securityColumnHelper.accessor('state', {
+        header: 'State',
+        size: 100,
+        cell: ({ getValue })=>/*#__PURE__*/ jsx(Switch, {
+                checked: getValue(),
+                children: /*#__PURE__*/ jsx(SwitchControl, {})
+            })
+    }),
     securityColumnHelper.accessor('requests', {
         header: 'Requests',
         size: 160,
@@ -671,6 +690,10 @@ const SecurityPreviewContent = ({ row })=>/*#__PURE__*/ jsxs(VStack, {
                         size: "medium",
                         children: row.original.status
                     }),
+                    /*#__PURE__*/ jsx(Switch, {
+                        checked: row.original.state,
+                        children: /*#__PURE__*/ jsx(SwitchControl, {})
+                    }),
                     /*#__PURE__*/ jsx(InlineCodeSnippet, {
                         code: row.original.parameter,
                         size: "sm",

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";