@mittwald/flow-react-components 1.5.0-next.3 → 1.5.0-next.31

package/dist/types/components/ActionGroup/ActionGroup.d.ts

@@ -8,8 +8,9 @@ export interface ActionGroupProps extends PropsWithChildren, FlowComponentProps<
     /** The size of the buttons and links inside the action group. @default "m" */
     size?: ButtonProps["size"];
     /**
-     * When set, the buttons are not sorted automatically but stay in source
-     * order. @default false
+     * When set, the buttons are not sorted into the slots `primary`, `secondary`
+     * and `abort` but stay in source order. Use it when the actions have no such
+     * hierarchy, e.g. a row of equal actions or icon buttons. @default false
      */
     preserveOrder?: boolean;
 }

package/dist/types/components/Button/Button.d.ts

@@ -3,7 +3,13 @@ import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
 import { AlphaColor } from '../../lib/types/props';
 import * as Aria from "react-aria-components";
 export interface ButtonProps extends PropsWithChildren<Aria.ButtonProps>, FlowComponentProps<HTMLButtonElement> {
-    /** Slot for button placement in action groups. */
+    /**
+     * Slot for button placement in action groups: `primary` (at the end),
+     * `secondary` (before the primary action) or `abort` (at the start). Without
+     * a slot, an action group places the colors primary, success and danger in
+     * `primary` and every other color in `abort`. A secondary-colored button that
+     * does not abort therefore needs `slot="secondary"`.
+     */
     slot?: string;
     /**
      * The color of the button.

package/dist/types/components/Button/stories/lib.d.ts

@@ -4,4 +4,4 @@ export declare const asyncFunction: (...args: unknown[]) => Promise<void>;
 export declare const asyncLongFunction: (...args: unknown[]) => Promise<void>;
 export declare const asyncLongFunctionWithError: (...args: unknown[]) => Promise<never>;
 export declare const asyncFunctionWithError: (...args: unknown[]) => Promise<never>;
-export declare const button: import("react").JSX.Element;
+export declare const button: import('react').JSX.Element;

package/dist/types/components/CartesianChart/components/YAxis/YAxis.d.ts

@@ -4,6 +4,13 @@ import * as Recharts from "recharts";
 export type YAxisProps<TData extends ChartDataValue = ChartDataValue, TDataKey extends DataKey<TData> = DataKey<TData>, TDataMatch = DataKeyValue<TData, TDataKey>> = Pick<Recharts.YAxisProps, "className" | "orientation" | "allowDecimals" | "interval" | "minTickGap" | "scale" | "type" | "domain" | "hide" | "unit"> & {
     dataKey?: TDataKey;
     tickFormatter?: (value: TDataMatch, index: number) => string;
+    /**
+     * The width of the axis in pixels. `"auto"` sizes the axis to its widest tick
+     * label. Defaults to `"auto"` for a category axis (e.g. with `layout` set to
+     * `"vertical"`) and to `60` otherwise. Pin a number to align the plot areas
+     * of synchronized charts.
+     */
+    width?: number | "auto";
 };
 /**
  * `tickFormatter` is deliberately not part of the remote surface. A function

package/dist/types/components/CodeEditor/CodeEditor.d.ts

@@ -11,6 +11,13 @@ export interface CodeEditorProps extends Omit<ReactCodeMirrorProps, "theme" | "l
      * @default false
      */
     isReadOnly?: boolean;
