@12-apps/ui 6.85.0 → 6.86.0

package/dist/_internal/components/form/total-form/Fields/SelectField.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   SelectField
-} from "../../../../../chunk-GCBWZ3MX.js";
+} from "../../../../../chunk-6YSGP2WS.js";
 import "../../../../../chunk-4XK6JQ4D.js";
 import "../../../../../chunk-II3YNC5S.js";
 import "../../../../../chunk-NZBEE2PR.js";

package/dist/_internal/components/form/total-form/Fields/ToggleField.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   ToggleField
-} from "../../../../../chunk-75I42HHE.js";
+} from "../../../../../chunk-AYJGRQT4.js";
 import "../../../../../chunk-4XK6JQ4D.js";
 import "../../../../../chunk-ONMSTW4B.js";
 import "../../../../../chunk-U2QV4TTZ.js";

package/dist/_internal/components/form/total-form/Fields/index.js

@@ -1,4 +1,4 @@
-import "../../../../../chunk-LH3YT5NL.js";
+import "../../../../../chunk-TVDHA7BT.js";
 import {
   CepField
 } from "../../../../../chunk-YGWLMTPB.js";
@@ -7,13 +7,13 @@ import {
 } from "../../../../../chunk-P4Q7JK4L.js";
 import {
   ToggleField
-} from "../../../../../chunk-75I42HHE.js";
+} from "../../../../../chunk-AYJGRQT4.js";
 import {
   TextField
 } from "../../../../../chunk-3IX2TP4I.js";
 import {
   SelectField
-} from "../../../../../chunk-GCBWZ3MX.js";
+} from "../../../../../chunk-6YSGP2WS.js";
 import "../../../../../chunk-4XK6JQ4D.js";
 import "../../../../../chunk-II3YNC5S.js";
 import "../../../../../chunk-NZBEE2PR.js";

package/dist/{chunk-GCBWZ3MX.js → chunk-6YSGP2WS.js}

@@ -25,6 +25,7 @@ function SelectField({ name, options, label, placeholder }) {
         placeholder,
         value: values[name] ?? "",
         error: Boolean(error),
+        "aria-label": label,
         "data-testid": testId,
         onChange: (event) => setFieldValue(name, String(event.target.value))
       }
