@harborclient/sdk 1.0.29 → 1.0.31

package/dist/components/RowActionsMenu/index.js

@@ -1,14 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { faBars } from '@fortawesome/free-solid-svg-icons';
 import { useCallback, useEffect, useMemo, useRef, useState } from '@harborclient/sdk/react';
 import { Button } from '../Button/index.js';
 import { FaIcon } from '../FaIcon/index.js';
-import { faBars } from '@fortawesome/free-solid-svg-icons';
-import { resolveMenuTypeahead, resolveTabListKeyAction } from '../utils.js';
+import { cn, resolveMenuTypeahead, resolveTabListKeyAction } from '../utils.js';
 const TYPEAHEAD_TIMEOUT_MS = 500;
 /**
  * Tailwind classes for a single menu item button.
- *
- * @param variant - Visual variant for default or destructive actions.
  */
 function menuItemClass(variant) {
     const base = 'block w-full cursor-pointer border-none bg-transparent px-3.5 py-1.5 text-left text-[16px] app-no-drag';
@@ -19,7 +17,7 @@ function menuItemClass(variant) {
 /**
  * Hamburger-triggered dropdown for row-level actions (rename, delete, etc.).
  */
-export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange }) {
+export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange, className, ...props }) {
     const isOpen = openMenuId === menuId;
     const menuElementId = `${menuId}-menu`;
     const rootRef = useRef(null);
@@ -53,8 +51,6 @@ export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange }) {
     }, [clearTypeahead, onOpenChange]);
     /**
      * Focuses a menu item by index and updates roving tabindex state.
-     *
-     * @param index - Flat index of the menu item to focus.
      */
     const focusItem = useCallback((index) => {
         setFocusedIndex(index);
@@ -64,8 +60,6 @@ export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange }) {
     }, []);
     /**
      * Opens the menu and focuses the first or last item.
-     *
-     * @param focusLast - When true, focus the last item instead of the first.
      */
     const openMenu = useCallback((focusLast = false) => {
         if (flatItems.length === 0)
@@ -120,8 +114,6 @@ export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange }) {
     }, [closeMenu, isOpen]);
     /**
      * Handles keyboard interaction on the menu trigger when closed.
-     *
-     * @param event - Keyboard event from the trigger button.
      */
     const handleTriggerKeyDown = (event) => {
         if (isOpen)
@@ -138,8 +130,6 @@ export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange }) {
     };
     /**
      * Handles keyboard navigation within the open menu.
-     *
-     * @param event - Keyboard event from the menu container.
      */
     const handleMenuKeyDown = (event) => {
         if (flatItems.length === 0)
@@ -169,7 +159,7 @@ export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange }) {
             focusItem(typeahead.index);
         }
     };