+    /**
+     * Whether the editor is disabled. The code can neither be edited, focused nor
+     * copied.
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
     /**
      * Whether the editor is displayed as invalid.
      *

package/dist/types/components/FileField/FileField.d.ts

@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 import { FileInputOnChangeHandler } from './components/FileInput';
 import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
 import type * as Aria from "react-aria-components";
-export interface FileFieldProps extends PropsWithChildren, FlowComponentProps<HTMLInputElement>, Pick<Aria.InputProps, "accept" | "multiple" | "name">, Pick<Aria.TextFieldProps, "isRequired" | "isInvalid" | "validationBehavior" | "isDisabled"> {
+export interface FileFieldProps extends PropsWithChildren, FlowComponentProps<HTMLInputElement>, Pick<Aria.InputProps, "accept" | "multiple" | "name" | "aria-describedby">, Pick<Aria.TextFieldProps, "isRequired" | "isInvalid" | "validationBehavior" | "isDisabled"> {
     /** Handler that is called when the file input changes. */
     onChange?: FileInputOnChangeHandler;
     /** Whether the component is read only. */

package/dist/types/components/Flex/Flex.d.ts

@@ -19,6 +19,10 @@ export interface FlexProps extends PropsWithChildren, PropsWithClassName, PropsW
     wrap?: CSSProperties["flexWrap"];
     /** The padding of the element. */
     padding?: "xs" | "s" | "m" | "l" | "xl";
+    /** The padding top and bottom of the element. Takes precedence over `padding`. */
+    paddingBlock?: "xs" | "s" | "m" | "l" | "xl";
+    /** The padding left and right of the element. Takes precedence over `padding`. */
+    paddingInline?: "xs" | "s" | "m" | "l" | "xl";
     /** The padding top of the element. */
     paddingTop?: "xs" | "s" | "m" | "l" | "xl";
     /** The padding bottom of the element. */

package/dist/types/components/Link/Link.d.ts

@@ -11,7 +11,11 @@ export interface LinkProps extends PropsWithChildren<Omit<Aria.LinkProps, "child
     color?: "default" | AlphaColor;
     /** Marks the link as the currently active one, e.g. in a navigation. */
     "aria-current"?: string;
-    /** The name of the slot the link is placed in. */
+    /**
+     * The name of the slot the link is placed in. In action groups: `primary` (at
+     * the end), `secondary` (before the primary action) or `abort` (at the
+     * start).
+     */
     slot?: string;
     /** The whiteSpace css value of the element. */
     whiteSpace?: CSSProperties["whiteSpace"];

package/dist/types/components/List/components/DataLoader/DataLoader.d.ts

@@ -1,2 +1,2 @@
-export declare const DataLoader: () => import("react").JSX.Element[];
+export declare const DataLoader: () => import('react').JSX.Element[];
 export default DataLoader;

package/dist/types/components/List/components/Items/components/Item/Item.d.ts

@@ -8,7 +8,7 @@ interface Props extends PropsWithChildren {
     list: ListModel<never>;
     isTile: boolean;
 }
-export declare const Item: import('react').MemoExoticComponent<(props: Props) => import("react").JSX.Element | null>;
+export declare const Item: import('react').MemoExoticComponent<(props: Props) => import('react').JSX.Element | null>;
 interface ItemContainerProps extends PropsWithChildren {
     id?: Key;
     data?: never;

package/dist/types/components/List/components/Items/components/Item/hooks/useGridItemProps.d.ts

@@ -14,6 +14,6 @@ export declare const useGridItemProps: (props: P, list: List<never>) => {
         ref: import('react').RefObject<HTMLDivElement | null>;
         onAction: () => void;
     };
-    children: import("react").JSX.Element;
+    children: import('react').JSX.Element;
 };
 export {};

package/dist/types/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.d.ts

@@ -11,5 +11,5 @@ export type ListItemViewContentProps = PropsWithChildren & Pick<ColumnLayoutProp
     viewMode?: ListViewMode;
 };
 /** @flr-generate all */
-export declare const ListItemViewContent: (props: ListItemViewContentProps) => import("react").JSX.Element;
+export declare const ListItemViewContent: (props: ListItemViewContentProps) => import('react').JSX.Element;
 export default ListItemViewContent;

package/dist/types/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.d.ts

