@festo-ui/react 9.0.0-dev.718 → 9.0.0-dev.720

package/dist/components/card/Card.d.ts

@@ -0,0 +1,4 @@
+import type { ClassNamePropsWithChildren } from '../../utils/types';
+export interface CardProps extends ClassNamePropsWithChildren {
+}
+export declare function Card({ children, className }: CardProps): JSX.Element;

package/dist/components/card/Card.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+function Card({ children, className }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: classnames('fwe-card', className),
+        children: children
+    });
+}
+export { Card };

package/dist/components/card/CardBody.d.ts

@@ -0,0 +1,5 @@
+import type { ClassNamePropsWithChildren } from '../../utils/types';
+export interface CardBodyProps extends ClassNamePropsWithChildren {
+    text: string;
+}
+export declare function CardBody({ children, text, className }: CardBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/card/CardBody.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+function CardBody({ children, text, className }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: classnames('fwe-card-body', className),
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "fwe-card-text",
+                children: text
+            }),
+            children
+        ]
+    });
+}
+export { CardBody };

package/dist/components/card/CardHeader.d.ts

@@ -0,0 +1,8 @@
+import type { ClassNameProps, Image } from '../../utils/types';
+export interface CardHeaderProps extends ClassNameProps {
+    title: string;
+    subtitle?: string;
+    action?: React.ReactNode;
+    image?: Image;
+}
+export declare function CardHeader({ title, subtitle, action, image, className, }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/card/CardHeader.js

@@ -0,0 +1,31 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+function CardHeader({ title, subtitle, action, image, className }) {
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            image ? /*#__PURE__*/ jsx("img", {
+                alt: image.alt,
+                className: `fwe-card-img-${'3/2' === image.aspectRatio ? '32' : '169'}`,
+                src: image.src
+            }) : null,
+            /*#__PURE__*/ jsxs("div", {
+                className: classnames('fwe-card-header', className),
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "fwe-card-title",
+                        children: [
+                            /*#__PURE__*/ jsx("h5", {
+                                children: title
+                            }),
+                            subtitle && /*#__PURE__*/ jsx("p", {
+                                children: subtitle
+                            })
+                        ]
+                    }),
+                    action
+                ]
+            })
+        ]
+    });
+}
+export { CardHeader };

package/dist/components/card/CardHeader.stories.helper.js

@@ -0,0 +1,7 @@
+import gallery_01 from "../../../../web-essentials/stories/assets/gallery-01.webp";
+const cardImage = {
+    src: gallery_01,
+    alt: 'Asset',
+    aspectRatio: '16/9'
+};
+export { cardImage };

package/dist/components/card/CardNotification.d.ts