@@ -36,4 +37,4 @@ function SelectField({ name, options, label, placeholder }) {
 export {
   SelectField
 };
-//# sourceMappingURL=chunk-GCBWZ3MX.js.map
+//# sourceMappingURL=chunk-6YSGP2WS.js.map

package/dist/{chunk-GCBWZ3MX.js.map → chunk-6YSGP2WS.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/form/total-form/Fields/SelectField.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { FormControl, FormLabel, FormMessage } from '../../Form';\nimport { Select } from '../../Select';\nimport type { SelectOption } from '../../Select';\nimport { useFormContext } from '../FormContext';\n\n/** Props for the `total-form` {@link SelectField}. */\nexport interface SelectFieldProps {\n  /** Field name; also the key into the form's values/errors. */\n  name: string;\n  /** Selectable options. */\n  options: SelectOption[];\n  /** Optional visible label rendered above the select. */\n  label?: string;\n  /** Placeholder shown when no option is selected. */\n  placeholder?: string;\n}\n\n/**\n * Select field bound to {@link useFormContext}. Composes the existing\n * `@12-apps/ui` `Form*` primitives and the `Select` control, reading its\n * value/error from context and writing the chosen value back through it.\n *\n * Renders its error via `total-form-field-<name>-message` and the select via\n * `total-form-field-<name>`.\n */\nexport function SelectField({ name, options, label, placeholder }: SelectFieldProps): React.ReactElement {\n  const { values, errors, setFieldValue } = useFormContext();\n  const error = errors[name];\n  const testId = `total-form-field-${name}`;\n\n  return (\n    <FormControl fullWidth>\n      {label && (\n        <FormLabel htmlFor={name} error={Boolean(error)}>\n          {label}\n        </FormLabel>\n      )}\n      <Select\n        options={options}\n        placeholder={placeholder}\n        value={values[name] ?? ''}\n        error={Boolean(error)}\n        data-testid={testId}\n        onChange={(event) => setFieldValue(name, String(event.target.value))}\n      />\n      {error && (\n        <FormMessage error dataTestId={`${testId}-message`}>\n          {error}\n        </FormMessage>\n      )}\n    </FormControl>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAmCI,SAEI,KAFJ;AANG,SAAS,YAAY,EAAE,MAAM,SAAS,OAAO,YAAY,GAAyC;AACvG,QAAM,EAAE,QAAQ,QAAQ,cAAc,IAAI,eAAe;AACzD,QAAM,QAAQ,OAAO,IAAI;AACzB,QAAM,SAAS,oBAAoB,IAAI;AAEvC,SACE,qBAAC,eAAY,WAAS,MACnB;AAAA,aACC,oBAAC,aAAU,SAAS,MAAM,OAAO,QAAQ,KAAK,GAC3C,iBACH;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO,OAAO,IAAI,KAAK;AAAA,QACvB,OAAO,QAAQ,KAAK;AAAA,QACpB,eAAa;AAAA,QACb,UAAU,CAAC,UAAU,cAAc,MAAM,OAAO,MAAM,OAAO,KAAK,CAAC;AAAA;AAAA,IACrE;AAAA,IACC,SACC,oBAAC,eAAY,OAAK,MAAC,YAAY,GAAG,MAAM,YACrC,iBACH;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../src/components/form/total-form/Fields/SelectField.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { FormControl, FormLabel, FormMessage } from '../../Form';\nimport { Select } from '../../Select';\nimport type { SelectOption } from '../../Select';\nimport { useFormContext } from '../FormContext';\n\n/** Props for the `total-form` {@link SelectField}. */\nexport interface SelectFieldProps {\n  /** Field name; also the key into the form's values/errors. */\n  name: string;\n  /** Selectable options. */\n  options: SelectOption[];\n  /** Optional visible label rendered above the select. */\n  label?: string;\n  /** Placeholder shown when no option is selected. */\n  placeholder?: string;\n}\n\n/**\n * Select field bound to {@link useFormContext}. Composes the existing\n * `@12-apps/ui` `Form*` primitives and the `Select` control, reading its\n * value/error from context and writing the chosen value back through it.\n *\n * Renders its error via `total-form-field-<name>-message` and the select via\n * `total-form-field-<name>`.\n */\nexport function SelectField({ name, options, label, placeholder }: SelectFieldProps): React.ReactElement {\n  const { values, errors, setFieldValue } = useFormContext();\n  const error = errors[name];\n  const testId = `total-form-field-${name}`;\n\n  return (\n    <FormControl fullWidth>\n      {label && (\n        <FormLabel htmlFor={name} error={Boolean(error)}>\n          {label}\n        </FormLabel>\n      )}\n      <Select\n        options={options}\n        placeholder={placeholder}\n        value={values[name] ?? ''}\n        error={Boolean(error)}\n        // The `<label htmlFor>` above names nothing: the combobox is MUI's\n        // display div, not a labelable element. `Select` puts `aria-label` on\n        // that div, so the question names the control (FUT-4157).\n        aria-label={label}\n        data-testid={testId}\n        onChange={(event) => setFieldValue(name, String(event.target.value))}\n      />\n      {error && (\n        <FormMessage error dataTestId={`${testId}-message`}>\n          {error}\n        </FormMessage>\n      )}\n    </FormControl>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAmCI,SAEI,KAFJ;AANG,SAAS,YAAY,EAAE,MAAM,SAAS,OAAO,YAAY,GAAyC;AACvG,QAAM,EAAE,QAAQ,QAAQ,cAAc,IAAI,eAAe;AACzD,QAAM,QAAQ,OAAO,IAAI;AACzB,QAAM,SAAS,oBAAoB,IAAI;AAEvC,SACE,qBAAC,eAAY,WAAS,MACnB;AAAA,aACC,oBAAC,aAAU,SAAS,MAAM,OAAO,QAAQ,KAAK,GAC3C,iBACH;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO,OAAO,IAAI,KAAK;AAAA,QACvB,OAAO,QAAQ,KAAK;AAAA,QAIpB,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,UAAU,CAAC,UAAU,cAAc,MAAM,OAAO,MAAM,OAAO,KAAK,CAAC;AAAA;AAAA,IACrE;AAAA,IACC,SACC,oBAAC,eAAY,OAAK,MAAC,YAAY,GAAG,MAAM,YACrC,iBACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/{chunk-75I42HHE.js → chunk-AYJGRQT4.js}

@@ -25,6 +25,7 @@ function ToggleField({ name, options, label }) {
         options,
         value: values[name] ?? "",
         fullWidth: true,
+        "aria-label": label,
         dataTestId: testId,
         onChange: (_event, next) => {
           if (typeof next === "string") setFieldValue(name, next);
@@ -38,4 +39,4 @@ function ToggleField({ name, options, label }) {
 export {
   ToggleField
 };
-//# sourceMappingURL=chunk-75I42HHE.js.map
+//# sourceMappingURL=chunk-AYJGRQT4.js.map

package/dist/{chunk-75I42HHE.js.map → chunk-AYJGRQT4.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/form/total-form/Fields/ToggleField.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { FormControl, FormLabel, FormMessage } from '../../Form';\nimport { ToggleGroup } from '../../ToggleGroup';\nimport type { ToggleOption } from '../../ToggleGroup';\nimport { useFormContext } from '../FormContext';\n\n/** Props for the `total-form` {@link ToggleField}. */\nexport interface ToggleFieldProps {\n  /** Field name; also the key into the form's values/errors. */\n  name: string;\n  /** The mutually-exclusive options (one is always selected). */\n  options: ToggleOption[];\n  /** Optional visible label rendered above the toggle. */\n  label?: string;\n}\n\n/**\n * Exclusive toggle (segmented control) bound to {@link useFormContext} — a\n * label-height-matched alternative to {@link SelectField} for a short, always-set\n * enum. Composes the `Form*` primitives and the `ToggleGroup` control, reading\n * its value from context and writing the chosen value back through it. Ignores a\n * deselect (clicking the active segment) so a value is always kept.\n *\n * Renders its error via `total-form-field-<name>-message` and the toggle via\n * `total-form-field-<name>` (each segment at `total-form-field-<name>-item-<value>`).\n */\nexport function ToggleField({ name, options, label }: ToggleFieldProps): React.ReactElement {\n  const { values, errors, setFieldValue } = useFormContext();\n  const error = errors[name];\n  const testId = `total-form-field-${name}`;\n\n  return (\n    <FormControl fullWidth>\n      {label && (\n        <FormLabel htmlFor={name} error={Boolean(error)}>\n          {label}\n        </FormLabel>\n      )}\n      <ToggleGroup\n        variant=\"exclusive\"\n        options={options}\n        value={values[name] ?? ''}\n        fullWidth\n        dataTestId={testId}\n        onChange={(_event, next) => {\n          if (typeof next === 'string') setFieldValue(name, next);\n        }}\n      />\n      {error && (\n        <FormMessage error dataTestId={`${testId}-message`}>\n          {error}\n        </FormMessage>\n      )}\n    </FormControl>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAmCI,SAEI,KAFJ;AANG,SAAS,YAAY,EAAE,MAAM,SAAS,MAAM,GAAyC;AAC1F,QAAM,EAAE,QAAQ,QAAQ,cAAc,IAAI,eAAe;AACzD,QAAM,QAAQ,OAAO,IAAI;AACzB,QAAM,SAAS,oBAAoB,IAAI;AAEvC,SACE,qBAAC,eAAY,WAAS,MACnB;AAAA,aACC,oBAAC,aAAU,SAAS,MAAM,OAAO,QAAQ,KAAK,GAC3C,iBACH;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR;AAAA,QACA,OAAO,OAAO,IAAI,KAAK;AAAA,QACvB,WAAS;AAAA,QACT,YAAY;AAAA,QACZ,UAAU,CAAC,QAAQ,SAAS;AAC1B,cAAI,OAAO,SAAS,SAAU,eAAc,MAAM,IAAI;AAAA,QACxD;AAAA;AAAA,IACF;AAAA,IACC,SACC,oBAAC,eAAY,OAAK,MAAC,YAAY,GAAG,MAAM,YACrC,iBACH;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../src/components/form/total-form/Fields/ToggleField.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { FormControl, FormLabel, FormMessage } from '../../Form';\nimport { ToggleGroup } from '../../ToggleGroup';\nimport type { ToggleOption } from '../../ToggleGroup';\nimport { useFormContext } from '../FormContext';\n\n/** Props for the `total-form` {@link ToggleField}. */\nexport interface ToggleFieldProps {\n  /** Field name; also the key into the form's values/errors. */\n  name: string;\n  /** The mutually-exclusive options (one is always selected). */\n  options: ToggleOption[];\n  /** Optional visible label rendered above the toggle. */\n  label?: string;\n}\n\n/**\n * Exclusive toggle (segmented control) bound to {@link useFormContext} — a\n * label-height-matched alternative to {@link SelectField} for a short, always-set\n * enum. Composes the `Form*` primitives and the `ToggleGroup` control, reading\n * its value from context and writing the chosen value back through it. Ignores a\n * deselect (clicking the active segment) so a value is always kept.\n *\n * Renders its error via `total-form-field-<name>-message` and the toggle via\n * `total-form-field-<name>` (each segment at `total-form-field-<name>-item-<value>`).\n */\nexport function ToggleField({ name, options, label }: ToggleFieldProps): React.ReactElement {\n  const { values, errors, setFieldValue } = useFormContext();\n  const error = errors[name];\n  const testId = `total-form-field-${name}`;\n\n  return (\n    <FormControl fullWidth>\n      {label && (\n        <FormLabel htmlFor={name} error={Boolean(error)}>\n          {label}\n        </FormLabel>\n      )}\n      <ToggleGroup\n        variant=\"exclusive\"\n        options={options}\n        value={values[name] ?? ''}\n        fullWidth\n        // A `role=\"group\"` div is not labelable, so the `<label htmlFor>`\n        // above names nothing; the group carries the question itself (FUT-4157).\n        aria-label={label}\n        dataTestId={testId}\n        onChange={(_event, next) => {\n          if (typeof next === 'string') setFieldValue(name, next);\n        }}\n      />\n      {error && (\n        <FormMessage error dataTestId={`${testId}-message`}>\n          {error}\n        </FormMessage>\n      )}\n    </FormControl>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAmCI,SAEI,KAFJ;AANG,SAAS,YAAY,EAAE,MAAM,SAAS,MAAM,GAAyC;AAC1F,QAAM,EAAE,QAAQ,QAAQ,cAAc,IAAI,eAAe;AACzD,QAAM,QAAQ,OAAO,IAAI;AACzB,QAAM,SAAS,oBAAoB,IAAI;AAEvC,SACE,qBAAC,eAAY,WAAS,MACnB;AAAA,aACC,oBAAC,aAAU,SAAS,MAAM,OAAO,QAAQ,KAAK,GAC3C,iBACH;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR;AAAA,QACA,OAAO,OAAO,IAAI,KAAK;AAAA,QACvB,WAAS;AAAA,QAGT,cAAY;AAAA,QACZ,YAAY;AAAA,QACZ,UAAU,CAAC,QAAQ,SAAS;AAC1B,cAAI,OAAO,SAAS,SAAU,eAAc,MAAM,IAAI;AAAA,QACxD;AAAA;AAAA,IACF;AAAA,IACC,SACC,oBAAC,eAAY,OAAK,MAAC,YAAY,GAAG,MAAM,YACrC,iBACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/{chunk-LH3YT5NL.js → chunk-TVDHA7BT.js}

@@ -6,13 +6,13 @@ import {
 } from "./chunk-P4Q7JK4L.js";
 import {
   ToggleField
-} from "./chunk-75I42HHE.js";
+} from "./chunk-AYJGRQT4.js";
 import {
   TextField
 } from "./chunk-3IX2TP4I.js";
 import {
   SelectField
-} from "./chunk-GCBWZ3MX.js";
+} from "./chunk-6YSGP2WS.js";
 import {
   __export
 } from "./chunk-PZ5AY32C.js";
@@ -30,4 +30,4 @@ __export(Fields_exports, {
 export {
   Fields_exports
 };
-//# sourceMappingURL=chunk-LH3YT5NL.js.map
+//# sourceMappingURL=chunk-TVDHA7BT.js.map

package/dist/form/total-form.js

@@ -9,18 +9,18 @@ import {
 } from "../chunk-CPAJYJUD.js";
 import {
   Fields_exports
-} from "../chunk-LH3YT5NL.js";
+} from "../chunk-TVDHA7BT.js";
 import "../chunk-YGWLMTPB.js";
 import {
   CategoryField
 } from "../chunk-P4Q7JK4L.js";
-import "../chunk-75I42HHE.js";
+import "../chunk-AYJGRQT4.js";
 import {
   TextField
 } from "../chunk-3IX2TP4I.js";
 import {
   SelectField
-} from "../chunk-GCBWZ3MX.js";
+} from "../chunk-6YSGP2WS.js";
 import {
   FormContext,
   useFormContext

package/dist/types/components/form/total-form/Fields/SelectField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/total-form/Fields/SelectField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAGjD,sDAAsD;AACtD,MAAM,WAAW,gBAAgB;IAC/B,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CA2BvG"}
+{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/total-form/Fields/SelectField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAGjD,sDAAsD;AACtD,MAAM,WAAW,gBAAgB;IAC/B,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CA+BvG"}

package/dist/types/components/form/total-form/Fields/ToggleField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/total-form/Fields/ToggleField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGtD,sDAAsD;AACtD,MAAM,WAAW,gBAAgB;IAC/B,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,+DAA+D;IAC/D,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CA6B1F"}
+{"version":3,"file":"ToggleField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/total-form/Fields/ToggleField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGtD,sDAAsD;AACtD,MAAM,WAAW,gBAAgB;IAC/B,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,+DAA+D;IAC/D,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAgC1F"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.85.0",
+  "version": "6.86.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/form/total-form/Fields/SelectField.tsx

@@ -44,6 +44,10 @@ export function SelectField({ name, options, label, placeholder }: SelectFieldPr
         placeholder={placeholder}
         value={values[name] ?? ''}
         error={Boolean(error)}
+        // The `<label htmlFor>` above names nothing: the combobox is MUI's
+        // display div, not a labelable element. `Select` puts `aria-label` on
+        // that div, so the question names the control (FUT-4157).
+        aria-label={label}
         data-testid={testId}
         onChange={(event) => setFieldValue(name, String(event.target.value))}
       />

package/src/components/form/total-form/Fields/ToggleField.tsx

@@ -44,6 +44,9 @@ export function ToggleField({ name, options, label }: ToggleFieldProps): React.R
         options={options}
         value={values[name] ?? ''}
         fullWidth
+        // A `role="group"` div is not labelable, so the `<label htmlFor>`
+        // above names nothing; the group carries the question itself (FUT-4157).
+        aria-label={label}
         dataTestId={testId}
         onChange={(_event, next) => {
           if (typeof next === 'string') setFieldValue(name, next);