@@ -7,5 +7,10 @@ export interface ComplexityIndicatorProps {
     isEmptyValue: boolean;
     validationResultState: StateFromLatestPolicyValidationResult;
     policyValidationResult: ResolvedPolicyValidationResult;
+    /**
+     * The field is invalid for a reason outside the policy, e.g. a server error.
+     * The bar then shows danger like the field, not the password's strength.
+     */
+    isInvalid?: boolean;
 }
 export default ComplexityIndicator;

package/dist/types/components/SkeletonMode/SkeletonMode.d.ts

@@ -0,0 +1,16 @@
+import { FC, PropsWithChildren } from 'react';
+export interface SkeletonModeProps extends PropsWithChildren {
+    /**
+     * Whether the components inside render as skeleton. A nested `SkeletonMode`
+     * with `isEnabled={false}` renders its content as real UI.
+     *
+     * @default true
+     */
+    isEnabled?: boolean;
+}
+/**
+ * @flr-generate all
+ * @flowStatus beta, new
+ */
+export declare const SkeletonMode: FC<SkeletonModeProps>;
+export default SkeletonMode;

package/dist/types/components/SkeletonMode/components/SkeletonRawText/SkeletonRawText.d.ts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from 'react';
+/**
+ * The text rule for containers: turns raw string and number children into bars
+ * and leaves every element child to its own skeleton rendering. Outside an
+ * enabled `SkeletonMode` it renders its children unchanged.
+ */
+export declare const SkeletonRawText: FC<PropsWithChildren>;
+export default SkeletonRawText;

package/dist/types/components/SkeletonMode/components/SkeletonRawText/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SkeletonRawText';
+export { default } from './SkeletonRawText';

package/dist/types/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties, FC, PropsWithChildren } from 'react';
+export interface SkeletonTextContentProps extends PropsWithChildren {
+    /** Width of the bar when there is no content to take the width from. */
+    defaultWidth: CSSProperties["width"];
+}
+/**
+ * The text rule of `SkeletonMode`: content becomes one bar per line in the
+ * width of that line, no content becomes a `SkeletonText` in `defaultWidth`.
+ * Outside an enabled `SkeletonMode` it renders its children unchanged.
+ */
+export declare const SkeletonTextContent: FC<SkeletonTextContentProps>;
+export default SkeletonTextContent;

package/dist/types/components/SkeletonMode/components/SkeletonTextContent/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SkeletonTextContent';
+export { default } from './SkeletonTextContent';

package/dist/types/components/SkeletonMode/index.d.ts

@@ -0,0 +1,3 @@
+export * from './view';
+export { type SkeletonModeProps, SkeletonMode } from './SkeletonMode';
+export { default } from './SkeletonMode';

package/dist/types/components/SkeletonMode/lib/hasContent.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+/** Whether `children` renders anything — `null`, booleans and empty text do not. */
+export declare const hasContent: (children: ReactNode) => boolean;

package/dist/types/components/SkeletonMode/lib/isTextChild.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+/**
+ * Whether `child` is a text node — locally a string or number, remotely a
+ * `RemoteTextRenderer` element.
+ */
+export declare const isTextChild: (child: ReactNode) => boolean;
+/** The text of a text node from {@link isTextChild}, `undefined` otherwise. */
+export declare const getTextOfChild: (child: ReactNode) => string | undefined;

package/dist/types/components/SkeletonMode/skeletonModeContext.d.ts

@@ -0,0 +1,16 @@
+import { FC, PropsWithChildren } from 'react';
+export interface SkeletonModeState {
+    /** Whether components render as skeleton. */
+    isEnabled: boolean;
+    /** Whether an enabled `SkeletonMode` above already announces the loading. */
+    isAnnounced: boolean;
+}
+export declare const skeletonModeContext: import('react').Context<SkeletonModeState>;
+/** Whether the calling component renders as skeleton. */
+export declare const useSkeletonMode: () => boolean;
+/**
+ * Renders its children as real UI below a component that already draws the
+ * skeleton for them — the Text inside a text bar or a button surface must not
+ * draw a second bar on top.
+ */
+export declare const SkeletonModeReset: FC<PropsWithChildren>;