@@ -0,0 +1,6 @@
+import type { ClassNameProps } from '../../utils/types';
+export interface CardNotificationProps extends ClassNameProps {
+    title: string;
+    message?: string;
+}
+export declare function CardNotification({ className, title, message, }: CardNotificationProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/card/CardNotification.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconWarning } from "@festo-ui/react-icons";
+import classnames from "classnames";
+function CardNotification({ className, title, message }) {
+    const classes = classnames('fwe-card-notification', className);
+    return /*#__PURE__*/ jsxs("div", {
+        className: classes,
+        children: [
+            /*#__PURE__*/ jsx(IconWarning, {
+                size: 24
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "fwe-card-title",
+                children: [
+                    /*#__PURE__*/ jsx("h6", {
+                        children: title
+                    }),
+                    message && /*#__PURE__*/ jsx("p", {
+                        children: message
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { CardNotification };

package/dist/components/chips/chip/Chip.d.ts

@@ -0,0 +1,17 @@
+import type React from 'react';
+import type { ClassNamePropsWithChildren } from '../../../utils/types';
+export declare enum ChipType {
+    Choice = 0,
+    Category = 1,
+    Filter = 2,
+    Readonly = 3
+}
+export interface ChipProps extends ClassNamePropsWithChildren {
+    readonly type?: ChipType;
+    readonly icon?: React.ReactNode;
+    readonly selected?: boolean;
+    readonly disabled?: boolean;
+    readonly large?: boolean;
+    readonly onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+export declare function Chip({ type, selected, disabled, large, icon, children, onClick, className, }: ChipProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/chips/chip/Chip.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { IconWrapper } from "../../icon-wrapper/IconWrapper.js";
+var Chip_ChipType = /*#__PURE__*/ function(ChipType) {
+    ChipType[ChipType["Choice"] = 0] = "Choice";
+    ChipType[ChipType["Category"] = 1] = "Category";
+    ChipType[ChipType["Filter"] = 2] = "Filter";
+    ChipType[ChipType["Readonly"] = 3] = "Readonly";
+    return ChipType;
+}({});
+function Chip({ type = 0, selected = false, disabled = false, large = false, icon, children, onClick, className }) {
+    const classes = classnames('fr-chip', 'fwe-chip', {
+        'fwe-selected': selected
+    }, {
+        'fwe-disabled': disabled
+    }, {
+        'fwe-chip-lg': large
+    }, {
+        'fwe-category': 1 === type
+    }, {
+        'fwe-filter': 2 === type
+    }, {
+        'fwe-readonly': 3 === type
+    }, className);
+    return /*#__PURE__*/ jsxs("button", {
+        type: "button",
+        className: classes,
+        onClick: onClick,
+        disabled: disabled,
+        children: [
+            /*#__PURE__*/ jsx(IconWrapper, {
+                icon: icon
+            }),
+            children
+        ]
+    });
+}
+export { Chip, Chip_ChipType as ChipType };

package/dist/components/chips/chip-container/ChipContainer.d.ts

@@ -0,0 +1,5 @@
+import type { ClassNamePropsWithChildren } from '../../../utils/types';
+export interface ChipContainerProps extends ClassNamePropsWithChildren {
+    large?: boolean;
+}
+export declare function ChipContainer({ large, children, className, }: ChipContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/chips/chip-container/ChipContainer.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+function ChipContainer({ large = false, children, className }) {
+    const classes = classnames('fwe-chip-container', {
+        'fwe-chip-container-lg': large
+    }, className);
+    return /*#__PURE__*/ jsx("div", {
+        className: classes,
+        children: children
+    });
+}
+export { ChipContainer };

package/dist/components/icon-wrapper/IconWrapper.d.ts

@@ -0,0 +1,3 @@
+export declare function IconWrapper({ icon }: {
+    icon: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/icon-wrapper/IconWrapper.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+function IconWrapper({ icon }) {
+    if (!icon) return null;
+    if ('string' == typeof icon) {
+        let iconName = icon;
+        if (!icon.startsWith('fwe-icon-')) iconName = `fwe-icon-${icon}`;
+        return /*#__PURE__*/ jsx("i", {
+            className: `fwe-icon ${iconName}`
+        });
+    }
+    return icon;
+}
+export { IconWrapper };

package/dist/components/link-button/LinkButton.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export interface LinkButtonProps extends ComponentPropsWithoutRef<'button'> {
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    iconOnly?: boolean;
+}
+export declare const LinkButton: (props: LinkButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;

package/dist/components/link-button/LinkButton.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef } from "react";
+import { IconWrapper } from "../icon-wrapper/IconWrapper.js";
+const LinkButton = /*#__PURE__*/ forwardRef(({ icon, onClick, disabled = false, children, iconOnly = false, className, ...props }, ref)=>{
+    const classes = classnames('fwe-btn', 'fwe-btn-link', {
+        'fwe-disabled': disabled
+    }, {
+        'fwe-btn-icon': iconOnly
+    }, className);
+    return /*#__PURE__*/ jsxs("button", {
+        onClick: onClick,
+        type: "button",
+        className: classes,
+        disabled: disabled,
+        ref: ref,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(IconWrapper, {
+                icon: icon
+            }),
+            !iconOnly && children
+        ]
+    });
+});
+export { LinkButton };

package/dist/components/loading-indicator/LoadingIndicator.d.ts

@@ -0,0 +1,5 @@
+import { type ComponentPropsWithRef } from 'react';
+export interface LoadingIndicatorProps extends ComponentPropsWithRef<'div'> {
+    size: 'large' | 'medium' | 'small';
+}
+export declare const LoadingIndicator: (props: LoadingIndicatorProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/loading-indicator/LoadingIndicator.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef } from "react";
+const LoadingIndicator = /*#__PURE__*/ forwardRef(({ size = 'large', children, className, ...props }, ref)=>{
+    const classes = classnames('fwe-waiting-indicator', {
+        'fwe-waiting-indicator-md': 'medium' === size
+    }, {
+        'fwe-waiting-indicator-sm': 'small' === size
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: classnames('fwe-waiting-container', {
+            'fwe-waiting-container-sm': 'small' === size
+        }, className),
+        ref: ref,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: classes,
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "fwe-waiting-circle-1"
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "fwe-waiting-circle-2"
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "fwe-waiting-circle-3"
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "fwe-waiting-circle-4"
+                    })
+                ]
+            }),
+            children && /*#__PURE__*/ jsx("div", {
+                className: "fwe-waiting-content-container",
+                children: children
+            })
+        ]
+    });
+});
+export { LoadingIndicator };

package/dist/components/mobile-flyout/MobileFlyout.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export interface MobileFlyoutProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+    open?: boolean;
+    defaultOpen?: boolean;
+    visible?: string[];
+    defaultVisible?: string[];
+    onOpenChange?: (value: boolean) => void;
+    onVisibleChange?: (value: string) => void;
+    back?: string;
+}
+export declare const MobileFlyout: (props: MobileFlyoutProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/mobile-flyout/MobileFlyout.js

@@ -0,0 +1,88 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef, useCallback, useMemo, useRef } from "react";
+import { useControlled } from "../../utils/useControlled.js";
+import { useForkRef } from "../../utils/useForkRef.js";
+import { useOnClickOutside } from "../../utils/useOnClickOutside.js";
+import { MobileFlyoutContext } from "./MobileFlyoutContext.js";
+const defaultVisibleValue = [
+    'root'
+];
+const MobileFlyout = /*#__PURE__*/ forwardRef(({ className, children, open, onOpenChange, onVisibleChange, defaultOpen, visible, defaultVisible = defaultVisibleValue, back, ...props }, ref)=>{
+    const [openState, setOpen] = useControlled({
+        controlled: open,
+        default: defaultOpen
+    });
+    const [visibleState, setVisible] = useControlled({
+        controlled: visible,
+        default: defaultVisible
+    });
+    const innerRef = useRef(null);
+    const combinedRef = useForkRef(ref, innerRef);
+    const handleVisibleChange = useCallback((v)=>{
+        if (void 0 !== visibleState) if (visibleState.includes(v)) {
+            const newArray = visibleState.filter((entry)=>entry !== v);
+            setVisible(newArray);
+        } else {
+            const newArray = [
+                ...visibleState,
+                v
+            ];
+            setVisible(newArray);
+        }
+        onVisibleChange?.(v);
+    }, [
+        onVisibleChange,
+        setVisible,
+        visibleState
+    ]);
+    const handleOpenChange = useCallback((v)=>{
+        setOpen(v);
+        onOpenChange?.(v);
+    }, [
+        onOpenChange,
+        setOpen
+    ]);
+    function handleClickOutside() {
+        handleOpenChange(false);
+    }
+    function toggle() {
+        const newOpen = !openState;
+        handleOpenChange(newOpen);
+    }
+    useOnClickOutside(innerRef, handleClickOutside);
+    const contextValue = useMemo(()=>({
+            visible: visibleState ?? defaultVisibleValue,
+            setVisible: handleVisibleChange,
+            setOpen: handleOpenChange,
+            back
+        }), [
+        handleVisibleChange,
+        visibleState,
+        back,
+        handleOpenChange
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: classnames('fwe-mobile-flyout', className),
+        ...props,
+        ref: combinedRef,
+        children: [
+            /*#__PURE__*/ jsx("button", {
+                "aria-label": "menu",
+                type: "button",
+                className: openState ? 'fwe-close-button' : 'fwe-burger-button',
+                onClick: toggle
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: classnames('fwe-mobile-flyout-container', {
+                    'fwe-opened': openState
+                }),
+                children: /*#__PURE__*/ jsx(MobileFlyoutContext.Provider, {
+                    value: contextValue,
+                    children: children
+                })
+            })
+        ]
+    });
+});
+export { MobileFlyout };

package/dist/components/mobile-flyout/MobileFlyoutContext.d.ts

@@ -0,0 +1,8 @@
+interface MobileFlyoutContext {
+    visible: string[];
+    setVisible: (value: string) => void;
+    setOpen: (value: boolean) => void;
+    back?: string;
+}
+export declare const MobileFlyoutContext: import("react").Context<MobileFlyoutContext>;
+export {};

package/dist/components/mobile-flyout/MobileFlyoutContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+const MobileFlyoutContext = /*#__PURE__*/ createContext(null);
+export { MobileFlyoutContext };

package/dist/components/mobile-flyout/mobile-flyout-item/MobileFlyoutItem.d.ts

@@ -0,0 +1,17 @@
+import type { PolymorphicComponentPropWithRef, PolymorphicRef } from '../../../utils/types';
+declare module 'react' {
+    function forwardRef<T, P = object>(render: (props: P, ref: React.Ref<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+}
+export interface MobileFlyoutItemBaseProps {
+    icon?: React.ReactNode;
+    pageLink?: string;
+    active?: boolean;
+}
+export type MobileFlyoutItemProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<C, MobileFlyoutItemBaseProps>;
+export declare const MobileFlyoutItem: <C extends React.ElementType = "a">(props: MobileFlyoutItemBaseProps & {
+    component?: C | undefined;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<C>>, "component" | keyof MobileFlyoutItemBaseProps> & {
+    ref?: PolymorphicRef<C> | undefined;
+} & import("react").RefAttributes<unknown>) => React.ReactElement | null;

package/dist/components/mobile-flyout/mobile-flyout-item/MobileFlyoutItem.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconRight2 } from "@festo-ui/react-icons";
+import classnames from "classnames";
+import { forwardRef, useContext } from "react";
+import { IconWrapper } from "../../icon-wrapper/IconWrapper.js";
+import { MobileFlyoutContext } from "../MobileFlyoutContext.js";
+const MobileFlyoutItem = /*#__PURE__*/ forwardRef(({ component, children, pageLink, icon, onClick, active, ...props }, ref)=>{
+    const Component = component || 'a';
+    const { setVisible, setOpen } = useContext(MobileFlyoutContext);
+    function handleClick(e) {
+        if (pageLink) setVisible(pageLink);
+        else setOpen(false);
+        onClick?.(e);
+    }
+    return /*#__PURE__*/ jsxs(Component, {
+        className: "fwe-mobile-flyout-item fwe-bb",
+        ...props,
+        ref: ref,
+        onClick: handleClick,
+        children: [
+            /*#__PURE__*/ jsx(IconWrapper, {
+                icon: icon
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: classnames('fwe-flex-grow-1', {
+                    'fwe-color-hero': active
+                }, {
+                    'fwe-ml-xxs': !!icon
+                }),
+                children: children
+            }),
+            pageLink && /*#__PURE__*/ jsx(IconRight2, {})
+        ]
+    });
+});
+export { MobileFlyoutItem };

package/dist/components/mobile-flyout/mobile-flyout-page/MobileFlyoutPage.css

@@ -0,0 +1,5 @@
+.fr-mobile-flyout-page-back {
+  border: none;
+  width: 100%;
+}
+

package/dist/components/mobile-flyout/mobile-flyout-page/MobileFlyoutPage.d.ts

@@ -0,0 +1,8 @@
+import './MobileFlyoutPage.scss';
+import { type ComponentPropsWithoutRef } from 'react';
+export interface MobileFlyoutPageProps extends ComponentPropsWithoutRef<'div'> {
+    back?: string;
+    name?: string;
+    root?: boolean;
+}
+export declare const MobileFlyoutPage: (props: MobileFlyoutPageProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/mobile-flyout/mobile-flyout-page/MobileFlyoutPage.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./MobileFlyoutPage.css";
+import classnames from "classnames";
+import { forwardRef, useContext } from "react";
+import { MobileFlyoutContext } from "../MobileFlyoutContext.js";
+const MobileFlyoutPage = /*#__PURE__*/ forwardRef(({ back, children, name, root, ...props }, ref)=>{
+    const { visible, setVisible, back: backContext } = useContext(MobileFlyoutContext);
+    const innerVisible = root || name && visible.includes(name);
+    const innerBack = back ?? backContext ?? 'Back';
+    function handleChange() {
+        if (name) setVisible(name);
+    }
+    return /*#__PURE__*/ jsxs("div", {
+        className: classnames('fwe-mobile-flyout-page', {
+            'fwe-opened': innerVisible
+        }),
+        ref: ref,
+        ...props,
+        children: [
+            !root && /*#__PURE__*/ jsx("button", {
+                type: "button",
+                className: "fwe-page-back fr-mobile-flyout-page-back",
+                onClick: handleChange,
+                children: /*#__PURE__*/ jsx("div", {
+                    children: innerBack
+                })
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "fwe-mobile-flyout-item-container",
+                children: children
+            })
+        ]
+    });
+});
+export { MobileFlyoutPage };

package/dist/components/modals/AlertModal.d.ts

@@ -0,0 +1,12 @@
+import { type ModalProps } from './Modal';
+export interface AlertModalProps extends Omit<ModalProps, 'head' | 'children'> {
+    title: string;
+    subtitle?: string;
+    alertType: 'info' | 'warning' | 'error';
+    strong?: boolean;
+    cancel?: string;
+    ok?: string;
+    onCancel?: () => void;
+    onOk?: () => void;
+}
+export declare function AlertModal({ title, subtitle, alertType, strong, cancel, ok, onCancel, onOk, className, body, ...props }: AlertModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/modals/AlertModal.js

@@ -0,0 +1,53 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { Modal } from "./Modal.js";
+import { ModalFooter } from "./ModalFooter.js";
+function AlertModal({ title, subtitle, alertType, strong, cancel, ok, onCancel, onOk, className, body, ...props }) {
+    return /*#__PURE__*/ jsx(Modal, {
+        className: classnames({
+            'fwe-modal--with-indicator-bar': strong,
+            'fwe-modal--warning': 'warning' === alertType,
+            'fwe-modal--error': 'error' === alertType,
+            'fwe-modal--info': 'info' === alertType
+        }, className),
+        head: /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                subtitle && /*#__PURE__*/ jsx("h2", {
+                    className: "fwe-modal-h2",
+                    children: subtitle
+                }),
+                /*#__PURE__*/ jsx("h1", {
+                    className: "fwe-modal-h1",
+                    children: title
+                })
+            ]
+        }),
+        body: 'string' == typeof body ? /*#__PURE__*/ jsx("p", {
+            children: body
+        }) : body,
+        ...props,
+        children: (cancel || ok) && /*#__PURE__*/ jsxs(ModalFooter, {
+            children: [
+                cancel && /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    "aria-label": "Cancel",
+                    className: classnames('fwe-btn fwe-btn-lg', {
+                        'fwe-btn-link': strong
+                    }),
+                    onClick: onCancel,
+                    children: cancel
+                }),
+                ok && /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    "aria-label": "Ok",
+                    className: classnames('fwe-btn fwe-btn-lg', {
+                        'fwe-btn-hero': !strong
+                    }),
+                    onClick: onOk,
+                    children: ok
+                })
+            ]
+        })
+    });
+}
+export { AlertModal };

package/dist/components/modals/ConfirmModal.d.ts

@@ -0,0 +1,11 @@
+import { type ModalProps } from './Modal';
+export interface ConfirmModalProps extends Omit<ModalProps, 'head' | 'children'> {
+    title: string;
+    subtitle?: string;
+    cancel?: string;
+    ok?: string;
+    onCancel?: () => void;
+    onOk?: () => void;
+    large?: boolean;
+}
+export declare function ConfirmModal({ title, subtitle, cancel, ok, onCancel, onOk, large, body, className, ...props }: ConfirmModalProps): import("react/jsx-runtime").JSX.Element;