@harborclient/sdk 1.0.29 → 1.0.31

package/dist/components/FormDataEditor/index.js

@@ -3,9 +3,9 @@ import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { useMemo } from '@harborclient/sdk/react';
 import { Button } from '../Button/index.js';
 import { FaIcon } from '../FaIcon/index.js';
-import { Checkbox, Input, Select, fieldFrame } from '../forms/index.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader } from '../Table/index.js';
 import { VariableInput } from '../VariableInput/index.js';
+import { Checkbox, Input, Select, fieldFrame } from '../forms/index.js';
 import { emptyFormPart, fileBasename, withTrailingRow } from './utils.js';
 /**
  * Editable table of multipart form parts with text and file field types.
@@ -17,9 +17,6 @@ export function FormDataEditor({ parts, onChange, variables, onSelectFiles, onEd
     const rows = useMemo(() => withTrailingRow(parts), [parts]);
     /**
      * Updates a single row by index, auto-appending a blank row when the last key is filled.
-     *
-     * @param index - Row index to update.
-     * @param patch - Partial fields to merge into the row.
      */
     const updateRow = (index, patch) => {
         const next = rows.map((row, i) => (i === index ? { ...row, ...patch } : row));
@@ -31,8 +28,6 @@ export function FormDataEditor({ parts, onChange, variables, onSelectFiles, onEd
     };
     /**
      * Removes a row, keeping at least one empty row.
-     *
-     * @param index - Row index to remove.
      */
     const removeRow = (index) => {
         if (rows.length === 1) {
@@ -43,8 +38,6 @@ export function FormDataEditor({ parts, onChange, variables, onSelectFiles, onEd
     };
     /**
      * Opens the host file picker and merges selected paths into a file row.
-     *
-     * @param index - Row index to attach files to.
      */
     const chooseFiles = async (index) => {
         const selected = await onSelectFiles();
@@ -62,9 +55,6 @@ export function FormDataEditor({ parts, onChange, variables, onSelectFiles, onEd
     };
     /**
      * Removes one file path from a file row.
-     *
-     * @param index - Row index containing the file.
-     * @param filePath - Absolute path to remove.
      */
     const removeFile = (index, filePath) => {
         const currentFiles = rows[index]?.files ?? [];
@@ -77,5 +67,5 @@ export function FormDataEditor({ parts, onChange, variables, onSelectFiles, onEd
                                         value: type === 'text' ? row.value : '',
                                         files: type === 'file' ? row.files : []
                                     });
-                                }, children: [_jsx("option", { value: "text", children: "Text" }), _jsx("option", { value: "file", children: "File" })] }) }), _jsx(TableCell, { className: "hc-form-data-editor-cell", children: row.type === 'text' ? (_jsx(VariableInput, { wrapperClassName: `${fieldFrame} w-full`, className: "app-no-drag", value: row.value, onChange: (value) => updateRow(index, { value }), variables: variables, placeholder: "value", "aria-label": `Value, row ${index + 1}`, onEditVariable: onEditVariable })) : (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Button, { type: "button", variant: "secondary", className: "self-start px-2 py-0.5 text-[14px]", onClick: () => void chooseFiles(index), children: "Choose files" }), row.files.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1", children: row.files.map((filePath) => (_jsxs("span", { className: "inline-flex max-w-full items-center gap-1 rounded-md border border-separator bg-control px-1.5 py-0.5 text-[14px] text-text", title: filePath, "aria-label": filePath, children: [_jsx("span", { className: "truncate", children: fileBasename(filePath) }), _jsx("button", { type: "button", className: "inline-flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent text-muted hover:bg-selection hover:text-text app-no-drag", onClick: () => removeFile(index, filePath), title: `Remove file ${fileBasename(filePath)}`, "aria-label": `Remove file ${fileBasename(filePath)}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3 w-3" }) })] }, filePath))) }))] })) }), _jsx(TableCell, { className: "hc-form-data-editor-cell w-7 p-1 text-center", children: _jsx(Button, { type: "button", variant: "iconDanger", onClick: () => removeRow(index), title: "Remove", "aria-label": `Remove row ${index + 1}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }) })] }, index))) })] }));
+                                }, children: [_jsx("option", { value: "text", children: "Text" }), _jsx("option", { value: "file", children: "File" })] }) }), _jsx(TableCell, { className: "hc-form-data-editor-cell", children: row.type === 'text' ? (_jsx(VariableInput, { wrapperClassName: `${fieldFrame} w-full`, className: "app-no-drag", value: row.value, onChange: (value) => updateRow(index, { value }), variables: variables, placeholder: "value", "aria-label": `Value, row ${index + 1}`, onEditVariable: onEditVariable })) : (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Button, { type: "button", variant: "secondary", className: "self-start px-2 py-0.5 text-[14px]", onClick: () => void chooseFiles(index), children: "Choose files" }), row.files.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1", children: row.files.map((filePath) => (_jsxs("span", { className: "inline-flex max-w-full items-center gap-1 rounded-md border border-separator bg-control px-1.5 py-0.5 text-[14px] text-text", title: filePath, "aria-label": filePath, children: [_jsx("span", { className: "truncate", children: fileBasename(filePath) }), _jsx("button", { type: "button", className: "app-no-drag inline-flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent text-muted hover:bg-selection hover:text-text", onClick: () => removeFile(index, filePath), title: `Remove file ${fileBasename(filePath)}`, "aria-label": `Remove file ${fileBasename(filePath)}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3 w-3" }) })] }, filePath))) }))] })) }), _jsx(TableCell, { className: "hc-form-data-editor-cell w-7 p-1 text-center", children: _jsx(Button, { type: "button", variant: "iconDanger", onClick: () => removeRow(index), title: "Remove", "aria-label": `Remove row ${index + 1}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }) })] }, index))) })] }));
 }

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

@@ -1,4 +1,4 @@
-import type { JSX, ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, JSX, ReactNode } from 'react';
 /**
  * Layout preset for label and control placement within a form group.
  */
@@ -7,7 +7,7 @@ export type FormGroupLayout = 'stacked' | 'checkbox' | 'inline' | 'radio' | 'che
  * Label color tone for form group headings.
  */
 export type FormGroupLabelTone = 'default' | 'muted';
-interface Props {
+interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'className'> {
     /**
      * Visible label text, or screen-reader-only text when `srOnly` is set.
      */
@@ -62,20 +62,7 @@ interface Props {
  * Reusable form field wrapper that pairs a label with one or more controls.
  * Supports stacked fields, checkboxes, inline rows, radio options, and
  * adjacent checkbox rows used in list pickers.
- *
- * @param label - Field label text.
- * @param children - Input, select, or composite control content.
- * @param htmlFor - ID of the primary associated control.
- * @param description - Optional helper text below the label and above the control.
- * @param error - Optional validation error below the control.
- * @param errorId - Explicit error element id for `aria-describedby`.
- * @param descriptionId - Explicit description element id for `aria-describedby`.
- * @param layout - Label/control placement preset.
- * @param labelTone - Label color style.
- * @param srOnly - Hide label visually for screen-reader-only labels.
- * @param className - Extra classes on the outer wrapper.
- * @param labelClassName - Extra classes on the label element.
  */
-export declare function FormGroup({ label, children, htmlFor, description, error, errorId, descriptionId, layout, labelTone, srOnly, className, labelClassName }: Props): JSX.Element;
+export declare function FormGroup({ label, children, htmlFor, description, error, errorId, descriptionId, layout, labelTone, srOnly, className, labelClassName, ...props }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormGroup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5C;;GAEG;AACH,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,UAAU,GACV,QAAQ,GACR,OAAO,GACP,kBAAkB,GAClB,YAAY,CAAC;AAEjB;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,OAAO,CAAC;AAErD,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAE/B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAqBD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,EACX,KAAK,EACL,OAAO,EACP,aAAa,EACb,MAAkB,EAClB,SAAqB,EACrB,MAAc,EACd,SAAS,EACT,cAAc,EACf,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAoJrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormGroup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItE;;GAEG;AACH,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,UAAU,GACV,QAAQ,GACR,OAAO,GACP,kBAAkB,GAClB,YAAY,CAAC;AAEjB;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,OAAO,CAAC;AAErD,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACrF;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAE/B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAkBD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,EACX,KAAK,EACL,OAAO,EACP,aAAa,EACb,MAAkB,EAClB,SAAqB,EACrB,MAAc,EACd,SAAS,EACT,cAAc,EACd,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAoJrB"}

package/dist/components/FormGroup/index.js

@@ -5,9 +5,6 @@ import { enhanceControl } from '../enhanceControl.js';
 /**
  * Returns Tailwind classes for the label text based on tone and visibility.
  *
- * @param tone - Label color preset.
- * @param srOnly - Whether the label is visually hidden.
- * @param inline - Whether the label sits beside the control in a row.
  * @returns Class string for the label element.
  */
 function labelClasses(tone, srOnly, inline) {
@@ -24,21 +21,8 @@ function labelClasses(tone, srOnly, inline) {
  * Reusable form field wrapper that pairs a label with one or more controls.
  * Supports stacked fields, checkboxes, inline rows, radio options, and
  * adjacent checkbox rows used in list pickers.
- *
- * @param label - Field label text.
- * @param children - Input, select, or composite control content.
- * @param htmlFor - ID of the primary associated control.
- * @param description - Optional helper text below the label and above the control.
- * @param error - Optional validation error below the control.
- * @param errorId - Explicit error element id for `aria-describedby`.
- * @param descriptionId - Explicit description element id for `aria-describedby`.
- * @param layout - Label/control placement preset.
- * @param labelTone - Label color style.
- * @param srOnly - Hide label visually for screen-reader-only labels.
- * @param className - Extra classes on the outer wrapper.
- * @param labelClassName - Extra classes on the label element.
  */
-export function FormGroup({ label, children, htmlFor, description, error, errorId, descriptionId, layout = 'stacked', labelTone = 'default', srOnly = false, className, labelClassName }) {
+export function FormGroup({ label, children, htmlFor, description, error, errorId, descriptionId, layout = 'stacked', labelTone = 'default', srOnly = false, className, labelClassName, ...props }) {
     const generatedId = useId();
     const controlId = htmlFor ?? generatedId;
     const extra = className ?? '';
@@ -56,7 +40,7 @@ export function FormGroup({ label, children, htmlFor, description, error, errorI
             ? `hc-form-group-label ${labelClassName}`
             : 'hc-form-group-label min-w-0 flex-1 text-[16px] text-text';
         const linkedChildren = enhanceControl(children, { id: controlId });
-        return (_jsxs("div", { className: wrapperClasses, children: [linkedChildren, _jsx("label", { htmlFor: controlId, className: adjacentLabelClasses, children: label })] }));
+        return (_jsxs("div", { ...props, className: wrapperClasses, children: [linkedChildren, _jsx("label", { htmlFor: controlId, className: adjacentLabelClasses, children: label })] }));
     }
     if (layout === 'radio') {
         const wrapperClasses = extra
@@ -82,7 +66,7 @@ export function FormGroup({ label, children, htmlFor, description, error, errorI
         const wrapperClasses = extra
             ? `hc-form-group flex flex-col gap-1 p-4 border border-separator rounded-md ${extra}`
             : 'hc-form-group flex flex-col gap-1 p-4 border border-separator rounded-md';
-        return (_jsxs("div", { className: wrapperClasses, children: [_jsxs("label", { htmlFor: controlId, className: "hc-form-group-label flex flex-col gap-1", children: [_jsxs("span", { className: "hc-form-group-label-row flex items-center gap-2", children: [linkedChildren, _jsx("span", { className: labelClasses(labelTone, srOnly, false), children: label })] }), resolvedDescriptionId ? (_jsx("p", { id: resolvedDescriptionId, className: "hc-form-group-description m-0 pl-[26px] text-[14px] text-muted", children: description })) : null] }), resolvedErrorId ? (_jsx(FieldError, { id: resolvedErrorId, spacing: "field", children: error })) : null] }));
+        return (_jsxs("div", { ...props, className: wrapperClasses, children: [_jsxs("label", { htmlFor: controlId, className: "hc-form-group-label flex flex-col gap-1", children: [_jsxs("span", { className: "hc-form-group-label-row flex items-center gap-2", children: [linkedChildren, _jsx("span", { className: labelClasses(labelTone, srOnly, false), children: label })] }), resolvedDescriptionId ? (_jsx("p", { id: resolvedDescriptionId, className: "hc-form-group-description m-0 pl-[26px] text-[14px] text-muted", children: description })) : null] }), resolvedErrorId ? (_jsx(FieldError, { id: resolvedErrorId, spacing: "field", children: error })) : null] }));
     }
     if (layout === 'inline') {
         const wrapperClasses = extra
@@ -107,5 +91,5 @@ export function FormGroup({ label, children, htmlFor, description, error, errorI
     const wrapperClasses = extra
         ? `hc-form-group flex flex-col gap-1 p-4 text-[16px] border border-separator rounded-md ${extra}`
         : 'hc-form-group flex flex-col gap-1 p-4 text-[16px] border border-separator rounded-md';
-    return (_jsxs("div", { className: wrapperClasses, children: [_jsxs("label", { htmlFor: htmlFor, className: "hc-form-group-label flex flex-col gap-1", children: [_jsx("span", { className: labelClasses(labelTone, srOnly, false), children: label }), resolvedDescriptionId ? (_jsx("p", { id: resolvedDescriptionId, className: "hc-form-group-description m-0 text-[14px] text-muted", children: description })) : null, control] }), resolvedErrorId ? (_jsx(FieldError, { id: resolvedErrorId, spacing: "field", children: error })) : null] }));
+    return (_jsxs("div", { ...props, className: wrapperClasses, children: [_jsxs("label", { htmlFor: htmlFor, className: "hc-form-group-label flex flex-col gap-1", children: [_jsx("span", { className: labelClasses(labelTone, srOnly, false), children: label }), resolvedDescriptionId ? (_jsx("p", { id: resolvedDescriptionId, className: "hc-form-group-description m-0 text-[14px] text-muted", children: description })) : null, control] }), resolvedErrorId ? (_jsx(FieldError, { id: resolvedErrorId, spacing: "field", children: error })) : null] }));
 }

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

@@ -8,8 +8,6 @@ export interface Props {
     rows: KeyValue[];
     /**
      * Called when rows are added, updated, or removed.
-     *
-     * @param rows - Updated row list.
      */
     onChange: (rows: KeyValue[]) => void;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/KeyValueEditor/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAEzD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAOnE,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,IAAI,EAAE,QAAQ,EAAE,CAAC;IAEjB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAErC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAE/B;;OAEG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,QAAQ,EACR,cAAsB,EACtB,gBAA0B,EAC1B,SAAS,EACT,cAAc,EACd,SAAS,EACT,WAAW,EACZ,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA2GrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/KeyValueEditor/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAEzD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAOnE,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,IAAI,EAAE,QAAQ,EAAE,CAAC;IAEjB;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAErC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAE/B;;OAEG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,QAAQ,EACR,cAAsB,EACtB,gBAA0B,EAC1B,SAAS,EACT,cAAc,EACd,SAAS,EACT,WAAW,EACZ,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAoGrB"}

package/dist/components/KeyValueEditor/index.js

@@ -3,18 +3,15 @@ import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { AutocompleteInput } from '../Autocomplete/index.js';
 import { Button } from '../Button/index.js';
 import { FaIcon } from '../FaIcon/index.js';
-import { Checkbox, fieldFrame } from '../forms/index.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader } from '../Table/index.js';
 import { VariableInput } from '../VariableInput/index.js';
+import { Checkbox, fieldFrame } from '../forms/index.js';
 /**
  * Editable table of key-value rows with enable toggles for headers and params.
  */
 export function KeyValueEditor({ rows, onChange, placeholderKey = 'Key', placeholderValue = 'Value', variables, onEditVariable, keySource, valueSource }) {
     /**
      * Updates a single row by index.
-     *
-     * @param index - Row index to update.
-     * @param patch - Partial fields to merge into the row.
      */
     const updateRow = (index, patch) => {
         const next = rows.map((row, i) => (i === index ? { ...row, ...patch } : row));
@@ -26,8 +23,6 @@ export function KeyValueEditor({ rows, onChange, placeholderKey = 'Key', placeho
     };
     /**
      * Removes a row, keeping at least one empty row.
-     *
-     * @param index - Row index to remove.
      */
     const removeRow = (index) => {
         if (rows.length === 1) {
@@ -38,8 +33,6 @@ export function KeyValueEditor({ rows, onChange, placeholderKey = 'Key', placeho
     };
     /**
      * Normalizes a key-value row so editors never receive undefined fields.
-     *
-     * @param row - Raw row from host state or imports.
      */
     const normalizeRow = (row) => ({
         key: row.key ?? '',

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

@@ -1,20 +1,18 @@
-import type { JSX } from 'react';
+import type { ComponentPropsWithoutRef, JSX } from 'react';
 import type { HttpMethod } from '../../types.js';
-interface Props {
+interface Props extends Omit<ComponentPropsWithoutRef<'select'>, 'value' | 'onChange' | 'children'> {
     /**
      * Currently selected HTTP method.
      */
     value: HttpMethod;
     /**
      * Called when the user picks a different method.
-     *
-     * @param method - Newly selected HTTP method.
      */
     onChange: (method: HttpMethod) => void;
 }
 /**
  * Dropdown for selecting an HTTP request method.
  */
-export declare function MethodSelect({ value, onChange }: Props): JSX.Element;
+export declare function MethodSelect({ value, onChange, className, ...props }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MethodSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAMjD,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,UAAU,CAAC;IAElB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACxC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAgBpE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MethodSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAOjD,UAAU,KAAM,SAAQ,IAAI,CAC1B,wBAAwB,CAAC,QAAQ,CAAC,EAClC,OAAO,GAAG,UAAU,GAAG,UAAU,CAClC;IACC;;OAEG;IACH,KAAK,EAAE,UAAU,CAAC;IAElB;;OAEG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACxC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAqBzF"}

package/dist/components/MethodSelect/index.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
 import { methodColorClass } from '../../ui/tokens.js';
 import { Select } from '../forms/index.js';
+import { cn } from '../utils.js';
 const METHODS = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'];
 /**
  * Dropdown for selecting an HTTP request method.
  */
-export function MethodSelect({ value, onChange }) {
-    return (_jsx(Select, { variant: "plain", className: `hc-method-select w-[100px] shrink-0 cursor-pointer appearance-none border-none bg-transparent px-2 py-1.5 text-[14px] leading-none font-normal focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent app-no-drag ${methodColorClass(value)}`, value: value, "aria-label": "HTTP method", onChange: (e) => onChange(e.target.value), children: METHODS.map((method) => (_jsx("option", { value: method, className: methodColorClass(method), children: method }, method))) }));
+export function MethodSelect({ value, onChange, className, ...props }) {
+    return (_jsx(Select, { ...props, variant: "plain", className: cn('hc-method-select app-no-drag w-[100px] shrink-0 cursor-pointer appearance-none border-none bg-transparent px-2 py-1.5 text-[14px] leading-none font-normal focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent', methodColorClass(value), className), value: value, "aria-label": "HTTP method", onChange: (e) => onChange(e.target.value), children: METHODS.map((method) => (_jsx("option", { value: method, className: methodColorClass(method), children: method }, method))) }));
 }

package/dist/components/Modal/ModalFooter.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'> {
     /**
      * Action buttons rendered in a right-aligned row.
      */
@@ -8,18 +8,10 @@ interface Props {
      * When true, adds top margin before the action row (common in modal bodies).
      */
     spaced?: boolean;
-    /**
-     * Additional Tailwind classes merged onto the footer row.
-     */
-    className?: string;
 }
 /**
  * Right-aligned action button row for modal bodies and overlay footers.
- *
- * @param children - Cancel, confirm, and other action controls.
- * @param spaced - Whether to add `mt-4` above the button row.
- * @param className - Extra classes appended after the layout preset.
  */
-export declare function ModalFooter({ children, spaced, className }: Props): JSX.Element;
+export declare function ModalFooter({ children, spaced, className, ...props }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=ModalFooter.d.ts.map

package/dist/components/Modal/ModalFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalFooter.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalFooter.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,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,MAAc,EAAE,SAAS,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAOvF"}
+{"version":3,"file":"ModalFooter.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalFooter.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,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,MAAc,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CASjG"}

package/dist/components/Modal/ModalFooter.js

@@ -1,15 +1,8 @@
 import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { cn } from '../utils.js';
 /**
  * Right-aligned action button row for modal bodies and overlay footers.
- *
- * @param children - Cancel, confirm, and other action controls.
- * @param spaced - Whether to add `mt-4` above the button row.
- * @param className - Extra classes appended after the layout preset.
  */
-export function ModalFooter({ children, spaced = false, className }) {
-    const base = spaced
-        ? 'hc-modal-footer mt-4 flex justify-end gap-2'
-        : 'hc-modal-footer flex justify-end gap-2';
-    const classes = className ? `${base} ${className}` : base;
-    return _jsx("div", { className: classes, children: children });
+export function ModalFooter({ children, spaced = false, className, ...props }) {
+    return (_jsx("div", { ...props, className: cn('hc-modal-footer flex justify-end gap-2', spaced && 'mt-4', className), children: children }));
 }

package/dist/components/Modal/ModalFormLayout.d.ts

@@ -20,11 +20,6 @@ interface Props {
 /**
  * Stacks modal body content, an optional error block, and a trailing action footer
  * using the shared spacing conventions used across Team Hub and settings dialogs.
- *
- * @param children - Main modal content.
- * @param error - Optional inline error rendered before actions.
- * @param actions - Footer buttons wrapped by {@link ModalFooter}.
- * @param actionsSpaced - Whether the footer row receives `mt-4`.
  */
 export declare function ModalFormLayout({ children, error, actions, actionsSpaced }: Props): JSX.Element;
 export {};

package/dist/components/Modal/ModalFormLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalFormLayout.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalFormLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5C,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,OAAO,EACP,aAAoB,EACrB,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAQrB"}
+{"version":3,"file":"ModalFormLayout.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalFormLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5C,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,OAAO,EACP,aAAoB,EACrB,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAQrB"}

package/dist/components/Modal/ModalFormLayout.js

@@ -4,11 +4,6 @@ import { ModalFooter } from './ModalFooter.js';
 /**
  * Stacks modal body content, an optional error block, and a trailing action footer
  * using the shared spacing conventions used across Team Hub and settings dialogs.
- *
- * @param children - Main modal content.
- * @param error - Optional inline error rendered before actions.
- * @param actions - Footer buttons wrapped by {@link ModalFooter}.
- * @param actionsSpaced - Whether the footer row receives `mt-4`.
  */
 export function ModalFormLayout({ children, error, actions, actionsSpaced = true }) {
     return (_jsxs(_Fragment, { children: [children, error != null && error !== '' ? _jsx(FieldError, { spacing: "modal", children: error }) : null, actions ? _jsx(ModalFooter, { spaced: actionsSpaced, children: actions }) : null] }));

package/dist/components/Modal/ModalHeader.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' | 'title'> {
     /**
      * Id referenced by the dialog's `aria-labelledby`.
      */
@@ -33,6 +33,6 @@ interface Props {
  * Modal header row with a bordered bottom edge, title block on the left,
  * optional actions, and a close icon on the right.
  */
-export declare function ModalHeader({ titleId, title, description, descriptionId, headerActions, closeDisabled, onClose }: Props): JSX.Element;
+export declare function ModalHeader({ titleId, title, description, descriptionId, headerActions, closeDisabled, onClose, className, ...props }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=ModalHeader.d.ts.map

package/dist/components/Modal/ModalHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK5C,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,WAAW,EACX,aAAa,EACb,aAAa,EACb,aAAqB,EACrB,OAAO,EACR,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkCrB"}
+{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtE,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACjF;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,WAAW,EACX,aAAa,EACb,aAAa,EACb,aAAqB,EACrB,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAwCrB"}

package/dist/components/Modal/ModalHeader.js

@@ -2,10 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
 import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { Button } from '../Button/index.js';
 import { FaIcon } from '../FaIcon/index.js';
+import { cn } from '../utils.js';
 /**
  * Modal header row with a bordered bottom edge, title block on the left,
  * optional actions, and a close icon on the right.
  */
-export function ModalHeader({ titleId, title, description, descriptionId, headerActions, closeDisabled = false, onClose }) {
-    return (_jsxs("div", { className: "hc-modal-header flex flex-wrap items-center gap-2 border-b border-separator px-4 py-4", children: [_jsxs("div", { className: "hc-modal-header-content min-w-0 flex-1", children: [_jsx("h2", { id: titleId, className: "hc-modal-header-title m-0 flex flex-wrap items-center gap-2 text-[17px] font-semibold text-text", children: title }), description ? (_jsx("p", { id: descriptionId, className: "hc-modal-header-description m-0 mt-1 text-[14px] text-muted", children: description })) : null] }), _jsxs("div", { className: "hc-modal-header-actions flex flex-wrap items-center gap-2", children: [headerActions, _jsx(Button, { type: "button", variant: "icon", className: "hc-modal-header-close shrink-0", "aria-label": "Close", disabled: closeDisabled, onClick: onClose, children: _jsx(FaIcon, { icon: faXmark, className: "h-4 w-4" }) })] })] }));
+export function ModalHeader({ titleId, title, description, descriptionId, headerActions, closeDisabled = false, onClose, className, ...props }) {
+    return (_jsxs("div", { ...props, className: cn('hc-modal-header flex flex-wrap items-center gap-2 border-b border-separator px-4 py-4', className), children: [_jsxs("div", { className: "hc-modal-header-content min-w-0 flex-1", children: [_jsx("h2", { id: titleId, className: "hc-modal-header-title m-0 flex flex-wrap items-center gap-2 text-[17px] font-semibold text-text", children: title }), description ? (_jsx("p", { id: descriptionId, className: "hc-modal-header-description m-0 mt-1 text-[14px] text-muted", children: description })) : null] }), _jsxs("div", { className: "hc-modal-header-actions flex flex-wrap items-center gap-2", children: [headerActions, _jsx(Button, { type: "button", variant: "icon", className: "hc-modal-header-close shrink-0", "aria-label": "Close", disabled: closeDisabled, onClick: onClose, children: _jsx(FaIcon, { icon: faXmark, className: "h-4 w-4" }) })] })] }));
 }

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

@@ -1,7 +1,7 @@
-import type { JSX, ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, JSX, ReactNode } from 'react';
 export { ModalFooter } from './ModalFooter.js';
 export { ModalFormLayout } from './ModalFormLayout.js';
-interface BaseProps {
+interface BaseProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'className' | 'title'> {
     /**
      * Called when the backdrop is clicked or Escape is pressed.
      */
@@ -55,5 +55,5 @@ type Props = BaseProps & ({
 /**
  * Shared modal backdrop and panel wrapper used by all application dialogs.
  */
-export declare function Modal({ onClose, className, overlayClassName, disableEscape, title, description, headerActions, closeDisabled, labelledBy, label, children }: Props): JSX.Element;
+export declare function Modal({ onClose, className, overlayClassName, disableEscape, title, description, headerActions, closeDisabled, labelledBy, label, children, ...props }: Props): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,UAAU,SAAS;IACjB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,KAAK,KAAK,GAAG,SAAS,GACpB,CACI;IACE;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,GACD;IACE,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CACJ,CAAC;AAEJ;;GAEG;AACH,wBAAgB,KAAK,CAAC,EACpB,OAAO,EACP,SAAkB,EAClB,gBAAgB,EAChB,aAAqB,EACrB,KAAK,EACL,WAAW,EACX,aAAa,EACb,aAAqB,EACrB,UAAU,EACV,KAAK,EACL,QAAQ,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAyErB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,UAAU,SAAU,SAAQ,IAAI,CAC9B,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,WAAW,GAAG,OAAO,CACnC;IACC;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,KAAK,KAAK,GAAG,SAAS,GACpB,CACI;IACE;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,GACD;IACE,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CACJ,CAAC;AAEJ;;GAEG;AACH,wBAAgB,KAAK,CAAC,EACpB,OAAO,EACP,SAAkB,EAClB,gBAAgB,EAChB,aAAqB,EACrB,KAAK,EACL,WAAW,EACX,aAAa,EACb,aAAqB,EACrB,UAAU,EACV,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA6ErB"}

package/dist/components/Modal/index.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
 import { useEffect, useRef } from '@harborclient/sdk/react';
 import { useDialogFocus } from '../useDialogFocus.js';
+import { cn } from '../utils.js';
 import { ModalHeader } from './ModalHeader.js';
 export { ModalFooter } from './ModalFooter.js';
 export { ModalFormLayout } from './ModalFormLayout.js';
 /**
  * Shared modal backdrop and panel wrapper used by all application dialogs.
  */
-export function Modal({ onClose, className = 'w-96', overlayClassName, disableEscape = false, title, description, headerActions, closeDisabled = false, labelledBy, label, children }) {
+export function Modal({ onClose, className = 'w-96', overlayClassName, disableEscape = false, title, description, headerActions, closeDisabled = false, labelledBy, label, children, ...props }) {
     const panelRef = useRef(null);
     const overlayRef = useRef(null);
     useDialogFocus(overlayRef);
@@ -19,8 +20,6 @@ export function Modal({ onClose, className = 'w-96', overlayClassName, disableEs
             return;
         /**
          * Dismisses the dialog on Escape key press.
-         *
-         * @param event - Document keydown event.
          */
         const handleKeyDown = (event) => {
             if (event.key === 'Escape') {
@@ -30,10 +29,10 @@ export function Modal({ onClose, className = 'w-96', overlayClassName, disableEs
         document.addEventListener('keydown', handleKeyDown);
         return () => document.removeEventListener('keydown', handleKeyDown);
     }, [disableEscape, onClose]);
-    const overlayClass = `hc-modal fixed inset-0 flex items-center justify-center bg-black/40 ${overlayClassName ?? 'z-50'}`;
+    const overlayClass = cn('hc-modal fixed inset-0 flex items-center justify-center bg-black/40', overlayClassName ?? 'z-50');
     const panelClass = title
-        ? `${className} flex max-h-[85vh] flex-col overflow-hidden rounded-lg border border-separator bg-surface shadow-xl`
-        : `${className} rounded-lg border border-separator bg-surface p-4 shadow-xl`;
+        ? cn(className, 'flex max-h-[85vh] flex-col overflow-hidden rounded-lg border border-separator bg-surface shadow-xl')
+        : cn(className, 'rounded-lg border border-separator bg-surface p-4 shadow-xl');
     const descriptionId = description && labelledBy ? `${labelledBy}-description` : undefined;
-    return (_jsxs("div", { ref: overlayRef, className: overlayClass, children: [_jsx("div", { ref: panelRef, role: "dialog", "aria-modal": "true", "aria-labelledby": labelledBy, "aria-describedby": descriptionId, "aria-label": label, className: `hc-modal-panel relative z-10 ${panelClass}`, onClick: (event) => event.stopPropagation(), children: title && labelledBy ? (_jsxs(_Fragment, { children: [_jsx(ModalHeader, { titleId: labelledBy, title: title, description: description, descriptionId: descriptionId, headerActions: headerActions, closeDisabled: closeDisabled, onClose: onClose }), _jsx("div", { className: "hc-modal-body flex-1 overflow-y-auto p-4", children: children })] })) : (children) }), _jsx("button", { type: "button", tabIndex: -1, className: "hc-modal-backdrop absolute inset-0 z-0 cursor-default border-none bg-transparent p-0", "aria-label": "Close dialog", onClick: onClose })] }));
+    return (_jsxs("div", { ref: overlayRef, ...props, className: overlayClass, children: [_jsx("div", { ref: panelRef, role: "dialog", "aria-modal": "true", "aria-labelledby": labelledBy, "aria-describedby": descriptionId, "aria-label": label, className: cn('hc-modal-panel relative z-10', panelClass), onClick: (event) => event.stopPropagation(), children: title && labelledBy ? (_jsxs(_Fragment, { children: [_jsx(ModalHeader, { titleId: labelledBy, title: title, description: description, descriptionId: descriptionId, headerActions: headerActions, closeDisabled: closeDisabled, onClose: onClose }), _jsx("div", { className: "hc-modal-body flex-1 overflow-y-auto p-4", children: children })] })) : (children) }), _jsx("button", { type: "button", tabIndex: -1, className: "hc-modal-backdrop absolute inset-0 z-0 cursor-default border-none bg-transparent p-0", "aria-label": "Close dialog", onClick: onClose })] }));
 }

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

@@ -1,5 +1,5 @@
-import type { JSX } from 'react';
-interface Props {
+import type { ComponentPropsWithoutRef, JSX } from 'react';
+interface Props extends Omit<ComponentPropsWithoutRef<'button'>, 'children' | 'aria-label' | 'onClick' | 'aria-labelledby'> {
     /**
      * Accessible name for the close control.
      */
@@ -8,18 +8,10 @@ interface Props {
      * Called when the user activates the close button.
      */
     onClose: () => void;
-    /**
-     * Additional Tailwind classes merged onto the button element.
-     */
-    className?: string;
 }
 /**
  * Always-visible overlay close icon used on full-page settings and plugin views.
- *
- * @param label - Accessible name; defaults to "Close".
- * @param onClose - Close handler.
- * @param className - Extra classes appended after the overlay preset.
  */
-export declare function OverlayCloseButton({ label, onClose, className }: Props): JSX.Element;
+export declare function OverlayCloseButton({ label, onClose, className, ...props }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/OverlayCloseButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAKjC,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,KAAe,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAU9F"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/OverlayCloseButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAK3D,UAAU,KAAM,SAAQ,IAAI,CAC1B,wBAAwB,CAAC,QAAQ,CAAC,EAClC,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,iBAAiB,CAC1D;IACC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAe,EACf,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAarB"}

package/dist/components/OverlayCloseButton/index.js

@@ -2,16 +2,10 @@ import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
 import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { Button } from '../Button/index.js';
 import { FaIcon } from '../FaIcon/index.js';
+import { cn } from '../utils.js';
 /**
  * Always-visible overlay close icon used on full-page settings and plugin views.
- *
- * @param label - Accessible name; defaults to "Close".
- * @param onClose - Close handler.
- * @param className - Extra classes appended after the overlay preset.
  */
-export function OverlayCloseButton({ label = 'Close', onClose, className }) {
-    const classes = className
-        ? `hc-overlay-close-button text-[28px] ${className}`
-        : 'hc-overlay-close-button text-[28px]';
-    return (_jsx(Button, { type: "button", variant: "icon", className: classes, "aria-label": label, onClick: onClose, children: _jsx(FaIcon, { icon: faXmark, className: "hc-overlay-close-button-icon h-4 w-4" }) }));
+export function OverlayCloseButton({ label = 'Close', onClose, className, ...props }) {
+    return (_jsx(Button, { ...props, type: "button", variant: "icon", className: cn('hc-overlay-close-button text-[28px]', className), "aria-label": label, onClick: onClose, children: _jsx(FaIcon, { icon: faXmark, className: "hc-overlay-close-button-icon h-4 w-4" }) }));
 }

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

@@ -1,6 +1,6 @@
 import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import type { JSX, ReactNode } from 'react';
-interface Props {
+import type { ComponentPropsWithoutRef, JSX, ReactNode } from 'react';
+interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'className'> {
     /**
      * Page heading rendered in the header row.
      */
@@ -41,6 +41,6 @@ interface Props {
  * footer. Use the default mode for self-contained overlay pages; set
  * `embedded` when the parent already provides scroll and padding.
  */
-export declare function Page({ title, description, icon, actions, footer, embedded, className, children }: Props): JSX.Element;
+export declare function Page({ title, description, icon, actions, footer, embedded, className, children, ...props }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Page/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAgB,EAChB,SAAS,EACT,QAAQ,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA+BrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Page/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItE,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACrF;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAgB,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA6BrB"}

package/dist/components/Page/index.js

@@ -1,18 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
 import { PageHeader } from '../PageHeader/index.js';
+import { cn } from '../utils.js';
 /**
  * Full-area page shell with a {@link PageHeader}, scrollable body, and optional
  * footer. Use the default mode for self-contained overlay pages; set
  * `embedded` when the parent already provides scroll and padding.
  */
-export function Page({ title, description, icon, actions, footer, embedded = false, className, children }) {
+export function Page({ title, description, icon, actions, footer, embedded = false, className, children, ...props }) {
     const header = (_jsx(PageHeader, { title: title, description: description, icon: icon, children: actions }));
     if (embedded) {
-        const outer = className ? `hc-page ${className}` : 'hc-page';
-        return (_jsxs("div", { className: outer, children: [header, children, footer] }));
+        return (_jsxs("div", { ...props, className: cn('hc-page', className), children: [header, children, footer] }));
     }
-    const outer = className
-        ? `hc-page flex min-h-0 flex-1 flex-col overflow-y-auto p-6 ${className}`
-        : 'hc-page flex min-h-0 flex-1 flex-col overflow-y-auto p-6';
-    return (_jsx("div", { className: outer, children: _jsxs("div", { className: "hc-page-inner mx-auto w-full", children: [header, children, footer] }) }));
+    return (_jsx("div", { ...props, className: cn('hc-page flex min-h-0 flex-1 flex-col overflow-y-auto p-6', className), children: _jsxs("div", { className: "hc-page-inner mx-auto w-full", children: [header, children, footer] }) }));
 }

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

@@ -1,6 +1,6 @@
 import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import type { JSX, ReactNode } from 'react';
-interface Props {
+import type { ComponentPropsWithoutRef, JSX, ReactNode } from 'react';
+interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
     /**
      * Page heading rendered as an `h2`.
      */
@@ -17,15 +17,11 @@ interface Props {
      * Action controls aligned to the right side of the header row.
      */
     children?: ReactNode;
-    /**
-     * Extra classes merged onto the outer header wrapper.
-     */
-    className?: string;
 }
 /**
  * Full-bleed page header with a bordered bottom edge, title block on the left,
  * and optional action controls on the right.
  */
-export declare function PageHeader({ title, description, icon, children, className }: Props): JSX.Element;
+export declare function PageHeader({ title, description, icon, children, className, ...props }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA6BhG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItE,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACvE;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA+BrB"}