package/dist/types/components/SkeletonMode/view.d.ts

@@ -0,0 +1,7 @@
+import { SkeletonMode } from './SkeletonMode';
+import { ViewComponent } from '../../lib/viewComponentContext';
+declare global {
+    interface FlowViewComponents {
+        SkeletonMode: ViewComponent<typeof SkeletonMode>;
+    }
+}

package/dist/types/components/public.d.ts

@@ -97,6 +97,7 @@ export * from './Separator';
 export * from './SettingsProvider';
 export * from './Kbd';
 export * from './Skeleton';
+export * from './SkeletonMode';
 export * from './SkeletonText';
 export * from './Slider';
 export * from './SuspenseTrigger';

package/dist/types/integrations/react-hook-form/components/Field/Field.d.ts

@@ -2,6 +2,6 @@ import { PropsWithChildren } from 'react';
 import { ControllerProps, FieldValues, UseFormReturn } from 'react-hook-form';
 export interface FieldProps<T extends FieldValues> extends Omit<ControllerProps<T>, "render">, PropsWithChildren {
 }
-export declare function Field<T extends FieldValues>(props: FieldProps<T>): import("react").JSX.Element;
+export declare function Field<T extends FieldValues>(props: FieldProps<T>): import('react').JSX.Element;
 export declare const typedField: <T extends FieldValues>(ignoredForm: UseFormReturn<T> | UseFormReturn<T>["control"]) => typeof Field<T>;
 export default Field;

package/dist/types/integrations/react-hook-form/components/Form/Form.d.ts

@@ -52,5 +52,5 @@ export interface FormProps<F extends FieldValues> extends Omit<ComponentProps<"f
      */
     confirmModalCloseOnUnsavedChanges?: boolean;
 }
-export declare function Form<F extends FieldValues>(props: FormProps<F>): import("react").JSX.Element;
+export declare function Form<F extends FieldValues>(props: FormProps<F>): import('react').JSX.Element;
 export default Form;

package/dist/types/integrations/react-hook-form/components/FormContextProvider/FormContextProvider.d.ts

@@ -18,7 +18,7 @@ export interface FormContextProviderProps extends PropsWithChildren {
     onAfterSuccessFeedback?: AfterFormSubmitCallback;
     rootErrorController: FormRootErrorController;
 }
-export declare const FormContextProvider: (props: FormContextProviderProps) => import("react").JSX.Element;
+export declare const FormContextProvider: (props: FormContextProviderProps) => import('react').JSX.Element;
 export declare const useFormContext: <F extends FieldValues>() => FormContext<F>;
 export declare const useOptionalFormContext: <F extends FieldValues>() => FormContext<F> | undefined;
 export default FormContextProvider;

package/dist/types/integrations/react-hook-form/components/FormRootError/FormRootError.d.ts

@@ -1,4 +1,14 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
+import { FieldErrors } from 'react-hook-form';
+export type FormRootErrorValue = NonNullable<FieldErrors["root"]>;
+export interface FormRootErrorProps {
+    /**
+     * Custom content shown instead of the default alert. Rendered only while a
+     * root error is set. A function receives the root error, e.g. to pick the
+     * content by its `type`.
+     */
+    children?: ReactNode | ((error: FormRootErrorValue) => ReactNode);
+}
 /** @flowStatus new */
-export declare const FormRootError: FC;
+export declare const FormRootError: FC<FormRootErrorProps>;
 export default FormRootError;

package/dist/types/integrations/react-hook-form/components/FormSettingsProvider/FormSettingsProvider.d.ts

@@ -9,6 +9,6 @@ interface Context {
     submitInterceptor?: SubmitInterceptor;
 }
 export type FormSettingsProviderProps = Context & PropsWithChildren;
