@rio-cloud/rio-uikit 1.13.1 → 2.0.0-beta.1

package/lib/es/components/fade/FadeUp.js

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const framer_motion_1 = require("framer-motion");
-const useOnScreen_1 = tslib_1.__importDefault(require("../../hooks/useOnScreen"));
-const FadeUp = (props) => {
-    const { delay = 0, duration = 0.4, className = '', offset = 15, children, ...remainingProps } = props;
-    const ref = (0, react_1.useRef)(null);
-    const isInView = (0, useOnScreen_1.default)(ref);
-    const [isVisible, setIsVisible] = (0, react_1.useState)(false);
-    const variants = {
-        hidden: {
-            opacity: 0,
-            y: offset,
-        },
-        visible: {
-            opacity: 1,
-            y: 0,
-        },
-    };
-    (0, react_1.useEffect)(() => {
-        if (isInView && !isVisible) {
-            setIsVisible(true);
-        }
-    }, [isInView, isVisible]);
-    return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { ref: ref, variants: variants, initial: 'hidden', animate: isVisible ? 'visible' : 'hidden', transition: { delay, type: 'spring', duration }, ...remainingProps, className: className, children: children }));
-};
-exports.default = FadeUp;

package/lib/es/components/feedback/FeedbackInlineButtons.d.ts

@@ -1,13 +0,0 @@
-import React, { type ComponentProps } from 'react';
-type FeedbackInlineButtonsProps = ComponentProps<'div'> & {
-    /**
-     * Optional headline inlined with the buttons.
-     */
-    headline?: React.ReactNode;
-    /**
-     * List of buttons to be shown.
-     */
-    buttons?: React.ReactNode[];
-};
-declare const FeedbackInlineButtons: (props: FeedbackInlineButtonsProps) => import("react/jsx-runtime").JSX.Element;
-export default FeedbackInlineButtons;

package/lib/es/components/feedback/FeedbackInlineButtons.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const FeedbackInlineButtons = (props) => {
-    const { buttons = [], headline, ...remainingProps } = props;
-    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: 'display-flex flex-wrap align-items-center column-gap-15 row-gap-5 user-select-none', children: [headline && (0, jsx_runtime_1.jsx)("div", { className: 'text-color-dark', children: headline }), (0, jsx_runtime_1.jsx)("div", { className: 'btn-toolbar gap-5', children: buttons.map(button => button) })] }));
-};
-exports.default = FeedbackInlineButtons;

package/lib/es/components/feedback/FeedbackRating.d.ts

