@strato-admin/cloudscape 0.1.1 → 0.3.0

package/dist/input/{AttributeEditor.js → ArrayInput.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
-import { useInput, RecordContextProvider, useResourceContext } from '@strato-admin/core';
+import { useInput, RecordContextProvider, useResourceContext } from '@strato-admin/ra-core';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import CloudscapeAttributeEditor from '@cloudscape-design/components/attribute-editor';
 import Box from '@cloudscape-design/components/box';
@@ -10,11 +10,14 @@ import FormField from './FormField';
 import { FormFieldContext, useFormFieldContext } from './FormFieldContext';
 export const Item = (_props) => {
     // This is a placeholder component used to collect props.
-    // The actual rendering is handled by the AttributeEditor.
+    // The actual rendering is handled by the ArrayInput.
     return null;
 };
-export const AttributeEditor = (props) => {
-    const { children, label, source: sourceProp, validate, defaultValue, addButtonText = 'Add item', removeButtonText = 'Remove item', empty, disableAddButton, hideAddButton, ...rest } = props;
+/**
+ * ArrayInput component that uses Cloudscape's AttributeEditor to edit arrays of objects.
+ */
+export const ArrayInput = (props) => {
+    const { children, label, source: sourceProp, validate, defaultValue, addButtonText = 'Add item', removeButtonText = 'Remove item', empty, disableAddButton, hideAddButton, gridLayout, ...rest } = props;
     const { control } = useFormContext();
     const contextValue = useFormFieldContext();
     const resource = useResourceContext();
@@ -45,12 +48,16 @@ export const AttributeEditor = (props) => {
             const childSource = childProps.source;
             const childLabel = childProps.label;
             const childValidate = childProps.validate;
+            const childDescription = childProps.description;
+            const childInfo = childProps.info;
             // Determine if the field is required by checking validators
             const isRequired = Array.isArray(childValidate)
-                ? childValidate.some((v) => v.isRequired)
-                : childValidate?.isRequired || childProps.isRequired;
+                ? childValidate.some((v) => v.isRequired || v.name === 'required')
+                : childValidate?.isRequired || childValidate?.name === 'required' || childProps.isRequired;
             return {
-                label: _jsx(FieldTitle, { label: childLabel, source: childSource, resource: resource, isRequired: isRequired }),
+                label: (_jsx(FieldTitle, { label: childLabel, source: childSource, resource: childProps.resource || resource, isRequired: isRequired })),
+                description: childDescription,
+                info: childInfo,
                 control: (item, index) => {
                     const prefixedSource = `${source}.${index}.${childSource}`;
                     let content;
@@ -65,16 +72,16 @@ export const AttributeEditor = (props) => {
                             label: false,
                         });
                     }
-                    return (_jsx(RecordContextProvider, { value: item, children: _jsx(Box, { padding: { top: 's' }, children: content }) }));
+                    return _jsx(RecordContextProvider, { value: item, children: content });
                 },
             };
         })?.filter(Boolean);
     }, [children, source, resource]);
-    const inner = (_jsx(FormFieldContext.Provider, { value: undefined, children: _jsx(CloudscapeAttributeEditor, { items: fields, definition: definition, onAddButtonClick: handleAdd, onRemoveButtonClick: ({ detail: { itemIndex } }) => handleRemove(itemIndex), empty: empty || (_jsx(Box, { textAlign: "center", color: "inherit", children: "No items added yet." })), addButtonText: addButtonText, removeButtonText: removeButtonText, disableAddButton: disableAddButton, hideAddButton: hideAddButton }) }));
+    const inner = (_jsx(FormFieldContext.Provider, { value: undefined, children: _jsx(CloudscapeAttributeEditor, { items: fields, definition: definition, onAddButtonClick: handleAdd, onRemoveButtonClick: ({ detail: { itemIndex } }) => handleRemove(itemIndex), empty: empty || (_jsx(Box, { textAlign: "center", color: "inherit", children: "No items added yet." })), addButtonText: addButtonText, removeButtonText: removeButtonText, disableAddButton: disableAddButton, hideAddButton: hideAddButton, gridLayout: gridLayout }) }));
     if (contextValue) {
         return inner;
     }
     return (_jsx(FormFieldContext.Provider, { value: { ...inputState, source }, children: _jsx(FormField, { ...props, source: source, children: inner }) }));
 };