-export declare function FormSettingsProvider(props: FormSettingsProviderProps): import("react").JSX.Element;
+export declare function FormSettingsProvider(props: FormSettingsProviderProps): import('react').JSX.Element;
 export declare const useFormSettings: () => Context;
 export {};

package/dist/types/lib/hooks/fieldErrorRenderedContext.d.ts

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

package/dist/types/lib/hooks/useFieldComponent.d.ts

@@ -1,22 +1,33 @@
 import { FC, PropsWithChildren } from 'react';
 import { PropsContext } from '../propsContext';
-import { default as clsx, ClassValue } from 'clsx';
+import { ClassValue } from 'clsx';
 import { FlowComponentName } from '../../components/propTypes';
 interface FieldComponentProps {
     className?: ClassValue;
     isRequired?: boolean;
     isDisabled?: boolean;
-    isInvalid?: boolean;
     "aria-describedby"?: string;
 }
 export interface UseFieldComponent {
     FieldErrorCaptureContext: FC<PropsWithChildren>;
     FieldErrorView: FC;
     fieldPropsContext: PropsContext;
-    fieldProps: {
+    /** For the field's outer element. */
+    wrapperProps: {
+        className: string;
+    };
+    /**
+     * For what assistive technology lands on — the input, or the group of a
+     * grouped control. Where the react-aria root forwards `aria-describedby` to
+     * its input itself, spread it on the root together with `wrapperProps`.
+     * Spread it after `rest`: it already contains the consumer's
+     * `aria-describedby`, which `rest` would otherwise put back alone.
+     */
+    controlProps: {
         "aria-describedby"?: string;
-        className?: ReturnType<typeof clsx>;
     };
+    /** The id of the error while one is rendered, without the consumer's ids. */
+    renderedFieldErrorId?: string;
 }
 export declare const useFieldComponent: (props: FieldComponentProps, component: FlowComponentName) => UseFieldComponent;
 export {};

package/dist/types/lib/hooks/useFieldError.d.ts

@@ -9,5 +9,11 @@ export declare const useFieldError: (options: UseFieldErrorOptions) => {
     readonly FieldErrorCaptureContext: React.FC<{
         children?: React.ReactNode | undefined;
     }>;
-    readonly FieldErrorView: () => React.JSX.Element | null;
+    readonly FieldErrorView: React.FC;
+    /**
+     * The id of the error while one is rendered for this field. A nested field
+     * (a `Checkbox` inside a `CheckboxButton`) renders its error at the outer
+     * one, so only the outer field ever gets an id here.
+     */
+    readonly renderedFieldErrorId: string | undefined;
 };

package/dist/types/lib/theming/hooks/useDesignTokens.d.ts

@@ -6498,6 +6498,18 @@ export declare const useDesignTokens: () => {
                 path: string[];
             };
         };