@@ -1,65 +0,0 @@
-import React, { type ComponentProps } from 'react';
-import type { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';
-type FeedbackRatingProps = ComponentProps<'div'> & {
-    /**
-     * Optional headline
-     */
-    headline?: React.ReactNode;
-    /**
-     * The amount of toggle buttons used to rate.
-     *
-     * @default 1
-     */
-    count: number;
-    /**
-     * Defines whether the buttons are round.
-     *
-     * @default false
-     */
-    circleButtons?: boolean;
-    /**
-     * Optional class names applied to all the buttons.
-     * If you need more control on styling individual buttons, see `buttonStyles`.
-     */
-    buttonClassName?: string;
-    /**
-     * Array of button labels that will be used instead of the index.
-     * There needs to be a label for each button defined.
-     */
-    buttonLabels?: React.ReactNode[];
-    /**
-     * Array of button styles to individually define the button size, style and variant.
-     * There needs to be a item for each button defined.
-     */
-    buttonStyles?: {
-        bsSize?: BUTTON_SIZE;
-        bsStyle?: BUTTON_STYLE;
-        variant?: BUTTON_VARIANT;
-        className?: string;
-    }[];
-    /**
-     * Left aligned label to name the lowest rating option.
-     */
-    leftLabel?: React.ReactNode;
-    /**
-     * Right aligned label to name the highest rating option.
-     */
-    rightLabel?: React.ReactNode;
-    /**
-     * Additional icon placed in front of the rating buttons.
-     */
-    leadingIcon?: React.ReactNode;
-    /**
-     * Additional icon placed after the rating buttons.
-     */
-    trailingIcon?: React.ReactNode;
-    /**
-     * Callback triggered when the rating changes.
-     *
-     * @param rating The rating value. Undefined, when a toggle is unchecked.
-     * @returns
-     */
-    onRatingChanged?: (rating: number | undefined) => void;
-};
-declare const FeedbackRating: (props: FeedbackRatingProps) => import("react/jsx-runtime").JSX.Element;
-export default FeedbackRating;

package/lib/es/components/feedback/FeedbackRating.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = require("react");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_2 = require("react");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const ToggleButton_1 = tslib_1.__importDefault(require("../button/ToggleButton"));
-const FeedbackRating = (props) => {
-    const { headline, count = 1, circleButtons = false, buttonLabels, buttonStyles, buttonClassName = '', leftLabel, rightLabel, leadingIcon, trailingIcon, onRatingChanged = () => { }, ...remainingProps } = props;
-    const [rating, setRating] = (0, react_2.useState)();
-    const handleRating = (value) => {
-        setRating(value);
-        onRatingChanged(value);
-    };
-    const hasSubLabels = !!leftLabel || !!rightLabel;
-    const buttonWrapperClasses = (0, classnames_1.default)('display-flex gap-10', hasSubLabels ? 'align-items-start' : 'align-items-center', 'text-size-14', 'margin-bottom-25');
-    const leadingTrailingIconClasses = (0, classnames_1.default)('display-flex align-items-center', 'text-size-200pct', hasSubLabels && 'padding-top-3');
-    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: 'FeedbackRating', children: [headline && (0, jsx_runtime_1.jsx)("div", { className: 'text-medium text-size-16 margin-bottom-10', children: headline }), (0, jsx_runtime_1.jsxs)("div", { className: buttonWrapperClasses, children: [leadingIcon && (0, jsx_runtime_1.jsx)("div", { className: leadingTrailingIconClasses, children: leadingIcon }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'display-flex flex-wrap gap-10', children: Array.from({ length: count }, (_, index) => {
-                                    const indexNumber = index + 1;
-                                    return ((0, react_1.createElement)(ToggleButton_1.default, { ...buttonStyles?.[index], key: indexNumber, active: rating === indexNumber, onClick: (toggled) => handleRating(toggled ? indexNumber : undefined), className: `${circleButtons ? 'rounded-circle aspect-ratio-1' : ''} ${buttonClassName} ${buttonStyles?.[index].className ?? ''}` }, buttonLabels?.[index] ?? indexNumber));
-                                }) }), hasSubLabels && ((0, jsx_runtime_1.jsxs)("div", { className: 'display-flex justify-content-between margin-top-5 gap-25', children: [leftLabel ? (0, jsx_runtime_1.jsx)("label", { className: 'word-wrap text-color-dark', children: leftLabel }) : (0, jsx_runtime_1.jsx)("div", {}), rightLabel ? (0, jsx_runtime_1.jsx)("label", { className: 'word-wrap text-color-dark', children: rightLabel }) : (0, jsx_runtime_1.jsx)("div", {})] }))] }), trailingIcon && (0, jsx_runtime_1.jsx)("div", { className: leadingTrailingIconClasses, children: trailingIcon })] })] }));
-};
-exports.default = FeedbackRating;

package/lib/es/components/feedback/FeedbackReactions.d.ts

@@ -1,71 +0,0 @@
-import React, { type ComponentProps } from 'react';
-type FeedbackReactionsProps = ComponentProps<'div'> & {
-    /**
-     * Optional headline inlined with the buttons.
-     */
-    headline?: React.ReactNode;
-    /**
-     * Size of the reaction buttons.
-     *
-     * @default 'md'
-     */
-    size?: 'sm' | 'md';
-    /**
-     * Position of the reaction button labels.
-     *
-     * @default 'bottom'
-     */
-    labelPosition?: 'right' | 'bottom';
-    /**
-     * Label for the up button.
-     */
-    labelUp?: React.ReactNode;
-    /**
-     * Label for the down button.
-     */
-    labelDown?: React.ReactNode;
-    /**
-     * Custom fill color for the up button.
-     *
-     * @default 'bg-lightest'
-     */
-    colorFillUp?: string;
-    /**
-     * Custom fill color for the down button.
-     *
-     * @default 'bg-lightest'
-     */
-    colorFillDown?: string;
-    /**
-     * Custom hover color for the up button.
-     *
-     * @default 'primary'
-     */
-    colorHoverUp?: string;
-    /**
-     * Custom hover color for the down button.
-     *
-     * @default 'primary'
-     */
-    colorHoverDown?: string;
-    /**
-     * Callback function triggered on up vote.
-     */
-    onVoteUp?: VoidFunction;
-    /**
-     * Callback function triggered on down vote.
-     */
-    onVoteDown?: VoidFunction;
-    /**
-     * Additional classes applied to the individual reaction item (button and label).
-     */
-    itemClassName?: string;
-    /**
-     * Defines whether the reaction icon is animated.
-     *
-     * @default false
-     */
-    animated?: boolean;
-};
-declare const FeedbackReactions: (props: FeedbackReactionsProps) => import("react/jsx-runtime").JSX.Element;
-export default FeedbackReactions;