-AttributeEditor.Item = Item;
-export default AttributeEditor;
+ArrayInput.Item = Item;
+export default ArrayInput;

package/dist/input/AutocompleteInput.d.ts

@@ -1,6 +1,6 @@
 import { AutosuggestProps as CloudscapeAutosuggestProps } from '@cloudscape-design/components/autosuggest';
 import { InputProps } from './types';
-export interface AutocompleteInputProps extends Omit<CloudscapeAutosuggestProps, 'onChange' | 'value' | 'options' | 'onBlur'>, InputProps {
+export interface AutocompleteInputProps extends InputProps, Pick<CloudscapeAutosuggestProps, 'placeholder' | 'disabled' | 'readOnly' | 'enteredTextLabel'> {
     choices?: Array<{
         id: string | number;
         [key: string]: any;

package/dist/input/AutocompleteInput.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useState, useEffect, useMemo } from 'react';
-import { useInput, useResourceContext, useChoicesContext, useGetRecordRepresentation, } from '@strato-admin/core';
+import { useInput, useResourceContext, useChoicesContext, useGetRecordRepresentation } from '@strato-admin/ra-core';
 import CloudscapeAutosuggest from '@cloudscape-design/components/autosuggest';
 import { FormField } from './FormField';
 import { FormFieldContext, useFormFieldContext } from './FormFieldContext';
 export const AutocompleteInput = (props) => {
-    const { label, source, defaultValue, validate, choices: choicesProp, ...rest } = props;
+    const { label, source, defaultValue, validate, choices: choicesProp, placeholder, disabled, readOnly, enteredTextLabel, ...rest } = props;
     const resource = useResourceContext();
     const { allChoices, isPending, setFilters } = useChoicesContext(props);
     const getRecordRepresentation = useGetRecordRepresentation(resource);
@@ -58,7 +58,7 @@ export const AutocompleteInput = (props) => {
     const handleSelect = ({ detail }) => {
         field.onChange(detail.value);
     };
-    const inner = (_jsx(CloudscapeAutosuggest, { ...rest, id: id, options: options, value: filterValue, statusType: isPending ? 'loading' : 'finished', expandToViewport: true, onChange: handleChange, onSelect: handleSelect, onBlur: () => field.onBlur() }));
+    const inner = (_jsx(CloudscapeAutosuggest, { id: id, placeholder: placeholder, disabled: disabled, readOnly: readOnly, enteredTextLabel: enteredTextLabel, options: options, value: filterValue, statusType: isPending ? 'loading' : 'finished', expandToViewport: true, onChange: handleChange, onSelect: handleSelect, onBlur: () => field.onBlur() }));
     if (context) {
         return inner;
     }

package/dist/input/BooleanInput.d.ts

@@ -0,0 +1,6 @@
+import { ToggleProps } from '@cloudscape-design/components/toggle';
+import { InputProps } from './types';
+export interface BooleanInputProps extends InputProps, Pick<ToggleProps, 'disabled' | 'readOnly' | 'children' | 'ariaLabel'> {
+}
+export declare const BooleanInput: (props: BooleanInputProps) => import("react/jsx-runtime").JSX.Element;
+export default BooleanInput;

package/dist/input/BooleanInput.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useInput } from '@strato-admin/ra-core';
+import Toggle from '@cloudscape-design/components/toggle';
+import { FormField } from './FormField';
+import { FormFieldContext, useFormFieldContext } from './FormFieldContext';
+export const BooleanInput = (props) => {
+    const { label, source, defaultValue, validate, disabled, readOnly, children, ariaLabel, ...rest } = props;
+    const context = useFormFieldContext();
+    const inputState = context ??
+        useInput({
+            source,
+            defaultValue: defaultValue ?? false,
+            validate,
+            ...rest,
+        });
+    const { field } = inputState;
+    const inner = (_jsx(Toggle, { disabled: disabled, readOnly: readOnly, ariaLabel: ariaLabel, checked: !!field.value, onChange: (event) => field.onChange(event.detail.checked), children: children }));
+    if (context) {
+        return inner;
+    }
+    return (_jsx(FormFieldContext.Provider, { value: inputState, children: _jsx(FormField, { ...props, children: inner }) }));
+};
+export default BooleanInput;

package/dist/input/CommonInputProps.d.ts

@@ -0,0 +1,6 @@
+import { StratoCommonInputProps } from './types';
+/**
+ * @internal Stub component for react-docgen-typescript to extract StratoCommonInputProps.
+ * Not intended for direct use.
+ */
+export declare const CommonInputProps: (_props: StratoCommonInputProps) => null;

package/dist/input/CommonInputProps.js

@@ -0,0 +1,6 @@
+/**
+ * @internal Stub component for react-docgen-typescript to extract StratoCommonInputProps.
+ * Not intended for direct use.
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const CommonInputProps = (_props) => null;

package/dist/input/FieldTitle.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { useTranslate, useResourceDefinitions } from '@strato-admin/core';
+import { useTranslate, useResourceDefinitions } from '@strato-admin/ra-core';
 import { humanize } from 'inflection';
 export const FieldTitle = (props) => {
-    const { resource, source, label, isRequired } = props;
+    const { resource, source, label } = props;
     const translate = useTranslate();
     const definitions = useResourceDefinitions();
     const labelString = React.useMemo(() => {
@@ -24,6 +24,6 @@ export const FieldTitle = (props) => {
             _: defaultLabel,
         });
     }, [label, translate, resource, source, definitions]);
-    return (_jsxs("span", { children: [labelString, !isRequired && (_jsx("span", { style: { color: '#687078', fontWeight: 'normal', fontStyle: 'italic', fontSize: '12px', marginLeft: '4px' }, children: "(optional)" }))] }));
+    return _jsx("span", { children: labelString });
 };
 export default FieldTitle;

package/dist/input/FormField.js

@@ -1,12 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { useInput, useResourceContext, ValidationError } from '@strato-admin/core';
+import { useInput, useResourceContext, ValidationError, useTranslate } from '@strato-admin/ra-core';
 import CloudscapeFormField from '@cloudscape-design/components/form-field';
 import { FieldTitle } from './FieldTitle';
 import { FormFieldContext, useFormFieldContext } from './FormFieldContext';
 export const FormField = (props) => {
     const { children, label, source, defaultValue, validate, description, constraintText, info, secondaryControl, stretch, i18nStrings, ...rest } = props;
     const resource = useResourceContext();
+    const translate = useTranslate();
     const context = useFormFieldContext();
     const inputState = context ??
         useInput({
@@ -26,7 +27,15 @@ export const FormField = (props) => {
     const { id, fieldState: { isTouched, invalid, error }, formState: { isSubmitted }, isRequired, } = inputState;
     const errorToProcess = error?.message || error?.root?.message;
     const errorText = (isTouched || isSubmitted) && invalid && typeof errorToProcess === 'string' ? (_jsx(ValidationError, { error: errorToProcess })) : undefined;
-    const content = (_jsx(CloudscapeFormField, { id: id, label: label === false ? undefined : (_jsx(FieldTitle, { label: label, source: source, resource: resource, isRequired: isRequired })), description: description, constraintText: constraintText, info: info, secondaryControl: secondaryControl, stretch: stretch, i18nStrings: i18nStrings, errorText: errorText, children: children }));
+    const finalConstraintText = React.useMemo(() => {
+        if (isRequired)
+            return constraintText;
+        const optionalLabel = `(${translate('optional')})`;
+        if (!constraintText)
+            return optionalLabel;
+        return (_jsxs(_Fragment, { children: [constraintText, " (", optionalLabel, ")"] }));
+    }, [isRequired, constraintText, translate]);
+    const content = (_jsx(CloudscapeFormField, { id: id, label: label === false ? undefined : (_jsx(FieldTitle, { label: label, source: source, resource: resource, isRequired: isRequired })), description: label === false ? undefined : description, constraintText: label === false ? undefined : finalConstraintText, info: info, secondaryControl: secondaryControl, stretch: stretch, i18nStrings: i18nStrings, errorText: errorText, children: children }));
     if (context) {
         return content;
     }

package/dist/input/FormFieldContext.d.ts

@@ -1,4 +1,4 @@
-import { UseInputValue } from '@strato-admin/core';
+import { UseInputValue } from '@strato-admin/ra-core';
 export interface FormFieldContextValue extends UseInputValue {
     source?: string;
 }

package/dist/input/NumberInput.d.ts

@@ -1,6 +1,6 @@
 import { InputProps as CloudscapeInputProps } from '@cloudscape-design/components/input';
 import { InputProps } from './types';
-export interface NumberInputProps extends Omit<CloudscapeInputProps, 'onChange' | 'value' | 'onBlur' | 'type'>, InputProps {
+export interface NumberInputProps extends InputProps, Pick<CloudscapeInputProps, 'placeholder' | 'disabled' | 'readOnly' | 'autoFocus' | 'step'> {
     type?: CloudscapeInputProps['type'];
 }
 export declare const NumberInput: (props: NumberInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/input/NumberInput.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useInput } from '@strato-admin/core';
+import { useInput } from '@strato-admin/ra-core';
 import CloudscapeInput from '@cloudscape-design/components/input';
 import { FormField } from './FormField';
 import { FormFieldContext, useFormFieldContext } from './FormFieldContext';
 export const NumberInput = (props) => {
-    const { label, source, defaultValue, validate, type = 'number', ...rest } = props;
+    const { label, source, defaultValue, validate, type = 'number', placeholder, disabled, readOnly, autoFocus, step, ...rest } = props;
     const context = useFormFieldContext();
     const inputState = context ??
         useInput({
@@ -18,7 +18,7 @@ export const NumberInput = (props) => {
         const floatValue = parseFloat(value);
         field.onChange(isNaN(floatValue) ? null : floatValue);
     };
-    const inner = (_jsx(CloudscapeInput, { ...rest, ...field, id: id, type: type, value: field.value?.toString() || '', onChange: (event) => handleChange(event.detail.value), onBlur: () => field.onBlur() }));
+    const inner = (_jsx(CloudscapeInput, { ...field, id: id, type: type, placeholder: placeholder, disabled: disabled, readOnly: readOnly, autoFocus: autoFocus, step: step, value: field.value?.toString() || '', onChange: (event) => handleChange(event.detail.value), onBlur: () => field.onBlur() }));
     if (context) {
         return inner;
     }

package/dist/input/ReferenceInput.d.ts

@@ -1,3 +1,3 @@
-import { type ReferenceInputBaseProps } from '@strato-admin/core';
+import { type ReferenceInputBaseProps } from '@strato-admin/ra-core';
 export declare const ReferenceInput: (props: ReferenceInputBaseProps) => import("react/jsx-runtime").JSX.Element;
 export default ReferenceInput;

package/dist/input/ReferenceInput.js

@@ -1,25 +1,35 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { ReferenceInputBase } from '@strato-admin/core';
-import { useFormFieldContext } from './FormFieldContext';
+import { ReferenceInputBase, useInput } from '@strato-admin/ra-core';
+import { FormField } from './FormField';
+import { FormFieldContext, useFormFieldContext } from './FormFieldContext';
 import { AutocompleteInput } from './AutocompleteInput';
 export const ReferenceInput = (props) => {
-    const { children, source: sourceProp, reference, ...rest } = props;
+    const { children, source: sourceProp, reference, isRequired, validate, defaultValue, label, ...rest } = props;
     const context = useFormFieldContext();
     // If we have a context, we use the source from it.
     const source = sourceProp || context?.source;
     if (!source) {
         throw new Error('ReferenceInput requires a source prop or a parent FormField Master');
     }
+    const inputState = context ??
+        useInput({
+            source,
+            defaultValue,
+            validate,
+            isRequired,
+            ...rest,
+        });
     const finalChildren = children || _jsx(AutocompleteInput, { source: source });
-    const inner = (_jsx(ReferenceInputBase, { source: source, reference: reference, ...rest, children: React.isValidElement(finalChildren)
-            ? React.cloneElement(finalChildren, {
-                source,
-            })
-            : finalChildren }));
-    // ReferenceInput is unique because it's a wrapper.
-    // It doesn't use FormFieldContext for its state directly (ReferenceInputBase does),
-    // but it needs to ensure its children can consume the state it provides via ReferenceInputBase.
-    return inner;
+    const inner = (_jsx(ReferenceInputBase, { source: source, reference: reference, isRequired: isRequired, ...rest, children: _jsx(FormFieldContext.Provider, { value: inputState, children: React.isValidElement(finalChildren)
+                ? React.cloneElement(finalChildren, {
+                    source,
+                    isRequired,
+                })
+                : finalChildren }) }));
+    if (context) {
+        return inner;
+    }
+    return (_jsx(FormFieldContext.Provider, { value: inputState, children: _jsx(FormField, { ...props, children: inner }) }));
 };
 export default ReferenceInput;

package/dist/input/SelectInput.d.ts

@@ -1,6 +1,6 @@
 import { SelectProps as CloudscapeSelectProps } from '@cloudscape-design/components/select';
 import { InputProps } from './types';
-export interface SelectInputProps extends Omit<CloudscapeSelectProps, 'onChange' | 'selectedOption' | 'options' | 'onBlur'>, InputProps {
+export interface SelectInputProps extends InputProps, Pick<CloudscapeSelectProps, 'filteringType' | 'placeholder' | 'disabled' | 'readOnly'> {
     choices?: Array<{
         id: string | number;
         [key: string]: any;

package/dist/input/SelectInput.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { useInput, useResourceContext, useChoicesContext, useGetRecordRepresentation, } from '@strato-admin/core';
+import { useInput, useResourceContext, useChoicesContext, useGetRecordRepresentation } from '@strato-admin/ra-core';
 import CloudscapeSelect from '@cloudscape-design/components/select';
 import { FormField } from './FormField';
 import { FormFieldContext, useFormFieldContext } from './FormFieldContext';
 export const SelectInput = (props) => {
-    const { label, source, defaultValue, validate, choices: choicesProp, emptyText = '-', ...rest } = props;
+    const { label, source, defaultValue, validate, choices: choicesProp, emptyText = '-', filteringType, placeholder, disabled, readOnly, ...rest } = props;
     const resource = useResourceContext();
     const { allChoices, isPending } = useChoicesContext(props);
     const getRecordRepresentation = useGetRecordRepresentation(resource);
@@ -35,7 +35,7 @@ export const SelectInput = (props) => {
         }
         return option.value === String(field.value);
     }) || null;
-    const inner = (_jsx(CloudscapeSelect, { ...rest, id: id, options: options, selectedOption: selectedOption, statusType: isPending ? 'loading' : 'finished', expandToViewport: true, onChange: ({ detail }) => {
+    const inner = (_jsx(CloudscapeSelect, { id: id, filteringType: filteringType, placeholder: placeholder, disabled: disabled, readOnly: readOnly, options: options, selectedOption: selectedOption, statusType: isPending ? 'loading' : 'finished', expandToViewport: true, onChange: ({ detail }) => {
             const value = detail.selectedOption.value === '__EMPTY__' ? null : detail.selectedOption.value;
             field.onChange(value);
         }, onBlur: () => field.onBlur() }));

package/dist/input/SliderInput.d.ts

@@ -1,6 +1,6 @@
 import { SliderProps as CloudscapeSliderProps } from '@cloudscape-design/components/slider';
 import { InputProps } from './types';
-export interface SliderInputProps extends Omit<CloudscapeSliderProps, 'onChange' | 'value' | 'i18nStrings'>, InputProps {
+export interface SliderInputProps extends InputProps, Partial<Pick<CloudscapeSliderProps, 'min' | 'max'>>, Pick<CloudscapeSliderProps, 'step' | 'disabled' | 'readOnly' | 'valueFormatter' | 'tickMarks' | 'referenceValues' | 'hideFillLine' | 'ariaLabel' | 'ariaDescription'> {
 }
 export declare const SliderInput: (props: SliderInputProps) => import("react/jsx-runtime").JSX.Element;
 export default SliderInput;

package/dist/input/SliderInput.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useInput } from '@strato-admin/core';
+import { useInput } from '@strato-admin/ra-core';
 import CloudscapeSlider from '@cloudscape-design/components/slider';
 import { FormField } from './FormField';
 import { FormFieldContext, useFormFieldContext } from './FormFieldContext';
 export const SliderInput = (props) => {
-    const { label, source, defaultValue, validate, ...rest } = props;
+    const { label, source, defaultValue, validate, min, max, step, disabled, readOnly, valueFormatter, tickMarks, referenceValues, hideFillLine, ariaLabel, ariaDescription, ...rest } = props;
     const context = useFormFieldContext();
     const inputState = context ??
         useInput({
@@ -15,8 +15,8 @@ export const SliderInput = (props) => {
         });
     const { id, field } = inputState;
     // Cloudscape Slider requires a number value
-    const value = typeof field.value === 'number' ? field.value : props.min ?? 0;
-    const inner = (_jsx(CloudscapeSlider, { ...rest, id: id, value: value, onChange: (event) => field.onChange(event.detail.value) }));
+    const value = typeof field.value === 'number' ? field.value : (min ?? 0);
+    const inner = (_jsx(CloudscapeSlider, { id: id, min: min ?? 0, max: max ?? 100, step: step, disabled: disabled, readOnly: readOnly, valueFormatter: valueFormatter, tickMarks: tickMarks, referenceValues: referenceValues, hideFillLine: hideFillLine, ariaLabel: ariaLabel, ariaDescription: ariaDescription, value: value, onChange: (event) => field.onChange(event.detail.value) }));
     if (context) {
         return inner;
     }

package/dist/input/TextAreaInput.d.ts

@@ -1,6 +1,6 @@
 import { TextareaProps as CloudscapeTextareaProps } from '@cloudscape-design/components/textarea';
 import { InputProps } from './types';
-export interface TextAreaInputProps extends Omit<CloudscapeTextareaProps, 'onChange' | 'value' | 'onBlur'>, InputProps {
+export interface TextAreaInputProps extends InputProps, Pick<CloudscapeTextareaProps, 'placeholder' | 'disabled' | 'readOnly' | 'rows' | 'autoFocus' | 'spellcheck'> {
 }
 export declare const TextAreaInput: (props: TextAreaInputProps) => import("react/jsx-runtime").JSX.Element;
 export default TextAreaInput;

package/dist/input/TextAreaInput.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useInput } from '@strato-admin/core';
+import { useInput } from '@strato-admin/ra-core';
 import CloudscapeTextarea from '@cloudscape-design/components/textarea';
 import { FormField } from './FormField';
 import { FormFieldContext, useFormFieldContext } from './FormFieldContext';
 export const TextAreaInput = (props) => {
-    const { label, source, defaultValue, validate, ...rest } = props;
+    const { label, source, defaultValue, validate, placeholder, disabled, readOnly, rows, autoFocus, spellcheck, ...rest } = props;
     const context = useFormFieldContext();
     const inputState = context ??
         useInput({
@@ -14,7 +14,7 @@ export const TextAreaInput = (props) => {
             ...rest,
         });
     const { id, field } = inputState;
-    const inner = (_jsx(CloudscapeTextarea, { ...rest, ...field, id: id, value: field.value || '', onChange: (event) => field.onChange(event.detail.value), onBlur: () => field.onBlur() }));
+    const inner = (_jsx(CloudscapeTextarea, { ...field, id: id, placeholder: placeholder, disabled: disabled, readOnly: readOnly, rows: rows, autoFocus: autoFocus, spellcheck: spellcheck, value: field.value || '', onChange: (event) => field.onChange(event.detail.value), onBlur: () => field.onBlur() }));
     if (context) {
         return inner;
     }

package/dist/input/TextInput.d.ts

@@ -1,6 +1,6 @@
 import { InputProps as CloudscapeInputProps } from '@cloudscape-design/components/input';
 import { InputProps } from './types';
-export interface TextInputProps extends Omit<CloudscapeInputProps, 'onChange' | 'value' | 'onBlur' | 'type'>, InputProps {
+export interface TextInputProps extends InputProps, Pick<CloudscapeInputProps, 'placeholder' | 'disabled' | 'readOnly' | 'autoFocus' | 'autoComplete' | 'spellcheck' | 'inputMode'> {
     type?: CloudscapeInputProps['type'];
 }
 export declare const TextInput: (props: TextInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/input/TextInput.js

@@ -1,23 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useInput } from '@strato-admin/core';
+import { useInput } from '@strato-admin/ra-core';
 import CloudscapeInput from '@cloudscape-design/components/input';
 import { FormField } from './FormField';
 import { FormFieldContext, useFormFieldContext } from './FormFieldContext';
 export const TextInput = (props) => {
-    const { label, source, defaultValue, validate, type = 'text', ...rest } = props;
+    const { label, source, defaultValue, validate, description, constraintText, info, secondaryControl, type = 'text', placeholder, disabled, readOnly, autoFocus, autoComplete, spellcheck, inputMode, } = props;
     const context = useFormFieldContext();
-    const inputState = context ??
-        useInput({
-            source,
-            defaultValue,
-            validate,
-            ...rest,
-        });
-    const { id, field } = inputState;
-    const inner = (_jsx(CloudscapeInput, { ...rest, ...field, id: id, type: type, value: field.value || '', onChange: (event) => field.onChange(event.detail.value), onBlur: () => field.onBlur() }));
+    const inputState = context ?? useInput({ source, defaultValue, validate });
+    const { field } = inputState;
+    const inner = (_jsx(CloudscapeInput, { ...field, type: type, placeholder: placeholder, disabled: disabled, readOnly: readOnly, autoFocus: autoFocus, autoComplete: autoComplete, spellcheck: spellcheck, inputMode: inputMode, value: field.value || '', onChange: (event) => field.onChange(event.detail.value), onBlur: () => field.onBlur() }));
     if (context) {
         return inner;
     }
-    return (_jsx(FormFieldContext.Provider, { value: inputState, children: _jsx(FormField, { ...props, children: inner }) }));
+    return (_jsx(FormFieldContext.Provider, { value: inputState, children: _jsx(FormField, { source: source, label: label, description: description, constraintText: constraintText, info: info, secondaryControl: secondaryControl, children: inner }) }));
 };
 export default TextInput;

package/dist/input/index.d.ts

@@ -1,8 +1,9 @@
 export * from './types';
+export * from './BooleanInput';
 export * from './TextInput';
 export * from './TextAreaInput';
 export * from './NumberInput';
-export * from './AttributeEditor';
+export * from './ArrayInput';
 export * from './SelectInput';
 export * from './AutocompleteInput';
 export * from './ReferenceInput';

package/dist/input/index.js

@@ -1,8 +1,9 @@
 export * from './types';
+export * from './BooleanInput';
 export * from './TextInput';
 export * from './TextAreaInput';
 export * from './NumberInput';
-export * from './AttributeEditor';
+export * from './ArrayInput';
 export * from './SelectInput';
 export * from './AutocompleteInput';
 export * from './ReferenceInput';

package/dist/input/types.d.ts

@@ -1,6 +1,37 @@
-import { InputProps as InputPropsBase } from '@strato-admin/core';
+import React from 'react';
+import { InputProps as InputPropsBase, Validator } from '@strato-admin/ra-core';
 import { FormFieldProps as CloudscapeFormFieldProps } from '@cloudscape-design/components/form-field';
-export interface StratoInputProps<T = any> extends Omit<InputPropsBase<T>, 'label'>, Pick<CloudscapeFormFieldProps, 'description' | 'constraintText' | 'info' | 'secondaryControl' | 'stretch' | 'i18nStrings'> {
+/**
+ * Common props shared by all Strato Admin input components.
+ */
+export interface StratoCommonInputProps<T = any> {
+    /** The field name in the record. Used to read and write the value. */
+    source: string;
+    /** Override the auto-generated label. Pass `false` to hide the label entirely. */
     label?: string | false;
+    /** The initial value when no record value exists. */
+    defaultValue?: any;
+    /** Validation rule or array of rules. Use built-in validators (`required()`, `minLength()`, etc.) or provide a custom function. */
+    validate?: Validator | Validator[];
+    /** Transforms the record value before passing it to the input (record → input). */
+    format?: (value: T) => any;
+    /** Transforms the input value before saving to the record (input → record). */
+    parse?: (value: any) => T;
+    /** When `true`, the value is visible but cannot be changed. */
+    readOnly?: boolean;
+    /** When `true`, the input is non-interactive and grayed out. */
+    disabled?: boolean;
+    /** Helper text displayed below the label. */
+    description?: React.ReactNode;
+    /** Additional constraint text. Appended with "(optional)" when the field is not required. */
+    constraintText?: React.ReactNode;
+    /** Info link displayed next to the label (Cloudscape `info` slot). */
+    info?: React.ReactNode;
+    /** Secondary control displayed to the right of the input (Cloudscape `secondaryControl` slot). */
+    secondaryControl?: React.ReactNode;
+    /** When `true`, the form field stretches to fill its container width. */
+    stretch?: boolean;
+}
+export interface StratoInputProps<T = any> extends StratoCommonInputProps<T>, Omit<InputPropsBase<T>, 'label' | 'source' | 'defaultValue' | 'validate' | 'format' | 'parse' | 'readOnly' | 'disabled'>, Pick<CloudscapeFormFieldProps, 'i18nStrings'> {
 }
 export type InputProps<T = any> = StratoInputProps<T>;

package/dist/layout/AppLayout.js

@@ -2,9 +2,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useState } from 'react';
 import CloudscapeAppLayout from '@cloudscape-design/components/app-layout';
 import SideNavigation from '@cloudscape-design/components/side-navigation';
-import { useResourceDefinitions, useDefaultTitle, useGetResourceLabel } from '@strato-admin/core';
+import { useResourceDefinitions, useDefaultTitle, useGetResourceLabel } from '@strato-admin/ra-core';
 import { useNavigate } from 'react-router-dom';
 import { TopNavigation } from './TopNavigation';
+import { Notifications } from './Notifications';
 import ThemeManager from '../theme/ThemeManager';
 export const AppLayout = ({ children, header, title }) => {
     const resources = useResourceDefinitions();
@@ -13,7 +14,9 @@ export const AppLayout = ({ children, header, title }) => {
     const defaultTitle = useDefaultTitle();
     const [navigationOpen, setNavigationOpen] = useState(true);
     const appTitle = title ?? (typeof defaultTitle === 'string' ? defaultTitle : '');
-    const items = Object.values(resources).map((resource) => ({
+    const items = Object.values(resources)
+        .filter((resource) => resource.hasList)
+        .map((resource) => ({
         type: 'link',
         text: getResourceLabel(resource.name),
         href: `/${resource.name}`,
@@ -33,6 +36,6 @@ export const AppLayout = ({ children, header, title }) => {
                             event.preventDefault();
                             navigate(event.detail.href);
                         }
-                    } }), content: _jsx("div", { children: children }) })] }));
+                    } }), notifications: _jsx(Notifications, {}), content: _jsx("div", { children: children }) })] }));
 };
 export default AppLayout;

