@festo-ui/react 9.0.1-dev.781 → 9.0.1-dev.782

package/dist/forms/segment/segment-control/SegmentControl.js

@@ -1,57 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
-import { useRef } from "react";
-import { IconWrapper } from "../../../components/icon-wrapper/IconWrapper.js";
-function SegmentControl(props) {
-    const { label, checked, disabled, name, value, icon, onChange, id, className, iconOnly } = props;
-    const componentId = useRef(id ?? (Math.random() * Date.now()).toString().replace('.', '-'));
-    let viewMode = 'text';
-    if (icon) viewMode = iconOnly ? 'icon' : 'icon-text';
-    const handleChange = (event)=>{
-        if (onChange) onChange(event, value);
-    };
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx("input", {
-                className: "fwe-segment-input",
-                type: "radio",
-                id: componentId.current,
-                name: name,
-                value: value,
-                checked: checked,
-                disabled: disabled,
-                onChange: (e)=>handleChange(e)
-            }),
-            /*#__PURE__*/ jsxs("label", {
-                className: classnames('fwe-segment-label', className),
-                htmlFor: componentId.current,
-                children: [
-                    'icon' === viewMode && /*#__PURE__*/ jsxs(Fragment, {
-                        children: [
-                            /*#__PURE__*/ jsx("span", {
-                                className: "fwe-sr-only",
-                                children: label
-                            }),
-                            /*#__PURE__*/ jsx(IconWrapper, {
-                                icon: icon
-                            })
-                        ]
-                    }),
-                    'text' === viewMode && label,
-                    'icon-text' === viewMode && /*#__PURE__*/ jsxs(Fragment, {
-                        children: [
-                            /*#__PURE__*/ jsx(IconWrapper, {
-                                icon: icon
-                            }),
-                            /*#__PURE__*/ jsx("span", {
-                                className: "fwe-ml-xxs",
-                                children: label
-                            })
-                        ]
-                    })
-                ]
-            })
-        ]
-    });
-}
-export { SegmentControl };

package/dist/forms/select/Select.d.ts

