@strato-admin/cloudscape 0.1.0

package/dist/input/AutocompleteInput.d.ts

@@ -0,0 +1,10 @@
+import { AutosuggestProps as CloudscapeAutosuggestProps } from '@cloudscape-design/components/autosuggest';
+import { InputProps } from './types';
+export interface AutocompleteInputProps extends Omit<CloudscapeAutosuggestProps, 'onChange' | 'value' | 'options' | 'onBlur'>, InputProps {
+    choices?: Array<{
+        id: string | number;
+        [key: string]: any;
+    }>;
+}
+export declare const AutocompleteInput: (props: AutocompleteInputProps) => import("react/jsx-runtime").JSX.Element;
+export default AutocompleteInput;

package/dist/input/AutocompleteInput.js

@@ -0,0 +1,67 @@
+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 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 resource = useResourceContext();
+    const { allChoices, isPending, setFilters } = useChoicesContext(props);
+    const getRecordRepresentation = useGetRecordRepresentation(resource);
+    const context = useFormFieldContext();
+    const inputState = context ??
+        useInput({
+            source,
+            defaultValue,
+            validate,
+            ...rest,
+        });
+    const { id, field } = inputState;
+    const choices = choicesProp || allChoices || [];
+    const selectedChoice = useMemo(() => choices.find((c) => String(c.id) === String(field.value)), [choices, field.value]);
+    const [filterValue, setFilterValue] = useState('');
+    // Keep track of the last value we synced from the field
+    const lastSyncedValue = React.useRef(undefined);
+    useEffect(() => {
+        if (selectedChoice) {
+            setFilterValue(String(getRecordRepresentation(selectedChoice)));
+            lastSyncedValue.current = field.value;
+        }
+        else if (!field.value) {
+            setFilterValue('');
+            lastSyncedValue.current = field.value;
+        }
+        else if (field.value !== lastSyncedValue.current) {
+            // If we have a value but no choice yet, and we are not loading,
+            // we show the ID as a last resort.
+            if (!isPending) {
+                setFilterValue(String(field.value));
+                lastSyncedValue.current = field.value;
+            }
+        }
+    }, [field.value, selectedChoice, getRecordRepresentation, isPending]);
+    const options = useMemo(() => choices.map((choice) => ({
+        label: String(getRecordRepresentation(choice)),
+        value: String(choice.id),
+    })), [choices, getRecordRepresentation]);
+    const handleChange = ({ detail }) => {
+        setFilterValue(detail.value);
+        if (setFilters) {
+            setFilters(detail.value);
+        }
+        // If the user cleared the input, we clear the field value
+        if (detail.value === '') {
+            field.onChange(null);
+        }
+    };
+    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() }));
+    if (context) {
+        return inner;
+    }
+    return (_jsx(FormFieldContext.Provider, { value: inputState, children: _jsx(FormField, { ...props, children: inner }) }));
+};
+export default AutocompleteInput;

package/dist/input/FieldTitle.d.ts

@@ -0,0 +1,8 @@
+export interface FieldTitleProps {
+    resource?: string;
+    source?: string;
+    label?: string;
+    isRequired?: boolean;
+}
+export declare const FieldTitle: (props: FieldTitleProps) => import("react/jsx-runtime").JSX.Element;
+export default FieldTitle;

package/dist/input/FieldTitle.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useTranslate, useResourceDefinitions } from '@strato-admin/core';
+import { humanize } from 'inflection';
+export const FieldTitle = (props) => {
+    const { resource, source, label, isRequired } = props;
+    const translate = useTranslate();
+    const definitions = useResourceDefinitions();
+    const labelString = React.useMemo(() => {
+        if (label !== undefined) {
+            return translate(label, { _: label });
+        }
+        if (!resource || !source) {
+            return source ? humanize(source) : '';
+        }
+        const definition = definitions[resource];
+        const fieldDefinition = definition?.fields?.[source];
+        const defaultLabel = fieldDefinition?.label
+            ? translate(fieldDefinition.label, { _: fieldDefinition.label })
+            : source
+                ? humanize(source)
+                : '';
+        return translate(`resources.${resource}.fields.${source}`, {
+            _: 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)" }))] }));
+};
+export default FieldTitle;

package/dist/input/FormField.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { InputProps } from './types';
+export interface FormFieldProps extends InputProps {
+    children: React.ReactNode;
+}
+export declare const FormField: (props: FormFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default FormField;

package/dist/input/FormField.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useInput, useResourceContext, ValidationError } from '@strato-admin/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 context = useFormFieldContext();
+    const inputState = context ??
+        useInput({
+            source,
+            defaultValue,
+            validate,
+            ...rest,
+        });
+    const contextValue = React.useMemo(() => {
+        if (!inputState)
+            return undefined;
+        return {
+            ...inputState,
+            source: source || context?.source || '',
+        };
+    }, [inputState, source, context?.source]);
+    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 }));
+    if (context) {
+        return content;
+    }
+    return _jsx(FormFieldContext.Provider, { value: contextValue, children: content });
+};
+export default FormField;