package/lib/es/components/feedback/FeedbackReactions.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const framer_motion_1 = require("framer-motion");
-const useHover_1 = tslib_1.__importDefault(require("../../hooks/useHover"));
-const FeedbackReactions = (props) => {
-    const { headline, animated, labelUp, labelDown, labelPosition = 'bottom', size = 'md', colorFillUp = '', colorFillDown = '', colorHoverUp = 'primary', colorHoverDown = 'primary', onVoteUp = () => { }, onVoteDown = () => { }, itemClassName, ...remainingProps } = props;
-    const hasLabels = !!labelUp || !!labelDown;
-    const wrapperClassName = (0, classnames_1.default)(hasLabels ? 'display-grid grid-cols-2' : 'display-flex', 'gap-15', 'padding-top-5', 'user-select-none');
-    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: wrapperClassName, children: [(0, jsx_runtime_1.jsx)(FeedbackItem, { size: size, fillColor: colorFillDown, hoverColor: colorHoverDown, animated: animated, iconName: 'thumbs-down', text: labelDown, labelPosition: labelPosition, onClick: onVoteDown, className: itemClassName }), (0, jsx_runtime_1.jsx)(FeedbackItem, { size: size, fillColor: colorFillUp, hoverColor: colorHoverUp, animated: animated, iconName: 'thumbs-up', text: labelUp, labelPosition: labelPosition, onClick: onVoteUp, className: itemClassName })] }));
-};
-const FeedbackItem = (props) => {
-    const { size, text, iconName, onClick, fillColor, hoverColor, animated = false, labelPosition = 'bottom', className, } = props;
-    const ref = (0, react_1.useRef)(null);
-    const isHover = (0, useHover_1.default)(ref);
-    const iconClasses = (0, classnames_1.default)(size === 'sm' ? 'width-40' : 'width-50', 'aspect-ratio-1', 'border rounded-circle', fillColor ? `bg-${fillColor} text-color-white` : 'bg-lightest', isHover ? `border-color-${hoverColor} text-color-${hoverColor}` : 'border-color-lightest', 'display-grid place-items-center', 'text-size-14');
-    const wrapperClassName = (0, classnames_1.default)('display-flex', 'gap-10', labelPosition === 'bottom' ? 'flex-column' : '', 'align-items-center', 'text-center', 'cursor-pointer', className);
-    const isUp = iconName.includes('up');
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: wrapperClassName, onClick: onClick, children: [(0, jsx_runtime_1.jsx)("div", { className: iconClasses, children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.span, { initial: { y: 0, rotate: 0 }, animate: animated && isHover ? { y: [0, isUp ? -3 : 3, 0], rotate: [0, isUp ? -10 : 10, 0] } : { y: 0 }, transition: {
-                        duration: 0.6,
-                        repeat: isHover ? Number.POSITIVE_INFINITY : 0,
-                        repeatType: 'loop',
-                    }, className: `rioglyph rioglyph-${iconName} text-size-200pct` }) }), (0, jsx_runtime_1.jsx)("div", { className: `text-wrap-balance line-height-125rel text-medium ${isHover ? `text-color-${hoverColor}` : 'text-color-darker'}`, children: text })] }));
-};
-exports.default = FeedbackReactions;

package/lib/es/components/filepicker/FilePicker.d.ts