+        "kbd-kbd": {
+            spacing: {
+                value: string;
+                path: string[];
+            };
+        };
+        "kbd-text": {
+            spacing: {
+                value: string;
+                path: string[];
+            };
+        };
     };
     "layout-card": {
         "background-color": {

package/dist/types/status/component-status.json.d.ts

@@ -381,6 +381,10 @@ declare const _default: {
     "level": "stable",
     "isNew": false
   },
+  "@mittwald/flow-react-components#SkeletonMode": {
+    "level": "beta",
+    "isNew": true
+  },
   "@mittwald/flow-react-components#SkeletonText": {
     "level": "stable",
     "isNew": false

package/dist/types/views/SkeletonModeView.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SkeletonModeProps } from '../components/SkeletonMode/SkeletonMode';
+declare const SkeletonModeView: FC<SkeletonModeProps>;
+export default SkeletonModeView;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "1.5.0-next.3",
+  "version": "1.5.0-next.31",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://flow.mittwald.de",
@@ -68,6 +68,7 @@
     "dev": "storybook dev --port 6006",
     "test:browser": "vitest run --project=browser* --browser.headless",
     "test:browser:dev": "vitest dev --project=browser*",
+    "test:browser:prepare": "if [ -z \"$CI\" ]; then playwright install firefox webkit; fi",
     "test:compile": "tsc --noEmit && tsc --noEmit -p tsconfig.vite.json",
     "test:unit": "vitest run --project=unit*",
     "test:unit:dev": "vitest dev --project=unit*"
@@ -83,9 +84,9 @@
     "@internationalized/string-compiler": "^3.4.1",
     "@lezer/common": "^1.5.2",
     "@lezer/highlight": "^1.2.3",
-    "@mittwald/flow-icons": "^1.5.0-next.3",
+    "@mittwald/flow-icons": "^1.5.0-next.31",
     "@mittwald/password-tools-js": "^3.0.0",
-    "@mittwald/react-tunnel": "^1.5.0-next.3",
+    "@mittwald/react-tunnel": "^1.5.0-next.31",
     "@mittwald/react-use-promise": "^4.2.2",
     "@react-aria/form": "^3.2.1",
     "@react-aria/i18n": "^3.13.1",
@@ -138,12 +139,12 @@
     "@internationalized/date": "^3.12.3",
     "@lezer/generator": "^1.8.0",
     "@lezer/lr": "^1.4.10",
-    "@mittwald/flow-core": "1.5.0-next.3",
-    "@mittwald/flow-design-tokens": "1.5.0-next.3",
-    "@mittwald/flow-icons-base": "1.5.0-next.3",
+    "@mittwald/flow-core": "1.5.0-next.31",
+    "@mittwald/flow-design-tokens": "1.5.0-next.31",
+    "@mittwald/flow-icons-base": "1.5.0-next.31",
     "@mittwald/react-use-promise": "^4.2.2",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
-    "@mittwald/typescript-config": "1.5.0-next.3",
+    "@mittwald/typescript-config": "1.5.0-next.31",
     "@nx/storybook": "^22.7.6",
     "@storybook/addon-a11y": "^10.5.10",
     "@storybook/addon-actions": "^9.0.8",
@@ -153,7 +154,7 @@
     "@storybook/react-vite": "^10.5.10",
     "@tabler/icons-react": "^3.46.0",
     "@teispace/next-themes": "^2.0.4",
-    "@types/node": "25.9.7",
+    "@types/node": "25.9.8",
     "@typescript/native": "npm:typescript@^7.0.2",
     "@vitejs/plugin-react": "5.2.0",
     "@vitest/browser": "^4.1.11",
@@ -162,6 +163,7 @@
     "autoprefixer": "^10.5.4",
     "camelcase": "^9.0.0",
     "decamelize": "^6.0.1",
+    "eslint": "^10.9.0",
     "fs-jetpack": "^5.1.0",
     "glob": "^13.0.6",
     "happy-dom": "^20.11.6",
@@ -185,6 +187,7 @@
     "stylelint": "^17.14.1",
     "tsx": "^4.23.12",
     "typescript": "^6.0.3",
+    "typescript-eslint": "^8.67.0",
     "unplugin-dts": "^1.0.3",
     "vite": "^8.2.2",
     "vite-plugin-externalize-deps": "^0.10.0",
@@ -195,7 +198,7 @@
   },
   "peerDependencies": {
     "@internationalized/date": "^3.12.2",
-    "@mittwald/flow-icons-pro": "1.5.0-next.3",
+    "@mittwald/flow-icons-pro": "1.5.0-next.31",
     "@mittwald/react-use-promise": "^4.2.2",
     "next": "^16.2.3",
     "react": "^19.2.0",
@@ -219,5 +222,5 @@
   "browserslist": [
     "baseline widely available"
   ],
-  "gitHead": "08a07852732a16bab90f066ace75fc65b7445740"
+  "gitHead": "32830501988a267a91ea97cf0087ad68ac761f57"
 }