@harborclient/sdk 0.6.6 → 0.6.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/FormDataEditor/index.d.ts.map +1 -1
- package/dist/components/FormDataEditor/index.js +2 -2
- package/dist/components/KeyValueEditor/index.d.ts.map +1 -1
- package/dist/components/KeyValueEditor/index.js +2 -2
- package/dist/components/SegmentedTabs/SegmentedTabPanel.d.ts +21 -0
- package/dist/components/SegmentedTabs/SegmentedTabPanel.d.ts.map +1 -0
- package/dist/components/SegmentedTabs/SegmentedTabPanel.js +15 -0
- package/dist/components/SegmentedTabs/SegmentedTabsContext.d.ts +24 -0
- package/dist/components/SegmentedTabs/SegmentedTabsContext.d.ts.map +1 -0
- package/dist/components/SegmentedTabs/SegmentedTabsContext.js +2 -0
- package/dist/components/SegmentedTabs/SegmentedTabsGroup.d.ts +28 -0
- package/dist/components/SegmentedTabs/SegmentedTabsGroup.d.ts.map +1 -0
- package/dist/components/SegmentedTabs/SegmentedTabsGroup.js +21 -0
- package/dist/components/SegmentedTabs/index.d.ts +5 -67
- package/dist/components/SegmentedTabs/index.d.ts.map +1 -1
- package/dist/components/SegmentedTabs/index.js +4 -33
- package/dist/components/SegmentedTabs/types.d.ts +24 -0
- package/dist/components/SegmentedTabs/types.d.ts.map +1 -0
- package/dist/components/SegmentedTabs/types.js +1 -0
- package/dist/components/VariableTable/index.d.ts.map +1 -1
- package/dist/components/VariableTable/index.js +2 -2
- package/dist/components/classes.js +1 -1
- package/dist/components/forms/Checkbox.d.ts +17 -0
- package/dist/components/forms/Checkbox.d.ts.map +1 -0
- package/dist/components/forms/Checkbox.js +9 -0
- package/dist/components/forms/classes.d.ts +4 -0
- package/dist/components/forms/classes.d.ts.map +1 -1
- package/dist/components/forms/classes.js +4 -0
- package/dist/components/forms/index.d.ts +2 -1
- package/dist/components/forms/index.d.ts.map +1 -1
- package/dist/components/forms/index.js +2 -1
- package/dist/components/index.d.ts +1 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormDataEditor/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,YAAY,EAAoB,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAQ/E,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,KAAK,EAAE,YAAY,EAAE,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,aAAa,EAAE,MAAM,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IAEvC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,EACb,cAAc,EACf,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormDataEditor/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,YAAY,EAAoB,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAQ/E,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,KAAK,EAAE,YAAY,EAAE,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,aAAa,EAAE,MAAM,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IAEvC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,EACb,cAAc,EACf,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAuLrB"}
|
|
@@ -3,7 +3,7 @@ import { faXmark } from '@fortawesome/free-solid-svg-icons';
|
|
|
3
3
|
import { useMemo } from '@harborclient/sdk/react';
|
|
4
4
|
import { Button } from '../Button/index.js';
|
|
5
5
|
import { FaIcon } from '../FaIcon/index.js';
|
|
6
|
-
import { Input, Select, fieldFrame } from '../forms/index.js';
|
|
6
|
+
import { Checkbox, Input, Select, fieldFrame } from '../forms/index.js';
|
|
7
7
|
import { Table, TableBody, TableCell, TableHead, TableHeader } from '../Table/index.js';
|
|
8
8
|
import { VariableInput } from '../VariableInput/index.js';
|
|
9
9
|
import { emptyFormPart, fileBasename, withTrailingRow } from './utils.js';
|
|
@@ -70,7 +70,7 @@ export function FormDataEditor({ parts, onChange, variables, onSelectFiles, onEd
|
|
|
70
70
|
const currentFiles = rows[index]?.files ?? [];
|
|
71
71
|
updateRow(index, { files: currentFiles.filter((file) => file !== filePath) });
|
|
72
72
|
};
|
|
73
|
-
return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs("tr", { children: [_jsx(TableHead, { className: "w-6 p-0", children: _jsx("span", { className: "sr-only", children: "Enable" }) }), _jsx(TableHead, { children: "Key" }), _jsx(TableHead, { className: "w-24", children: "Type" }), _jsx(TableHead, { children: "Value" }), _jsx(TableHead, { className: "w-7 p-0" })] }) }), _jsx(TableBody, { children: rows.map((row, index) => (_jsxs("tr", { children: [_jsx(TableCell, { className: "w-6 p-1 text-center", children: _jsx(
|
|
73
|
+
return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs("tr", { children: [_jsx(TableHead, { className: "w-6 p-0", children: _jsx("span", { className: "sr-only", children: "Enable" }) }), _jsx(TableHead, { children: "Key" }), _jsx(TableHead, { className: "w-24", children: "Type" }), _jsx(TableHead, { children: "Value" }), _jsx(TableHead, { className: "w-7 p-0" })] }) }), _jsx(TableBody, { children: rows.map((row, index) => (_jsxs("tr", { children: [_jsx(TableCell, { className: "w-6 p-1 text-center", children: _jsx(Checkbox, { className: "app-no-drag", checked: row.enabled, onChange: (e) => updateRow(index, { enabled: e.target.checked }), "aria-label": `Enable row ${index + 1}`, title: "Enable" }) }), _jsx(TableCell, { children: _jsx(Input, { type: "text", className: "w-full", value: row.key, placeholder: "field", "aria-label": `Key, row ${index + 1}`, onChange: (e) => updateRow(index, { key: e.target.value }) }) }), _jsx(TableCell, { children: _jsxs(Select, { className: "w-full", value: row.type, "aria-label": `Type, row ${index + 1}`, onChange: (e) => {
|
|
74
74
|
const type = e.target.value;
|
|
75
75
|
updateRow(index, {
|
|
76
76
|
type,
|
|
@@ -1 +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;AAOzD,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;CAC7B;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,QAAQ,EACR,cAAsB,EACtB,gBAA0B,EAC1B,SAAS,EACT,cAAc,EACf,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,
|
|
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;AAOzD,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;CAC7B;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,QAAQ,EACR,cAAsB,EACtB,gBAA0B,EAC1B,SAAS,EACT,cAAc,EACf,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA2FrB"}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
|
|
|
2
2
|
import { faXmark } from '@fortawesome/free-solid-svg-icons';
|
|
3
3
|
import { Button } from '../Button/index.js';
|
|
4
4
|
import { FaIcon } from '../FaIcon/index.js';
|
|
5
|
-
import { Input, fieldFrame } from '../forms/index.js';
|
|
5
|
+
import { Checkbox, Input, fieldFrame } from '../forms/index.js';
|
|
6
6
|
import { Table, TableBody, TableCell, TableHead, TableHeader } from '../Table/index.js';
|
|
7
7
|
import { VariableInput } from '../VariableInput/index.js';
|
|
8
8
|
/**
|
|
@@ -35,5 +35,5 @@ export function KeyValueEditor({ rows, onChange, placeholderKey = 'Key', placeho
|
|
|
35
35
|
}
|
|
36
36
|
onChange(rows.filter((_, i) => i !== index));
|
|
37
37
|
};
|
|
38
|
-
return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs("tr", { children: [_jsx(TableHead, { className: "w-6 p-0", children: _jsx("span", { className: "sr-only", children: "Enable" }) }), _jsx(TableHead, { children: "Key" }), _jsx(TableHead, { children: "Value" }), _jsx(TableHead, { className: "w-7 p-0" })] }) }), _jsx(TableBody, { children: rows.map((row, index) => (_jsxs("tr", { children: [_jsx(TableCell, { className: "w-6 p-1 text-center", children: _jsx(
|
|
38
|
+
return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs("tr", { children: [_jsx(TableHead, { className: "w-6 p-0", children: _jsx("span", { className: "sr-only", children: "Enable" }) }), _jsx(TableHead, { children: "Key" }), _jsx(TableHead, { children: "Value" }), _jsx(TableHead, { className: "w-7 p-0" })] }) }), _jsx(TableBody, { children: rows.map((row, index) => (_jsxs("tr", { children: [_jsx(TableCell, { className: "w-6 p-1 text-center", children: _jsx(Checkbox, { className: "app-no-drag", checked: row.enabled, onChange: (e) => updateRow(index, { enabled: e.target.checked }), "aria-label": `Enable row ${index + 1}`, title: "Enable" }) }), _jsx(TableCell, { children: _jsx(Input, { type: "text", className: "w-full", value: row.key, placeholder: placeholderKey, "aria-label": `Key, row ${index + 1}`, onChange: (e) => updateRow(index, { key: e.target.value }) }) }), _jsx(TableCell, { children: _jsx(VariableInput, { wrapperClassName: `${fieldFrame} w-full`, className: "app-no-drag", value: row.value, onChange: (value) => updateRow(index, { value }), variables: variables, placeholder: placeholderValue, "aria-label": `Value, row ${index + 1}`, onEditVariable: onEditVariable }) }), _jsx(TableCell, { className: "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))) })] }));
|
|
39
39
|
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { JSX, ReactNode } from 'react';
|
|
2
|
+
interface Props<T extends string> {
|
|
3
|
+
/**
|
|
4
|
+
* Tab value that controls visibility of this panel.
|
|
5
|
+
*/
|
|
6
|
+
value: T;
|
|
7
|
+
/**
|
|
8
|
+
* Panel content shown when this tab is selected.
|
|
9
|
+
*/
|
|
10
|
+
children: ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* Additional CSS classes for the panel container.
|
|
13
|
+
*/
|
|
14
|
+
className?: string;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Renders a WAI-ARIA tab panel linked to the matching tab in the parent group.
|
|
18
|
+
*/
|
|
19
|
+
export declare function SegmentedTabPanel<T extends string>({ value, children, className }: Props<T>): JSX.Element | null;
|
|
20
|
+
export {};
|
|
21
|
+
//# sourceMappingURL=SegmentedTabPanel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SegmentedTabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/SegmentedTabPanel.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,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,CAkB/B"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
|
|
2
|
+
import { useContext } from '@harborclient/sdk/react';
|
|
3
|
+
import { SegmentedTabsContext } from './SegmentedTabsContext.js';
|
|
4
|
+
/**
|
|
5
|
+
* Renders a WAI-ARIA tab panel linked to the matching tab in the parent group.
|
|
6
|
+
*/
|
|
7
|
+
export function SegmentedTabPanel({ value, children, className }) {
|
|
8
|
+
const context = useContext(SegmentedTabsContext);
|
|
9
|
+
if (!context) {
|
|
10
|
+
throw new Error('SegmentedTabPanel must be used within SegmentedTabsGroup');
|
|
11
|
+
}
|
|
12
|
+
if (context.value !== value)
|
|
13
|
+
return null;
|
|
14
|
+
return (_jsx("div", { role: "tabpanel", id: context.getPanelId(value), "aria-labelledby": context.getTabId(value), className: className, children: children }));
|
|
15
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export interface SegmentedTabsContextValue {
|
|
2
|
+
/**
|
|
3
|
+
* Currently selected tab value.
|
|
4
|
+
*/
|
|
5
|
+
value: string;
|
|
6
|
+
/**
|
|
7
|
+
* Selects a tab by value.
|
|
8
|
+
*/
|
|
9
|
+
onChange: (value: string) => void;
|
|
10
|
+
/**
|
|
11
|
+
* Accessible name for the tab list.
|
|
12
|
+
*/
|
|
13
|
+
ariaLabel: string;
|
|
14
|
+
/**
|
|
15
|
+
* Stable DOM id for a tab control.
|
|
16
|
+
*/
|
|
17
|
+
getTabId: (value: string) => string;
|
|
18
|
+
/**
|
|
19
|
+
* Stable DOM id for a tab panel linked to a tab.
|
|
20
|
+
*/
|
|
21
|
+
getPanelId: (value: string) => string;
|
|
22
|
+
}
|
|
23
|
+
export declare const SegmentedTabsContext: import("react").Context<SegmentedTabsContextValue | null>;
|
|
24
|
+
//# sourceMappingURL=SegmentedTabsContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SegmentedTabsContext.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/SegmentedTabsContext.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAEpC;;OAEG;IACH,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACvC;AAED,eAAO,MAAM,oBAAoB,2DAAwD,CAAC"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { JSX, ReactNode } from 'react';
|
|
2
|
+
interface Props<T extends string> {
|
|
3
|
+
/**
|
|
4
|
+
* Currently selected tab value.
|
|
5
|
+
*/
|
|
6
|
+
value: T;
|
|
7
|
+
/**
|
|
8
|
+
* Called when the user selects a different tab.
|
|
9
|
+
*
|
|
10
|
+
* @param value - Newly selected tab value.
|
|
11
|
+
*/
|
|
12
|
+
onChange: (value: T) => void;
|
|
13
|
+
/**
|
|
14
|
+
* Accessible name for the tab list.
|
|
15
|
+
*/
|
|
16
|
+
ariaLabel: string;
|
|
17
|
+
/**
|
|
18
|
+
* Tab list and linked tab panels.
|
|
19
|
+
*/
|
|
20
|
+
children: ReactNode;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Provides tab selection state and stable ids for `SegmentedTabs` and
|
|
24
|
+
* `SegmentedTabPanel` children.
|
|
25
|
+
*/
|
|
26
|
+
export declare function SegmentedTabsGroup<T extends string>({ value, onChange, ariaLabel, children }: Props<T>): JSX.Element;
|
|
27
|
+
export {};
|
|
28
|
+
//# sourceMappingURL=SegmentedTabsGroup.d.ts.map
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { createElement, useId, useMemo } from '@harborclient/sdk/react';
|
|
2
|
+
import { SegmentedTabsContext } from './SegmentedTabsContext.js';
|
|
3
|
+
/**
|
|
4
|
+
* Provides tab selection state and stable ids for `SegmentedTabs` and
|
|
5
|
+
* `SegmentedTabPanel` children.
|
|
6
|
+
*/
|
|
7
|
+
export function SegmentedTabsGroup({ value, onChange, ariaLabel, children }) {
|
|
8
|
+
const baseId = useId();
|
|
9
|
+
/**
|
|
10
|
+
* Memoizes context so tab ids stay stable across renders while value updates
|
|
11
|
+
* propagate to list and panel children.
|
|
12
|
+
*/
|
|
13
|
+
const contextValue = useMemo(() => ({
|
|
14
|
+
value,
|
|
15
|
+
onChange: (nextValue) => onChange(nextValue),
|
|
16
|
+
ariaLabel,
|
|
17
|
+
getTabId: (tabValue) => `${baseId}-tab-${tabValue}`,
|
|
18
|
+
getPanelId: (tabValue) => `${baseId}-panel-${tabValue}`
|
|
19
|
+
}), [value, onChange, ariaLabel, baseId]);
|
|
20
|
+
return createElement(SegmentedTabsContext.Provider, { value: contextValue }, children);
|
|
21
|
+
}
|
|
@@ -1,69 +1,8 @@
|
|
|
1
|
-
import type { JSX
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
value: T;
|
|
7
|
-
/**
|
|
8
|
-
* Tab label or custom content.
|
|
9
|
-
*/
|
|
10
|
-
label: ReactNode;
|
|
11
|
-
/**
|
|
12
|
-
* When true, the tab is not rendered.
|
|
13
|
-
*/
|
|
14
|
-
hidden?: boolean;
|
|
15
|
-
/**
|
|
16
|
-
* When true, the tab button is disabled.
|
|
17
|
-
*/
|
|
18
|
-
disabled?: boolean;
|
|
19
|
-
/**
|
|
20
|
-
* When true, renders a small dot indicating the tab has values set.
|
|
21
|
-
*/
|
|
22
|
-
indicator?: boolean;
|
|
23
|
-
}
|
|
24
|
-
interface GroupProps<T extends string> {
|
|
25
|
-
/**
|
|
26
|
-
* Currently selected tab value.
|
|
27
|
-
*/
|
|
28
|
-
value: T;
|
|
29
|
-
/**
|
|
30
|
-
* Called when the user selects a different tab.
|
|
31
|
-
*
|
|
32
|
-
* @param value - Newly selected tab value.
|
|
33
|
-
*/
|
|
34
|
-
onChange: (value: T) => void;
|
|
35
|
-
/**
|
|
36
|
-
* Accessible name for the tab list.
|
|
37
|
-
*/
|
|
38
|
-
ariaLabel: string;
|
|
39
|
-
/**
|
|
40
|
-
* Tab list and linked tab panels.
|
|
41
|
-
*/
|
|
42
|
-
children: ReactNode;
|
|
43
|
-
}
|
|
44
|
-
/**
|
|
45
|
-
* Provides tab selection state and stable ids for `SegmentedTabs` and
|
|
46
|
-
* `SegmentedTabPanel` children.
|
|
47
|
-
*/
|
|
48
|
-
export declare function SegmentedTabsGroup<T extends string>({ value, onChange, ariaLabel, children }: GroupProps<T>): JSX.Element;
|
|
49
|
-
interface PanelProps<T extends string> {
|
|
50
|
-
/**
|
|
51
|
-
* Tab value that controls visibility of this panel.
|
|
52
|
-
*/
|
|
53
|
-
value: T;
|
|
54
|
-
/**
|
|
55
|
-
* Panel content shown when this tab is selected.
|
|
56
|
-
*/
|
|
57
|
-
children: ReactNode;
|
|
58
|
-
/**
|
|
59
|
-
* Additional CSS classes for the panel container.
|
|
60
|
-
*/
|
|
61
|
-
className?: string;
|
|
62
|
-
}
|
|
63
|
-
/**
|
|
64
|
-
* Renders a WAI-ARIA tab panel linked to the matching tab in the parent group.
|
|
65
|
-
*/
|
|
66
|
-
export declare function SegmentedTabPanel<T extends string>({ value, children, className }: PanelProps<T>): JSX.Element | null;
|
|
1
|
+
import type { JSX } from 'react';
|
|
2
|
+
import type { TabItem } from './types.js';
|
|
3
|
+
export { SegmentedTabsGroup } from './SegmentedTabsGroup.js';
|
|
4
|
+
export { SegmentedTabPanel } from './SegmentedTabPanel.js';
|
|
5
|
+
export type { TabItem } from './types.js';
|
|
67
6
|
interface Props<T extends string> {
|
|
68
7
|
/**
|
|
69
8
|
* Tab definitions to render.
|
|
@@ -103,5 +42,4 @@ interface Props<T extends string> {
|
|
|
103
42
|
* macOS-style segmented tab control with WAI-ARIA tabs or radiogroup semantics.
|
|
104
43
|
*/
|
|
105
44
|
export declare function SegmentedTabs<T extends string>({ tabs, value: valueProp, onChange: onChangeProp, fullWidth, className, pattern, ariaLabel: ariaLabelProp }: Props<T>): JSX.Element;
|
|
106
|
-
export {};
|
|
107
45
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAIhD,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;AAE1C,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,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,SAAiB,EACjB,SAAS,EACT,OAAgB,EAChB,SAAS,EAAE,aAAa,EACzB,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA+GxB"}
|
|
@@ -1,39 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { useCallback, useContext, useId, useMemo, useRef } from '@harborclient/sdk/react';
|
|
3
3
|
import { resolveTabListKeyAction } from '../utils.js';
|
|
4
4
|
import { segment, segmentGroup } from '../classes.js';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
* `SegmentedTabPanel` children.
|
|
9
|
-
*/
|
|
10
|
-
export function SegmentedTabsGroup({ value, onChange, ariaLabel, children }) {
|
|
11
|
-
const baseId = useId();
|
|
12
|
-
/**
|
|
13
|
-
* Memoizes context so tab ids stay stable across renders while value updates
|
|
14
|
-
* propagate to list and panel children.
|
|
15
|
-
*/
|
|
16
|
-
const contextValue = useMemo(() => ({
|
|
17
|
-
value,
|
|
18
|
-
onChange: (nextValue) => onChange(nextValue),
|
|
19
|
-
ariaLabel,
|
|
20
|
-
getTabId: (tabValue) => `${baseId}-tab-${tabValue}`,
|
|
21
|
-
getPanelId: (tabValue) => `${baseId}-panel-${tabValue}`
|
|
22
|
-
}), [value, onChange, ariaLabel, baseId]);
|
|
23
|
-
return createElement(SegmentedTabsContext.Provider, { value: contextValue }, children);
|
|
24
|
-
}
|
|
25
|
-
/**
|
|
26
|
-
* Renders a WAI-ARIA tab panel linked to the matching tab in the parent group.
|
|
27
|
-
*/
|
|
28
|
-
export function SegmentedTabPanel({ value, children, className }) {
|
|
29
|
-
const context = useContext(SegmentedTabsContext);
|
|
30
|
-
if (!context) {
|
|
31
|
-
throw new Error('SegmentedTabPanel must be used within SegmentedTabsGroup');
|
|
32
|
-
}
|
|
33
|
-
if (context.value !== value)
|
|
34
|
-
return null;
|
|
35
|
-
return (_jsx("div", { role: "tabpanel", id: context.getPanelId(value), "aria-labelledby": context.getTabId(value), className: className, children: children }));
|
|
36
|
-
}
|
|
5
|
+
import { SegmentedTabsContext } from './SegmentedTabsContext.js';
|
|
6
|
+
export { SegmentedTabsGroup } from './SegmentedTabsGroup.js';
|
|
7
|
+
export { SegmentedTabPanel } from './SegmentedTabPanel.js';
|
|
37
8
|
/**
|
|
38
9
|
* macOS-style segmented tab control with WAI-ARIA tabs or radiogroup semantics.
|
|
39
10
|
*/
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
export interface TabItem<T extends string> {
|
|
3
|
+
/**
|
|
4
|
+
* Unique tab identifier.
|
|
5
|
+
*/
|
|
6
|
+
value: T;
|
|
7
|
+
/**
|
|
8
|
+
* Tab label or custom content.
|
|
9
|
+
*/
|
|
10
|
+
label: ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* When true, the tab is not rendered.
|
|
13
|
+
*/
|
|
14
|
+
hidden?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* When true, the tab button is disabled.
|
|
17
|
+
*/
|
|
18
|
+
disabled?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* When true, renders a small dot indicating the tab has values set.
|
|
21
|
+
*/
|
|
22
|
+
indicator?: boolean;
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,OAAO,CAAC,CAAC,SAAS,MAAM;IACvC;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VariableTable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAY/C,UAAU,KAAK;IACb;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,QAAQ,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VariableTable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAY/C,UAAU,KAAK;IACb;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,QAAQ,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkHtF"}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
|
|
|
2
2
|
import { Button } from '../Button/index.js';
|
|
3
3
|
import { FaIcon } from '../FaIcon/index.js';
|
|
4
4
|
import { faPlus, faXmark } from '@fortawesome/free-solid-svg-icons';
|
|
5
|
-
import { Input } from '../forms/index.js';
|
|
5
|
+
import { Checkbox, Input } from '../forms/index.js';
|
|
6
6
|
import { Table, TableBody, TableCell, TableHead, TableHeader } from '../Table/index.js';
|
|
7
7
|
/**
|
|
8
8
|
* Returns a blank variable row for new table entries.
|
|
@@ -39,5 +39,5 @@ export function VariableTable({ variables, onChange, description }) {
|
|
|
39
39
|
}
|
|
40
40
|
onChange(variables.filter((_, i) => i !== index));
|
|
41
41
|
};
|
|
42
|
-
return (_jsxs("div", { children: [description && _jsx("p", { className: "mb-3 text-[14px] text-muted", children: description }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs(Table, { variant: "loose", children: [_jsx(TableHeader, { children: _jsxs("tr", { children: [_jsx(TableHead, { children: "Key" }), _jsx(TableHead, { children: "Value" }), _jsx(TableHead, { children: "Default" }), _jsx(TableHead, { className: "w-14 text-center", children: "Share" }), _jsx(TableHead, { className: "w-7 p-0 text-center" })] }) }), _jsx(TableBody, { children: variables.map((variable, index) => (_jsxs("tr", { children: [_jsx(TableCell, { children: _jsx(Input, { type: "text", className: "w-full", value: variable.key, placeholder: "variable", "aria-label": `Key, row ${index + 1}`, onChange: (e) => updateVariable(index, { key: e.target.value }) }) }), _jsx(TableCell, { children: _jsx(Input, { type: "text", className: "w-full", value: variable.value, placeholder: "value", "aria-label": `Value, row ${index + 1}`, onChange: (e) => updateVariable(index, { value: e.target.value }) }) }), _jsx(TableCell, { children: _jsx(Input, { type: "text", className: "w-full", value: variable.defaultValue, placeholder: "default", "aria-label": `Default, row ${index + 1}`, onChange: (e) => updateVariable(index, { defaultValue: e.target.value }) }) }), _jsx(TableCell, { className: "w-14 text-center", children: _jsx(
|
|
42
|
+
return (_jsxs("div", { children: [description && _jsx("p", { className: "mb-3 text-[14px] text-muted", children: description }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs(Table, { variant: "loose", children: [_jsx(TableHeader, { children: _jsxs("tr", { children: [_jsx(TableHead, { children: "Key" }), _jsx(TableHead, { children: "Value" }), _jsx(TableHead, { children: "Default" }), _jsx(TableHead, { className: "w-14 text-center", children: "Share" }), _jsx(TableHead, { className: "w-7 p-0 text-center" })] }) }), _jsx(TableBody, { children: variables.map((variable, index) => (_jsxs("tr", { children: [_jsx(TableCell, { children: _jsx(Input, { type: "text", className: "w-full", value: variable.key, placeholder: "variable", "aria-label": `Key, row ${index + 1}`, onChange: (e) => updateVariable(index, { key: e.target.value }) }) }), _jsx(TableCell, { children: _jsx(Input, { type: "text", className: "w-full", value: variable.value, placeholder: "value", "aria-label": `Value, row ${index + 1}`, onChange: (e) => updateVariable(index, { value: e.target.value }) }) }), _jsx(TableCell, { children: _jsx(Input, { type: "text", className: "w-full", value: variable.defaultValue, placeholder: "default", "aria-label": `Default, row ${index + 1}`, onChange: (e) => updateVariable(index, { defaultValue: e.target.value }) }) }), _jsx(TableCell, { className: "w-14 text-center", children: _jsx(Checkbox, { checked: variable.share, onChange: (e) => updateVariable(index, { share: e.target.checked }), "aria-label": `Include value in export, row ${index + 1}`, title: "Include value in export" }) }), _jsx(TableCell, { className: "w-7 p-0 text-center", children: _jsx(Button, { type: "button", variant: "iconDanger", onClick: () => removeVariable(index), title: "Remove", "aria-label": `Remove row ${index + 1}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }) })] }, index))) })] }), _jsxs(Button, { type: "button", variant: "toolbar", className: "inline-flex items-center gap-1 self-start", onClick: addVariable, children: [_jsx(FaIcon, { icon: faPlus, className: "h-3 w-3" }), "Add variable"] })] })] }));
|
|
43
43
|
}
|
|
@@ -9,6 +9,6 @@ export const segmentGroup = 'inline-flex p-3 border-b border-separator w-full sh
|
|
|
9
9
|
*/
|
|
10
10
|
export function segment(active) {
|
|
11
11
|
return active
|
|
12
|
-
? 'cursor-pointer rounded-[2.5px] border-none bg-
|
|
12
|
+
? 'cursor-pointer rounded-[2.5px] border-none bg-field px-3 py-1 text-[15px] text-text shadow-sm app-no-drag'
|
|
13
13
|
: 'cursor-pointer rounded-[2.5px] border-none bg-transparent px-3 py-1 text-[15px] text-muted hover:text-text app-no-drag';
|
|
14
14
|
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { InputHTMLAttributes, JSX, Ref } from 'react';
|
|
2
|
+
interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
3
|
+
/**
|
|
4
|
+
* Additional Tailwind classes applied to the outer wrapper.
|
|
5
|
+
*/
|
|
6
|
+
className?: string;
|
|
7
|
+
/**
|
|
8
|
+
* Ref forwarded to the underlying native checkbox input.
|
|
9
|
+
*/
|
|
10
|
+
ref?: Ref<HTMLInputElement>;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* macOS-style checkbox with a custom box slightly larger than the native control.
|
|
14
|
+
*/
|
|
15
|
+
export declare function Checkbox({ ref, className, ...props }: Props): JSX.Element;
|
|
16
|
+
export {};
|
|
17
|
+
//# sourceMappingURL=Checkbox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG3D,UAAU,KAAM,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACzE;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAmBzE"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
|
|
2
|
+
import { checkboxBox, checkboxInput } from './classes.js';
|
|
3
|
+
/**
|
|
4
|
+
* macOS-style checkbox with a custom box slightly larger than the native control.
|
|
5
|
+
*/
|
|
6
|
+
export function Checkbox({ ref, className, ...props }) {
|
|
7
|
+
const wrapperClasses = className ? `inline-flex shrink-0 ${className}` : 'inline-flex shrink-0';
|
|
8
|
+
return (_jsxs("span", { className: wrapperClasses, children: [_jsx("input", { ref: ref, type: "checkbox", className: checkboxInput, ...props }), _jsx("span", { className: checkboxBox, "aria-hidden": true, children: _jsx("svg", { className: "h-3 w-3", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M2.5 6L5 8.5L9.5 3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }));
|
|
9
|
+
}
|
|
@@ -13,6 +13,10 @@ export declare const fieldFrame = "overflow-hidden rounded-md border border-sepa
|
|
|
13
13
|
export declare const field = "rounded-md border border-separator bg-field px-2 py-1 text-[15px] text-text app-no-drag";
|
|
14
14
|
/** Surface style for modal and Team Hub form fields. */
|
|
15
15
|
export declare const surfaceField = "w-full rounded-md border border-separator bg-field px-3 py-2 text-[14px] text-text";
|
|
16
|
+
/** Visually hidden native checkbox input used with {@link checkboxBox}. */
|
|
17
|
+
export declare const checkboxInput = "peer sr-only";
|
|
18
|
+
/** Custom checkbox box styled via `peer-checked` / `peer-focus-visible` on {@link checkboxInput}. */
|
|
19
|
+
export declare const checkboxBox = "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded border border-separator bg-field text-white peer-checked:border-accent peer-checked:bg-accent peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-accent peer-disabled:cursor-not-allowed peer-disabled:opacity-50 [&>svg]:opacity-0 peer-checked:[&>svg]:opacity-100";
|
|
16
20
|
/**
|
|
17
21
|
* Merges a field variant preset with optional caller classes.
|
|
18
22
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"classes.d.ts","sourceRoot":"","sources":["../../../src/components/forms/classes.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3D;;GAEG;AACH,eAAO,MAAM,UAAU,gEAAgE,CAAC;AAExF,mEAAmE;AACnE,eAAO,MAAM,KAAK,4FACyE,CAAC;AAE5F,wDAAwD;AACxD,eAAO,MAAM,YAAY,uFAC6D,CAAC;
|
|
1
|
+
{"version":3,"file":"classes.d.ts","sourceRoot":"","sources":["../../../src/components/forms/classes.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3D;;GAEG;AACH,eAAO,MAAM,UAAU,gEAAgE,CAAC;AAExF,mEAAmE;AACnE,eAAO,MAAM,KAAK,4FACyE,CAAC;AAE5F,wDAAwD;AACxD,eAAO,MAAM,YAAY,uFAC6D,CAAC;AAEvF,2EAA2E;AAC3E,eAAO,MAAM,aAAa,iBAAiB,CAAC;AAE5C,qGAAqG;AACrG,eAAO,MAAM,WAAW,iZACwX,CAAC;AAOjZ;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,YAAY,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAM/F"}
|
|
@@ -9,6 +9,10 @@ export const fieldFrame = 'overflow-hidden rounded-md border border-separator bg
|
|
|
9
9
|
export const field = 'rounded-md border border-separator bg-field px-2 py-1 text-[15px] text-text app-no-drag';
|
|
10
10
|
/** Surface style for modal and Team Hub form fields. */
|
|
11
11
|
export const surfaceField = 'w-full rounded-md border border-separator bg-field px-3 py-2 text-[14px] text-text';
|
|
12
|
+
/** Visually hidden native checkbox input used with {@link checkboxBox}. */
|
|
13
|
+
export const checkboxInput = 'peer sr-only';
|
|
14
|
+
/** Custom checkbox box styled via `peer-checked` / `peer-focus-visible` on {@link checkboxInput}. */
|
|
15
|
+
export const checkboxBox = 'flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded border border-separator bg-field text-white peer-checked:border-accent peer-checked:bg-accent peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-accent peer-disabled:cursor-not-allowed peer-disabled:opacity-50 [&>svg]:opacity-0 peer-checked:[&>svg]:opacity-100';
|
|
12
16
|
const VARIANT_CLASSES = {
|
|
13
17
|
control: field,
|
|
14
18
|
surface: surfaceField
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
export { field, fieldFrame, surfaceField, mergeFieldClasses, type FieldVariant } from './classes.js';
|
|
1
|
+
export { field, fieldFrame, surfaceField, checkboxInput, checkboxBox, mergeFieldClasses, type FieldVariant } from './classes.js';
|
|
2
|
+
export { Checkbox } from './Checkbox.js';
|
|
2
3
|
export { Input } from './Input.js';
|
|
3
4
|
export { Textarea } from './Textarea.js';
|
|
4
5
|
export { Select } from './Select.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,UAAU,EACV,YAAY,EACZ,iBAAiB,EACjB,KAAK,YAAY,EAClB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,UAAU,EACV,YAAY,EACZ,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,KAAK,YAAY,EAClB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
export { field, fieldFrame, surfaceField, mergeFieldClasses } from './classes.js';
|
|
1
|
+
export { field, fieldFrame, surfaceField, checkboxInput, checkboxBox, mergeFieldClasses } from './classes.js';
|
|
2
|
+
export { Checkbox } from './Checkbox.js';
|
|
2
3
|
export { Input } from './Input.js';
|
|
3
4
|
export { Textarea } from './Textarea.js';
|
|
4
5
|
export { Select } from './Select.js';
|
|
@@ -17,7 +17,7 @@ export type { Props as FormDataEditorProps } from './FormDataEditor/index.js';
|
|
|
17
17
|
export { FooterButton } from './FooterButton/index.js';
|
|
18
18
|
export { FooterIcon } from './FooterIcon/index.js';
|
|
19
19
|
export { FormGroup } from './FormGroup/index.js';
|
|
20
|
-
export { Input, Select, Textarea, field, fieldFrame, surfaceField, mergeFieldClasses } from './forms/index.js';
|
|
20
|
+
export { Input, Checkbox, Select, Textarea, field, fieldFrame, surfaceField, mergeFieldClasses } from './forms/index.js';
|
|
21
21
|
export type { FieldVariant } from './forms/classes.js';
|
|
22
22
|
export { KeyValueEditor } from './KeyValueEditor/index.js';
|
|
23
23
|
export type { Props as KeyValueEditorProps } from './KeyValueEditor/index.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
|
package/dist/components/index.js
CHANGED
|
@@ -12,7 +12,7 @@ export { FormDataEditor } from './FormDataEditor/index.js';
|
|
|
12
12
|
export { FooterButton } from './FooterButton/index.js';
|
|
13
13
|
export { FooterIcon } from './FooterIcon/index.js';
|
|
14
14
|
export { FormGroup } from './FormGroup/index.js';
|
|
15
|
-
export { Input, Select, Textarea, field, fieldFrame, surfaceField, mergeFieldClasses } from './forms/index.js';
|
|
15
|
+
export { Input, Checkbox, Select, Textarea, field, fieldFrame, surfaceField, mergeFieldClasses } from './forms/index.js';
|
|
16
16
|
export { KeyValueEditor } from './KeyValueEditor/index.js';
|
|
17
17
|
export { MethodSelect } from './MethodSelect/index.js';
|
|
18
18
|
export { Modal, ModalFooter, ModalFormLayout } from './Modal/index.js';
|