@@ -1,66 +0,0 @@
-import { type ReactNode } from 'react';
-type FilePickerRenderProps = {
-    isDragActive: boolean;
-};
-export type FilePickerProps = {
-    /**
-     * Defines the file picker display mode.
-     *
-     * Possible values are `'button'` for a single button, `'dropzone'` for a custom dropzone passed as child function,
-     * or `'full'` for showing both.
-     *
-     * @default 'button'
-     */
-    displayMode?: 'button' | 'dropzone' | 'full';
-    /**
-     * Indicating if multiple files may be selected.
-     *
-     * @default true
-     */
-    multiple?: boolean;
-    /**
-     * Text to display on Button if displayMode is set to "button".
-     *
-     * @default 'Select files'
-     */
-    label?: string | ReactNode;
-    /**
-     * Maximum file size in byte. 5 MB = 5,242,880 byte
-     */
-    maxSize?: number;
-    /**
-     * Function called after one or multiple files have been picked.
-     */
-    onPick?: (files: FileList | null) => void;
-    /**
-     * Additional classes for the select button.
-     *
-     * @default ''
-     */
-    className?: string;
-    /**
-     * Flag to set the dropzone wrapper element to 100% height.
-     *
-     * This comes in handy, when the dropzone should have 100 % height so it can grow.
-     *
-     * @default false
-     */
-    fullHeight?: boolean;
-    /**
-     * Object list of accepted Mime Types as keys and file extensions array as value.
-     */
-    accept?: {
-        [mimeType: string]: string[];
-    };
-    /**
-     * Pass a custom dropzone element as function receiving some render props.
-     */
-    children?: ({ isDragActive }: FilePickerRenderProps) => any;
-};
-declare const FilePicker: {
-    (props: FilePickerProps): import("react/jsx-runtime").JSX.Element;
-    DISPLAY_MODE_BUTTON: "button";
-    DISPLAY_MODE_DROPZONE: "dropzone";
-    DISPLAY_MODE_FULL: "full";
-};
-export default FilePicker;

package/lib/es/components/filepicker/FilePicker.js

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_dropzone_1 = tslib_1.__importDefault(require("react-dropzone"));
-const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
-const Button_1 = tslib_1.__importDefault(require("../button/Button"));
-const FilePicker = (props) => {
-    const { displayMode = 'button', multiple = true, label = 'Select files', maxSize, onPick = noop_1.default, className = '', accept, fullHeight = false, children, ...remainingProps } = props;
-    const dropzoneRef = (0, react_1.useRef)(null);
-    const wrapperRef = (0, react_1.useRef)(null);
-    const isFull = displayMode === 'full';
-    const showButton = isFull || displayMode === 'button';
-    const showDropzone = isFull || displayMode === 'dropzone';
-    const handleDrop = (0, react_1.useCallback)((acceptedFiles, rejectedFiles) => {
-        const hasImagesType = accept && Object.keys(accept).some(mimeType => mimeType.startsWith('image'));
-        const files = hasImagesType
-            ? acceptedFiles.map(file => Object.assign(file, { preview: URL.createObjectURL(file) }))
-            : acceptedFiles;
-        onPick(files, rejectedFiles);
-    }, [onPick, accept]);
-    const handleClick = () => dropzoneRef.current?.open();
-    (0, react_1.useEffect)(() => {
-        // Set height to dropzones inner presentation div where there is no other access to this DOM element.
-        // This comes in handy, when the dropzone should have 100 % height so it can grow.
-        if (wrapperRef.current && fullHeight) {
-            wrapperRef.current.querySelector('.FilePicker > div')?.setAttribute('class', 'height-100pct');
-        }
-    }, [fullHeight, wrapperRef.current]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, className: 'FilePicker', children: [showButton && ((0, jsx_runtime_1.jsx)(Button_1.default, { onClick: handleClick, className: className, children: label })), (0, jsx_runtime_1.jsx)(react_dropzone_1.default, { ...remainingProps, onDrop: handleDrop, accept: accept, multiple: multiple, maxSize: maxSize, ref: dropzoneRef, children: ({ getRootProps, getInputProps, isDragActive }) => {
-                    return ((0, jsx_runtime_1.jsxs)("div", { ...getRootProps(), children: [(0, jsx_runtime_1.jsx)("input", { ...getInputProps() }), showDropzone && children && children({ isDragActive })] }));
-                } })] }));
-};
-FilePicker.DISPLAY_MODE_BUTTON = 'button';
-FilePicker.DISPLAY_MODE_DROPZONE = 'dropzone';
-FilePicker.DISPLAY_MODE_FULL = 'full';
-exports.default = FilePicker;

package/lib/es/components/formLabel/FormLabel.d.ts