@@ -1,25 +0,0 @@
-import type { ReactNode } from 'react';
-import { type Ref } from 'react';
-import type { ComponentBase } from '../../utils/types';
-export interface SelectOption<T> {
-    readonly data: T;
-    readonly label: ReactNode;
-    readonly disabled?: boolean;
-}
-export interface SelectProps<T> extends ComponentBase {
-    readonly defaultValue?: T;
-    readonly value?: T;
-    readonly label?: string;
-    readonly options?: SelectOption<T>[];
-    readonly onChange?: (value: T) => void;
-    readonly disabled?: boolean;
-    readonly name?: string;
-    readonly hint?: string;
-    readonly error?: string;
-    readonly placeholder?: string;
-}
-declare function SelectComponent<T>({ defaultValue, value: controlled, label, options, onChange, disabled, name, id: idProp, hint, error, placeholder, className, ...props }: SelectProps<T>, ref: Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-export declare const Select: <T>(props: SelectProps<T> & {
-    ref?: Ref<HTMLDivElement>;
-}) => ReturnType<typeof SelectComponent>;
-export {};

package/dist/forms/select/Select.js

@@ -1,92 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headlessui/react";
-import classnames from "classnames";
-import { forwardRef, useMemo } from "react";
-import { useControlled } from "../../utils/useControlled.js";
-import { useId } from "../../utils/useId.js";
-function SelectComponent({ defaultValue = '', value: controlled, label, options = [], onChange, disabled, name, id: idProp, hint, error, placeholder, className, ...props }, ref) {
-    const id = useId(idProp);
-    const labelId = `${id}-label`;
-    const [value, setValue] = useControlled({
-        controlled,
-        default: defaultValue,
-        onChange
-    });
-    const selectedOption = useMemo(()=>options.find((option)=>option.data === value && !option.disabled), [
-        options,
-        value
-    ]);
-    function handleChange(option) {
-        if (!option || option.disabled) return;
-        setValue(option.data);
-    }
-    return /*#__PURE__*/ jsx(Listbox, {
-        value: selectedOption ?? null,
-        onChange: handleChange,
-        disabled: disabled,
-        children: /*#__PURE__*/ jsxs("div", {
-            className: classnames(className, 'fwe-select-wrapper', {
-                'fwe-disabled': disabled
-            }),
-            ref: ref,
-            ...props,
-            children: [
-                /*#__PURE__*/ jsx(ListboxButton, {
-                    className: classnames('fwe-select', {
-                        'fwe-invalid': error
-                    }),
-                    id: id,
-                    "aria-labelledby": label ? labelId : void 0,
-                    disabled: disabled,
-                    children: selectedOption ? selectedOption.label : placeholder ?? ''
-                }),
-                /*#__PURE__*/ jsx("label", {
-                    className: "fwe-select-label",
-                    id: labelId,
-                    htmlFor: id,
-                    children: label || ''
-                }),
-                /*#__PURE__*/ jsx(ListboxOptions, {
-                    className: "fwe-options-container",
-                    as: "ul",
-                    portal: false,
-                    style: {
-                        minWidth: 'var(--button-width)'
-                    },
-                    anchor: {
-                        to: 'bottom start',
-                        gap: 12,
-                        padding: 8
-                    },
-                    children: options.map((option)=>/*#__PURE__*/ jsx(ListboxOption, {
-                            value: option,
-                            disabled: option.disabled,
-                            as: "li",
-                            className: ({ focus, selected, disabled: isDisabled })=>classnames('fwe-combobox-option', {
-                                    'fwe-selected': selected,
-                                    'fwe-focus': focus,
-                                    'fwe-disabled': isDisabled
-                                }),
-                            children: option.label
-                        }, String(option.data)))
-                }),
-                name && /*#__PURE__*/ jsx("input", {
-                    type: "hidden",
-                    name: name,
-                    value: String(value ?? ''),
-                    disabled: disabled
-                }),
-                hint && !error && /*#__PURE__*/ jsx("div", {
-                    className: "fwe-select-description",
-                    children: hint
-                }),
-                error && /*#__PURE__*/ jsx("div", {
-                    className: "fwe-select-invalid",
-                    children: error
-                })
-            ]
-        })
-    });
-}
-const Select = /*#__PURE__*/ forwardRef(SelectComponent);
-export { Select };

package/dist/forms/slider/Slider.css

@@ -1,50 +0,0 @@
-label.fwe-slider {
-  display: block;
-  position: relative;
-}
-
-label.fwe-slider .fr-slider-indicator {
-  background: var(--fwe-hero);
-  height: 2px;
-  position: absolute;
-  bottom: 22px;
-  left: 0;
-}
-
-label.fwe-slider .fr-slider-indicator.disabled {
-  background: var(--fwe-border);
-}
-
-label.fwe-slider.fr-slider-value {
-  height: 56px;
-}
-
-label.fwe-slider.fr-slider-value .fr-slider-indicator {
-  bottom: 38px;
-}
-
-label.fwe-slider.fr-slider-label {
-  height: 67px;
-}
-
-label.fwe-slider.fr-slider-label .fr-slider-indicator {
-  bottom: 22px;
-}
-
-label.fwe-slider.fr-slider-value-label {
-  height: 83px;
-}
-
-label.fwe-slider.fr-slider-value-label .fr-slider-indicator {
-  bottom: 38px;
-}
-
-label.fwe-slider .fr-slider-value {
-  color: var(--fwe-text);
-  font-size: var(--fwe-font-size-base);
-  user-select: none;
-  margin-bottom: 0;
-  position: absolute;
-  bottom: 0;
-}
-

package/dist/forms/slider/Slider.d.ts

@@ -1,17 +0,0 @@
-import './Slider.scss';
-import type React from 'react';
-import type { ClassNameProps } from '../../utils/types';
-export interface SliderProps extends ClassNameProps {
-    readonly disabled?: boolean;
-    readonly min: number;
-    readonly max: number;
-    readonly step?: number;
-    readonly value: number;
-    readonly onChangeCommitted?: (value: number) => void;
-    readonly label?: string;
-    readonly showValue?: boolean;
-    readonly onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: number) => void;
-    readonly id?: string;
-    readonly widthOffset?: number;
-}
-export declare function Slider({ disabled, label, max, min, onChange, onChangeCommitted, step, value, showValue, className, id: idProps, widthOffset, }: SliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/slider/Slider.js

@@ -1,93 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import "./Slider.css";
-import classnames from "classnames";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useId } from "../../utils/useId.js";
-function Slider({ disabled = false, label, max, min, onChange, onChangeCommitted, step, value, showValue = true, className, id: idProps, widthOffset = 8 }) {
-    const id = useId(idProps);
-    const [innerValue, setInnerValue] = useState(value);
-    const [left, setLeft] = useState(null);
-    const [numberOffset, setNumberOffset] = useState(0);
-    const labelEl = useRef(null);
-    const classes = classnames('fwe-slider', {
-        'fr-slider-value': !label && showValue
-    }, {
-        'fr-slider-label': label && !showValue
-    }, {
-        'fr-slider-value-label': label && showValue
-    }, className);
-    useEffect(()=>{
-        setInnerValue(value);
-    }, [
-        value
-    ]);
-    const updateValuePosition = useCallback(()=>{
-        if (labelEl.current) {
-            const { width } = labelEl.current.getBoundingClientRect();
-            const diff = max - min;
-            setLeft((innerValue - min) / diff * (width - widthOffset));
-            setNumberOffset(8 - 6 * innerValue.toString().length);
-        }
-    }, [
-        innerValue,
-        max,
-        min,
-        widthOffset
-    ]);
-    const handleAfterChange = ()=>{
-        if (onChangeCommitted) onChangeCommitted(innerValue);
-    };
-    const handleChange = (e)=>{
-        const newValue = Number.parseFloat(e.target.value);
-        setInnerValue(newValue);
-        if (onChange) onChange(e, newValue);
-    };
-    useEffect(()=>{
-        function handleResize() {
-            updateValuePosition();
-        }
-        window.addEventListener('resize', handleResize);
-        handleResize();
-        return ()=>window.removeEventListener('resize', handleResize);
-    }, [
-        updateValuePosition
-    ]);
-    return /*#__PURE__*/ jsxs("label", {
-        ref: labelEl,
-        className: classes,
-        htmlFor: id,
-        children: [
-            label && /*#__PURE__*/ jsx("span", {
-                children: label
-            }),
-            /*#__PURE__*/ jsx("input", {
-                id: id,
-                className: "fwe-slider-input",
-                type: "range",
-                disabled: disabled,
-                min: min,
-                max: max,
-                step: step,
-                onChange: handleChange,
-                value: innerValue,
-                onKeyUp: handleAfterChange,
-                onMouseUp: handleAfterChange,
-                onTouchEnd: handleAfterChange
-            }),
-            showValue && null !== left && /*#__PURE__*/ jsx("span", {
-                className: "fr-slider-value",
-                style: {
-                    left: `${left + numberOffset}px`
-                },
-                children: innerValue
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: `fr-slider-indicator${disabled ? ' disabled' : ''}`,
-                style: {
-                    width: `${left}px`
-                }
-            })
-        ]
-    });
-}
-export { Slider };