-    return (_jsxs("div", { ref: rootRef, className: "hc-row-actions-menu relative shrink-0", children: [_jsx(Button, { innerRef: triggerRef, type: "button", variant: "icon", className: "hc-row-actions-menu-trigger", title: "Actions", "aria-label": "Row actions", "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": isOpen ? menuElementId : undefined, onClick: (e) => {
+    return (_jsxs("div", { ref: rootRef, ...props, className: cn('hc-row-actions-menu relative shrink-0', className), children: [_jsx(Button, { innerRef: triggerRef, type: "button", variant: "icon", className: "hc-row-actions-menu-trigger", title: "Actions", "aria-label": "Row actions", "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": isOpen ? menuElementId : undefined, onClick: (e) => {
                     e.stopPropagation();
                     if (isOpen) {
                         closeMenu();
@@ -177,7 +167,7 @@ export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange }) {
                     else {
                         openMenu(false);
                     }
-                }, onKeyDown: handleTriggerKeyDown, children: _jsx(FaIcon, { icon: faBars, className: "h-3.5 w-3.5" }) }), isOpen && (_jsx("div", { id: menuElementId, role: "menu", className: "hc-row-actions-menu-panel absolute right-0 top-full z-10 mt-0.5 min-w-[200px] rounded-md border border-separator bg-surface py-1 shadow-md app-no-drag", onKeyDown: handleMenuKeyDown, children: groups.map((group, groupIndex) => {
+                }, onKeyDown: handleTriggerKeyDown, children: _jsx(FaIcon, { icon: faBars, className: "h-3.5 w-3.5" }) }), isOpen && (_jsx("div", { id: menuElementId, role: "menu", className: "hc-row-actions-menu-panel app-no-drag absolute top-full right-0 z-10 mt-0.5 min-w-[200px] rounded-md border border-separator bg-surface py-1 shadow-md", onKeyDown: handleMenuKeyDown, children: groups.map((group, groupIndex) => {
                     let flatIndex = groups.slice(0, groupIndex).reduce((count, g) => count + g.length, 0);
                     return (_jsx("div", { className: groupIndex > 0
                             ? 'hc-row-actions-menu-group border-t border-separator'
@@ -185,7 +175,7 @@ export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange }) {
                             const itemIndex = flatIndex++;
                             return (_jsx("button", { ref: (el) => {
                                     itemRefs.current[itemIndex] = el;
-                                }, type: "button", role: "menuitem", tabIndex: itemIndex === focusedIndex ? 0 : -1, className: `hc-row-actions-menu-item ${menuItemClass(item.variant)}`, onClick: (e) => {
+                                }, type: "button", role: "menuitem", tabIndex: itemIndex === focusedIndex ? 0 : -1, className: cn('hc-row-actions-menu-item', menuItemClass(item.variant)), onClick: (e) => {
                                     e.stopPropagation();
                                     closeMenu();
                                     item.onSelect();

package/dist/components/SegmentedTabs/SegmentedTabPanel.d.ts

@@ -1,5 +1,5 @@
-import type { JSX, ReactNode } from 'react';
-interface Props<T extends string> {
+import type { ComponentPropsWithoutRef, JSX, ReactNode } from 'react';
+interface Props<T extends string> extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
     /**
      * Tab value that controls visibility of this panel.
      */
@@ -8,14 +8,10 @@ interface Props<T extends string> {
      * Panel content shown when this tab is selected.
      */
     children: ReactNode;
-    /**
-     * Additional CSS classes for the panel container.
-     */
-    className?: string;
 }
 /**
  * Renders a WAI-ARIA tab panel linked to the matching tab in the parent group.
  */
-export declare function SegmentedTabPanel<T extends string>({ value, children, className }: Props<T>): JSX.Element | null;
+export declare function SegmentedTabPanel<T extends string>({ value, children, className, ...props }: Props<T>): JSX.Element | null;
 export {};
 //# sourceMappingURL=SegmentedTabPanel.d.ts.map

package/dist/components/SegmentedTabs/SegmentedTabPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedTabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/SegmentedTabPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3D,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC9B;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,EAAE,EAClD,KAAK,EACL,QAAQ,EACR,SAAS,EACV,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA4C/B"}
+{"version":3,"file":"SegmentedTabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/SegmentedTabPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrF,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACzF;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,EAAE,EAClD,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA2C/B"}

package/dist/components/SegmentedTabs/SegmentedTabPanel.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
 import { useCallback, useContext } from '@harborclient/sdk/react';
+import { cn } from '../utils.js';
 import { SegmentedTabsContext } from './SegmentedTabsContext.js';
 /**
  * Renders a WAI-ARIA tab panel linked to the matching tab in the parent group.
  */
-export function SegmentedTabPanel({ value, children, className }) {
+export function SegmentedTabPanel({ value, children, className, ...props }) {
     const context = useContext(SegmentedTabsContext);
     if (!context) {
         throw new Error('SegmentedTabPanel must be used within SegmentedTabsGroup');
@@ -12,8 +13,6 @@ export function SegmentedTabPanel({ value, children, className }) {
     /**
      * Moves focus back to the owning tab when ArrowUp is pressed inside the panel,
      * except inside CodeMirror editors where Up should edit text.
-     *
-     * @param event - Keyboard event from the tab panel container.
      */
     const handleKeyDown = useCallback((event) => {
         if (event.key !== 'ArrowUp' || event.defaultPrevented)
@@ -32,5 +31,5 @@ export function SegmentedTabPanel({ value, children, className }) {
     }, [context, value]);
     if (context.value !== value)
         return null;
-    return (_jsx("div", { role: "tabpanel", id: context.getPanelId(value), "aria-labelledby": context.getTabId(value), className: className ? `hc-segmented-tab-panel ${className}` : 'hc-segmented-tab-panel', onKeyDown: handleKeyDown, children: children }));
+    return (_jsx("div", { ...props, role: "tabpanel", id: context.getPanelId(value), "aria-labelledby": context.getTabId(value), className: cn('hc-segmented-tab-panel', className), onKeyDown: handleKeyDown, children: children }));
 }

package/dist/components/SegmentedTabs/SegmentedTabsGroup.d.ts

@@ -6,8 +6,6 @@ interface Props<T extends string> {
     value: T;
     /**
      * Called when the user selects a different tab.
-     *
-     * @param value - Newly selected tab value.
      */
     onChange: (value: T) => void;
     /**

package/dist/components/SegmentedTabs/SegmentedTabsGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedTabsGroup.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/SegmentedTabsGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC9B;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAE7B;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,EAAE,EACnD,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,EACT,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAmBxB"}
+{"version":3,"file":"SegmentedTabsGroup.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/SegmentedTabsGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC9B;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAE7B;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,EAAE,EACnD,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,EACT,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAmBxB"}

package/dist/components/SegmentedTabs/SegmentedTabsVisibilityMenu.d.ts

@@ -11,8 +11,6 @@ interface Props<T extends string> {
     visibleTabValues: T[];
     /**
      * Called when the user toggles a tab's visibility in the menu.
-     *
-     * @param tabValue - Tab value to toggle.
      */
     onToggle: (tabValue: T) => void;
 }

package/dist/components/SegmentedTabs/SegmentedTabsVisibilityMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedTabsVisibilityMenu.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/SegmentedTabsVisibilityMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAA4B,MAAM,OAAO,CAAC;AAK3D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE1C,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC9B;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAEnB;;OAEG;IACH,gBAAgB,EAAE,CAAC,EAAE,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC;CACjC;AAQD;;GAEG;AACH,wBAAgB,2BAA2B,CAAC,CAAC,SAAS,MAAM,EAAE,EAC5D,IAAI,EACJ,gBAAgB,EAChB,QAAQ,EACT,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAwLxB"}
+{"version":3,"file":"SegmentedTabsVisibilityMenu.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/SegmentedTabsVisibilityMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAA4B,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE1C,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC9B;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAEnB;;OAEG;IACH,gBAAgB,EAAE,CAAC,EAAE,CAAC;IAEtB;;OAEG;IACH,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC;CACjC;AAQD;;GAEG;AACH,wBAAgB,2BAA2B,CAAC,CAAC,SAAS,MAAM,EAAE,EAC5D,IAAI,EACJ,gBAAgB,EAChB,QAAQ,EACT,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAgLxB"}

package/dist/components/SegmentedTabs/SegmentedTabsVisibilityMenu.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
-import { useCallback, useEffect, useId, useRef, useState } from '@harborclient/sdk/react';
 import { faCaretDown, faCheck } from '@fortawesome/free-solid-svg-icons';
+import { useCallback, useEffect, useId, useRef, useState } from '@harborclient/sdk/react';
 import { Button } from '../Button/index.js';
 import { FaIcon } from '../FaIcon/index.js';
-import { resolveTabListKeyAction } from '../utils.js';
+import { cn, resolveTabListKeyAction } from '../utils.js';
 const menuItemClass = 'flex w-full cursor-pointer items-center gap-2 border-none bg-transparent px-3.5 py-1.5 text-left text-[14px] text-text hover:bg-selection app-no-drag';
 const triggerClassName = '!rounded-full hover:!bg-[rgba(0,122,255,0.18)] dark:hover:!bg-[rgba(10,132,255,0.22)]';
 /**
@@ -30,8 +30,6 @@ export function SegmentedTabsVisibilityMenu({ tabs, visibleTabValues, onToggle }
     }, []);
     /**
      * Opens the menu and focuses the first or last item.
-     *
-     * @param focusLast - When true, focus the last item instead of the first.
      */
     const openMenu = useCallback((focusLast = false) => {
         if (tabs.length === 0)
@@ -41,8 +39,6 @@ export function SegmentedTabsVisibilityMenu({ tabs, visibleTabValues, onToggle }
     }, [tabs.length]);
     /**
      * Focuses a menu item by index and updates roving tabindex state.
-     *
-     * @param index - Index of the menu item to focus.
      */
     const focusItem = useCallback((index) => {
         setFocusedIndex(index);
@@ -96,8 +92,6 @@ export function SegmentedTabsVisibilityMenu({ tabs, visibleTabValues, onToggle }
     }, [closeMenu, isOpen]);
     /**
      * Handles keyboard interaction on the menu trigger when closed.
-     *
-     * @param event - Keyboard event from the trigger button.
      */
     const handleTriggerKeyDown = (event) => {
         if (isOpen)
@@ -114,8 +108,6 @@ export function SegmentedTabsVisibilityMenu({ tabs, visibleTabValues, onToggle }
     };
     /**
      * Handles keyboard navigation within the open menu.
-     *
-     * @param event - Keyboard event from the menu container.
      */
     const handleMenuKeyDown = (event) => {
         if (tabs.length === 0)
@@ -130,14 +122,14 @@ export function SegmentedTabsVisibilityMenu({ tabs, visibleTabValues, onToggle }
             focusItem(arrowIndex);
         }
     };
-    return (_jsxs("div", { ref: rootRef, className: "hc-segmented-tabs-visibility-menu relative shrink-0", children: [_jsx(Button, { innerRef: triggerRef, type: "button", variant: "icon", className: `hc-segmented-tabs-visibility-menu-trigger ${triggerClassName}`, "aria-label": "Customize visible tabs", "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": isOpen ? menuElementId : undefined, onClick: () => {
+    return (_jsxs("div", { ref: rootRef, className: "hc-segmented-tabs-visibility-menu relative shrink-0", children: [_jsx(Button, { innerRef: triggerRef, type: "button", variant: "icon", className: cn('hc-segmented-tabs-visibility-menu-trigger', triggerClassName), "aria-label": "Customize visible tabs", "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": isOpen ? menuElementId : undefined, onClick: () => {
                     if (isOpen) {
                         closeMenu();
                     }
                     else {
                         openMenu(false);
                     }
-                }, onKeyDown: handleTriggerKeyDown, children: _jsx(FaIcon, { icon: faCaretDown, className: "h-3.5 w-3.5" }) }), isOpen && (_jsx("div", { id: menuElementId, role: "menu", className: "hc-segmented-tabs-visibility-menu-panel absolute right-0 top-full z-10 mt-0.5 min-w-[140px] rounded-md border border-separator bg-surface py-1 shadow-md app-no-drag", onKeyDown: handleMenuKeyDown, children: tabs.map((tab, index) => {
+                }, onKeyDown: handleTriggerKeyDown, children: _jsx(FaIcon, { icon: faCaretDown, className: "h-3.5 w-3.5" }) }), isOpen && (_jsx("div", { id: menuElementId, role: "menu", className: "hc-segmented-tabs-visibility-menu-panel app-no-drag absolute top-full right-0 z-10 mt-0.5 min-w-[140px] rounded-md border border-separator bg-surface py-1 shadow-md", onKeyDown: handleMenuKeyDown, children: tabs.map((tab, index) => {
                     const checked = visibleSet.has(tab.value);
                     return (_jsx(MenuCheckboxItem, { ref: (element) => {
                             itemRefs.current[index] = element;
@@ -148,7 +140,7 @@ export function SegmentedTabsVisibilityMenu({ tabs, visibleTabValues, onToggle }
  * Single checkbox-style row in the tab visibility menu.
  */
 function MenuCheckboxItem({ checked, label, tabIndex, onSelect, ref }) {
-    return (_jsxs("button", { ref: ref, type: "button", role: "menuitemcheckbox", "aria-checked": checked, tabIndex: tabIndex, className: `hc-segmented-tabs-visibility-menu-item ${menuItemClass}`, onClick: (e) => {
+    return (_jsxs("button", { ref: ref, type: "button", role: "menuitemcheckbox", "aria-checked": checked, tabIndex: tabIndex, className: cn('hc-segmented-tabs-visibility-menu-item', menuItemClass), onClick: (e) => {
             e.stopPropagation();
             onSelect();
         }, children: [_jsx("span", { className: "hc-segmented-tabs-visibility-menu-item-check inline-flex w-4 shrink-0 justify-center", "aria-hidden": true, children: checked ? _jsx(FaIcon, { icon: faCheck, className: "h-3 w-3" }) : null }), _jsx("span", { className: "hc-segmented-tabs-visibility-menu-item-label min-w-0", children: label })] }));

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

@@ -1,9 +1,9 @@
-import type { JSX } from 'react';
+import type { ComponentPropsWithoutRef, JSX } from 'react';
 import type { TabItem } from './types.js';
 export { SegmentedTabsGroup } from './SegmentedTabsGroup.js';
 export { SegmentedTabPanel } from './SegmentedTabPanel.js';
 export type { TabItem } from './types.js';
-interface Props<T extends string> {
+interface Props<T extends string> extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'className' | 'aria-label' | 'onChange'> {
     /**
      * Tab definitions to render.
      */
@@ -15,8 +15,6 @@ interface Props<T extends string> {
     /**
      * Called when the user selects a different tab. Omit when used inside
      * `SegmentedTabsGroup`.
-     *
-     * @param value - Newly selected tab value.
      */
     onChange?: (value: T) => void;
     /**
@@ -35,8 +33,6 @@ interface Props<T extends string> {
     defaultVisibleTabValues?: T[];
     /**
      * Called when the user toggles tab visibility in the edit menu.
-     *
-     * @param visibleTabValues - Updated visible tab values.
      */
     onVisibleTabValuesChange?: (visibleTabValues: T[]) => void;
     /**
@@ -61,5 +57,5 @@ interface Props<T extends string> {
 /**
  * macOS-style segmented tab control with WAI-ARIA tabs or radiogroup semantics.
  */
-export declare function SegmentedTabs<T extends string>({ tabs, value: valueProp, onChange: onChangeProp, editable, visibleTabValues: visibleTabValuesProp, defaultVisibleTabValues, onVisibleTabValuesChange, fullWidth, className, pattern, ariaLabel: ariaLabelProp }: Props<T>): JSX.Element;
+export declare function SegmentedTabs<T extends string>({ tabs, value: valueProp, onChange: onChangeProp, editable, visibleTabValues: visibleTabValuesProp, defaultVisibleTabValues, onVisibleTabValuesChange, fullWidth, className, pattern, ariaLabel: ariaLabelProp, ...props }: Props<T>): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/SegmentedTabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAMhD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAkD1C,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC9B;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IAEV;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAE9B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,EAAE,CAAC;IAEvB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,CAAC,EAAE,CAAC;IAE9B;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,CAAC,gBAAgB,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAE3D;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,EAC9C,IAAI,EACJ,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,YAAY,EACtB,QAAe,EACf,gBAAgB,EAAE,oBAAoB,EACtC,uBAAuB,EACvB,wBAAwB,EACxB,SAAiB,EACjB,SAAS,EACT,OAAgB,EAChB,SAAS,EAAE,aAAa,EACzB,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAoQxB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAM1E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAgD1C,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CAC5C,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,CACrD;IACC;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IAEV;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAE9B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,EAAE,CAAC;IAEvB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,CAAC,EAAE,CAAC;IAE9B;;OAEG;IACH,wBAAwB,CAAC,EAAE,CAAC,gBAAgB,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAE3D;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,EAC9C,IAAI,EACJ,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,YAAY,EACtB,QAAe,EACf,gBAAgB,EAAE,oBAAoB,EACtC,uBAAuB,EACvB,wBAAwB,EACxB,SAAiB,EACjB,SAAS,EACT,OAAgB,EAChB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA2PxB"}

package/dist/components/SegmentedTabs/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
 import { useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from '@harborclient/sdk/react';
-import { getFocusableElements } from '../useDialogFocus.js';
-import { resolveTabListKeyAction } from '../utils.js';
 import { segment, segmentGroup } from '../classes.js';
+import { getFocusableElements } from '../useDialogFocus.js';
+import { cn, resolveTabListKeyAction } from '../utils.js';
 import { SegmentedTabsContext } from './SegmentedTabsContext.js';
 import { SegmentedTabsVisibilityMenu } from './SegmentedTabsVisibilityMenu.js';
 export { SegmentedTabsGroup } from './SegmentedTabsGroup.js';
@@ -10,7 +10,6 @@ export { SegmentedTabPanel } from './SegmentedTabPanel.js';
 /**
  * Returns the tab value whose button currently has keyboard focus.
  *
- * @param tabRefs - Map of tab values to their button elements.
  * @returns Focused tab value, or undefined when focus is outside the tab buttons.
  */
 function getFocusedTabValue(tabRefs) {
@@ -29,7 +28,6 @@ function getFocusedTabValue(tabRefs) {
  * Uses {@link getFocusableElements} first, then falls back to a direct query
  * when layout APIs report no visible descendants (for example in jsdom).
  *
- * @param panel - Tab panel element linked from the active tab.
  * @returns True when focus moved into the panel.
  */
 function focusFirstFocusableInPanel(panel) {
@@ -50,7 +48,7 @@ function focusFirstFocusableInPanel(panel) {
 /**
  * macOS-style segmented tab control with WAI-ARIA tabs or radiogroup semantics.
  */
-export function SegmentedTabs({ tabs, value: valueProp, onChange: onChangeProp, editable = true, visibleTabValues: visibleTabValuesProp, defaultVisibleTabValues, onVisibleTabValuesChange, fullWidth = false, className, pattern = 'tabs', ariaLabel: ariaLabelProp }) {
+export function SegmentedTabs({ tabs, value: valueProp, onChange: onChangeProp, editable = true, visibleTabValues: visibleTabValuesProp, defaultVisibleTabValues, onVisibleTabValuesChange, fullWidth = false, className, pattern = 'tabs', ariaLabel: ariaLabelProp, ...props }) {
     const context = useContext(SegmentedTabsContext);
     const standaloneId = useId();
     const tabRefs = useRef(new Map());
@@ -85,8 +83,6 @@ export function SegmentedTabs({ tabs, value: valueProp, onChange: onChangeProp,
     /**
      * Updates visible tab values and notifies the parent when controlled props
      * are used for persistence.
-     *
-     * @param nextVisibleTabValues - New visible tab values.
      */
     const updateVisibleTabValues = useCallback((nextVisibleTabValues) => {
         if (visibleTabValuesProp === undefined) {
@@ -97,8 +93,6 @@ export function SegmentedTabs({ tabs, value: valueProp, onChange: onChangeProp,
     /**
      * Toggles a tab's visibility in the edit menu, keeping at least one tab
      * visible and moving selection when the active tab is hidden.
-     *
-     * @param tabValue - Tab value to show or hide.
      */
     const handleVisibilityToggle = useCallback((tabValue) => {
         const isVisible = visibleSet.has(tabValue);
@@ -142,28 +136,13 @@ export function SegmentedTabs({ tabs, value: valueProp, onChange: onChangeProp,
             onChange(nextSelectedTab.value);
         }
     }, [editable, onChange, value, visibleSet, visibleTabs]);
-    const outerClassName = [
-        'hc-segmented-tabs',
-        segmentGroup,
-        'items-center gap-1',
-        fullWidth ? 'flex-1 min-w-0' : '',
-        className
-    ]
-        .filter(Boolean)
-        .join(' ');
-    const tabListClassName = [
-        'hc-segmented-tabs-list inline-flex min-w-0 flex-1 items-center',
-        fullWidth ? 'w-full' : ''
-    ]
-        .filter(Boolean)
-        .join(' ');
+    const outerClassName = cn('hc-segmented-tabs', segmentGroup, 'items-center gap-1', fullWidth ? 'min-w-0 flex-1' : '', className);
+    const tabListClassName = cn('hc-segmented-tabs-list inline-flex min-w-0 flex-1 items-center', fullWidth ? 'w-full' : '');
     const isRadiogroup = pattern === 'radiogroup';
     /**
      * Moves selection with arrow, Home, and End keys and focuses the newly
      * selected tab or radio control. ArrowDown on a focused tab moves focus into
      * the linked tab panel when used inside `SegmentedTabsGroup`.
-     *
-     * @param event - Keyboard event from the tab list or radio group container.
      */
     const handleKeyDown = useCallback((event) => {
         if (event.key === 'ArrowDown' && !isRadiogroup && context) {
@@ -209,7 +188,7 @@ export function SegmentedTabs({ tabs, value: valueProp, onChange: onChangeProp,
             tabRefs.current.get(nextTab.value)?.focus();
         });
     }, [visibleTabs, value, onChange, isRadiogroup, context, getPanelId]);
-    return (_jsxs("div", { className: outerClassName, children: [_jsx("div", { className: tabListClassName, role: isRadiogroup ? 'radiogroup' : 'tablist', "aria-label": ariaLabel, ...(!isRadiogroup ? { 'aria-orientation': 'horizontal' } : {}), onKeyDown: handleKeyDown, children: visibleTabs.map((tab) => {
+    return (_jsxs("div", { ...props, className: outerClassName, children: [_jsx("div", { className: tabListClassName, role: isRadiogroup ? 'radiogroup' : 'tablist', "aria-label": ariaLabel, ...(!isRadiogroup ? { 'aria-orientation': 'horizontal' } : {}), onKeyDown: handleKeyDown, children: visibleTabs.map((tab) => {
                     const selected = value === tab.value;
                     const tabClassName = `hc-segmented-tabs-tab ${segment(selected)}${fullWidth ? ' flex-1' : ''}`;
                     return (_jsx("button", { ref: (element) => {
@@ -224,6 +203,6 @@ export function SegmentedTabs({ tabs, value: valueProp, onChange: onChangeProp,
                                 id: getTabId(tab.value),
                                 'aria-selected': selected,
                                 ...(context ? { 'aria-controls': getPanelId(tab.value) } : {})
-                            }), children: _jsxs("span", { className: "hc-segmented-tabs-tab-label inline-flex items-center gap-1.5", children: [_jsx("span", { className: "inline-flex shrink-0 items-center px-1.5", children: _jsx("span", { className: `hc-segmented-tabs-tab-indicator h-1.5 w-1.5 shrink-0 rounded-full ${tab.indicator ? 'bg-accent' : 'bg-transparent'}`, "aria-hidden": true }) }), tab.label, _jsx("span", { className: "hc-segmented-tabs-tab-indicator-spacer inline-flex shrink-0 items-center px-1.5", "aria-hidden": true, children: _jsx("span", { className: "h-1.5 w-1.5 shrink-0" }) })] }) }, tab.value));
+                            }), children: _jsxs("span", { className: "hc-segmented-tabs-tab-label inline-flex items-center gap-1.5", children: [_jsx("span", { className: "inline-flex shrink-0 items-center px-1.5", children: _jsx("span", { className: cn('hc-segmented-tabs-tab-indicator h-1.5 w-1.5 shrink-0 rounded-full', tab.indicator ? 'bg-accent' : 'bg-transparent'), "aria-hidden": true }) }), tab.label, _jsx("span", { className: "hc-segmented-tabs-tab-indicator-spacer inline-flex shrink-0 items-center px-1.5", "aria-hidden": true, children: _jsx("span", { className: "h-1.5 w-1.5 shrink-0" }) })] }) }, tab.value));
                 }) }), editable && (_jsx(SegmentedTabsVisibilityMenu, { tabs: editableTabs, visibleTabValues: visibleTabValues, onToggle: handleVisibilityToggle }))] }));
 }

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

@@ -1,5 +1,5 @@
-import type { JSX, ReactNode } from 'react';
-interface Props {
+import type { ComponentPropsWithoutRef, JSX, ReactNode } from 'react';
+interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
     /**
      * Sidebar navigation rendered in the left column.
      */
@@ -8,15 +8,11 @@ interface Props {
      * Scrollable main content rendered in the right column.
      */
     children: ReactNode;
-    /**
-     * Additional Tailwind classes merged onto the outer flex column wrapper.
-     */
-    className?: string;
 }
 /**
  * Two-pane layout shell: a fixed sidebar column and a scrollable content area
  * with standard page padding.
  */
-export declare function SidebarLayout({ sidebar, children, className }: Props): JSX.Element;
+export declare function SidebarLayout({ sidebar, children, className, ...props }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/SidebarLayout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarLayout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAalF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarLayout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtE,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACvE;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAS5F"}

package/dist/components/SidebarLayout/index.js

@@ -1,11 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { cn } from '../utils.js';
 /**
  * Two-pane layout shell: a fixed sidebar column and a scrollable content area
  * with standard page padding.
  */
-export function SidebarLayout({ sidebar, children, className }) {
-    const outer = className
-        ? `hc-sidebar-layout flex min-h-0 flex-1 flex-col ${className}`
-        : 'hc-sidebar-layout flex min-h-0 flex-1 flex-col';
-    return (_jsx("div", { className: outer, children: _jsxs("div", { className: "hc-sidebar-layout-body flex min-h-0 flex-1", children: [sidebar, _jsx("div", { className: "hc-sidebar-layout-content flex-1 overflow-y-auto p-6 pt-0!", children: children })] }) }));
+export function SidebarLayout({ sidebar, children, className, ...props }) {
+    return (_jsx("div", { ...props, className: cn('hc-sidebar-layout flex min-h-0 flex-1 flex-col', className), children: _jsxs("div", { className: "hc-sidebar-layout-body flex min-h-0 flex-1", children: [sidebar, _jsx("div", { className: "hc-sidebar-layout-content flex-1 overflow-y-auto p-6 pt-0!", children: children })] }) }));
 }

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

@@ -1,6 +1,6 @@
-import type { JSX } from 'react';
+import type { ComponentPropsWithoutRef, JSX } from 'react';
 type SpinnerSize = 'sm' | 'md';
-interface Props {
+interface Props extends Omit<ComponentPropsWithoutRef<'span'>, 'children'> {
     /**
      * Visual size preset for the spinner SVG.
      */
@@ -9,18 +9,10 @@ interface Props {
      * Accessible label announced while the spinner is visible.
      */
     label?: string;
-    /**
-     * Additional Tailwind classes merged onto the wrapper element.
-     */
-    className?: string;
 }
 /**
  * Accent-colored spinning indicator shared by busy overlays, tabs, and modals.
- *
- * @param size - Visual size (`sm` or `md`).
- * @param label - Accessible status label; when set, exposes `role="status"`.
- * @param className - Extra classes on the wrapper span.
  */
-export declare function Spinner({ size, label, className }: Props): JSX.Element;
+export declare function Spinner({ size, label, className, ...props }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Spinner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/B,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EAAE,IAAW,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA4B7E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG3D,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/B,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IACxE;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAWD;;GAEG;AACH,wBAAgB,OAAO,CAAC,EAAE,IAAW,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA8BvF"}

package/dist/components/Spinner/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { cn } from '../utils.js';
 /**
  * Returns width and height classes for the spinner size preset.
  *
- * @param size - Spinner size preset.
  * @returns Tailwind dimension classes.
  */
 function sizeClasses(size) {
@@ -10,13 +10,7 @@ function sizeClasses(size) {
 }
 /**
  * Accent-colored spinning indicator shared by busy overlays, tabs, and modals.
- *
- * @param size - Visual size (`sm` or `md`).
- * @param label - Accessible status label; when set, exposes `role="status"`.
- * @param className - Extra classes on the wrapper span.
  */
-export function Spinner({ size = 'md', label, className }) {
-    const wrapperBase = 'hc-spinner inline-flex items-center justify-center';
-    const wrapperClasses = className ? `${wrapperBase} ${className}` : wrapperBase;
-    return (_jsx("span", { className: wrapperClasses, role: label ? 'status' : undefined, "aria-label": label, children: _jsxs("svg", { className: `${sizeClasses(size)} hc-spinner-icon animate-spin text-accent`, viewBox: "0 0 24 24", fill: "none", "aria-hidden": label ? true : undefined, children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) }));
+export function Spinner({ size = 'md', label, className, ...props }) {
+    return (_jsx("span", { ...props, className: cn('hc-spinner inline-flex items-center justify-center', className), role: label ? 'status' : undefined, "aria-label": label, children: _jsxs("svg", { className: cn('hc-spinner-icon animate-spin text-accent', sizeClasses(size)), viewBox: "0 0 24 24", fill: "none", "aria-hidden": label ? true : undefined, children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) }));
 }

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

@@ -1,5 +1,5 @@
-import type { JSX, ReactNode } from 'react';
-interface Props {
+import type { ComponentPropsWithoutRef, JSX, ReactNode } from 'react';
+interface Props extends Omit<ComponentPropsWithoutRef<'p'>, 'children'> {
     /**
      * Status or helper text content.
      */
@@ -8,22 +8,10 @@ interface Props {
      * When true, exposes the message as a live region for assistive technologies.
      */
     live?: boolean;
-    /**
-     * Optional element id for `aria-describedby` linkage.
-     */
-    id?: string;
-    /**
-     * Additional Tailwind classes merged onto the status paragraph.
-     */
-    className?: string;
 }
 /**
  * Muted helper or progress text with optional polite live-region semantics.
- *
- * @param children - Status message content.
- * @param live - Whether to set `role="status"` and `aria-live="polite"`.
- * @param className - Extra classes appended after the preset.
  */
-export declare function StatusMessage({ children, live, id, className }: Props): JSX.Element;
+export declare function StatusMessage({ children, live, className, ...props }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/StatusMessage/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StatusMessage/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,IAAW,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAc1F"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StatusMessage/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtE,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC;IACrE;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,IAAW,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAWhG"}

package/dist/components/StatusMessage/index.js

@@ -1,13 +1,8 @@
 import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { cn } from '../utils.js';
 /**
  * Muted helper or progress text with optional polite live-region semantics.
- *
- * @param children - Status message content.
- * @param live - Whether to set `role="status"` and `aria-live="polite"`.
- * @param className - Extra classes appended after the preset.
  */
-export function StatusMessage({ children, live = true, id, className }) {
-    const base = 'hc-status-message text-[14px] text-muted';
-    const classes = className ? `${base} ${className}` : base;
-    return (_jsx("p", { id: id, className: classes, role: live ? 'status' : undefined, "aria-live": live ? 'polite' : undefined, children: children }));
+export function StatusMessage({ children, live = true, className, ...props }) {
+    return (_jsx("p", { ...props, className: cn('hc-status-message text-[14px] text-muted', className), role: live ? 'status' : undefined, "aria-live": live ? 'polite' : undefined, children: children }));
 }

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

@@ -1,5 +1,5 @@
-import type { JSX } from 'react';
-interface Props {
+import type { ComponentPropsWithoutRef, JSX, MouseEvent } from 'react';
+interface Props extends Omit<ComponentPropsWithoutRef<'button'>, 'children' | 'aria-label'> {
     /**
      * Accessible name for the close control, typically including the tab title.
      */
@@ -7,25 +7,15 @@ interface Props {
     /**
      * Called when the user activates the close button.
      */
-    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
     /**
      * Optional tooltip label; defaults to "Close tab".
      */
     title?: string;
-    /**
-     * Tab order index for roving-tablist layouts. Pass `0` on the active tab and
-     * `-1` on inactive tabs so the tab label receives focus before the close control.
-     */
-    tabIndex?: number;
 }
 /**
  * Close control for document-style tabs in the request editor and AI chat.
- *
- * @param ariaLabel - Accessible name describing which tab closes.
- * @param onClick - Click handler; callers should stop propagation when needed.
- * @param title - Optional native tooltip text.
- * @param tabIndex - Tab order index; use with roving tabindex on the tab label.
  */
-export declare function TabCloseButton({ ariaLabel, onClick, title, tabIndex }: Props): JSX.Element;
+export declare function TabCloseButton({ ariaLabel, onClick, title, tabIndex, className, ...props }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/TabCloseButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TabCloseButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIjC,UAAU,KAAK;IACb;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE9D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,OAAO,EACP,KAAmB,EACnB,QAAQ,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAarB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TabCloseButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAIvE,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACzF;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAExD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,OAAO,EACP,KAAmB,EACnB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAiBrB"}