@@ -1,13 +0,0 @@
-import React, { type PropsWithChildren, type ComponentProps } from 'react';
-export type FormLabelProps = ComponentProps<'label'> & {
-    /**
-     * Additional supporting text displayed next to the label.
-     */
-    supportingText?: string | React.ReactElement;
-    /**
-     * Additional classes set to the outer element.
-     */
-    className?: string;
-};
-declare const FormLabel: (props: PropsWithChildren<FormLabelProps>) => import("react/jsx-runtime").JSX.Element;
-export default FormLabel;

package/lib/es/components/formLabel/FormLabel.js

@@ -1,40 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
-const react_1 = require("react");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const FormLabel = (props) => {
-    const { className = '', children, supportingText, ...remainingProps } = props;
-    const elementRef = (0, react_1.useRef)(null);
-    const [parentSize, setParentSize] = (0, react_1.useState)(null);
-    const isLabel = 'htmlFor' in remainingProps;
-    (0, react_1.useEffect)(() => {
-        if (!elementRef.current) {
-            return;
-        }
-        const parent = elementRef.current.parentElement;
-        if (!parent) {
-            return;
-        }
-        if (parent.classList.contains('form-group-lg')) {
-            setParentSize('lg');
-        }
-        else if (parent.classList.contains('form-group-sm')) {
-            setParentSize('sm');
-        }
-    }, []);
-    const supportingTextClasses = (0, classnames_1.default)('text-color-gray', typeof supportingText === 'string' && 'text-italic', parentSize === 'sm' && 'text-size-10', parentSize === 'lg' && 'text-size-14', !parentSize && 'text-size-12');
-    if (isLabel && remainingProps.htmlFor) {
-        const labelClasses = (0, classnames_1.default)(!supportingText && 'display-inline-block', supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct', className);
-        return (
-        // biome-ignore lint/a11y/noLabelWithoutControl: <explanation>
-        (0, jsx_runtime_1.jsxs)("label", { ref: elementRef, ...remainingProps, className: labelClasses, children: [(0, jsx_runtime_1.jsx)("span", { children: children }), supportingText && (0, jsx_runtime_1.jsx)("span", { className: supportingTextClasses, children: supportingText })] }));
-    }
-    const classes = (0, classnames_1.default)('text-color-dark', 'max-width-100pct', parentSize === 'sm' && 'text-size-10', parentSize === 'lg' && 'text-size-14', !parentSize && 'text-size-12', !supportingText && 'display-inline-block', supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct', !className.includes('margin-bottom') && 'margin-bottom-5', className);
-    return (
-    // @ts-ignore
-    (0, jsx_runtime_1.jsxs)("div", { ref: elementRef, ...remainingProps, className: classes, children: [children, supportingText && (0, jsx_runtime_1.jsx)("span", { className: supportingTextClasses, children: supportingText })] }));
-};
-exports.default = FormLabel;

package/lib/es/components/formLabel/LabeledElement.d.ts

@@ -1,28 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-import { type FormLabelProps } from './FormLabel';
-export type LabeledElementProps = {
-    /**
-     * The text to display for the label.
-     */
-    label: string | React.ReactElement;
-    /**
-     * Optional ID of the element associated with the label.
-     */
-    htmlFor?: string;
-    /**
-     * Additional props for the FormLabel, excluding children and htmlFor.
-     */
-    labelProps?: Omit<FormLabelProps, 'children'>;
-    /**
-     * If true, removes the bottom margin from the label.
-     *
-     * @default false
-     */
-    noGap?: boolean;
-    /**
-     * Additional classes for styling the wrapper.
-     */
-    className?: string;
-};
-declare const LabeledElement: (props: PropsWithChildren<LabeledElementProps>) => import("react/jsx-runtime").JSX.Element;
-export default LabeledElement;

package/lib/es/components/formLabel/LabeledElement.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const FormLabel_1 = tslib_1.__importDefault(require("./FormLabel"));
-const LabeledElement = (props) => {
-    const { label, htmlFor, labelProps = {}, noGap = false, className = '', children, ...remainingProps } = props;
-    // Extract and handle the `className` prop separately for the label
-    const { className: labelClassName, ...otherLabelProps } = labelProps;
-    const combinedLabelClassName = (0, classnames_1.default)(labelClassName, noGap && 'margin-bottom-0');
-    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: (0, classnames_1.default)('LabeledElement display-flex flex-column', className), children: [(0, jsx_runtime_1.jsx)(FormLabel_1.default, { htmlFor: htmlFor, ...otherLabelProps, className: combinedLabelClassName, children: label }), children] }));
-};
-exports.default = LabeledElement;

