@wallarm-org/design-system 1.21.0 → 1.22.0

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-start 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/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/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/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";
@@ -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

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