package/dist/input/FormFieldContext.d.ts

@@ -0,0 +1,6 @@
+import { UseInputValue } from '@strato-admin/core';
+export interface FormFieldContextValue extends UseInputValue {
+    source?: string;
+}
+export declare const FormFieldContext: import("react").Context<FormFieldContextValue | undefined>;
+export declare const useFormFieldContext: () => FormFieldContextValue | undefined;

package/dist/input/FormFieldContext.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from 'react';
+export const FormFieldContext = createContext(undefined);
+export const useFormFieldContext = () => useContext(FormFieldContext);

package/dist/input/NumberInput.d.ts

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

package/dist/input/NumberInput.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useInput } from '@strato-admin/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 context = useFormFieldContext();
+    const inputState = context ??
+        useInput({
+            source,
+            defaultValue,
+            validate,
+            ...rest,
+        });
+    const { id, field } = inputState;
+    const handleChange = (value) => {
+        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() }));
+    if (context) {
+        return inner;
+    }
+    return (_jsx(FormFieldContext.Provider, { value: inputState, children: _jsx(FormField, { ...props, children: inner }) }));
+};
+export default NumberInput;

package/dist/input/ReferenceInput.d.ts

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

package/dist/input/ReferenceInput.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { ReferenceInputBase } from '@strato-admin/core';
+import { useFormFieldContext } from './FormFieldContext';
+import { AutocompleteInput } from './AutocompleteInput';
+export const ReferenceInput = (props) => {
+    const { children, source: sourceProp, reference, ...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 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;
+};
+export default ReferenceInput;

package/dist/input/SelectInput.d.ts

@@ -0,0 +1,15 @@
+import { SelectProps as CloudscapeSelectProps } from '@cloudscape-design/components/select';
+import { InputProps } from './types';
+export interface SelectInputProps extends Omit<CloudscapeSelectProps, 'onChange' | 'selectedOption' | 'options' | 'onBlur'>, InputProps {
+    choices?: Array<{
+        id: string | number;
+        [key: string]: any;
+    }>;
+    /**
+     * The text to display for the empty option when isRequired is false.
+     * @default "-"
+     */
+    emptyText?: string;
+}
+export declare const SelectInput: (props: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
+export default SelectInput;

package/dist/input/SelectInput.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useInput, useResourceContext, useChoicesContext, useGetRecordRepresentation, } from '@strato-admin/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 resource = useResourceContext();
+    const { allChoices, isPending } = useChoicesContext(props);
+    const getRecordRepresentation = useGetRecordRepresentation(resource);
+    const context = useFormFieldContext();
+    const inputState = context ??
+        useInput({
+            source,
+            defaultValue,
+            validate,
+            ...rest,
+        });
+    const { id, field, isRequired } = inputState;
+    const choices = choicesProp || allChoices || [];
+    const options = React.useMemo(() => {
+        const opts = choices.map((choice) => ({
+            label: String(getRecordRepresentation(choice)),
+            value: String(choice.id),
+        }));
+        if (!isRequired) {
+            opts.unshift({ label: emptyText, value: '__EMPTY__' });
+        }
+        return opts;
+    }, [choices, getRecordRepresentation, isRequired, emptyText]);
+    const selectedOption = options.find((option) => {
+        if (!field.value) {
+            return option.value === '__EMPTY__';
+        }
+        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 value = detail.selectedOption.value === '__EMPTY__' ? null : detail.selectedOption.value;
+            field.onChange(value);
+        }, onBlur: () => field.onBlur() }));
+    if (context) {
+        return inner;
+    }
+    return (_jsx(FormFieldContext.Provider, { value: inputState, children: _jsx(FormField, { ...props, children: inner }) }));
+};
+export default SelectInput;

package/dist/input/SliderInput.d.ts

@@ -0,0 +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 declare const SliderInput: (props: SliderInputProps) => import("react/jsx-runtime").JSX.Element;
+export default SliderInput;

package/dist/input/SliderInput.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useInput } from '@strato-admin/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 context = useFormFieldContext();
+    const inputState = context ??
+        useInput({
+            source,
+            defaultValue,
+            validate,
+            ...rest,
+        });
+    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) }));
+    if (context) {
+        return inner;
+    }
+    return (_jsx(FormFieldContext.Provider, { value: inputState, children: _jsx(FormField, { ...props, children: inner }) }));
+};
+export default SliderInput;