package/lib/es/components/groupedItemList/GroupedItemList.d.ts

@@ -1,79 +0,0 @@
-import React from 'react';
-import { SortDirectionType } from '../../SortUtils';
-export type Group = {
-    groupKey: string;
-    items: any[];
-};
-export type GroupedItemListProps<T> = {
-    /**
-     * The list of items to be grouped and rendered.
-     *
-     * By default, the component assumes an item object containing an 'id' and 'name' property
-     * plus some other attributes.
-     */
-    items: T[];
-    /**
-     * The property of the items to group by as a string, or a custom group function.
-     * Defaults to 'name' if not provided.
-     *
-     * @default 'name'
-     */
-    groupBy?: keyof T | ((item: T) => string);
-    /**
-     * The order in which to sort the groups. Accepts 'asc' for ascending or 'desc' for descending.
-     * @default 'asc'.
-     */
-    groupSortOrder?: SortDirectionType;
-    /**
-     * The order in which to sort the items inside a group. Accepts 'asc' for ascending or 'desc' for descending.
-     * @default 'asc'.
-     */
-    itemSortOrder?: SortDirectionType;
-    /**
-     * Sorting function for the groups.
-     */
-    groupSortFunction?: (groups: Group[]) => Group[];
-    /**
-     * Sorting function for the items within each group.
-     */
-    itemSortFunction?: (items: T[]) => T[];
-    /**
-     * A custom render function for the group divider.
-     * Receives the group key (e.g., letter or date) as a parameter.
-     */
-    renderDivider?: (groupKey: string) => React.ReactNode;
-    /**
-     * A custom render function for individual list items.
-     * Receives an item as a parameter.
-     */
-    renderItem?: (item: T) => React.ReactNode;
-    /**
-     * Specifies the HTML element to use for the list inside each group.
-     * Default is 'div'. Use 'ul' for rendering the list items as `<li>` elements.
-     */
-    listElement?: 'div' | 'ul';
-    /**
-     * Optional class name for the list element inside each group.
-     * Applied to the `div` or `ul` wrapping the items.
-     */
-    listElementClassName?: string;
-    /**
-     * Optional class name for the divider element in each group.
-     * Applied to the `div` wrapping each group divider.
-     */
-    dividerElementClassName?: string;
-    /**
-     * Optional class name for the outer wrapper element.
-     * Applied to the outer `div` wrapping the entire component.
-     */
-    className?: string;
-};
-/**
- * A React component that groups and renders a list of items based on a specified property.
- * The component can be customized to render dividers and list items in different styles.
- *
- * @param {GroupedItemListProps} props - The props for the component.
- * @returns {JSX.Element} The grouped and rendered list component.
- */
-declare const GroupedItemList: <T>(props: GroupedItemListProps<T>) => import("react/jsx-runtime").JSX.Element;
-export default GroupedItemList;

package/lib/es/components/groupedItemList/GroupedItemList.js