package/dist/layout/Notifications.d.ts

@@ -0,0 +1 @@
+export declare const Notifications: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/layout/Notifications.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from 'react';
+import Flashbar from '@cloudscape-design/components/flashbar';
+import { useNotificationContext, useTranslate } from '@strato-admin/ra-core';
+const DEFAULT_AUTO_HIDE_MS = null;
+let idCounter = 0;
+const stableIds = new WeakMap();
+const getStableId = (obj) => {
+    if (!stableIds.has(obj))
+        stableIds.set(obj, String(++idCounter));
+    return stableIds.get(obj);
+};
+export const Notifications = () => {
+    const { notifications, setNotifications } = useNotificationContext();
+    const translate = useTranslate();
+    const timers = useRef(new Map());
+    const dismiss = useCallback((notification) => {
+        const id = getStableId(notification);
+        clearTimeout(timers.current.get(id));
+        timers.current.delete(id);
+        setNotifications((prev) => prev.filter((n) => n !== notification));
+    }, [setNotifications]);
+    useEffect(() => {
+        notifications.forEach((notification) => {
+            const id = getStableId(notification);
+            if (timers.current.has(id))
+                return;
+            const ms = notification.notificationOptions?.autoHideDuration ?? DEFAULT_AUTO_HIDE_MS;
+            if (ms === null)
+                return;
+            timers.current.set(id, setTimeout(() => dismiss(notification), ms));
+        });
+        return () => {
+            timers.current.forEach((timer) => clearTimeout(timer));
+            timers.current.clear();
+        };
+    }, [notifications, dismiss]);
+    if (notifications.length === 0)
+        return null;
+    const items = notifications.map((notification) => {
+        const { message, type, notificationOptions } = notification;
+        return {
+            id: getStableId(notification),
+            type,
+            content: typeof message === 'string' ? translate(message, notificationOptions?.messageArgs) : message,
+            dismissible: true,
+            onDismiss: () => dismiss(notification),
+        };
+    });
+    return _jsx(Flashbar, { items: items });
+};

package/dist/layout/Ready.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Default component to display when the admin has no resources.
+ * This is a Cloudscape-themed replacement for the default react-admin Ready component.
+ */
+export declare const Ready: () => import("react/jsx-runtime").JSX.Element;
+export default Ready;