package/dist/input/TextAreaInput.d.ts

@@ -0,0 +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 declare const TextAreaInput: (props: TextAreaInputProps) => import("react/jsx-runtime").JSX.Element;
+export default TextAreaInput;

package/dist/input/TextAreaInput.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useInput } from '@strato-admin/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 context = useFormFieldContext();
+    const inputState = context ??
+        useInput({
+            source,
+            defaultValue,
+            validate,
+            ...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() }));
+    if (context) {
+        return inner;
+    }
+    return (_jsx(FormFieldContext.Provider, { value: inputState, children: _jsx(FormField, { ...props, children: inner }) }));
+};
+export default TextAreaInput;

package/dist/input/TextInput.d.ts

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

package/dist/input/TextInput.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useInput } from '@strato-admin/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 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() }));
+    if (context) {
+        return inner;
+    }
+    return (_jsx(FormFieldContext.Provider, { value: inputState, children: _jsx(FormField, { ...props, children: inner }) }));
+};
+export default TextInput;

package/dist/input/index.d.ts

@@ -0,0 +1,11 @@
+export * from './types';
+export * from './TextInput';
+export * from './TextAreaInput';
+export * from './NumberInput';
+export * from './AttributeEditor';
+export * from './SelectInput';
+export * from './AutocompleteInput';
+export * from './ReferenceInput';
+export * from './SliderInput';
+export * from './FormFieldContext';
+export * from './FormField';

package/dist/input/index.js

@@ -0,0 +1,11 @@
+export * from './types';
+export * from './TextInput';
+export * from './TextAreaInput';
+export * from './NumberInput';
+export * from './AttributeEditor';
+export * from './SelectInput';
+export * from './AutocompleteInput';
+export * from './ReferenceInput';
+export * from './SliderInput';
+export * from './FormFieldContext';
+export * from './FormField';

package/dist/input/types.d.ts

@@ -0,0 +1,6 @@
+import { InputProps as InputPropsBase } from '@strato-admin/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'> {
+    label?: string | false;
+}
+export type InputProps<T = any> = StratoInputProps<T>;

package/dist/input/types.js

@@ -0,0 +1 @@
+export {};