@@ -1,77 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
-const SortUtils_1 = require("../../SortUtils");
-/**
- * A React component that groups and renders a list of items based on a specified property.
- * The component can be customized to render dividers and list items in different styles.
- *
- * @param {GroupedItemListProps} props - The props for the component.
- * @returns {JSX.Element} The grouped and rendered list component.
- */
-const GroupedItemList = (props) => {
-    const { items, groupBy = 'name', groupSortOrder = 'asc', // Default to ascending order if not specified
-    groupSortFunction, itemSortFunction, itemSortOrder = 'asc', // Default to ascending order if not specified
-    renderDivider, renderItem, listElement = 'div', // Default to 'div' if not specified
-    listElementClassName, dividerElementClassName, className, } = props;
-    // Default group sorting function or specific function provided
-    const groupSortFn = groupSortFunction
-        ? groupSortFunction
-        : (groups) => (0, SortUtils_1.naturalSortByProperty)(groups, 'groupKey', groupSortOrder);
-    // Default item sorting within groups or specific function provided
-    const itemSortFn = itemSortFunction
-        ? itemSortFunction
-        : (itemsToSort) => (0, SortUtils_1.sortByProperty)(itemsToSort, groupBy, itemSortOrder);
-    // Determine the grouping function based on the type of groupBy
-    // const getGroupKey = (item: T): string => {
-    //     if (typeof groupBy === 'string') {
-    //         if (groupBy === 'name') {
-    //             return (item as any).name?.[0]?.toUpperCase() ?? '';
-    //         }
-    //         return (item as any)[groupBy]?.toString() ?? '';
-    //     } else if (typeof groupBy === 'function') {
-    //         return groupBy(item);
-    //     }
-    //     throw new Error('Please define a "groupBy" property as a string or function.');
-    // };
-    const getGroupKey = typeof groupBy === 'function'
-        ? groupBy
-        : (item) => item[groupBy]?.[0]?.toUpperCase() ?? '';
-    // Group items by the specified property
-    // const allGroups = useMemo(
-    //     () =>
-    //         items.reduce<Record<string, T[]>>((acc, item) => {
-    //             const groupKey = getGroupKey(item);
-    //             if (!acc[groupKey]) {
-    //                 acc[groupKey] = [];
-    //             }
-    //             acc[groupKey].push(item);
-    //             return acc;
-    //         }, {}),
-    //     [items, getGroupKey]
-    // );
-    // Group items by the specified property
-    const groupedItems = (0, react_1.useMemo)(() => {
-        // Explicitly typing the accumulator as Record<string, T[]>
-        const groups = items.reduce((acc, item) => {
-            const groupKey = getGroupKey(item);
-            if (!acc[groupKey]) {
-                acc[groupKey] = [];
-            }
-            acc[groupKey].push(item);
-            return acc;
-        }, {});
-        return Object.keys(groups).map(groupKey => ({
-            groupKey,
-            items: groups[groupKey],
-        }));
-    }, [items, getGroupKey]);
-    // Assign the specified list element ('div' or 'ul')
-    const ListElement = listElement;
-    // Sort groups using the provided sort function
-    const sortedGroups = (0, react_1.useMemo)(() => groupSortFn(groupedItems), [groupedItems, groupSortFn]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: `grouped-item-list ${className ?? ''}`, children: sortedGroups.map(group => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-divider ${dividerElementClassName ?? ''}`, children: renderDivider ? renderDivider(group.groupKey) : group.groupKey }), (0, jsx_runtime_1.jsx)(ListElement, { className: listElementClassName, children: itemSortFn(group.items).map(item => renderItem ? (renderItem(item)) : ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: 'item-name', children: item.name }) }, item.id ?? crypto.randomUUID()))) })] }, group.groupKey))) }));
-};
-exports.default = GroupedItemList;

package/lib/es/components/licensePlate/LicensePlate.d.ts

@@ -1,19 +0,0 @@
-import { type PropsWithChildren } from 'react';
-export type LicensePlateProps = {
-    /**
-     * The country code.
-     *
-     * Should be a string with 1-3 capital letters.
-     */
-    countryCode?: string;
-    /**
-     * Whether the EU stars should be hidden.
-     */
-    hideStars?: boolean;
-    /**
-     * Additional classes added to the wrapping element.
-     */
-    className?: string;
-};
-declare const LicensePlate: (props: PropsWithChildren<LicensePlateProps>) => import("react/jsx-runtime").JSX.Element;
-export default LicensePlate;

package/lib/es/components/licensePlate/LicensePlate.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const euStars = ((0, jsx_runtime_1.jsx)("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '10', height: '10', children: (0, jsx_runtime_1.jsx)("path", { fill: '#FFC200', fillRule: 'nonzero', d: 'M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z' }) }));
-const LicensePlate = (props) => {
-    const { countryCode, hideStars, className = '', children } = props;
-    let letterCount = '';
-    if (countryCode?.length === 2)
-        letterCount = 'two-letters';
-    if (countryCode?.length === 3)
-        letterCount = 'three-letters';
-    return ((0, jsx_runtime_1.jsx)("div", { className: `license-plate ${className}`, children: (0, jsx_runtime_1.jsxs)("div", { className: 'plate-content', children: [countryCode && ((0, jsx_runtime_1.jsxs)("div", { className: 'plate-country', children: [!hideStars && (0, jsx_runtime_1.jsx)("span", { className: 'stars', children: euStars }), (0, jsx_runtime_1.jsx)("span", { className: `plate-country-code ${letterCount}`, children: countryCode })] })), (0, jsx_runtime_1.jsx)("div", { className: 'plate-number', children: children })] }) }));
-};
-exports.default = LicensePlate;