@aglyn/shared-ui-jsx-forms 1.0.0-beta.143

package/src/lib/mapper/theme-scale.d.ts

@@ -0,0 +1,79 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { type FormFieldGridProps } from './form-field-grid';
+import type { BaseFieldProps } from './types';
+/**
+ * ThemeScale (AGL-2486): a field that offers the THEME's own scale for a
+ * property while still accepting any raw CSS value.
+ *
+ * Font Size, Font Weight and Z-Index shipped as free text and a bare select
+ * of magic numbers, with no connection to the theme at all — so a heading
+ * styled here was pinned to `32px` while every heading the theme renders
+ * moved with `typography.h4`, and a sticky bar was given `1300` next to a
+ * modal the theme puts at exactly 1300. Colour has had theme references
+ * since AGL-588; these three had none.
+ *
+ * **The stored value is a theme token PATH, not a resolved number.** MUI's
+ * sx system declares `fontSize` and `fontWeight` with `themeKey:
+ * 'typography'` and `zIndex` with `themeKey: 'zIndex'`, so `h4.fontSize`,
+ * `fontWeightBold` and `appBar` are resolved against the ACTIVE theme at
+ * render — exactly the way `color: 'primary.main'` already is. Storing the
+ * resolved `2.125rem` instead would have been simpler and wrong for the same
+ * reason a flattened colour is wrong: it stops following the theme, so a
+ * type-scale change silently leaves this element behind.
+ *
+ * Free text is a first-class answer, not a fallback: `18px`, `1.25rem`,
+ * `700` and `1400` are all legitimate, and an author who wants an exact
+ * value must not have to fight a select to get one. Hence a `freeSolo`
+ * combo box rather than two controls — one box that suggests the scale and
+ * accepts anything.
+ */
+/** One entry of a theme scale the field offers. */
+export interface ThemeScaleOption {
+    /** The value STORED — a theme token path (`h4.fontSize`, `appBar`). */
+    value: string;
+    /** The author's name for it (`Heading 4`, `App bar`). */
+    label: string;
+    /** What it resolves to in this theme today (`2.125rem`, `1100`). */
+    hint?: string;
+}
+export interface ThemeScaleProps extends BaseFieldProps {
+    /** The theme scale offered; an empty list leaves a plain text box. */
+    scaleOptions?: ThemeScaleOption[];
+    placeholder?: string;
+    /** Offer the reset-to-unset affordance (AGL-2486). */
+    clearable?: boolean;
+    FormFieldGridProps?: FormFieldGridProps;
+}
+/** The text a stored value shows. Numbers are values too (`zIndex: 1400`). */
+export declare const themeScaleValueToText: (value: unknown) => string;
+/**
+ * Whether an option should be offered for what the author has typed.
+ *
+ * Matches the token path, the friendly label AND the resolved hint, so
+ * `bold` finds `fontWeightBold`, `700` finds it too (that is what it
+ * resolves to), and `modal` finds the z-index layer. A text that already IS
+ * an option's value shows the WHOLE scale rather than the one entry it
+ * matches — otherwise picking a token would leave the author unable to see
+ * the neighbours to switch to.
+ */
+export declare const filterThemeScaleOptions: (options: ThemeScaleOption[], text: string) => ThemeScaleOption[];
+export declare const ThemeScaleField: {
+    (props: ThemeScaleProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default ThemeScaleField;

package/src/lib/mapper/theme-scale.js

@@ -0,0 +1,162 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { Autocomplete, Box, TextField as MuiTextField, Typography } from "@mui/material";
+import { useCallback, useMemo } from "react";
+import { useFieldApi } from "../vendor/data-driven-forms.js";
+import FormFieldGrid, { buildFieldClear } from "./form-field-grid.js";
+import { validationError } from "./validation-error.js";
+/** The text a stored value shows. Numbers are values too (`zIndex: 1400`). */ export const themeScaleValueToText = (value)=>{
+    if (value === undefined || value === null) return '';
+    if (typeof value === 'number') return Number.isFinite(value) ? `${value}` : '';
+    return `${value}`;
+};
+/**
+ * Whether an option should be offered for what the author has typed.
+ *
+ * Matches the token path, the friendly label AND the resolved hint, so
+ * `bold` finds `fontWeightBold`, `700` finds it too (that is what it
+ * resolves to), and `modal` finds the z-index layer. A text that already IS
+ * an option's value shows the WHOLE scale rather than the one entry it
+ * matches — otherwise picking a token would leave the author unable to see
+ * the neighbours to switch to.
+ */ export const filterThemeScaleOptions = (options, text)=>{
+    const query = `${text != null ? text : ''}`.trim().toLowerCase();
+    if (!query) return options;
+    if (options.some((option)=>option.value.toLowerCase() === query)) {
+        return options;
+    }
+    return options.filter((option)=>[
+            option.value,
+            option.label,
+            option.hint
+        ].filter((part)=>typeof part === 'string' && part !== '').some((part)=>`${part}`.toLowerCase().includes(query)));
+};
+export const ThemeScaleField = (props)=>{
+    const _useFieldApi = useFieldApi(props), { input, isReadOnly, isDisabled, isRequired, label, placeholder, helperText, description, validateOnMount, meta, help, scaleOptions = [], clearable, FormFieldGridProps = {}, // Leftovers from a schema that used to declare these as TEXT_FIELDs;
+    // they must never reach the DOM.
+    inputProps: _inputProps, InputProps: _InputProps, multiline: _multiline, type: _type, options: _options } = _useFieldApi, rest = _object_without_properties_loose(_useFieldApi, [
+        "input",
+        "isReadOnly",
+        "isDisabled",
+        "isRequired",
+        "label",
+        "placeholder",
+        "helperText",
+        "description",
+        "validateOnMount",
+        "meta",
+        "help",
+        "scaleOptions",
+        "clearable",
+        "FormFieldGridProps",
+        "inputProps",
+        "InputProps",
+        "multiline",
+        "type",
+        "options"
+    ]);
+    const invalid = validationError(meta, validateOnMount);
+    const text = themeScaleValueToText(input.value);
+    const commit = useCallback((next)=>{
+        input.onChange(next);
+    }, [
+        input
+    ]);
+    const clear = buildFieldClear({
+        clearable,
+        label,
+        hasValue: text !== '',
+        locked: Boolean(isDisabled || isReadOnly),
+        onClear: ()=>commit('')
+    });
+    const filterOptions = useCallback((options, state)=>filterThemeScaleOptions(options, state.inputValue), []);
+    // The token the current value names, so the helper text can say what it
+    // resolves to — the one thing a token path cannot say for itself.
+    const activeOption = useMemo(()=>scaleOptions.find((option)=>option.value === text), [
+        scaleOptions,
+        text
+    ]);
+    return /*#__PURE__*/ _jsx(FormFieldGrid, _extends({
+        help: help,
+        clear: clear
+    }, FormFieldGridProps, {
+        children: /*#__PURE__*/ _jsx(Autocomplete, _extends({
+            freeSolo: true,
+            disableClearable: true,
+            fullWidth: true,
+            size: "small",
+            disabled: Boolean(isDisabled),
+            readOnly: Boolean(isReadOnly),
+            options: scaleOptions,
+            filterOptions: filterOptions,
+            inputValue: text,
+            // `onInputChange` rather than `onChange`: it fires for BOTH a typed
+            // value and a picked option, so a raw `18px` and a `h4.fontSize`
+            // travel the same path and cannot commit differently.
+            onInputChange: (_event, next)=>commit(next != null ? next : ''),
+            getOptionLabel: (option)=>typeof option === 'string' ? option : option.value,
+            renderOption: (optionProps, option)=>{
+                const { key } = optionProps, liProps = _object_without_properties_loose(optionProps, [
+                    "key"
+                ]);
+                return /*#__PURE__*/ _jsx(Box, _extends({
+                    component: "li"
+                }, liProps, {
+                    children: /*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            display: 'flex',
+                            width: '100%',
+                            gap: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                noWrap: true,
+                                sx: {
+                                    flexGrow: 1
+                                },
+                                children: option.label
+                            }),
+                            option.hint ? /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                color: "text.secondary",
+                                noWrap: true,
+                                children: option.hint
+                            }) : null
+                        ]
+                    })
+                }), option.value);
+            },
+            renderInput: (params)=>/*#__PURE__*/ _jsx(MuiTextField, _extends({}, params, {
+                    label: label,
+                    margin: "dense",
+                    required: Boolean(isRequired),
+                    error: Boolean(invalid),
+                    placeholder: placeholder,
+                    helperText: invalid || (meta.touched || validateOnMount) && meta.warning || // Naming the resolved value is what makes the token readable:
+                    // `h4.fontSize` means nothing until it says `2.125rem`.
+                    ((activeOption == null ? void 0 : activeOption.hint) ? `${activeOption.label} — ${activeOption.hint}` : undefined) || helperText || description
+                }))
+        }, rest))
+    }));
+};
+ThemeScaleField.displayName = 'AglynThemeScaleField';
+export default ThemeScaleField;
+
+//# sourceMappingURL=theme-scale.js.map

package/src/lib/mapper/theme-scale.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx-forms/src/lib/mapper/theme-scale.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  Autocomplete,\n  Box,\n  TextField as MuiTextField,\n  Typography,\n} from '@mui/material'\nimport { useCallback, useMemo } from 'react'\n\nimport { useFieldApi } from '../vendor/data-driven-forms'\nimport FormFieldGrid, {\n  buildFieldClear,\n  type FormFieldGridProps,\n} from './form-field-grid'\nimport type { BaseFieldProps } from './types'\nimport { type ExtendedFieldMeta, validationError } from './validation-error'\n\n/**\n * ThemeScale (AGL-2486): a field that offers the THEME's own scale for a\n * property while still accepting any raw CSS value.\n *\n * Font Size, Font Weight and Z-Index shipped as free text and a bare select\n * of magic numbers, with no connection to the theme at all — so a heading\n * styled here was pinned to `32px` while every heading the theme renders\n * moved with `typography.h4`, and a sticky bar was given `1300` next to a\n * modal the theme puts at exactly 1300. Colour has had theme references\n * since AGL-588; these three had none.\n *\n * **The stored value is a theme token PATH, not a resolved number.** MUI's\n * sx system declares `fontSize` and `fontWeight` with `themeKey:\n * 'typography'` and `zIndex` with `themeKey: 'zIndex'`, so `h4.fontSize`,\n * `fontWeightBold` and `appBar` are resolved against the ACTIVE theme at\n * render — exactly the way `color: 'primary.main'` already is. Storing the\n * resolved `2.125rem` instead would have been simpler and wrong for the same\n * reason a flattened colour is wrong: it stops following the theme, so a\n * type-scale change silently leaves this element behind.\n *\n * Free text is a first-class answer, not a fallback: `18px`, `1.25rem`,\n * `700` and `1400` are all legitimate, and an author who wants an exact\n * value must not have to fight a select to get one. Hence a `freeSolo`\n * combo box rather than two controls — one box that suggests the scale and\n * accepts anything.\n */\n\n/** One entry of a theme scale the field offers. */\nexport interface ThemeScaleOption {\n  /** The value STORED — a theme token path (`h4.fontSize`, `appBar`). */\n  value: string\n  /** The author's name for it (`Heading 4`, `App bar`). */\n  label: string\n  /** What it resolves to in this theme today (`2.125rem`, `1100`). */\n  hint?: string\n}\n\nexport interface ThemeScaleProps extends BaseFieldProps {\n  /** The theme scale offered; an empty list leaves a plain text box. */\n  scaleOptions?: ThemeScaleOption[]\n  placeholder?: string\n  /** Offer the reset-to-unset affordance (AGL-2486). */\n  clearable?: boolean\n  FormFieldGridProps?: FormFieldGridProps\n}\n\n/** The text a stored value shows. Numbers are values too (`zIndex: 1400`). */\nexport const themeScaleValueToText = (value: unknown): string => {\n  if (value === undefined || value === null) return ''\n  if (typeof value === 'number') return Number.isFinite(value) ? `${value}` : ''\n  return `${value}`\n}\n\n/**\n * Whether an option should be offered for what the author has typed.\n *\n * Matches the token path, the friendly label AND the resolved hint, so\n * `bold` finds `fontWeightBold`, `700` finds it too (that is what it\n * resolves to), and `modal` finds the z-index layer. A text that already IS\n * an option's value shows the WHOLE scale rather than the one entry it\n * matches — otherwise picking a token would leave the author unable to see\n * the neighbours to switch to.\n */\nexport const filterThemeScaleOptions = (\n  options: ThemeScaleOption[],\n  text: string,\n): ThemeScaleOption[] => {\n  const query = `${text ?? ''}`.trim().toLowerCase()\n  if (!query) return options\n  if (options.some((option) => option.value.toLowerCase() === query)) {\n    return options\n  }\n  return options.filter((option) =>\n    [option.value, option.label, option.hint]\n      .filter((part) => typeof part === 'string' && part !== '')\n      .some((part) => `${part}`.toLowerCase().includes(query)),\n  )\n}\n\nexport const ThemeScaleField = (props: ThemeScaleProps) => {\n  const {\n    input,\n    isReadOnly,\n    isDisabled,\n    isRequired,\n    label,\n    placeholder,\n    helperText,\n    description,\n    validateOnMount,\n    meta,\n    help,\n    scaleOptions = [],\n    clearable,\n    FormFieldGridProps = {},\n    // Leftovers from a schema that used to declare these as TEXT_FIELDs;\n    // they must never reach the DOM.\n    inputProps: _inputProps,\n    InputProps: _InputProps,\n    multiline: _multiline,\n    type: _type,\n    options: _options,\n    ...rest\n  } = useFieldApi(props)\n\n  const invalid = validationError(meta as ExtendedFieldMeta, validateOnMount)\n  const text = themeScaleValueToText(input.value)\n\n  const commit = useCallback(\n    (next: string) => {\n      input.onChange(next)\n    },\n    [input],\n  )\n\n  const clear = buildFieldClear({\n    clearable,\n    label,\n    hasValue: text !== '',\n    locked: Boolean(isDisabled || isReadOnly),\n    onClear: () => commit(''),\n  })\n\n  const filterOptions = useCallback(\n    (options: ThemeScaleOption[], state: { inputValue: string }) =>\n      filterThemeScaleOptions(options, state.inputValue),\n    [],\n  )\n\n  // The token the current value names, so the helper text can say what it\n  // resolves to — the one thing a token path cannot say for itself.\n  const activeOption = useMemo(\n    () => scaleOptions.find((option) => option.value === text),\n    [scaleOptions, text],\n  )\n\n  return (\n    <FormFieldGrid help={help} clear={clear} {...FormFieldGridProps}>\n      <Autocomplete<ThemeScaleOption, false, true, true>\n        freeSolo\n        disableClearable\n        fullWidth\n        size=\"small\"\n        disabled={Boolean(isDisabled)}\n        readOnly={Boolean(isReadOnly)}\n        options={scaleOptions}\n        filterOptions={filterOptions}\n        inputValue={text}\n        // `onInputChange` rather than `onChange`: it fires for BOTH a typed\n        // value and a picked option, so a raw `18px` and a `h4.fontSize`\n        // travel the same path and cannot commit differently.\n        onInputChange={(_event, next) => commit(next ?? '')}\n        getOptionLabel={(option) =>\n          typeof option === 'string' ? option : option.value\n        }\n        renderOption={(optionProps, option) => {\n          const { key, ...liProps } = optionProps as typeof optionProps & {\n            key?: string\n          }\n          return (\n            <Box component=\"li\" key={option.value} {...liProps}>\n              <Box sx={{ display: 'flex', width: '100%', gap: 1 }}>\n                <Typography variant=\"body2\" noWrap sx={{ flexGrow: 1 }}>\n                  {option.label}\n                </Typography>\n                {option.hint ? (\n                  <Typography variant=\"caption\" color=\"text.secondary\" noWrap>\n                    {option.hint}\n                  </Typography>\n                ) : null}\n              </Box>\n            </Box>\n          )\n        }}\n        renderInput={(params) => (\n          <MuiTextField\n            {...params}\n            label={label}\n            margin=\"dense\"\n            required={Boolean(isRequired)}\n            error={Boolean(invalid)}\n            placeholder={placeholder}\n            helperText={\n              invalid ||\n              ((meta.touched || validateOnMount) && meta.warning) ||\n              // Naming the resolved value is what makes the token readable:\n              // `h4.fontSize` means nothing until it says `2.125rem`.\n              (activeOption?.hint\n                ? `${activeOption.label} — ${activeOption.hint}`\n                : undefined) ||\n              helperText ||\n              description\n            }\n          />\n        )}\n        {...rest}\n      />\n    </FormFieldGrid>\n  )\n}\nThemeScaleField.displayName = 'AglynThemeScaleField'\n\nexport default ThemeScaleField\n"],"names":["Autocomplete","Box","TextField","MuiTextField","Typography","useCallback","useMemo","useFieldApi","FormFieldGrid","buildFieldClear","validationError","themeScaleValueToText","value","undefined","Number","isFinite","filterThemeScaleOptions","options","text","query","trim","toLowerCase","some","option","filter","label","hint","part","includes","ThemeScaleField","props","input","isReadOnly","isDisabled","isRequired","placeholder","helperText","description","validateOnMount","meta","help","scaleOptions","clearable","FormFieldGridProps","inputProps","_inputProps","InputProps","_InputProps","multiline","_multiline","type","_type","_options","rest","invalid","commit","next","onChange","clear","hasValue","locked","Boolean","onClear","filterOptions","state","inputValue","activeOption","find","freeSolo","disableClearable","fullWidth","size","disabled","readOnly","onInputChange","_event","getOptionLabel","renderOption","optionProps","key","liProps","component","sx","display","width","gap","variant","noWrap","flexGrow","color","renderInput","params","margin","required","error","touched","warning","displayName"],"mappings":"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"}

package/src/lib/mapper/time-picker.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { type TimePickerProps as MuiTimePickerProps } from '@mui/x-date-pickers';
+import { type FormFieldGridProps } from './form-field-grid';
+import type { BaseFieldProps } from './types';
+export interface TimePickerProps extends BaseFieldProps {
+    placeholder?: string;
+    FormFieldGridProps?: FormFieldGridProps;
+    TimePickerProps?: Omit<MuiTimePickerProps, 'value' | 'onChange' | 'disabled' | 'readOnly'>;
+}
+export declare const TimePicker: (props: TimePickerProps) => import("react").JSX.Element;
+export default TimePicker;

package/src/lib/mapper/time-picker.js

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ /**
+ * Ported from `@data-driven-forms/mui-component-mapper` (Apache-2.0) and
+ * updated for the current @mui/x-date-pickers slots API.
+ */ import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TimePicker as MuiTimePicker } from "@mui/x-date-pickers";
+import { useFieldApi } from "../vendor/data-driven-forms.js";
+import FormFieldGrid from "./form-field-grid.js";
+import { validationError } from "./validation-error.js";
+export const TimePicker = (props)=>{
+    const _useFieldApi = useFieldApi(props), { input, isReadOnly, isDisabled, placeholder, isRequired, label, helperText, description, validateOnMount, meta, help, FormFieldGridProps = {}, TimePickerProps = {} } = _useFieldApi, rest = _object_without_properties_loose(_useFieldApi, [
+        "input",
+        "isReadOnly",
+        "isDisabled",
+        "placeholder",
+        "isRequired",
+        "label",
+        "helperText",
+        "description",
+        "validateOnMount",
+        "meta",
+        "help",
+        "FormFieldGridProps",
+        "TimePickerProps"
+    ]);
+    const invalid = validationError(meta, validateOnMount);
+    return /*#__PURE__*/ _jsx(FormFieldGrid, _extends({
+        help: help
+    }, FormFieldGridProps, {
+        children: /*#__PURE__*/ _jsx(MuiTimePicker, _extends({
+            slotProps: {
+                textField: {
+                    fullWidth: true,
+                    margin: 'normal',
+                    label,
+                    helperText: invalid || (meta.touched || validateOnMount) && meta.warning || helperText || description,
+                    placeholder,
+                    required: isRequired,
+                    error: !!invalid,
+                    onBlur: input.onBlur,
+                    onFocus: input.onFocus
+                }
+            },
+            readOnly: isReadOnly,
+            disabled: isDisabled || isReadOnly
+        }, input, {
+            value: input.value || null
+        }, TimePickerProps, rest))
+    }));
+};
+export default TimePicker;
+
+//# sourceMappingURL=time-picker.js.map

package/src/lib/mapper/time-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx-forms/src/lib/mapper/time-picker.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Ported from `@data-driven-forms/mui-component-mapper` (Apache-2.0) and\n * updated for the current @mui/x-date-pickers slots API.\n */\n\nimport type { TextFieldProps } from '@mui/material'\n\nimport {\n  TimePicker as MuiTimePicker,\n  type TimePickerProps as MuiTimePickerProps,\n} from '@mui/x-date-pickers'\n\nimport { useFieldApi } from '../vendor/data-driven-forms'\nimport FormFieldGrid, { type FormFieldGridProps } from './form-field-grid'\nimport type { BaseFieldProps } from './types'\nimport { type ExtendedFieldMeta, validationError } from './validation-error'\n\nexport interface TimePickerProps extends BaseFieldProps {\n  placeholder?: string\n  FormFieldGridProps?: FormFieldGridProps\n  TimePickerProps?: Omit<\n    MuiTimePickerProps,\n    'value' | 'onChange' | 'disabled' | 'readOnly'\n  >\n}\n\nexport const TimePicker = (props: TimePickerProps) => {\n  const {\n    input,\n    isReadOnly,\n    isDisabled,\n    placeholder,\n    isRequired,\n    label,\n    helperText,\n    description,\n    validateOnMount,\n    meta,\n    help,\n    FormFieldGridProps = {},\n    TimePickerProps = {},\n    ...rest\n  } = useFieldApi(props)\n\n  const invalid = validationError(meta as ExtendedFieldMeta, validateOnMount)\n\n  return (\n    <FormFieldGrid help={help} {...FormFieldGridProps}>\n      <MuiTimePicker\n        slotProps={{\n          textField: {\n            fullWidth: true,\n            margin: 'normal',\n            label,\n            helperText:\n              invalid ||\n              ((meta.touched || validateOnMount) && meta.warning) ||\n              helperText ||\n              description,\n            placeholder,\n            required: isRequired,\n            error: !!invalid,\n            onBlur: input.onBlur,\n            onFocus: input.onFocus,\n          } as TextFieldProps,\n        }}\n        readOnly={isReadOnly}\n        disabled={isDisabled || isReadOnly}\n        {...input}\n        value={input.value || null}\n        {...TimePickerProps}\n        {...rest}\n      />\n    </FormFieldGrid>\n  )\n}\n\nexport default TimePicker\n"],"names":["TimePicker","MuiTimePicker","useFieldApi","FormFieldGrid","validationError","props","input","isReadOnly","isDisabled","placeholder","isRequired","label","helperText","description","validateOnMount","meta","help","FormFieldGridProps","TimePickerProps","rest","invalid","slotProps","textField","fullWidth","margin","touched","warning","required","error","onBlur","onFocus","readOnly","disabled","value"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED;;;CAGC;;;AAID,SACEA,cAAcC,aAAa,QAEtB,sBAAqB;AAE5B,SAASC,WAAW,QAAQ,iCAA6B;AACzD,OAAOC,mBAAgD,uBAAmB;AAE1E,SAAiCC,eAAe,QAAQ,wBAAoB;AAW5E,OAAO,MAAMJ,aAAa,CAACK;IACzB,MAeIH,eAAAA,YAAYG,QAfV,EACJC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,WAAW,EACXC,UAAU,EACVC,KAAK,EACLC,UAAU,EACVC,WAAW,EACXC,eAAe,EACfC,IAAI,EACJC,IAAI,EACJC,qBAAqB,CAAC,CAAC,EACvBC,kBAAkB,CAAC,CAAC,EAErB,GAAGhB,cADCiB,wCACDjB;;;;;;;;;;;;;;;IAEJ,MAAMkB,UAAUhB,gBAAgBW,MAA2BD;IAE3D,qBACE,KAACX;QAAca,MAAMA;OAAUC;kBAC7B,cAAA,KAAChB;YACCoB,WAAW;gBACTC,WAAW;oBACTC,WAAW;oBACXC,QAAQ;oBACRb;oBACAC,YACEQ,WACC,AAACL,CAAAA,KAAKU,OAAO,IAAIX,eAAc,KAAMC,KAAKW,OAAO,IAClDd,cACAC;oBACFJ;oBACAkB,UAAUjB;oBACVkB,OAAO,CAAC,CAACR;oBACTS,QAAQvB,MAAMuB,MAAM;oBACpBC,SAASxB,MAAMwB,OAAO;gBACxB;YACF;YACAC,UAAUxB;YACVyB,UAAUxB,cAAcD;WACpBD;YACJ2B,OAAO3B,MAAM2B,KAAK,IAAI;WAClBf,iBACAC;;AAIZ,EAAC;AAED,eAAenB,WAAU"}

package/src/lib/mapper/types.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { HelpTipContent } from '@aglyn/shared-ui-jsx';
+import type { ReactNode } from 'react';
+export type OptionValue = string | number | boolean | null | undefined;
+export interface SelectOption<T = OptionValue> {
+    value: T;
+    label: ReactNode;
+    [key: string]: unknown;
+}
+export type SelectValue<T = OptionValue> = T | SelectOption<T> | (T | SelectOption<T>)[] | null;
+/**
+ * Common schema-driven field props resolved through `useFieldApi`. The
+ * renderer passes arbitrary extra props from the field schema, hence the
+ * index signature (mirrors upstream mui-component-mapper typings).
+ */
+export interface BaseFieldProps {
+    name: string;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    description?: ReactNode;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    validateOnMount?: boolean;
+    /** Contextual help tooltip rendered at the field's top-right (AGL-601). */
+    help?: HelpTipContent;
+    [key: string]: any;
+}

package/src/lib/mapper/types.js

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ /**
+ * Common schema-driven field props resolved through `useFieldApi`. The
+ * renderer passes arbitrary extra props from the field schema, hence the
+ * index signature (mirrors upstream mui-component-mapper typings).
+ */ export { };
+
+//# sourceMappingURL=types.js.map

package/src/lib/mapper/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx-forms/src/lib/mapper/types.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { HelpTipContent } from '@aglyn/shared-ui-jsx'\nimport type { ReactNode } from 'react'\n\nexport type OptionValue = string | number | boolean | null | undefined\n\nexport interface SelectOption<T = OptionValue> {\n  value: T\n  label: ReactNode\n  [key: string]: unknown\n}\n\nexport type SelectValue<T = OptionValue> =\n  | T\n  | SelectOption<T>\n  | (T | SelectOption<T>)[]\n  | null\n\n/**\n * Common schema-driven field props resolved through `useFieldApi`. The\n * renderer passes arbitrary extra props from the field schema, hence the\n * index signature (mirrors upstream mui-component-mapper typings).\n */\nexport interface BaseFieldProps {\n  name: string\n  label?: ReactNode\n  helperText?: ReactNode\n  description?: ReactNode\n  isRequired?: boolean\n  isDisabled?: boolean\n  isReadOnly?: boolean\n  validateOnMount?: boolean\n  /** Contextual help tooltip rendered at the field's top-right (AGL-601). */\n  help?: HelpTipContent\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  [key: string]: any\n}\n"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAmBD;;;;CAIC,GACD,WAaC"}

package/src/lib/mapper/validation-error.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export interface ExtendedFieldMeta extends Record<string, unknown> {
+    error?: string;
+    submitError?: string;
+    touched?: boolean;
+    warning?: any;
+}
+export declare const validationError: (meta: ExtendedFieldMeta, validateOnMount?: boolean) => string | false | undefined;
+export default validationError;

package/src/lib/mapper/validation-error.js

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ export const validationError = (meta, validateOnMount)=>{
+    if (validateOnMount) {
+        return meta.error || meta.submitError;
+    }
+    return meta.touched ? meta.error || meta.submitError : false;
+};
+export default validationError;
+
+//# sourceMappingURL=validation-error.js.map

package/src/lib/mapper/validation-error.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx-forms/src/lib/mapper/validation-error.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport interface ExtendedFieldMeta extends Record<string, unknown> {\n  error?: string\n  submitError?: string\n  touched?: boolean\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  warning?: any\n}\n\nexport const validationError = (\n  meta: ExtendedFieldMeta,\n  validateOnMount?: boolean,\n): string | false | undefined => {\n  if (validateOnMount) {\n    return meta.error || meta.submitError\n  }\n\n  return meta.touched ? meta.error || meta.submitError : false\n}\n\nexport default validationError\n"],"names":["validationError","meta","validateOnMount","error","submitError","touched"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAUD,OAAO,MAAMA,kBAAkB,CAC7BC,MACAC;IAEA,IAAIA,iBAAiB;QACnB,OAAOD,KAAKE,KAAK,IAAIF,KAAKG,WAAW;IACvC;IAEA,OAAOH,KAAKI,OAAO,GAAGJ,KAAKE,KAAK,IAAIF,KAAKG,WAAW,GAAG;AACzD,EAAC;AAED,eAAeJ,gBAAe"}

package/src/lib/mapper/wizard.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export interface WizardProps {
+    [key: string]: any;
+}
+export declare const Wizard: (props: WizardProps) => import("react").JSX.Element;
+export default Wizard;