package/dist/layout/AppLayout.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface AppLayoutProps {
+    children: React.ReactNode;
+    header?: React.ReactNode;
+    title?: string;
+}
+export declare const AppLayout: ({ children, header, title }: AppLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export default AppLayout;

package/dist/layout/AppLayout.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 { useNavigate } from 'react-router-dom';
+import { TopNavigation } from './TopNavigation';
+import ThemeManager from '../theme/ThemeManager';
+export const AppLayout = ({ children, header, title }) => {
+    const resources = useResourceDefinitions();
+    const getResourceLabel = useGetResourceLabel();
+    const navigate = useNavigate();
+    const defaultTitle = useDefaultTitle();
+    const [navigationOpen, setNavigationOpen] = useState(true);
+    const appTitle = title ?? (typeof defaultTitle === 'string' ? defaultTitle : '');
+    const items = Object.values(resources).map((resource) => ({
+        type: 'link',
+        text: getResourceLabel(resource.name),
+        href: `/${resource.name}`,
+    }));
+    return (_jsxs(_Fragment, { children: [_jsx(ThemeManager, {}), header || _jsx(TopNavigation, { identity: { title: appTitle, href: '/' } }), _jsx(CloudscapeAppLayout, { headerSelector: "#header", navigationOpen: navigationOpen, onNavigationChange: ({ detail }) => setNavigationOpen(detail.open), navigation: _jsx(SideNavigation
+                //header={{
+                //    href: '/',
+                //    text: 'Dashboard',
+                //}}
+                , { 
+                    //header={{
+                    //    href: '/',
+                    //    text: 'Dashboard',
+                    //}}
+                    items: items, onFollow: (event) => {
+                        if (!event.detail.external) {
+                            event.preventDefault();
+                            navigate(event.detail.href);
+                        }
+                    } }), content: _jsx("div", { children: children }) })] }));
+};
+export default AppLayout;

package/dist/layout/TopNavigation.d.ts

@@ -0,0 +1,6 @@
+import { TopNavigationProps } from '@cloudscape-design/components/top-navigation';
+export interface MyTopNavigationProps extends Omit<TopNavigationProps, 'identity'> {
+    identity?: TopNavigationProps.Identity;
+}
+export declare const TopNavigation: ({ utilities: providedUtilities, identity, ...props }: MyTopNavigationProps) => import("react/jsx-runtime").JSX.Element;
+export default TopNavigation;

package/dist/layout/TopNavigation.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CloudscapeTopNavigation from '@cloudscape-design/components/top-navigation';
+import { useLocale, useSetLocale, useLocales, useTranslate, useAuthProvider, useStore } from '@strato-admin/core';
+const LightModeIcon = (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", focusable: "false", children: [_jsx("path", { d: "M8 1.5v13a6.5 6.5 0 0 0 0-13z", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "8", r: "7", fill: "none", stroke: "currentColor", "stroke-width": "1.5" })] }));
+const DarkModeIcon = (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", focusable: "false", children: [_jsx("path", { d: "M8 1.5v13a6.5 6.5 0 0 1 0-13z", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "8", r: "7", fill: "none", stroke: "currentColor", "stroke-width": "1.5" })] }));
+export const TopNavigation = ({ utilities: providedUtilities, identity, ...props }) => {
+    const locale = useLocale();
+    const setLocale = useSetLocale();
+    const locales = useLocales();
+    const translate = useTranslate();
+    const authProvider = useAuthProvider();
+    const [theme, setTheme] = useStore('theme', 'light');
+    let utilities = providedUtilities;
+    if (!utilities) {
+        const autoUtilities = [];
+        autoUtilities.push({
+            type: 'button',
+            iconSvg: theme === 'light' ? LightModeIcon : DarkModeIcon,
+            onClick: () => {
+                setTheme(theme === 'dark' ? 'light' : 'dark');
+            },
+            ariaLabel: translate('strato.action.toggle_theme', { _: 'Toggle theme' }),
+        });
+        if (locales && locales.length > 1) {
+            autoUtilities.push({
+                type: 'menu-dropdown',
+                text: locales.find((l) => l.locale === locale)?.name || locale,
+                iconName: 'globe',
+                onItemClick: (event) => {
+                    setLocale(event.detail.id);
+                },
+                items: locales.map((l) => ({
+                    id: l.locale,
+                    text: l.name,
+                })),
+            });
+        }
+        if (authProvider) {
+            autoUtilities.push({
+                type: 'menu-dropdown',
+                text: translate('ra.auth.user_menu', { _: 'User' }),
+                iconName: 'user-profile',
+                items: [
+                    { id: 'profile', text: translate('ra.auth.profile', { _: 'Profile' }) },
+                    { id: 'signout', text: translate('ra.auth.logout', { _: 'Sign out' }) },
+                ],
+            });
+        }
+        utilities = autoUtilities;
+    }
+    return (_jsx("div", { id: "header", children: _jsx(CloudscapeTopNavigation, { identity: identity || { title: 'Strato Admin', href: '/' }, utilities: utilities, ...props }) }));
+};
+export default TopNavigation;

package/dist/layout/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AppLayout';
+export * from './TopNavigation';

package/dist/layout/index.js

@@ -0,0 +1,2 @@
+export * from './AppLayout';
+export * from './TopNavigation';

package/dist/list/Cards.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CardsProps } from '@cloudscape-design/components/cards';
+import { RaRecord } from '@strato-admin/core';
+export interface ListCardsProps<T extends RaRecord = any> extends Omit<CardsProps<T>, 'items' | 'cardDefinition'> {
+    renderItem?: (item: T) => React.ReactNode;
+    include?: string[];
+    exclude?: string[];
+}
+export declare const ListCards: <T extends RaRecord = any>({ renderItem, include, exclude, ...props }: ListCardsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Cards: <T extends RaRecord = any>({ renderItem, include, exclude, ...props }: ListCardsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default ListCards;

package/dist/list/Cards.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CloudscapeCards from '@cloudscape-design/components/cards';
+import Pagination from '@cloudscape-design/components/pagination';
+import { RecordContextProvider, useFieldSchema } from '@strato-admin/core';
+import { useCollection } from '../collection-hooks';
+import KeyValuePairs from '../detail/KeyValuePairs';
+export const ListCards = ({ renderItem, include, exclude, ...props }) => {
+    const { items, paginationProps, collectionProps } = useCollection({
+        filtering: {},
+        pagination: {},
+        sorting: {},
+    });
+    const schemaChildren = useFieldSchema();
+    const defaultRenderItem = (_item) => (_jsx(KeyValuePairs, { include: include, exclude: exclude, children: schemaChildren }));
+    const finalRenderItem = renderItem || defaultRenderItem;
+    const cardDefinition = {
+        sections: [
+            {
+                id: 'main',
+                content: (item) => _jsx(RecordContextProvider, { value: item, children: finalRenderItem(item) }),
+            },
+        ],
+    };
+    return (_jsx(CloudscapeCards, { ...collectionProps, ...props, items: items || [], cardDefinition: cardDefinition, pagination: _jsx(Pagination, { ...paginationProps }) }));
+};
+export const Cards = ListCards;
+export default ListCards;