cursedbelt 5.28.0 → 5.32.0
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/react/components/ColorField.d.ts.map +1 -1
- package/dist/react/components/ColorField.js +2 -1
- package/dist/react/components/ColorField.js.map +1 -1
- package/dist/react/components/ComboboxField.d.ts.map +1 -1
- package/dist/react/components/ComboboxField.js +2 -1
- package/dist/react/components/ComboboxField.js.map +1 -1
- package/dist/react/components/ConfirmDialog.d.ts +4 -1
- package/dist/react/components/ConfirmDialog.d.ts.map +1 -1
- package/dist/react/components/ConfirmDialog.js +2 -2
- package/dist/react/components/ConfirmDialog.js.map +1 -1
- package/dist/react/components/DataTable/DataTable.d.ts +39 -2
- package/dist/react/components/DataTable/DataTable.d.ts.map +1 -1
- package/dist/react/components/DataTable/DataTable.js +97 -23
- package/dist/react/components/DataTable/DataTable.js.map +1 -1
- package/dist/react/components/DataTable/ViewOptionsMenu.d.ts.map +1 -1
- package/dist/react/components/DataTable/ViewOptionsMenu.js +20 -7
- package/dist/react/components/DataTable/ViewOptionsMenu.js.map +1 -1
- package/dist/react/components/DataTable/types.d.ts +11 -1
- package/dist/react/components/DataTable/types.d.ts.map +1 -1
- package/dist/react/components/DataTable/types.js +6 -0
- package/dist/react/components/DataTable/types.js.map +1 -1
- package/dist/react/components/DatePicker.d.ts.map +1 -1
- package/dist/react/components/DatePicker.js +2 -1
- package/dist/react/components/DatePicker.js.map +1 -1
- package/dist/react/components/DateTimeField.d.ts.map +1 -1
- package/dist/react/components/DateTimeField.js +2 -1
- package/dist/react/components/DateTimeField.js.map +1 -1
- package/dist/react/components/ExpandableRow.d.ts +56 -0
- package/dist/react/components/ExpandableRow.d.ts.map +1 -0
- package/dist/react/components/ExpandableRow.js +54 -0
- package/dist/react/components/ExpandableRow.js.map +1 -0
- package/dist/react/components/Field.d.ts +20 -1
- package/dist/react/components/Field.d.ts.map +1 -1
- package/dist/react/components/Field.js +24 -11
- package/dist/react/components/Field.js.map +1 -1
- package/dist/react/components/FieldInput.d.ts +15 -0
- package/dist/react/components/FieldInput.d.ts.map +1 -1
- package/dist/react/components/FieldInput.js +20 -0
- package/dist/react/components/FieldInput.js.map +1 -1
- package/dist/react/components/FileDropZone.d.ts +23 -1
- package/dist/react/components/FileDropZone.d.ts.map +1 -1
- package/dist/react/components/FileDropZone.js +56 -8
- package/dist/react/components/FileDropZone.js.map +1 -1
- package/dist/react/components/FormPreviewLayout.d.ts +49 -0
- package/dist/react/components/FormPreviewLayout.d.ts.map +1 -0
- package/dist/react/components/FormPreviewLayout.js +36 -0
- package/dist/react/components/FormPreviewLayout.js.map +1 -0
- package/dist/react/components/Input.d.ts.map +1 -1
- package/dist/react/components/Input.js +3 -1
- package/dist/react/components/Input.js.map +1 -1
- package/dist/react/components/KeyBadge.d.ts +34 -0
- package/dist/react/components/KeyBadge.d.ts.map +1 -0
- package/dist/react/components/KeyBadge.js +24 -0
- package/dist/react/components/KeyBadge.js.map +1 -0
- package/dist/react/components/Modal.d.ts.map +1 -1
- package/dist/react/components/Modal.js +35 -9
- package/dist/react/components/Modal.js.map +1 -1
- package/dist/react/components/NativeSelect.d.ts.map +1 -1
- package/dist/react/components/NativeSelect.js +2 -1
- package/dist/react/components/NativeSelect.js.map +1 -1
- package/dist/react/components/PromptDialog.d.ts +4 -1
- package/dist/react/components/PromptDialog.d.ts.map +1 -1
- package/dist/react/components/PromptDialog.js +2 -2
- package/dist/react/components/PromptDialog.js.map +1 -1
- package/dist/react/components/RenderField.d.ts.map +1 -1
- package/dist/react/components/RenderField.js +2 -2
- package/dist/react/components/RenderField.js.map +1 -1
- package/dist/react/components/RevealAction.d.ts +33 -0
- package/dist/react/components/RevealAction.d.ts.map +1 -0
- package/dist/react/components/RevealAction.js +45 -0
- package/dist/react/components/RevealAction.js.map +1 -0
- package/dist/react/components/SecretInput.d.ts.map +1 -1
- package/dist/react/components/SecretInput.js +2 -1
- package/dist/react/components/SecretInput.js.map +1 -1
- package/dist/react/components/SelectField.d.ts.map +1 -1
- package/dist/react/components/SelectField.js +2 -1
- package/dist/react/components/SelectField.js.map +1 -1
- package/dist/react/components/SettingsStrip.d.ts +22 -0
- package/dist/react/components/SettingsStrip.d.ts.map +1 -0
- package/dist/react/components/SettingsStrip.js +18 -0
- package/dist/react/components/SettingsStrip.js.map +1 -0
- package/dist/react/components/formKit.css +555 -0
- package/dist/react/components/formKit.d.ts +12 -0
- package/dist/react/components/formKit.d.ts.map +1 -0
- package/dist/react/components/formKit.js +14 -0
- package/dist/react/components/formKit.js.map +1 -0
- package/dist/react/file-tree/FileTree.d.ts +26 -1
- package/dist/react/file-tree/FileTree.d.ts.map +1 -1
- package/dist/react/file-tree/FileTree.js +182 -40
- package/dist/react/file-tree/FileTree.js.map +1 -1
- package/dist/react/filter-rail/RailSection.d.ts +2 -2
- package/dist/react/filter-rail/RailSection.d.ts.map +1 -1
- package/dist/react/filter-rail/RailSection.js +6 -61
- package/dist/react/filter-rail/RailSection.js.map +1 -1
- package/dist/react/index.d.ts +8 -3
- package/dist/react/index.d.ts.map +1 -1
- package/dist/react/index.js +8 -3
- package/dist/react/index.js.map +1 -1
- package/dist/react/lib/field.d.ts +43 -0
- package/dist/react/lib/field.d.ts.map +1 -1
- package/dist/react/lib/field.js +68 -0
- package/dist/react/lib/field.js.map +1 -1
- package/dist/react/media/PlayerStrip.d.ts +9 -1
- package/dist/react/media/PlayerStrip.d.ts.map +1 -1
- package/dist/react/media/PlayerStrip.js +29 -2
- package/dist/react/media/PlayerStrip.js.map +1 -1
- package/dist/react/media-gallery/rememberedPreference.d.ts +2 -0
- package/dist/react/media-gallery/rememberedPreference.d.ts.map +1 -0
- package/dist/react/media-gallery/rememberedPreference.js +75 -0
- package/dist/react/media-gallery/rememberedPreference.js.map +1 -0
- package/dist/scripts/guardrailsEnforce.d.ts +11 -0
- package/dist/scripts/guardrailsEnforce.d.ts.map +1 -1
- package/dist/styles-areas/analytics.css +2 -2
- package/dist/styles-areas/core.css +34 -28
- package/dist/styles-areas/data-table.css +2 -2
- package/dist/styles-areas/fields.css +3 -3
- package/dist/styles-areas/layout-engine.css +2 -2
- package/dist/styles-areas/nav.css +3 -3
- package/dist/styles-areas/wizard.css +2 -2
- package/dist/styles-areas/workbench.css +2 -2
- package/dist/styles-utilities.css +111 -9
- package/dist/testing/index.d.ts +3 -0
- package/dist/testing/index.d.ts.map +1 -0
- package/dist/testing/index.js +4 -0
- package/dist/testing/index.js.map +1 -0
- package/dist/testing/objectLeak.d.ts +23 -0
- package/dist/testing/objectLeak.d.ts.map +1 -0
- package/dist/testing/objectLeak.js +37 -0
- package/dist/testing/objectLeak.js.map +1 -0
- package/package.json +18 -5
- package/scripts/guardrails-baseline.json +4 -1
- package/scripts/guardrailsEnforce.spec.ts +163 -6
- package/scripts/guardrailsEnforce.ts +365 -40
- package/scripts/paths.ts +1 -1
- package/scripts/styleAreas.ts +2 -0
- package/src/react/components/ColorField.tsx +3 -1
- package/src/react/components/ComboboxField.tsx +3 -1
- package/src/react/components/ConfirmDialog.tsx +5 -0
- package/src/react/components/DataTable/DataTable.spec.tsx +34 -0
- package/src/react/components/DataTable/DataTable.tsx +141 -23
- package/src/react/components/DataTable/ViewOptionsMenu.tsx +24 -9
- package/src/react/components/DataTable/selection.spec.tsx +57 -1
- package/src/react/components/DataTable/types.ts +12 -1
- package/src/react/components/DataTable/virtualize.spec.tsx +20 -0
- package/src/react/components/DatePicker.tsx +3 -1
- package/src/react/components/DateTimeField.tsx +3 -1
- package/src/react/components/ExpandableRow.tsx +146 -0
- package/src/react/components/Field.tsx +89 -13
- package/src/react/components/Field.width.spec.tsx +162 -0
- package/src/react/components/FieldInput.tsx +30 -0
- package/src/react/components/FileDropZone.spec.tsx +65 -0
- package/src/react/components/FileDropZone.tsx +83 -5
- package/src/react/components/FormPreviewLayout.tsx +94 -0
- package/src/react/components/Input.tsx +4 -1
- package/src/react/components/KeyBadge.tsx +52 -0
- package/src/react/components/Modal.tsx +58 -14
- package/src/react/components/NativeSelect.tsx +3 -1
- package/src/react/components/PromptDialog.spec.tsx +29 -1
- package/src/react/components/PromptDialog.tsx +5 -0
- package/src/react/components/RenderField.tsx +2 -1
- package/src/react/components/RevealAction.tsx +83 -0
- package/src/react/components/SecretInput.tsx +3 -1
- package/src/react/components/SelectField.tsx +3 -1
- package/src/react/components/SettingsStrip.tsx +37 -0
- package/src/react/components/formKit.css +555 -0
- package/src/react/components/formKit.spec.tsx +138 -0
- package/src/react/components/formKit.ts +19 -0
- package/src/react/file-tree/FileTree.spec.tsx +205 -0
- package/src/react/file-tree/FileTree.tsx +220 -38
- package/src/react/filter-rail/RailSection.tsx +6 -65
- package/src/react/index.ts +20 -2
- package/src/react/lib/field.ts +93 -0
- package/src/react/media/PlayerStrip.tsx +65 -20
- package/src/react/media/playerStrip.spec.tsx +23 -0
- package/src/react/media-gallery/rememberedPreference.ts +79 -0
- package/src/styles-areas/analytics.css +2 -2
- package/src/styles-areas/core.css +34 -28
- package/src/styles-areas/data-table.css +2 -2
- package/src/styles-areas/fields.css +3 -3
- package/src/styles-areas/layout-engine.css +2 -2
- package/src/styles-areas/nav.css +3 -3
- package/src/styles-areas/wizard.css +2 -2
- package/src/styles-areas/workbench.css +2 -2
- package/src/styles-utilities.css +111 -9
- package/src/testing/index.ts +3 -0
- package/src/testing/objectLeak.spec.ts +21 -0
- package/src/testing/objectLeak.ts +39 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from '../lib/cn.js';
|
|
3
|
-
import { fieldControlClass } from '../lib/field.js';
|
|
3
|
+
import { declareFieldWidth, fieldControlClass, inputTypeWidth } from '../lib/field.js';
|
|
4
4
|
/**
|
|
5
5
|
* Themed text input on the single field-style token set ({@link fieldControlClass}):
|
|
6
6
|
* 16px on mobile (no iOS focus-zoom) → 14px from `sm:`, a `--field-ring` focus ring,
|
|
@@ -23,4 +23,6 @@ export function Input({ onEnter, onKeyDown, className, type, maxLength = 1000, s
|
|
|
23
23
|
onEnter?.(e);
|
|
24
24
|
}, className: cn(fieldControlClass(size), 'file:mr-3 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground', className), ...props }));
|
|
25
25
|
}
|
|
26
|
+
// A Field caps an Input by what its `type` holds — a name `md`, a number `xs`, a URL `lg`.
|
|
27
|
+
declareFieldWidth(Input, (props) => inputTypeWidth(props.type));
|
|
26
28
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/react/components/Input.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAoB,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/react/components/Input.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAoB,iBAAiB,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAYzG;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,KAAK,CAAC,EACpB,OAAO,EACP,SAAS,EACT,SAAS,EACT,IAAI,EACJ,SAAS,GAAG,IAAI,EAChB,IAAI,GAAG,IAAI,EACX,GAAG,KAAK,EACG;IACX,OAAO,CACL;QACE,kFAAkF;QAClF,iFAAiF;QACjF,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;YACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;gBAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QACtC,CAAC,EACD,SAAS,EAAE,EAAE,CACX,iBAAiB,CAAC,IAAI,CAAC,EACvB,gGAAgG,EAChG,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,2FAA2F;AAC3F,iBAAiB,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import './formKit.css';
|
|
3
|
+
export interface KeyBadgeProps {
|
|
4
|
+
/** The technical key — `location`, `namespace`, `API_URL`. */
|
|
5
|
+
children: string;
|
|
6
|
+
/**
|
|
7
|
+
* A regular-weight sentence drawn beside the badge — what the key IS. With it the badge and
|
|
8
|
+
* the sentence become one metadata line (`<p>`); without it the badge is an inline `<span>`.
|
|
9
|
+
*/
|
|
10
|
+
description?: ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* Upper-case the key. OFF by default, deliberately: most keys are case-sensitive names that
|
|
13
|
+
* somebody types elsewhere (a macro override, an env var lookup), and a badge reading
|
|
14
|
+
* `LOCATION` for a key spelled `location` shows the wrong thing to type.
|
|
15
|
+
*/
|
|
16
|
+
uppercase?: boolean;
|
|
17
|
+
className?: string;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* A technical key drawn as metadata rather than as a value — a mono, muted, low-contrast pill,
|
|
21
|
+
* optionally followed by what it means.
|
|
22
|
+
*
|
|
23
|
+
* The owner's cb-form review (2026-09-30): the lowercase keys under each field *"are excellent
|
|
24
|
+
* technical labels, but right now they look floating and unanchored … format them as crisp,
|
|
25
|
+
* subtle inline pill badges right next to a regular-weight description string. This treats it
|
|
26
|
+
* as metadata rather than an isolated input element."*
|
|
27
|
+
*
|
|
28
|
+
* Not {@link CodeChip}: that is a LITERAL inside prose (bordered, copyable, full contrast — a
|
|
29
|
+
* path you are meant to read). This is a label ON a row, and is meant to recede.
|
|
30
|
+
*
|
|
31
|
+
* Plain stylesheet (`formKit.css`) — draws without Tailwind; `cursedbelt/react/form-kit`.
|
|
32
|
+
*/
|
|
33
|
+
export declare function KeyBadge({ children, description, uppercase, className }: KeyBadgeProps): import("react").JSX.Element;
|
|
34
|
+
//# sourceMappingURL=KeyBadge.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KeyBadge.d.ts","sourceRoot":"","sources":["../../../src/react/components/KeyBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,aAAa;IAC5B,8DAA8D;IAC9D,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,aAAa,+BAgBtF"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from '../lib/cn.js';
|
|
3
|
+
import './formKit.css';
|
|
4
|
+
/**
|
|
5
|
+
* A technical key drawn as metadata rather than as a value — a mono, muted, low-contrast pill,
|
|
6
|
+
* optionally followed by what it means.
|
|
7
|
+
*
|
|
8
|
+
* The owner's cb-form review (2026-09-30): the lowercase keys under each field *"are excellent
|
|
9
|
+
* technical labels, but right now they look floating and unanchored … format them as crisp,
|
|
10
|
+
* subtle inline pill badges right next to a regular-weight description string. This treats it
|
|
11
|
+
* as metadata rather than an isolated input element."*
|
|
12
|
+
*
|
|
13
|
+
* Not {@link CodeChip}: that is a LITERAL inside prose (bordered, copyable, full contrast — a
|
|
14
|
+
* path you are meant to read). This is a label ON a row, and is meant to recede.
|
|
15
|
+
*
|
|
16
|
+
* Plain stylesheet (`formKit.css`) — draws without Tailwind; `cursedbelt/react/form-kit`.
|
|
17
|
+
*/
|
|
18
|
+
export function KeyBadge({ children, description, uppercase, className }) {
|
|
19
|
+
const badge = (_jsx("span", { className: cn('cbfk-key', description === undefined && className), "data-uppercase": uppercase ? 'true' : undefined, children: children }));
|
|
20
|
+
if (description === undefined)
|
|
21
|
+
return badge;
|
|
22
|
+
return (_jsxs("p", { className: cn('cbfk-keyline', className), children: [badge, _jsx("span", { children: description })] }));
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=KeyBadge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KeyBadge.js","sourceRoot":"","sources":["../../../src/react/components/KeyBadge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,eAAe,CAAC;AAmBvB;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAiB;IACrF,MAAM,KAAK,GAAG,CACZ,eACE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,WAAW,KAAK,SAAS,IAAI,SAAS,CAAC,oBACjD,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,YAE7C,QAAQ,GACJ,CACR,CAAC;IACF,IAAI,WAAW,KAAK,SAAS;QAAE,OAAO,KAAK,CAAC;IAC5C,OAAO,CACL,aAAG,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC,aACxC,KAAK,EACN,yBAAO,WAAW,GAAQ,IACxB,CACL,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/react/components/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/react/components/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvC,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAkC3D,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6FAA6F;IAC7F,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gFAAgF;IAChF,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,IAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAiB,EACjB,aAAoB,EACpB,KAAK,EACL,UAAiB,EACjB,SAAS,GACV,EAAE,UAAU,+BA+IZ"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { X } from 'lucide-react';
|
|
3
3
|
import { useDiscardGuard } from '../hooks/useDiscardGuard.js';
|
|
4
|
+
import { useMediaQuery } from '../hooks/useMediaQuery.js';
|
|
5
|
+
import { useSwipeToDismiss } from '../hooks/useSwipeToDismiss.js';
|
|
4
6
|
import { cn } from '../lib/cn.js';
|
|
5
7
|
import { FooterSlot } from './ActionBar.js';
|
|
6
8
|
import { Dialog, DialogContent, DialogTitle, focusPanelOnOpen } from './dialog.js';
|
|
@@ -9,13 +11,29 @@ import { ScrollArea } from './ScrollArea.js';
|
|
|
9
11
|
// ONE sizing scale replaces the ad-hoc `max-w-xl`/`max-w-2xl`/`max-h-[80vh]` classNames
|
|
10
12
|
// scattered across the apps' modals. `full` is a near-fullscreen sheet with a 1rem margin
|
|
11
13
|
// on every side; `cn`'s twMerge dedupes its `max-h` against the base below (last wins).
|
|
14
|
+
// Every size is `sm:`-scoped: under `sm` a modal is a bottom sheet the width of the screen,
|
|
15
|
+
// whatever size it asked for on a desktop — see `SHEET` below.
|
|
12
16
|
const SIZE = {
|
|
13
|
-
sm: 'max-w-sm',
|
|
14
|
-
md: 'max-w-lg',
|
|
15
|
-
lg: 'max-w-2xl',
|
|
16
|
-
xl: 'max-w-4xl',
|
|
17
|
-
full: 'max-w-[calc(100vw-2rem)] max-h-[calc(100dvh-2rem)]',
|
|
17
|
+
sm: 'sm:max-w-sm',
|
|
18
|
+
md: 'sm:max-w-lg',
|
|
19
|
+
lg: 'sm:max-w-2xl',
|
|
20
|
+
xl: 'sm:max-w-4xl',
|
|
21
|
+
full: 'sm:max-w-[calc(100vw-2rem)] sm:max-h-[calc(100dvh-2rem)] max-sm:h-dvh max-sm:max-h-dvh max-sm:rounded-none',
|
|
18
22
|
};
|
|
23
|
+
/** Below `sm` (640px), where a centred card becomes a bottom sheet. */
|
|
24
|
+
const PHONE_QUERY = '(max-width: 639px)';
|
|
25
|
+
/**
|
|
26
|
+
* 🔴 A phone gets a BOTTOM SHEET, not a centred card — the owner's cb-form review, 2026-09-30:
|
|
27
|
+
* *"Instead of a centered floating rectangle with a dark backdrop mask, the entire interaction
|
|
28
|
+
* behaves like a native iOS bottom drawer. It anchors to the bottom of the screen, sliding
|
|
29
|
+
* upward to take up 90% or 100% of the viewport."* A centred card on a 390px screen is a
|
|
30
|
+
* smaller screen inside the screen, with its Save button wherever the content left it; a sheet
|
|
31
|
+
* puts the footer's actions where the thumb already is, and comes down with the same swipe
|
|
32
|
+
* every native sheet does.
|
|
33
|
+
*/
|
|
34
|
+
const SHEET = 'max-sm:inset-x-0 max-sm:bottom-0 max-sm:w-full max-sm:max-w-none max-sm:max-h-[92dvh] max-sm:rounded-t-2xl max-sm:rounded-b-none max-sm:border-x-0 max-sm:border-b-0 max-sm:data-[state=open]:slide-in-from-bottom max-sm:data-[state=closed]:slide-out-to-bottom';
|
|
35
|
+
/** From `sm` up: the centred card, capped to the viewport, zooming in. */
|
|
36
|
+
const CARD = 'sm:top-1/2 sm:left-1/2 sm:w-[calc(100vw-2rem)] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:max-h-[min(90dvh,calc(100dvh-2rem))] sm:data-[state=open]:zoom-in-95 sm:data-[state=closed]:zoom-out-95';
|
|
19
37
|
/**
|
|
20
38
|
* Centered modal dialog on Radix Dialog (shadcn-vendored). Renders into a portal, so it
|
|
21
39
|
* is never clipped by an `overflow` ancestor; the focus trap and body scroll-lock are
|
|
@@ -35,13 +53,21 @@ export function Modal({ open, onClose, size = 'md', title, subtitle, children, f
|
|
|
35
53
|
isDirty,
|
|
36
54
|
onSave,
|
|
37
55
|
});
|
|
56
|
+
const isPhone = useMediaQuery(PHONE_QUERY);
|
|
57
|
+
// Swiping the sheet down is a SOFT dismiss, exactly like a backdrop tap — so a dialog that
|
|
58
|
+
// refuses the backdrop refuses the swipe too, and a dirty form still gets its discard prompt.
|
|
59
|
+
const swipeRef = useSwipeToDismiss('down', guardedClose, open && isPhone && backdropClose && !isConfirming);
|
|
38
60
|
return (_jsx(Dialog, { open: open, onOpenChange: (v) => {
|
|
39
61
|
if (!v)
|
|
40
62
|
guardedClose();
|
|
41
63
|
}, children: _jsxs(DialogContent, { className: cn(
|
|
42
|
-
//
|
|
43
|
-
// margin on each side at every size, then caps at the size's
|
|
44
|
-
|
|
64
|
+
// A bottom sheet on a phone, a centred card from `sm` up (see SHEET / CARD). The
|
|
65
|
+
// card keeps a 1rem margin on each side at every size, then caps at the size's
|
|
66
|
+
// max-width.
|
|
67
|
+
'fixed flex flex-col gap-0 overflow-hidden',
|
|
68
|
+
// The body scrolls with `py-4`: a form kit preview pinned inside it sits flush with
|
|
69
|
+
// the body's top edge rather than a padding's height below it (formKit.css).
|
|
70
|
+
'[--cbfk-sticky-top:-1rem]', 'border border-border bg-popover text-popover-foreground shadow-overlay', 'data-[state=open]:animate-in data-[state=open]:fade-in-0', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0', SHEET, CARD, SIZE[size], className),
|
|
45
71
|
// Intercept Radix's default close so a dirty form gets the discard prompt; while
|
|
46
72
|
// the prompt is up, Escape cancels it (keep editing) instead of re-prompting.
|
|
47
73
|
// backdropClose={false} turns the backdrop into a no-op — critical dialogs that
|
|
@@ -67,6 +93,6 @@ export function Modal({ open, onClose, size = 'md', title, subtitle, children, f
|
|
|
67
93
|
cancelDiscard();
|
|
68
94
|
else
|
|
69
95
|
guardedClose();
|
|
70
|
-
}, children: [_jsxs("div", { className: 'flex flex-none items-center justify-between gap-3 border-b border-border px-5 py-4', children: [title ? (_jsxs("div", { className: 'min-w-0 flex-1', children: [_jsx(DialogTitle, { className: 'wrap-break-word text-base font-semibold', children: title }), subtitle ? (_jsx("p", { className: 'mt-1 text-caption leading-relaxed text-muted-foreground', children: subtitle })) : null] })) : (_jsx(DialogTitle, { className: 'sr-only', children: "Dialog" })), _jsx(IconButton, { label: 'Close', onClick: guardedClose, children: _jsx(X, {}) })] }), aside ? (_jsxs("div", { "data-cb-modal-split": '', className: 'flex min-h-0 flex-1 flex-col md:flex-row md:divide-x md:divide-border', children: [_jsx("div", { "data-cb-modal-aside": '', className: cn('flex min-h-0 flex-col md:flex-none', asideWidth === 'md' ? 'md:w-2/5' : 'md:w-1/3'), children: _jsx(ScrollArea, { className: 'px-5 py-4', children: aside }) }), _jsx("div", { className: 'flex min-h-0 flex-1 flex-col', children: scrollBody ? (_jsx(ScrollArea, { className: 'px-5 py-4', children: children })) : (_jsx("div", { className: 'flex min-h-0 flex-1 flex-col', children: children })) })] })) : scrollBody ? (_jsx(ScrollArea, { className: 'px-5 py-4', children: children })) : (_jsx("div", { className: 'flex min-h-0 flex-1 flex-col', children: children })), problem ? (_jsx("div", { className: 'flex-none px-5 pt-3 empty:hidden', children: problem })) : null, _jsx(FooterSlot, { footer: footer }), discardOverlay] }) }));
|
|
96
|
+
}, children: [_jsxs("div", { ref: swipeRef, "data-cb-modal-handle": '', className: 'relative flex flex-none items-center justify-between gap-3 border-b border-border px-5 py-4 max-sm:touch-none max-sm:pt-6', children: [_jsx("span", { "aria-hidden": true, className: 'pointer-events-none absolute top-2 left-1/2 h-1 w-9 -translate-x-1/2 rounded-full bg-border sm:hidden' }), title ? (_jsxs("div", { className: 'min-w-0 flex-1', children: [_jsx(DialogTitle, { className: 'wrap-break-word text-base font-semibold', children: title }), subtitle ? (_jsx("p", { className: 'mt-1 text-caption leading-relaxed text-muted-foreground', children: subtitle })) : null] })) : (_jsx(DialogTitle, { className: 'sr-only', children: "Dialog" })), _jsx(IconButton, { label: 'Close', onClick: guardedClose, children: _jsx(X, {}) })] }), aside ? (_jsxs("div", { "data-cb-modal-split": '', className: 'flex min-h-0 flex-1 flex-col md:flex-row md:divide-x md:divide-border', children: [_jsx("div", { "data-cb-modal-aside": '', className: cn('flex min-h-0 flex-col md:flex-none', asideWidth === 'md' ? 'md:w-2/5' : 'md:w-1/3'), children: _jsx(ScrollArea, { className: 'px-5 py-4', children: aside }) }), _jsx("div", { className: 'flex min-h-0 flex-1 flex-col', children: scrollBody ? (_jsx(ScrollArea, { className: 'px-5 py-4', children: children })) : (_jsx("div", { className: 'flex min-h-0 flex-1 flex-col', children: children })) })] })) : scrollBody ? (_jsx(ScrollArea, { className: 'px-5 py-4', children: children })) : (_jsx("div", { className: 'flex min-h-0 flex-1 flex-col', children: children })), problem ? (_jsx("div", { className: 'flex-none px-5 pt-3 empty:hidden', children: problem })) : null, _jsx(FooterSlot, { footer: footer }), discardOverlay] }) }));
|
|
71
97
|
}
|
|
72
98
|
//# sourceMappingURL=Modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/react/components/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAEjC,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACnF,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI7C,wFAAwF;AACxF,0FAA0F;AAC1F,wFAAwF;AACxF,MAAM,IAAI,GAA8B;IACtC,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/react/components/Modal.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NativeSelect.d.ts","sourceRoot":"","sources":["../../../src/react/components/NativeSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAA4B,KAAK,qBAAqB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7F,OAAO,EAAE,KAAK,WAAW,
|
|
1
|
+
{"version":3,"file":"NativeSelect.d.ts","sourceRoot":"","sources":["../../../src/react/components/NativeSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAA4B,KAAK,qBAAqB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7F,OAAO,EAAE,KAAK,WAAW,EAAwC,MAAM,iBAAiB,CAAC;AAEzF,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IACtF,iFAAiF;IACjF,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;gFAC4E;IAC5E,OAAO,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACxC;;;kBAGc;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oFAAoF;IACpF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;;;;;;;;;OAYG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAmCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAW,EACX,OAAO,EACP,WAAW,EACX,SAAS,EACT,gBAAgB,EAChB,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,+BA6CnB"}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { ChevronDown } from 'lucide-react';
|
|
3
3
|
import { Children, isValidElement } from 'react';
|
|
4
4
|
import { cn } from '../lib/cn.js';
|
|
5
|
-
import { fieldControlClass } from '../lib/field.js';
|
|
5
|
+
import { declareFieldWidth, fieldControlClass } from '../lib/field.js';
|
|
6
6
|
/**
|
|
7
7
|
* Does this control offer anything the reader can actually pick?
|
|
8
8
|
*
|
|
@@ -84,4 +84,5 @@ export function NativeSelect({ size = 'md', options, placeholder, className, wra
|
|
|
84
84
|
// reserves the room the drawn chevron below occupies.
|
|
85
85
|
'appearance-none pr-9', className), ...props, children: [placeholder !== undefined && (_jsx("option", { value: '', disabled: true, children: placeholder })), options?.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))), children, empty && (_jsx("option", { disabled: true, value: '__empty__', children: emptyLabel ?? 'Nothing to choose from yet' }))] }), _jsx(ChevronDown, { "aria-hidden": 'true', className: 'pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 opacity-60' })] }));
|
|
86
86
|
}
|
|
87
|
+
declareFieldWidth(NativeSelect, 'md');
|
|
87
88
|
//# sourceMappingURL=NativeSelect.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NativeSelect.js","sourceRoot":"","sources":["../../../src/react/components/NativeSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,cAAc,EAA8C,MAAM,OAAO,CAAC;AAC7F,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAoB,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"NativeSelect.js","sourceRoot":"","sources":["../../../src/react/components/NativeSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,cAAc,EAA8C,MAAM,OAAO,CAAC;AAC7F,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAoB,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAqCzF;;;;;;;GAOG;AACH,SAAS,mBAAmB,CAC1B,OAAkD,EAClD,QAAmB;IAEnB,IAAI,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,IAAI,CAAC;IAC/C,IAAI,KAAK,GAAG,KAAK,CAAC;IAClB,MAAM,KAAK,GAAG,CAAC,IAAe,EAAQ,EAAE;QACtC,IAAI,KAAK;YAAE,OAAO;QAClB,KAAK,MAAM,KAAK,IAAI,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;YAC3C,IAAI,KAAK;gBAAE,OAAO;YAClB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;gBAAE,SAAS;YACrC,MAAM,KAAK,GAAG,KAAK,CAAC,KAAsE,CAAC;YAC3F,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;gBAC9B,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;gBACtB,SAAS;YACX,CAAC;YACD,IAAI,KAAK,CAAC,QAAQ;gBAAE,SAAS;YAC7B,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,IAAI,KAAK,CAAC,KAAK,KAAK,EAAE;gBAAE,SAAS;YAC9D,KAAK,GAAG,IAAI,CAAC;QACf,CAAC;IACH,CAAC,CAAC;IACF,KAAK,CAAC,QAAQ,CAAC,CAAC;IAChB,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,IAAI,GAAG,IAAI,EACX,OAAO,EACP,WAAW,EACX,SAAS,EACT,gBAAgB,EAChB,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACU;IAClB,MAAM,KAAK,GAAG,CAAC,mBAAmB,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IACtD,OAAO,CACL,gBAAM,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,aACrD;gBACE,6EAA6E;gBAC7E,qEAAqE;gBACrE,SAAS,EAAE,EAAE,CACX,iBAAiB,CAAC,IAAI,CAAC;gBACvB,wEAAwE;gBACxE,uEAAuE;gBACvE,sDAAsD;gBACtD,sBAAsB,EACtB,SAAS,CACV,KACG,KAAK,aAER,WAAW,KAAK,SAAS,IAAI,CAC5B,iBAAQ,KAAK,EAAC,EAAE,EAAC,QAAQ,kBACtB,WAAW,GACL,CACV,EACA,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACxB,iBAA2B,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,YACtE,MAAM,CAAC,KAAK,IADF,MAAM,CAAC,KAAK,CAEhB,CACV,CAAC,EACD,QAAQ,EAIR,KAAK,IAAI,CACR,iBAAQ,QAAQ,QAAC,KAAK,EAAC,WAAW,YAC/B,UAAU,IAAI,4BAA4B,GACpC,CACV,IACM,EAGT,KAAC,WAAW,mBACE,MAAM,EAClB,SAAS,EAAC,iFAAiF,GAC3F,IACG,CACR,CAAC;AACJ,CAAC;AAED,iBAAiB,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC"}
|
|
@@ -11,6 +11,9 @@ export interface PromptDialogProps {
|
|
|
11
11
|
cancelLabel?: string;
|
|
12
12
|
/** Spinner on the confirm button while an async `onSubmit` runs (caller-controlled). */
|
|
13
13
|
loading?: boolean;
|
|
14
|
+
/** Added to the dialog's content box — an app that scopes the belt's preflight under a class
|
|
15
|
+
* (binary-server's admin: `cb-scope`) passes it here, because the dialog portals to <body>. */
|
|
16
|
+
className?: string;
|
|
14
17
|
}
|
|
15
18
|
/**
|
|
16
19
|
* The single text-prompt dialog — a styled, app-native replacement for `window.prompt`.
|
|
@@ -20,5 +23,5 @@ export interface PromptDialogProps {
|
|
|
20
23
|
* For the fire-and-forget, no-JSX-context case use the imperative {@link prompt} helper.
|
|
21
24
|
* For yes/no confirmations without input, use {@link ConfirmDialog} / {@link confirm}.
|
|
22
25
|
*/
|
|
23
|
-
export declare function PromptDialog({ open, onSubmit, onCancel, title, message, placeholder, defaultValue, confirmLabel, cancelLabel, loading, }: PromptDialogProps): import("react").JSX.Element;
|
|
26
|
+
export declare function PromptDialog({ open, onSubmit, onCancel, title, message, placeholder, defaultValue, confirmLabel, cancelLabel, loading, className, }: PromptDialogProps): import("react").JSX.Element;
|
|
24
27
|
//# sourceMappingURL=PromptDialog.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PromptDialog.d.ts","sourceRoot":"","sources":["../../../src/react/components/PromptDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAoB,MAAM,OAAO,CAAC;AAMzD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wFAAwF;IACxF,OAAO,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"PromptDialog.d.ts","sourceRoot":"","sources":["../../../src/react/components/PromptDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAoB,MAAM,OAAO,CAAC;AAMzD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wFAAwF;IACxF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;oGACgG;IAChG,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,OAAO,EACP,WAAW,EACX,YAAiB,EACjB,YAAmB,EACnB,WAAsB,EACtB,OAAe,EACf,SAAS,GACV,EAAE,iBAAiB,+BAqEnB"}
|
|
@@ -12,7 +12,7 @@ import { Input } from './Input.js';
|
|
|
12
12
|
* For the fire-and-forget, no-JSX-context case use the imperative {@link prompt} helper.
|
|
13
13
|
* For yes/no confirmations without input, use {@link ConfirmDialog} / {@link confirm}.
|
|
14
14
|
*/
|
|
15
|
-
export function PromptDialog({ open, onSubmit, onCancel, title, message, placeholder, defaultValue = '', confirmLabel = 'OK', cancelLabel = 'Cancel', loading = false, }) {
|
|
15
|
+
export function PromptDialog({ open, onSubmit, onCancel, title, message, placeholder, defaultValue = '', confirmLabel = 'OK', cancelLabel = 'Cancel', loading = false, className, }) {
|
|
16
16
|
const [value, setValue] = useState(defaultValue);
|
|
17
17
|
const inputRef = useRef(null);
|
|
18
18
|
const handleSubmit = () => {
|
|
@@ -22,7 +22,7 @@ export function PromptDialog({ open, onSubmit, onCancel, title, message, placeho
|
|
|
22
22
|
return (_jsx(Dialog, { open: open, onOpenChange: (v) => {
|
|
23
23
|
if (!v)
|
|
24
24
|
onCancel();
|
|
25
|
-
}, children: _jsxs(DialogContent, { className: cn('fixed top-1/2 left-1/2 flex w-[calc(100vw-2rem)] max-w-sm -translate-x-1/2 -translate-y-1/2 flex-col gap-4', 'rounded-xl border border-border bg-popover p-6 text-popover-foreground shadow-overlay', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95'), onOpenAutoFocus: (e) => {
|
|
25
|
+
}, children: _jsxs(DialogContent, { className: cn('fixed top-1/2 left-1/2 flex w-[calc(100vw-2rem)] max-w-sm -translate-x-1/2 -translate-y-1/2 flex-col gap-4', 'rounded-xl border border-border bg-popover p-6 text-popover-foreground shadow-overlay', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', className), onOpenAutoFocus: (e) => {
|
|
26
26
|
e.preventDefault();
|
|
27
27
|
inputRef.current?.focus();
|
|
28
28
|
inputRef.current?.select();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PromptDialog.js","sourceRoot":"","sources":["../../../src/react/components/PromptDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACpF,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"PromptDialog.js","sourceRoot":"","sources":["../../../src/react/components/PromptDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACpF,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAmBnC;;;;;;;GAOG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,OAAO,EACP,WAAW,EACX,YAAY,GAAG,EAAE,EACjB,YAAY,GAAG,IAAI,EACnB,WAAW,GAAG,QAAQ,EACtB,OAAO,GAAG,KAAK,EACf,SAAS,GACS;IAClB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEhD,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IAAI,CAAC,OAAO;YAAE,KAAK,QAAQ,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;YAClB,IAAI,CAAC,CAAC;gBAAE,QAAQ,EAAE,CAAC;QACrB,CAAC,YAED,MAAC,aAAa,IACZ,SAAS,EAAE,EAAE,CACX,4GAA4G,EAC5G,uFAAuF,EACvF,uFAAuF,EACvF,gGAAgG,EAChG,SAAS,CACV,EACD,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;gBACrB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gBAC1B,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;YAC7B,CAAC,aAED,eAAK,SAAS,EAAC,uBAAuB,aACpC,KAAC,WAAW,IAAC,SAAS,EAAC,yBAAyB,YAAE,KAAK,GAAe,EACrE,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,iBAAiB,IAAC,SAAS,EAAC,+BAA+B,YACzD,OAAO,GACU,CACrB,CAAC,CAAC,CAAC,IAAI,IACJ,EACN,KAAC,KAAK,IACJ,GAAG,EAAE,QAAQ,gCAEb,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACzC,OAAO,EAAE,YAAY,GACrB,EACF,eAAK,SAAS,EAAC,wBAAwB,aACrC,KAAC,MAAM,4BAEL,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,OAAO,EACjB,OAAO,EAAE,WAAW,YAEnB,WAAW,GACL,EACT,KAAC,MAAM,6BAEL,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,YAAY,EACrB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,YAAY,YAEpB,YAAY,GACN,IACL,IACQ,GACT,CACV,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RenderField.d.ts","sourceRoot":"","sources":["../../../src/react/components/RenderField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,SAAS,
|
|
1
|
+
{"version":3,"file":"RenderField.d.ts","sourceRoot":"","sources":["../../../src/react/components/RenderField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,SAAS,EAAkB,MAAM,iBAAiB,CAAC;AAE7E,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,SAAS,CAAC;CACjB;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,EAAE,gBAAgB,+BAiCrD"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Controller, useFormContext } from 'react-hook-form';
|
|
3
3
|
import { Field } from './Field.js';
|
|
4
|
-
import { FieldInput } from './FieldInput.js';
|
|
4
|
+
import { FieldInput, fieldSpecWidth } from './FieldInput.js';
|
|
5
5
|
/**
|
|
6
6
|
* The form-level field renderer: composes {@link Field} (label + hint + description +
|
|
7
7
|
* inline error) + a RHF `<Controller>` + the {@link FieldInput} type-dispatch in one
|
|
@@ -14,6 +14,6 @@ import { FieldInput } from './FieldInput.js';
|
|
|
14
14
|
*/
|
|
15
15
|
export function RenderField({ spec }) {
|
|
16
16
|
const { control } = useFormContext();
|
|
17
|
-
return (_jsx(Field, { name: spec.key, label: spec.label, hint: spec.hint, description: spec.description, required: spec.required, children: (aria) => (_jsx(Controller, { name: spec.key, control: control, render: ({ field }) => (_jsx(FieldInput, { fieldSpec: spec, id: aria.id, "aria-invalid": aria['aria-invalid'], "aria-describedby": aria['aria-describedby'], name: field.name, value: field.value, onChange: field.onChange, onBlur: field.onBlur, disabled: spec.readOnly, placeholder: spec.placeholder })) })) }));
|
|
17
|
+
return (_jsx(Field, { name: spec.key, label: spec.label, hint: spec.hint, description: spec.description, required: spec.required, width: fieldSpecWidth(spec), children: (aria) => (_jsx(Controller, { name: spec.key, control: control, render: ({ field }) => (_jsx(FieldInput, { fieldSpec: spec, id: aria.id, "aria-invalid": aria['aria-invalid'], "aria-describedby": aria['aria-describedby'], name: field.name, value: field.value, onChange: field.onChange, onBlur: field.onBlur, disabled: spec.readOnly, placeholder: spec.placeholder })) })) }));
|
|
18
18
|
}
|
|
19
19
|
//# sourceMappingURL=RenderField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RenderField.js","sourceRoot":"","sources":["../../../src/react/components/RenderField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,UAAU,EAAkB,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"RenderField.js","sourceRoot":"","sources":["../../../src/react/components/RenderField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,UAAU,EAAkB,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAM7E;;;;;;;;;GASG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,IAAI,EAAoB;IACpD,MAAM,EAAE,OAAO,EAAE,GAAG,cAAc,EAAE,CAAC;IACrC,OAAO,CACL,KAAC,KAAK,IACJ,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,YAE1B,CAAC,IAAI,EAAE,EAAE,CAAC,CACT,KAAC,UAAU,IACT,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACrB,KAAC,UAAU,IACT,SAAS,EAAE,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,EAAE,kBACG,IAAI,CAAC,cAAc,CAAC,sBAChB,IAAI,CAAC,kBAAkB,CAAC,EAC1C,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,GAC7B,CACH,GACD,CACH,GACK,CACT,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
import './formKit.css';
|
|
3
|
+
export interface RevealActionProps {
|
|
4
|
+
/** The door's words — *"Add conditional logic"*. Drawn after a `+`. */
|
|
5
|
+
label: string;
|
|
6
|
+
/** What the door reveals. Rendered only once open, so an unused option costs no space. */
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
/** Controlled. Pass `true` whenever the thing behind the door is already in use (a field
|
|
9
|
+
* that HAS rules must show them), so the door never hides configured state. */
|
|
10
|
+
open?: boolean;
|
|
11
|
+
/** Uncontrolled initial state. Default `false`. */
|
|
12
|
+
defaultOpen?: boolean;
|
|
13
|
+
onOpenChange?: (open: boolean) => void;
|
|
14
|
+
/** Replaces the `+` glyph. */
|
|
15
|
+
icon?: ReactNode;
|
|
16
|
+
className?: string;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Progressive disclosure for a rarely used option: a quiet `+ Add …` micro-button until
|
|
20
|
+
* somebody asks, then the option itself in its place.
|
|
21
|
+
*
|
|
22
|
+
* The owner's cb-form review (2026-09-30), on a *"When this changes, do something…"* line
|
|
23
|
+
* repeated under all 24 fields of a template: *"Since the logic is rarely used, hiding it by
|
|
24
|
+
* default will immediately clean up the visual clutter … The configuration input should only
|
|
25
|
+
* appear after a user explicitly clicks that trigger line."*
|
|
26
|
+
*
|
|
27
|
+
* Opening it moves focus to the first control it revealed, so a keyboard user lands in the
|
|
28
|
+
* thing they asked for rather than on a button that no longer exists.
|
|
29
|
+
*
|
|
30
|
+
* Plain stylesheet (`formKit.css`) — draws without Tailwind; `cursedbelt/react/form-kit`.
|
|
31
|
+
*/
|
|
32
|
+
export declare function RevealAction({ label, children, open: controlled, defaultOpen, onOpenChange, icon, className, }: RevealActionProps): import("react").JSX.Element;
|
|
33
|
+
//# sourceMappingURL=RevealAction.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RevealAction.d.ts","sourceRoot":"","sources":["../../../src/react/components/RevealAction.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAEpE,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,iBAAiB;IAChC,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,0FAA0F;IAC1F,QAAQ,EAAE,SAAS,CAAC;IACpB;oFACgF;IAChF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,8BAA8B;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,IAAI,EAAE,UAAU,EAChB,WAAmB,EACnB,YAAY,EACZ,IAAI,EACJ,SAAS,GACV,EAAE,iBAAiB,+BAqCnB"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Plus } from 'lucide-react';
|
|
3
|
+
import { useEffect, useRef, useState } from 'react';
|
|
4
|
+
import { cn } from '../lib/cn.js';
|
|
5
|
+
import './formKit.css';
|
|
6
|
+
const FOCUSABLE = 'input, select, textarea, button, [href], [tabindex]:not([tabindex="-1"])';
|
|
7
|
+
/**
|
|
8
|
+
* Progressive disclosure for a rarely used option: a quiet `+ Add …` micro-button until
|
|
9
|
+
* somebody asks, then the option itself in its place.
|
|
10
|
+
*
|
|
11
|
+
* The owner's cb-form review (2026-09-30), on a *"When this changes, do something…"* line
|
|
12
|
+
* repeated under all 24 fields of a template: *"Since the logic is rarely used, hiding it by
|
|
13
|
+
* default will immediately clean up the visual clutter … The configuration input should only
|
|
14
|
+
* appear after a user explicitly clicks that trigger line."*
|
|
15
|
+
*
|
|
16
|
+
* Opening it moves focus to the first control it revealed, so a keyboard user lands in the
|
|
17
|
+
* thing they asked for rather than on a button that no longer exists.
|
|
18
|
+
*
|
|
19
|
+
* Plain stylesheet (`formKit.css`) — draws without Tailwind; `cursedbelt/react/form-kit`.
|
|
20
|
+
*/
|
|
21
|
+
export function RevealAction({ label, children, open: controlled, defaultOpen = false, onOpenChange, icon, className, }) {
|
|
22
|
+
const [uncontrolled, setUncontrolled] = useState(defaultOpen);
|
|
23
|
+
const open = controlled ?? uncontrolled;
|
|
24
|
+
const region = useRef(null);
|
|
25
|
+
const openedByClick = useRef(false);
|
|
26
|
+
useEffect(() => {
|
|
27
|
+
if (!open || !openedByClick.current)
|
|
28
|
+
return;
|
|
29
|
+
openedByClick.current = false;
|
|
30
|
+
region.current?.querySelector(FOCUSABLE)?.focus();
|
|
31
|
+
}, [open]);
|
|
32
|
+
if (!open) {
|
|
33
|
+
return (_jsxs("button", {
|
|
34
|
+
// guardrails-ignore no-raw-action-button: a disclosure door — it reveals a control,
|
|
35
|
+
// mutates nothing, and must draw without Tailwind.
|
|
36
|
+
type: 'button', className: cn('cbfk-reveal', className), "aria-expanded": false, onClick: () => {
|
|
37
|
+
openedByClick.current = true;
|
|
38
|
+
if (controlled === undefined)
|
|
39
|
+
setUncontrolled(true);
|
|
40
|
+
onOpenChange?.(true);
|
|
41
|
+
}, children: [icon ?? _jsx(Plus, { "aria-hidden": true }), _jsx("span", { children: label })] }));
|
|
42
|
+
}
|
|
43
|
+
return (_jsx("div", { ref: region, className: className, children: children }));
|
|
44
|
+
}
|
|
45
|
+
//# sourceMappingURL=RevealAction.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RevealAction.js","sourceRoot":"","sources":["../../../src/react/components/RevealAction.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAkB,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,eAAe,CAAC;AAkBvB,MAAM,SAAS,GAAG,0EAA0E,CAAC;AAE7F;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,IAAI,EAAE,UAAU,EAChB,WAAW,GAAG,KAAK,EACnB,YAAY,EACZ,IAAI,EACJ,SAAS,GACS;IAClB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAC9D,MAAM,IAAI,GAAG,UAAU,IAAI,YAAY,CAAC;IACxC,MAAM,MAAM,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC5C,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO;YAAE,OAAO;QAC5C,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;QAC9B,MAAM,CAAC,OAAO,EAAE,aAAa,CAAc,SAAS,CAAC,EAAE,KAAK,EAAE,CAAC;IACjE,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,CACL;YACE,oFAAoF;YACpF,mDAAmD;YACnD,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,mBACxB,KAAK,EACpB,OAAO,EAAE,GAAG,EAAE;gBACZ,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;gBAC7B,IAAI,UAAU,KAAK,SAAS;oBAAE,eAAe,CAAC,IAAI,CAAC,CAAC;gBACpD,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC;YACvB,CAAC,aAEA,IAAI,IAAI,KAAC,IAAI,0BAAe,EAC7B,yBAAO,KAAK,GAAQ,IACb,CACV,CAAC;IACJ,CAAC;IAED,OAAO,CACL,cAAK,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,YACnC,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SecretInput.d.ts","sourceRoot":"","sources":["../../../src/react/components/SecretInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAEzF,OAAO,EAAwB,KAAK,WAAW,
|
|
1
|
+
{"version":3,"file":"SecretInput.d.ts","sourceRoot":"","sources":["../../../src/react/components/SecretInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAEzF,OAAO,EAAwB,KAAK,WAAW,EAAqB,MAAM,iBAAiB,CAAC;AAC5F,OAAO,EAA8B,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AAiEhF,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE1D,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,eAAe,CAAC;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;gEAC4D;IAC5D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oFAAoF;IACpF,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;kEAE8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2EAA2E;IAC3E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACjD;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;uEACmE;IACnE,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;2CACuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4FAA4F;IAC5F,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;kCAC8B;IAC9B,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,iSA0BzB,gBAAgB,gCAmFlB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState } from 'react';
|
|
3
3
|
import { useCopyToClipboard } from '../hooks/useCopyToClipboard.js';
|
|
4
|
-
import { CONTROL_HEIGHT_CLASS } from '../lib/field.js';
|
|
4
|
+
import { CONTROL_HEIGHT_CLASS, declareFieldWidth } from '../lib/field.js';
|
|
5
5
|
import { resolveClass, resolveStyle } from '../styling.js';
|
|
6
6
|
import { IconButton } from './IconButton.js';
|
|
7
7
|
import { TAP_TARGET, TAP_TARGET_HEIGHT } from '../lib/tapTarget.js';
|
|
@@ -53,4 +53,5 @@ export const SecretInput = ({ value, onChange, reveal, onToggleReveal, label = '
|
|
|
53
53
|
// biome-ignore lint/a11y/noAutofocus: opt-in via prop, used in editor rows
|
|
54
54
|
autoFocus: autoFocus, className: resolveClass('min-w-0 flex-1 self-stretch bg-transparent px-2 font-mono text-base text-field-fg outline-none placeholder:text-field-placeholder sm:text-sm', classNames?.input, unstyled) }), actions, showToggle && (_jsx(IconButton, { label: shown ? `Hide ${label}` : `Reveal ${label}`, onClick: toggle, className: resolveClass(BTN_CLASS, classNames?.button, unstyled), children: shown ? _jsx(EyeOff, {}) : _jsx(Eye, {}) })), showCopy && (_jsx(IconButton, { label: `Copy ${label}`, onClick: handleCopy, className: resolveClass(BTN_CLASS, classNames?.button, unstyled), children: copied ? _jsx(Check, {}) : _jsx(Copy, {}) }))] }));
|
|
55
55
|
};
|
|
56
|
+
declareFieldWidth(SecretInput, 'md');
|
|
56
57
|
//# sourceMappingURL=SecretInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SecretInput.js","sourceRoot":"","sources":["../../../src/react/components/SecretInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0D,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzF,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAoB,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"SecretInput.js","sourceRoot":"","sources":["../../../src/react/components/SecretInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../../src/react/components/SelectField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAE,KAAK,WAAW,
|
|
1
|
+
{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../../src/react/components/SelectField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAE,KAAK,WAAW,EAAwC,MAAM,iBAAiB,CAAC;AAQzF,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,EAAE,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;mEAC+D;IAC/D,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,6EAA6E;IAC7E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,sEAAsE;IACtE,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;sFACkF;IAClF,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EACb,OAAY,EACZ,MAAW,EACX,WAAuB,EACvB,QAAQ,EACR,UAAiB,EACjB,IAAW,EACX,EAAE,EACF,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,UAAU,EACV,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,GACpC,EAAE,gBAAgB,+BA2FlB"}
|
|
@@ -3,7 +3,7 @@ import * as RSelect from '@radix-ui/react-select';
|
|
|
3
3
|
import { Check, ChevronDown, ChevronUp } from 'lucide-react';
|
|
4
4
|
import { cn } from '../lib/cn.js';
|
|
5
5
|
import { useFloatingContainer } from '../lib/floatingContainer.js';
|
|
6
|
-
import { fieldControlClass } from '../lib/field.js';
|
|
6
|
+
import { declareFieldWidth, fieldControlClass } from '../lib/field.js';
|
|
7
7
|
import { FLOATING_ANIMATION, FLOATING_COLLISION_PADDING, FLOATING_CONTENT_BASE, FLOATING_ITEM_BASE, } from '../lib/floatingStyles.js';
|
|
8
8
|
/**
|
|
9
9
|
* Portal-based select control on Radix Select. Replaces the native `<select>`
|
|
@@ -24,4 +24,5 @@ export function SelectField({ value, onValueChange, options = [], groups = [], p
|
|
|
24
24
|
const container = useFloatingContainer();
|
|
25
25
|
return (_jsxs(RSelect.Root, { value: value, onValueChange: onValueChange, disabled: disabled, name: name, required: required, children: [_jsxs(RSelect.Trigger, { id: id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, className: cn(fieldStyle && fieldControlClass(size), 'flex items-center justify-between gap-2 data-[placeholder]:text-muted-foreground', className), children: [_jsx(RSelect.Value, { placeholder: placeholder }), _jsx(RSelect.Icon, { asChild: true, children: _jsx(ChevronDown, { className: 'size-4 shrink-0 opacity-50' }) })] }), _jsx(RSelect.Portal, { container: container, children: _jsxs(RSelect.Content, { position: 'popper', sideOffset: 4, collisionPadding: FLOATING_COLLISION_PADDING, className: cn(FLOATING_COLLISION_PADDING, FLOATING_CONTENT_BASE, FLOATING_ANIMATION, 'max-h-[var(--radix-select-content-available-height)] min-w-[var(--radix-select-trigger-width)] p-1'), children: [_jsx(RSelect.ScrollUpButton, { className: 'flex cursor-default items-center justify-center py-1', children: _jsx(ChevronUp, { className: 'size-4' }) }), _jsxs(RSelect.Viewport, { children: [empty && (_jsxs("div", { className: 'flex flex-col gap-0.5 px-2 py-2.5 text-left', children: [_jsx("span", { className: 'text-sm font-medium', children: emptyLabel ?? 'Nothing to choose from yet' }), emptyHint && _jsx("span", { className: 'text-xs text-muted-foreground', children: emptyHint })] })), allGroups.map((group, gi) => (_jsxs(RSelect.Group, { children: [group.label && (_jsx(RSelect.Label, { className: 'px-2 py-1.5 text-xs font-semibold text-muted-foreground', children: group.label })), group.options.map((opt) => (_jsxs(RSelect.Item, { value: opt.value, disabled: opt.disabled, className: cn(FLOATING_ITEM_BASE, 'pr-8'), children: [_jsx(RSelect.ItemIndicator, { className: 'absolute right-2 flex size-4 items-center justify-center', children: _jsx(Check, { className: 'size-3' }) }), _jsx(RSelect.ItemText, { children: opt.label }), opt.description && (_jsx("span", { className: 'text-xs text-muted-foreground', children: opt.description }))] }, opt.value))), gi < allGroups.length - 1 && _jsx(RSelect.Separator, { className: 'my-1 h-px bg-border' })] }, group.label ?? gi)))] }), _jsx(RSelect.ScrollDownButton, { className: 'flex cursor-default items-center justify-center py-1', children: _jsx(ChevronDown, { className: 'size-4' }) })] }) })] }));
|
|
26
26
|
}
|
|
27
|
+
declareFieldWidth(SelectField, 'md');
|
|
27
28
|
//# sourceMappingURL=SelectField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../../src/react/components/SelectField.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAoB,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../../src/react/components/SelectField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import './formKit.css';
|
|
3
|
+
export interface SettingsStripProps {
|
|
4
|
+
/** A short heading for the group — also its accessible name. Optional: most strips are
|
|
5
|
+
* obvious from what is on them, and a heading on every one is noise. */
|
|
6
|
+
label?: string;
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
className?: string;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Secondary configuration, clustered — a *Required* tick, an example value, an environment
|
|
12
|
+
* flag — on one slightly darker strip at the bottom of a settings panel.
|
|
13
|
+
*
|
|
14
|
+
* The owner's cb-form review (2026-09-30): these toggles *"are secondary configuration options.
|
|
15
|
+
* They should be visually clustered together to separate them from the primary field identity
|
|
16
|
+
* (Name & Type)."* The strip wraps; a text input on it is capped at 28rem and grows from 14rem,
|
|
17
|
+
* because an example value only needs to be wide enough to show a typical short one.
|
|
18
|
+
*
|
|
19
|
+
* Plain stylesheet (`formKit.css`) — draws without Tailwind; `cursedbelt/react/form-kit`.
|
|
20
|
+
*/
|
|
21
|
+
export declare function SettingsStrip({ label, children, className }: SettingsStripProps): import("react").JSX.Element;
|
|
22
|
+
//# sourceMappingURL=SettingsStrip.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SettingsStrip.d.ts","sourceRoot":"","sources":["../../../src/react/components/SettingsStrip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,kBAAkB;IACjC;6EACyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,kBAAkB,+BAa/E"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from '../lib/cn.js';
|
|
3
|
+
import './formKit.css';
|
|
4
|
+
/**
|
|
5
|
+
* Secondary configuration, clustered — a *Required* tick, an example value, an environment
|
|
6
|
+
* flag — on one slightly darker strip at the bottom of a settings panel.
|
|
7
|
+
*
|
|
8
|
+
* The owner's cb-form review (2026-09-30): these toggles *"are secondary configuration options.
|
|
9
|
+
* They should be visually clustered together to separate them from the primary field identity
|
|
10
|
+
* (Name & Type)."* The strip wraps; a text input on it is capped at 28rem and grows from 14rem,
|
|
11
|
+
* because an example value only needs to be wide enough to show a typical short one.
|
|
12
|
+
*
|
|
13
|
+
* Plain stylesheet (`formKit.css`) — draws without Tailwind; `cursedbelt/react/form-kit`.
|
|
14
|
+
*/
|
|
15
|
+
export function SettingsStrip({ label, children, className }) {
|
|
16
|
+
return (_jsxs("fieldset", { "aria-label": label, className: cn('cbfk-strip', className), children: [label ? (_jsx("p", { className: 'cbfk-strip-label', "aria-hidden": true, children: label })) : null, children] }));
|
|
17
|
+
}
|
|
18
|
+
//# sourceMappingURL=SettingsStrip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SettingsStrip.js","sourceRoot":"","sources":["../../../src/react/components/SettingsStrip.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,eAAe,CAAC;AAUvB;;;;;;;;;;GAUG;AACH,MAAM,UAAU,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAsB;IAC9E,OAAO,CAGL,kCAAsB,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,aAChE,KAAK,CAAC,CAAC,CAAC,CACP,YAAG,SAAS,EAAC,kBAAkB,iCAC5B,KAAK,GACJ,CACL,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,IACA,CACZ,CAAC;AACJ,CAAC"}
|