package/dist/forms/switch/Switch.d.ts

@@ -1,12 +0,0 @@
-import type { ClassNameProps } from '../../utils/types';
-export interface SwitchProps extends ClassNameProps {
-    readonly labelPosition?: 'before' | 'after' | 'below';
-    readonly large?: boolean;
-    readonly title: string;
-    readonly value?: boolean;
-    readonly defaultValue?: boolean;
-    readonly disabled?: boolean;
-    readonly onChange?: (value: boolean) => void;
-    readonly id?: string;
-}
-export declare function Switch({ labelPosition, large, title, value, defaultValue, disabled, onChange, className, id: idProps, }: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/switch/Switch.js

@@ -1,42 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
-import { useControlled } from "../../utils/useControlled.js";
-import { useId } from "../../utils/useId.js";
-function Switch({ labelPosition = 'after', large = false, title, value, defaultValue, disabled = false, onChange, className, id: idProps }) {
-    const id = useId(idProps);
-    const labelClassName = classnames('fwe-switch', {
-        [`fwe-switch-label-${labelPosition}`]: true
-    }, {
-        'fwe-switch-lg': large
-    }, className);
-    const [currentValue, setCurrentValue] = useControlled({
-        controlled: value,
-        default: defaultValue
-    });
-    const handleChange = ()=>{
-        const newValue = !currentValue;
-        setCurrentValue(newValue);
-        if (onChange) onChange(newValue);
-    };
-    return /*#__PURE__*/ jsxs("label", {
-        className: labelClassName,
-        htmlFor: id,
-        children: [
-            /*#__PURE__*/ jsx("input", {
-                type: "checkbox",
-                disabled: disabled,
-                checked: currentValue,
-                onChange: ()=>handleChange(),
-                id: id
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: "fwe-switch-track"
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: "fwe-switch-label-content",
-                children: title
-            })
-        ]
-    });
-}
-export { Switch };

package/dist/forms/text-area/TextArea.css

@@ -1,14 +0,0 @@
-label.fwe-input-text .fwe-input-text-count {
-  line-height: var(--fwe-line-height-base);
-  color: var(--fwe-text-disabled);
-  font-size: var(--fwe-font-size-small);
-  display: block;
-  position: absolute;
-  bottom: 0;
-  right: 0;
-}
-
-label.fwe-input-text .fr-textarea {
-  overflow: visible;
-}
-

package/dist/forms/text-area/TextArea.d.ts

@@ -1,22 +0,0 @@
-import './TextArea.scss';
-import React from 'react';
-import type { ClassNameProps } from '../../utils/types';
-export interface TextAreaProps extends ClassNameProps {
-    readonly disabled?: boolean;
-    readonly required?: boolean;
-    readonly readonly?: boolean;
-    readonly onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    readonly onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
-    readonly onInput?: (event: React.FormEvent<HTMLTextAreaElement>) => void;
-    readonly onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
-    readonly label: string;
-    readonly hint?: string;
-    readonly error?: string;
-    readonly value?: string;
-    readonly defaultValue?: string;
-    readonly name?: string;
-    readonly rows?: number;
-    readonly maxLength?: number;
-    readonly id?: string;
-}
-export declare function TextArea({ disabled, onBlur, onChange, onFocus, onInput, readonly, required, label, error, hint, value, defaultValue, name, rows, maxLength, className, id: idProps, }: Readonly<TextAreaProps>): import("react/jsx-runtime").JSX.Element;

package/dist/forms/text-area/TextArea.js

@@ -1,99 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import "./TextArea.css";
-import classnames from "classnames";
-import react, { useEffect, useState } from "react";
-import { useId } from "../../utils/useId.js";
-function TextArea({ disabled, onBlur, onChange, onFocus, onInput, readonly, required, label, error, hint, value, defaultValue, name, rows, maxLength, className, id: idProps }) {
-    const controlled = void 0 !== value;
-    const [innerValue, setInnerValue] = useState(controlled ? value : defaultValue);
-    const id = useId(idProps);
-    const hintClasses = classnames('fwe-input-text-info');
-    const shadowRef = react.useRef(null);
-    const ref = react.useRef(null);
-    const [height, setHeight] = useState(void 0);
-    useEffect(()=>{
-        if (controlled) setInnerValue(value);
-    }, [
-        value,
-        controlled
-    ]);
-    useEffect(()=>{
-        const input = ref.current;
-        const shadow = shadowRef.current;
-        const minRows = 2;
-        if (shadow && input) {
-            shadow.value = input.value || 'x';
-            shadow.style.width = `${input.clientWidth}`;
-            const newHeight = Math.max(24 * minRows, shadow.scrollHeight);
-            setHeight(newHeight + 4 + 4 + 1);
-        }
-    }, []);
-    function handleChange(event) {
-        if (!controlled) setInnerValue(event.target.value);
-        if (onChange) onChange(event);
-    }
-    return /*#__PURE__*/ jsxs("label", {
-        className: classnames('fwe-input-text', className),
-        htmlFor: id,
-        children: [
-            /*#__PURE__*/ jsx("textarea", {
-                style: {
-                    ...!rows && {
-                        height,
-                        overflow: 'hidden'
-                    }
-                },
-                ref: ref,
-                name: name,
-                className: classnames('fr-textarea', `fwe-row-${rows}`),
-                disabled: disabled,
-                readOnly: readonly,
-                required: required,
-                autoComplete: "off",
-                onChange: handleChange,
-                onFocus: onFocus,
-                onInput: onInput,
-                onBlur: onBlur,
-                maxLength: maxLength,
-                defaultValue: defaultValue,
-                value: value,
-                id: id
-            }),
-            /*#__PURE__*/ jsx("textarea", {
-                style: {
-                    visibility: 'hidden',
-                    position: 'absolute',
-                    overflow: 'hidden',
-                    height: 0,
-                    top: 0,
-                    left: 0,
-                    transform: 'translateZ(0)',
-                    padding: '0'
-                },
-                ref: shadowRef,
-                readOnly: true
-            }),
-            /*#__PURE__*/ jsx("span", {
-                className: "fwe-input-text-label",
-                children: label
-            }),
-            hint && /*#__PURE__*/ jsx("span", {
-                className: hintClasses,
-                children: hint
-            }),
-            void 0 !== error && /*#__PURE__*/ jsx("span", {
-                className: "fwe-input-text-invalid",
-                children: error
-            }),
-            !!maxLength && void 0 !== innerValue && /*#__PURE__*/ jsxs("span", {
-                className: "fwe-input-text-count",
-                children: [
-                    innerValue.length,
-                    " /",
-                    maxLength
-                ]
-            })
-        ]
-    });
-}
-export { TextArea };

package/dist/forms/text-input/TextInput.d.ts

@@ -1,24 +0,0 @@
-import type React from 'react';
-export interface TextInputProps {
-    disabled?: boolean;
-    required?: boolean;
-    readonly?: boolean;
-    placeholder?: string;
-    type?: string;
-    step?: string;
-    min?: number;
-    max?: number;
-    value?: string;
-    defaultValue?: string;
-    name?: string;
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onInput?: (event: React.FormEvent<HTMLInputElement>) => void;
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    label?: string;
-    hint?: string;
-    error?: string;
-    labelClassName?: string;
-    icon?: React.ReactNode;
-    autoFocus?: boolean;
-}
-export declare const TextInput: (props: TextInputProps & React.HTMLProps<HTMLInputElement> & React.RefAttributes<HTMLLabelElement>) => React.ReactElement | null;

package/dist/forms/text-input/TextInput.js

@@ -1,74 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
-import { forwardRef, useEffect, useRef } from "react";
-import { useId } from "../../utils/useId.js";
-const TextInput = /*#__PURE__*/ forwardRef(({ disabled, required, readonly, placeholder, max, min, onBlur, onFocus, onInput, step, type, value, defaultValue, name, error, hint, label, labelClassName, icon, id: idProps, autoFocus, ...props }, ref)=>{
-    const id = useId(idProps);
-    const inputRef = useRef(null);
-    useEffect(()=>{
-        if (autoFocus && inputRef.current) {
-            const timer = setTimeout(()=>{
-                inputRef.current?.focus();
-            }, 0);
-            return ()=>clearTimeout(timer);
-        }
-    }, [
-        autoFocus
-    ]);
-    const supported = [
-        'text',
-        'number',
-        'password',
-        'datetime-local'
-    ];
-    const innerType = type && supported.includes(type) ? type : 'text';
-    const labelClasses = classnames('fwe-input-text', {
-        'fwe-input-text-icon': icon
-    }, labelClassName);
-    const hintClasses = classnames('fwe-input-text-info');
-    function handleChange(e) {
-        if (props.onChange) props.onChange(e);
-    }
-    return /*#__PURE__*/ jsxs("label", {
-        className: labelClasses,
-        htmlFor: id,
-        ref: ref,
-        children: [
-            /*#__PURE__*/ jsx("input", {
-                name: name,
-                disabled: disabled,
-                required: required,
-                readOnly: readonly,
-                placeholder: placeholder,
-                autoComplete: "off",
-                min: min,
-                max: max,
-                step: step,
-                onChange: handleChange,
-                onBlur: onBlur,
-                onFocus: onFocus,
-                onInput: onInput,
-                type: innerType,
-                value: value,
-                defaultValue: defaultValue,
-                id: id,
-                ref: inputRef,
-                ...props
-            }),
-            icon,
-            /*#__PURE__*/ jsx("span", {
-                className: "fwe-input-text-label",
-                children: label
-            }),
-            hint && /*#__PURE__*/ jsx("span", {
-                className: hintClasses,
-                children: hint
-            }),
-            error && /*#__PURE__*/ jsx("span", {
-                className: "fwe-input-text-invalid",
-                children: error
-            })
-        ]
-    });
-});
-export { TextInput };

package/dist/forms/time-picker/TimePicker.css

@@ -1,10 +0,0 @@
-.fr-time-picker {
-  all: unset;
-  cursor: pointer;
-  display: contents;
-}
-
-.fr-time-picker:disabled {
-  cursor: default;
-}
-

package/dist/forms/time-picker/TimePicker.d.ts

@@ -1,24 +0,0 @@
-import './TimePicker.scss';
-import type React from 'react';
-import { type ComponentPropsWithoutRef } from 'react';
-export interface TimePickerOptions {
-    readonly timeFormat?: '12' | '24';
-    readonly showSeconds?: boolean;
-    readonly minuteStepSize?: number;
-    readonly range?: {
-        minValue: Date;
-        maxValue: Date;
-    };
-}
-export interface TimePickerProps extends Omit<ComponentPropsWithoutRef<'button'>, 'value' | 'defaultValue' | 'onChange'> {
-    readonly error?: string;
-    readonly hint?: string;
-    readonly required?: boolean;
-    readonly disabled?: boolean;
-    readonly value?: Date;
-    readonly defaultValue?: Date;
-    readonly options?: TimePickerOptions;
-    readonly formatDate?: (date: Date) => string;
-    readonly onChange?: (date: Date) => void;
-}
-export declare const TimePicker: (props: TimePickerProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;