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

package/components/clearableInput/ClearableInput.d.ts

@@ -1,5 +1,4 @@
-/** biome-ignore-all lint/complexity/noBannedTypes: <explanation> */
-import React from 'react';
+import { default as React } from 'react';
 export declare const DEFAULT_TYPE = "text";
 export declare const SUPPORTED_TYPES: string[];
 export type MaskVisibility = 'always' | 'onFocus' | 'never';

package/components/clearableInput/ClearableInput.js

@@ -1,142 +1,138 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** biome-ignore-all lint/complexity/noBannedTypes: <explanation> */
-import { useState, forwardRef, useRef } from 'react';
-import classNames from 'classnames';
-import { isEmpty, omit } from 'es-toolkit/compat';
-import { isFunction, isNil } from 'es-toolkit/predicate';
-import { noop } from 'es-toolkit/function';
-import { IMaskInput } from 'react-imask';
-import usePrevious from "../../hooks/usePrevious.js";
-import useMergeRefs from "../../hooks/useMergeRefs.js";
-export const DEFAULT_TYPE = 'text';
-export const SUPPORTED_TYPES = ['text', 'password', 'email'];
-const hasValue = (value) => !isEmpty(`${value}`);
-const ClearableInput = forwardRef((props, ref) => {
-    const { type = DEFAULT_TYPE, defaultValue, value, maxLength, tabIndex = 0, hasError = false, inputRef, autoComplete, onChange = noop, onBlur = noop, onFocus = noop, onClear = noop, onKeyPress = noop, onClick = noop, mask, maskPlaceholder = '_', maskVisibility = 'always', maskOverwrite = true, maskDefinitions, maskDispatch, inputClassName = '', disabled = false, className = '', children, ...remainingProps } = props;
-    const initialValue = value || defaultValue || '';
-    const [inputValue, setInputValue] = useState(initialValue);
-    const [showClear, setShowClear] = useState(hasValue(initialValue));
-    const [isFocused, setIsFocused] = useState(false);
-    const isControlled = !isNil(value);
-    const internalMaskRef = useRef(null);
-    const mergedInternalMaskRef = useMergeRefs(internalMaskRef, inputRef, ref);
-    const hasMask = !!mask;
-    // Calculate if mask should be visible (lazy=false means visible, lazy=true means hidden)
-    const shouldShowMask = () => {
-        switch (maskVisibility) {
-            case 'always':
-                return true;
-            case 'onFocus':
-                return isFocused;
-            case 'never':
-                return false;
-            default:
-                return isFocused;
-        }
-    };
-    // Handles new input value and saves it in the local state.
-    // The value stored in the state is used for rendering.
-    const changeInternalValue = (newValue = '') => {
-        // this is there to prevent that onChange and UNSAFE_componentWillReceiveProps set state at the same time
-        if (inputValue === newValue) {
-            return;
-        }
-        setInputValue(newValue);
-        setShowClear(hasValue(newValue));
-    };
-    // important for when used as a controlled component and value changes from the outside.
-    const previousValue = usePrevious(value);
-    if (previousValue !== value) {
-        changeInternalValue(value);
+import { jsxs as ue, jsx as i } from "react/jsx-runtime";
+import { forwardRef as ce, useState as d, useRef as pe } from "react";
+import h from "classnames";
+import { omit as me, isEmpty as fe } from "es-toolkit/compat";
+import { isNil as de, isFunction as he } from "es-toolkit/predicate";
+import { noop as t } from "es-toolkit/function";
+import { IMaskInput as ge } from "react-imask";
+import ve from "../../hooks/usePrevious.js";
+import Ce from "../../hooks/useMergeRefs.js";
+const R = "text", ke = ["text", "password", "email"], T = (u) => !fe(`${u}`), Te = ce((u, g) => {
+  const {
+    type: B = R,
+    defaultValue: D,
+    value: s,
+    maxLength: M,
+    tabIndex: S = 0,
+    hasError: L = !1,
+    inputRef: v,
+    autoComplete: O,
+    onChange: n = t,
+    onBlur: j = t,
+    onFocus: A = t,
+    onClear: C = t,
+    onKeyPress: K = t,
+    onClick: _ = t,
+    mask: k,
+    maskPlaceholder: U = "_",
+    maskVisibility: Y = "always",
+    maskOverwrite: z = !0,
+    maskDefinitions: $,
+    maskDispatch: y,
+    inputClassName: q = "",
+    disabled: c = !1,
+    className: I = "",
+    children: p,
+    ...G
+  } = u, P = s || D || "", [b, H] = d(P), [w, J] = d(T(P)), [N, V] = d(!1), x = !de(s), o = pe(null), Q = Ce(o, v, g), r = !!k, W = () => {
+    switch (Y) {
+      case "always":
+        return !0;
+      case "onFocus":
+        return N;
+      case "never":
+        return !1;
+      default:
+        return N;
     }
-    // only gets triggered on user interaction.
-    const handleChange = (event) => {
-        const newValue = event.target.value;
-        if (isControlled) {
-            onChange(newValue, event);
-        }
-        else {
-            changeInternalValue(newValue);
-            onChange(newValue, event);
-        }
-    };
-    const handleAccept = (newValue, maskRef, event) => {
-        if (!internalMaskRef.current) {
-            return;
-        }
-        // Simulate a ChangeEvent for backwards compatibility since react-imask does not return a change event itself
-        const syntheticEvent = {
-            target: internalMaskRef.current,
-            currentTarget: internalMaskRef.current,
-            // Standard synthetic event props
-            bubbles: true,
-            cancelable: true,
-            defaultPrevented: false,
-            isTrusted: true,
-            preventDefault: () => { },
-            stopPropagation: () => { },
-            persist: () => { },
-            nativeEvent: {},
-            type: 'change',
-            timeStamp: Date.now(),
-        };
-        // Set unmasked value manually if needed
-        // (you can use data-attributes or attach it directly)
-        syntheticEvent.target.unmaskedValue = maskRef.unmaskedValue;
-        if (isControlled) {
-            onChange(newValue, syntheticEvent);
-        }
-        else {
-            changeInternalValue(newValue);
-            onChange(newValue, syntheticEvent);
-        }
-    };
-    const handleInputFocus = (event) => {
-        setIsFocused(true);
-        onFocus(event);
-    };
-    const handleInputBlur = (event) => {
-        setIsFocused(false);
-        onBlur(event);
-    };
-    // Will be triggered on every key press but also when pressing 'Enter' for example
-    const handleKeyPress = (event) => {
-        onKeyPress(event);
-    };
-    const clearInputValue = (event) => {
-        changeInternalValue('');
-        onChange('', event);
-        if (onClear) {
-            onClear(event);
-        }
-    };
-    const classes = classNames('ClearableInput', 'input-group', hasError && 'has-error', disabled && 'pointer-events-none', className && className);
-    const inputClassNames = classNames('form-control', inputClassName, showClear && 'withClearButton', hasMask && 'withInputMask', disabled && 'disabled');
-    const clearButtonClassNames = classNames('clearButton', !showClear && 'hide');
-    const convertedType = type?.toLowerCase();
-    const inputType = SUPPORTED_TYPES.indexOf(convertedType) !== -1 ? convertedType : DEFAULT_TYPE;
-    const inputProps = {
-        ...omit(remainingProps, ['value', 'defaultValue', 'onClear']),
-        className: inputClassNames,
-        autoComplete,
-        type: inputType,
-        value: inputValue,
-        onKeyPress: handleKeyPress,
-        onBlur: handleInputBlur,
-        onFocus: handleInputFocus,
-        onChange: hasMask ? undefined : handleChange, // In case of masked input, the onAccept callback is used
-        onClick,
-        disabled,
-        maxLength: hasMask ? undefined : maxLength,
-        tabIndex,
+  }, l = (e = "") => {
+    b !== e && (H(e), J(T(e)));
+  };
+  ve(s) !== s && l(s);
+  const X = (e) => {
+    const a = e.target.value;
+    x || l(a), n(a, e);
+  }, Z = (e, a, Ie) => {
+    if (!o.current)
+      return;
+    const f = {
+      target: o.current,
+      currentTarget: o.current,
+      // Standard synthetic event props
+      bubbles: !0,
+      cancelable: !0,
+      defaultPrevented: !1,
+      isTrusted: !0,
+      preventDefault: () => {
+      },
+      stopPropagation: () => {
+      },
+      persist: () => {
+      },
+      nativeEvent: {},
+      type: "change",
+      timeStamp: Date.now()
     };
-    // The dispatch function may not be an empty function. Specify it when
-    // using dynamic masking and need more control over which mask gets selected
-    const maskDispatchObj = {};
-    if (maskDispatch) {
-        maskDispatchObj.dispatch = maskDispatch;
+    f.target.unmaskedValue = a.unmaskedValue, x || l(e), n(e, f);
+  }, ee = (e) => {
+    V(!0), A(e);
+  }, te = (e) => {
+    V(!1), j(e);
+  }, se = (e) => {
+    K(e);
+  }, ne = (e) => {
+    l(""), n("", e), C && C(e);
+  }, ae = h(
+    "ClearableInput",
+    "input-group",
+    L && "has-error",
+    c && "pointer-events-none",
+    I && I
+  ), oe = h(
+    "form-control",
+    q,
+    w && "withClearButton",
+    r && "withInputMask",
+    c && "disabled"
+  ), re = h("clearButton", !w && "hide"), E = B?.toLowerCase(), le = ke.indexOf(E) !== -1 ? E : R, m = {
+    ...me(G, ["value", "defaultValue", "onClear"]),
+    className: oe,
+    autoComplete: O,
+    type: le,
+    value: b,
+    onKeyPress: se,
+    onBlur: te,
+    onFocus: ee,
+    onChange: r ? void 0 : X,
+    // In case of masked input, the onAccept callback is used
+    onClick: _,
+    disabled: c,
+    maxLength: r ? void 0 : M,
+    tabIndex: S
+  }, F = {};
+  y && (F.dispatch = y);
+  const ie = r ? /* @__PURE__ */ i(
+    ge,
+    {
+      ...m,
+      inputRef: Q,
+      mask: k,
+      definitions: $,
+      ...F,
+      placeholderChar: U,
+      onAccept: Z,
+      lazy: !W(),
+      overwrite: z
     }
-    const input = hasMask ? (_jsx(IMaskInput, { ...inputProps, inputRef: mergedInternalMaskRef, mask: mask, definitions: maskDefinitions, ...maskDispatchObj, placeholderChar: maskPlaceholder, onAccept: handleAccept, lazy: !shouldShowMask(), overwrite: maskOverwrite })) : (_jsx("input", { ...inputProps, ref: inputRef || ref }));
-    return (_jsxs("div", { className: classes, children: [children && isFunction(children) ? children(inputProps) : input, _jsx("span", { className: clearButtonClassNames, onClick: clearInputValue, children: _jsx("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) })] }));
+  ) : /* @__PURE__ */ i("input", { ...m, ref: v || g });
+  return /* @__PURE__ */ ue("div", { className: ae, children: [
+    p && he(p) ? p(m) : ie,
+    /* @__PURE__ */ i("span", { className: re, onClick: ne, children: /* @__PURE__ */ i("span", { className: "clearButtonIcon rioglyph rioglyph-remove-sign" }) })
+  ] });
 });
-export default ClearableInput;
+export {
+  R as DEFAULT_TYPE,
+  ke as SUPPORTED_TYPES,
+  Te as default
+};
+//# sourceMappingURL=ClearableInput.js.map

package/components/clearableInput/ClearableInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClearableInput.js","sources":["../../../src/components/clearableInput/ClearableInput.tsx"],"sourcesContent":["/** biome-ignore-all lint/complexity/noBannedTypes: <explanation> */\nimport React, { useState, forwardRef, type ForwardedRef, useRef } from 'react';\nimport classNames from 'classnames';\nimport { isEmpty, omit } from 'es-toolkit/compat';\nimport { isFunction, isNil } from 'es-toolkit/predicate';\nimport { noop } from 'es-toolkit/function';\nimport { IMaskInput } from 'react-imask';\n\nimport usePrevious from '../../hooks/usePrevious';\nimport useMergeRefs from '../../hooks/useMergeRefs';\n\nexport const DEFAULT_TYPE = 'text';\nexport const SUPPORTED_TYPES = ['text', 'password', 'email'];\n\nexport type MaskVisibility = 'always' | 'onFocus' | 'never';\nexport type MaskDefinition = {\n    mask: string;\n    definitions?: Record<string, string | RegExp>;\n    startsWith?: string;\n    [key: string]: any;\n};\n\nexport type ClearableInputProps = {\n    /**\n     * Gives the input element the id.\n     */\n    id?: string;\n\n    /**\n     * Gives the input element a name.\n     */\n    name?: string;\n\n    /**\n     * The translated text that shall be shown when the input is empty.\n     */\n    placeholder?: string | React.ReactNode;\n\n    /**\n     * Defines the type of the input itself.\n     *\n     * There are three types supported:\n     * `text`, `email`, `password`.\n     */\n    type?: 'text' | 'password' | 'email';\n\n    /**\n     * Initial value of the ClearableInput. Pass this prop if you want to use this\n     * component as an uncontrolled component.\n     */\n    defaultValue?: string;\n\n    /**\n     * Value of the ClearableInput. Pass this prop if you want to use this\n     * component as a controlled component.\n     */\n    value?: string;\n\n    /**\n     * Defines the maximum amount of characters that can be entered.\n     */\n    maxLength?: number;\n\n    /**\n     * Defines the tab index to be added to the input element.\n     */\n    tabIndex?: number;\n\n    /**\n     * Defined whether or not the input has the error styling.\n     */\n    hasError?: boolean;\n\n    /**\n     * The callback ref for the underlying input. Alternatively, use can use a forward ref.\n     */\n    inputRef?: React.RefObject<HTMLInputElement>;\n\n    /**\n     * Sets autocomplete value for autosuggest forms.\n     */\n    autoComplete?: string;\n\n    /**\n     * Callback function for when the value changes. Receives new value as an argument.\n     * @param newValue\n     * @param event\n     * @returns\n     */\n    onChange?: (\n        newValue: string,\n        event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>\n    ) => void;\n\n    /**\n     * Callback function which gets triggered when the input looses the focus.\n     * @param event\n     * @returns\n     */\n    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n\n    /**\n     * Callback function which gets triggered when the input gains the focus.\n     * @param event\n     * @returns\n     */\n    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;\n\n    /**\n     * Callback function for when the value is cleared via the clear button.\n     * @param event\n     * @returns\n     */\n    onClear?: (event: React.MouseEvent<HTMLSpanElement>) => void;\n\n    /**\n     * Callback function for every key pressed including `Enter` key.\n     * @param event\n     * @returns\n     */\n    onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n\n    /**\n     * Callback triggered when clicked into the input to react on it like when using an auto suggest dropdown\n     * @param event\n     * @returns\n     */\n    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;\n\n    /**\n     * The mask prop will allow to use the component with an input mask.\n     * It defines the pattern that should be followed.\n     *\n     * For more details on masking, checkout the third party documentation for the\n     * input mask here: {@link https://imask.js.org/guide.html}\n     *\n     * Simple masks can be defined as strings.\n     *\n     * The following characters will define mask format:\n     *\n     * \"0\" = allowed input: \"0-9\" (digit)\n     *\n     * \"a\" = allowed input: \"a-z, A-Z\" (letter)\n     *\n     * \"*\" = allowed input: any character\n     *\n     * \"#\" = allowed input: \"0-9, a-z, A-Z\" (digit or letter)\n     *\n     * Other chars which is not in custom definitions supposed to be fixed:\n     *\n     * [] - make input optional\n     *\n     * {} - include fixed part in unmasked value\n     *\n     * ` - prevent symbols shift back\n     *\n     * If definition character should be treated as fixed it should be escaped by \\\\ (E.g. \\\\0).\n     *\n     * Additionally you can provide custom definitions.\n     *\n     * @example\n     * '-- ### ### ###' or '+49 00 000 00'\n     */\n    mask?: string | (string | RegExp)[] | RegExp | DateConstructor | number | Function | MaskDefinition[];\n\n    /**\n     * Placeholder to cover unfilled parts of the mask.\n     *\n     * @default '_'\n     */\n    maskPlaceholder?: string | null;\n\n    /**\n     * Enable characters overwriting\n     *\n     * @default true\n     */\n    maskOverwrite?: boolean | 'shift' | undefined;\n\n    /**\n     * Chooses the mask for dynamic masking depending on input value.\n     * Note, this function may not be an empty function, otherwise the mask selection won't work\n     */\n    maskDispatch?: (appended: string, dynamicMasked: any) => any;\n\n    /**\n     * Controls when the mask pattern is visible.\n     * - 'always': Mask is always visible\n     * - 'onFocus': Mask is hidden but shown when input is focused (default)\n     * - 'never': Mask is never shown\n     *\n     * @default 'always'\n     */\n    maskVisibility?: MaskVisibility;\n\n    /**\n     * Custom definitions to have more control over your mask. The defined character will be replaced in your mask.\n     *\n     * @example\n     * mask='AAA AAA.AA'\n     * maskDefinitions={{ A: /[A-Z0-9]/ }}\n     */\n    maskDefinitions?: Record<string, string | RegExp>;\n\n    /**\n     * Minimum value to be entered. This prop is extended to accept a Date\n     * when used with an input mask.\n     */\n    min?: string | number | undefined | Date;\n\n    /**\n     * Maximum value to be entered. This prop is extended to accept a Date\n     * when used with an input mask.\n     */\n    max?: string | number | undefined | Date;\n\n    /**\n     * Disabled the input component.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional classes to be set on the input element.\n     */\n    inputClassName?: string;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\ntype ChildrenProp = {\n    /**\n     * Providing a function enables the render props approach. The function gets the input props\n     * passed and is responsible for rendering the custom `input` component.\n     * @param props\n     * @returns\n     */\n    children?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;\n};\n\nconst hasValue = (value: unknown) => !isEmpty(`${value}`);\n\nconst ClearableInput = forwardRef((props: ClearableInputProps & ChildrenProp, ref: ForwardedRef<HTMLInputElement>) => {\n    const {\n        type = DEFAULT_TYPE,\n        defaultValue,\n        value,\n        maxLength,\n        tabIndex = 0,\n        hasError = false,\n        inputRef,\n        autoComplete,\n        onChange = noop,\n        onBlur = noop,\n        onFocus = noop,\n        onClear = noop,\n        onKeyPress = noop,\n        onClick = noop,\n        mask,\n        maskPlaceholder = '_',\n        maskVisibility = 'always',\n        maskOverwrite = true,\n        maskDefinitions,\n        maskDispatch,\n        inputClassName = '',\n        disabled = false,\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const initialValue = value || defaultValue || '';\n\n    const [inputValue, setInputValue] = useState(initialValue);\n    const [showClear, setShowClear] = useState(hasValue(initialValue));\n    const [isFocused, setIsFocused] = useState(false);\n\n    const isControlled = !isNil(value);\n\n    const internalMaskRef = useRef<HTMLInputElement>(null);\n    const mergedInternalMaskRef = useMergeRefs(internalMaskRef, inputRef, ref);\n\n    const hasMask = !!mask;\n\n    // Calculate if mask should be visible (lazy=false means visible, lazy=true means hidden)\n    const shouldShowMask = () => {\n        switch (maskVisibility) {\n            case 'always':\n                return true;\n            case 'onFocus':\n                return isFocused;\n            case 'never':\n                return false;\n            default:\n                return isFocused;\n        }\n    };\n\n    // Handles new input value and saves it in the local state.\n    // The value stored in the state is used for rendering.\n    const changeInternalValue = (newValue = '') => {\n        // this is there to prevent that onChange and UNSAFE_componentWillReceiveProps set state at the same time\n        if (inputValue === newValue) {\n            return;\n        }\n\n        setInputValue(newValue);\n        setShowClear(hasValue(newValue));\n    };\n\n    // important for when used as a controlled component and value changes from the outside.\n    const previousValue = usePrevious(value);\n    if (previousValue !== value) {\n        changeInternalValue(value);\n    }\n\n    // only gets triggered on user interaction.\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const newValue = event.target.value;\n\n        if (isControlled) {\n            onChange(newValue, event);\n        } else {\n            changeInternalValue(newValue);\n            onChange(newValue, event);\n        }\n    };\n\n    const handleAccept = (newValue: string, maskRef: any, event?: InputEvent) => {\n        if (!internalMaskRef.current) {\n            return;\n        }\n\n        // Simulate a ChangeEvent for backwards compatibility since react-imask does not return a change event itself\n        const syntheticEvent = {\n            target: internalMaskRef.current,\n            currentTarget: internalMaskRef.current,\n            // Standard synthetic event props\n            bubbles: true,\n            cancelable: true,\n            defaultPrevented: false,\n            isTrusted: true,\n            preventDefault: () => {},\n            stopPropagation: () => {},\n            persist: () => {},\n            nativeEvent: {} as any,\n            type: 'change',\n            timeStamp: Date.now(),\n        } as unknown as React.ChangeEvent<HTMLInputElement>;\n\n        // Set unmasked value manually if needed\n        // (you can use data-attributes or attach it directly)\n        (syntheticEvent.target as any).unmaskedValue = maskRef.unmaskedValue;\n\n        if (isControlled) {\n            onChange(newValue, syntheticEvent);\n        } else {\n            changeInternalValue(newValue);\n            onChange(newValue, syntheticEvent);\n        }\n    };\n\n    const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus(event);\n    };\n\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(false);\n        onBlur(event);\n    };\n\n    // Will be triggered on every key press but also when pressing 'Enter' for example\n    const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        onKeyPress(event);\n    };\n\n    const clearInputValue = (event: React.MouseEvent<HTMLSpanElement>) => {\n        changeInternalValue('');\n        onChange('', event);\n\n        if (onClear) {\n            onClear(event);\n        }\n    };\n\n    const classes = classNames(\n        'ClearableInput',\n        'input-group',\n        hasError && 'has-error',\n        disabled && 'pointer-events-none',\n        className && className\n    );\n\n    const inputClassNames = classNames(\n        'form-control',\n        inputClassName,\n        showClear && 'withClearButton',\n        hasMask && 'withInputMask',\n        disabled && 'disabled'\n    );\n\n    const clearButtonClassNames = classNames('clearButton', !showClear && 'hide');\n\n    const convertedType = type?.toLowerCase();\n    const inputType = SUPPORTED_TYPES.indexOf(convertedType) !== -1 ? convertedType : DEFAULT_TYPE;\n\n    const inputProps = {\n        ...omit(remainingProps, ['value', 'defaultValue', 'onClear']),\n        className: inputClassNames,\n        autoComplete,\n        type: inputType,\n        value: inputValue,\n        onKeyPress: handleKeyPress,\n        onBlur: handleInputBlur,\n        onFocus: handleInputFocus,\n        onChange: hasMask ? undefined : handleChange, // In case of masked input, the onAccept callback is used\n        onClick,\n        disabled,\n        maxLength: hasMask ? undefined : maxLength,\n        tabIndex,\n    } as any;\n\n    // The dispatch function may not be an empty function. Specify it when\n    // using dynamic masking and need more control over which mask gets selected\n    const maskDispatchObj: any = {};\n    if (maskDispatch) {\n        maskDispatchObj.dispatch = maskDispatch;\n    }\n\n    const input = hasMask ? (\n        <IMaskInput\n            {...inputProps}\n            inputRef={mergedInternalMaskRef}\n            mask={mask}\n            definitions={maskDefinitions}\n            {...maskDispatchObj}\n            placeholderChar={maskPlaceholder}\n            onAccept={handleAccept}\n            lazy={!shouldShowMask()}\n            overwrite={maskOverwrite}\n        />\n    ) : (\n        <input {...inputProps} ref={inputRef || ref} />\n    );\n\n    return (\n        <div className={classes}>\n            {children && isFunction(children) ? children(inputProps) : input}\n            <span className={clearButtonClassNames} onClick={clearInputValue}>\n                <span className='clearButtonIcon rioglyph rioglyph-remove-sign' />\n            </span>\n        </div>\n    );\n});\n\nexport default ClearableInput;\n"],"names":["DEFAULT_TYPE","SUPPORTED_TYPES","hasValue","value","isEmpty","ClearableInput","forwardRef","props","ref","type","defaultValue","maxLength","tabIndex","hasError","inputRef","autoComplete","onChange","noop","onBlur","onFocus","onClear","onKeyPress","onClick","mask","maskPlaceholder","maskVisibility","maskOverwrite","maskDefinitions","maskDispatch","inputClassName","disabled","className","children","remainingProps","initialValue","inputValue","setInputValue","useState","showClear","setShowClear","isFocused","setIsFocused","isControlled","isNil","internalMaskRef","useRef","mergedInternalMaskRef","useMergeRefs","hasMask","shouldShowMask","changeInternalValue","newValue","usePrevious","handleChange","event","handleAccept","maskRef","syntheticEvent","handleInputFocus","handleInputBlur","handleKeyPress","clearInputValue","classes","classNames","inputClassNames","clearButtonClassNames","convertedType","inputType","inputProps","omit","maskDispatchObj","input","jsx","IMaskInput","jsxs","isFunction"],"mappings":"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"}

package/components/collapse/Collapse.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 type CollapseProps = {
     /**
      * Show the component and triggers the expand or collapse animation.

package/components/collapse/Collapse.js

@@ -1,24 +1,39 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { motion, AnimatePresence } from 'motion/react';
-import { noop } from 'es-toolkit/function';
-const DEFAULT_ANIMATION_TIME_IN_MS = 200;
-const Collapse = (props) => {
-    const { open = false, unmountOnExit = false, appear = false, timeout = DEFAULT_ANIMATION_TIME_IN_MS, onEntered = noop, onExited = noop, onAnimationStart = noop, children, } = props;
-    const shouldKeepContentInDom = !unmountOnExit;
-    const handleAnimationStart = () => onAnimationStart();
-    const handleAnimationComplete = (definition) => {
-        if (definition === 'open') {
-            onEntered();
-        }
-        if (definition === 'collapsed') {
-            onExited();
-        }
-    };
-    const variants = {
-        open: { opacity: 1, height: 'auto' },
-        collapsed: { opacity: 0, height: 0 },
-    };
-    return (_jsx(_Fragment, { children: _jsx(AnimatePresence, { initial: appear, mode: 'wait', children: (open || shouldKeepContentInDom) && (_jsx(motion.div, { initial: 'collapsed', animate: open ? 'open' : 'collapsed', exit: 'collapsed', className: 'collapse display-block width-100pct', variants: variants, transition: { duration: timeout / 1000, ease: 'easeIn' }, onAnimationComplete: handleAnimationComplete, onAnimationStart: handleAnimationStart, children: children }, 'content')) }) }));
+import { jsx as t, Fragment as u } from "react/jsx-runtime";
+import { AnimatePresence as I, motion as x } from "motion/react";
+import { noop as o } from "es-toolkit/function";
+const E = 200, _ = (a) => {
+  const {
+    open: n = !1,
+    unmountOnExit: i = !1,
+    appear: l = !1,
+    timeout: s = E,
+    onEntered: p = o,
+    onExited: c = o,
+    onAnimationStart: m = o,
+    children: r
+  } = a, d = !i, h = () => m(), A = (e) => {
+    e === "open" && p(), e === "collapsed" && c();
+  }, f = {
+    open: { opacity: 1, height: "auto" },
+    collapsed: { opacity: 0, height: 0 }
+  };
+  return /* @__PURE__ */ t(u, { children: /* @__PURE__ */ t(I, { initial: l, mode: "wait", children: (n || d) && /* @__PURE__ */ t(
+    x.div,
+    {
+      initial: "collapsed",
+      animate: n ? "open" : "collapsed",
+      exit: "collapsed",
+      className: "collapse display-block width-100pct",
+      variants: f,
+      transition: { duration: s / 1e3, ease: "easeIn" },
+      onAnimationComplete: A,
+      onAnimationStart: h,
+      children: r
+    },
+    "content"
+  ) }) });
 };
-//
-export default Collapse;
+export {
+  _ as default
+};
+//# sourceMappingURL=Collapse.js.map

package/components/collapse/Collapse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.js","sources":["../../../src/components/collapse/Collapse.tsx"],"sourcesContent":["// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains\nimport { type PropsWithChildren } from 'react';\nimport { motion, AnimatePresence, type AnimationDefinition } from 'motion/react';\nimport { noop } from 'es-toolkit/function';\n\nconst DEFAULT_ANIMATION_TIME_IN_MS = 200;\n\ntype CollapseProps = {\n    /**\n     * Show the component and triggers the expand or collapse animation.\n     * @default false\n     */\n    open: boolean | undefined;\n\n    /**\n     * Unmount the component (remove it from the DOM) when it is collapsed.\n     */\n    unmountOnExit?: boolean;\n\n    /**\n     * Run the expand animation when the component mounts, if it is initially shown.\n     * @default false\n     */\n    appear?: boolean;\n\n    /**\n     * Duration of the collapse animation in milliseconds.\n     * @default 270\n     */\n    timeout?: number;\n\n    /**\n     * Callback fired after the component has expanded.\n     * @returns\n     */\n    onEntered?: () => void;\n\n    /**\n     * Callback fired after the component has collapsed.\n     * @returns\n     */\n    onExited?: () => void;\n\n    /**\n     * Callback fired when the animation starts for either expand or collapse.\n     */\n    onAnimationStart?: () => void;\n};\n\nconst Collapse = (props: PropsWithChildren<CollapseProps>) => {\n    const {\n        open = false,\n        unmountOnExit = false,\n        appear = false,\n        timeout = DEFAULT_ANIMATION_TIME_IN_MS,\n        onEntered = noop,\n        onExited = noop,\n        onAnimationStart = noop,\n        children,\n    } = props;\n\n    const shouldKeepContentInDom = !unmountOnExit;\n\n    const handleAnimationStart = () => onAnimationStart();\n    const handleAnimationComplete = (definition: AnimationDefinition) => {\n        if (definition === 'open') {\n            onEntered();\n        }\n        if (definition === 'collapsed') {\n            onExited();\n        }\n    };\n\n    const variants = {\n        open: { opacity: 1, height: 'auto' },\n        collapsed: { opacity: 0, height: 0 },\n    };\n\n    return (\n        <>\n            <AnimatePresence initial={appear} mode='wait'>\n                {(open || shouldKeepContentInDom) && (\n                    <motion.div\n                        key='content'\n                        initial='collapsed'\n                        animate={open ? 'open' : 'collapsed'}\n                        exit='collapsed'\n                        className='collapse display-block width-100pct'\n                        variants={variants}\n                        transition={{ duration: timeout / 1000, ease: 'easeIn' }}\n                        onAnimationComplete={handleAnimationComplete}\n                        onAnimationStart={handleAnimationStart}\n                    >\n                        {children}\n                    </motion.div>\n                )}\n            </AnimatePresence>\n        </>\n    );\n};\n//\n\nexport default Collapse;\n"],"names":["DEFAULT_ANIMATION_TIME_IN_MS","Collapse","props","open","unmountOnExit","appear","timeout","onEntered","noop","onExited","onAnimationStart","children","shouldKeepContentInDom","handleAnimationStart","handleAnimationComplete","definition","variants","jsx","Fragment","AnimatePresence","motion"],"mappings":";;;AAKA,MAAMA,IAA+B,KA4C/BC,IAAW,CAACC,MAA4C;AAC1D,QAAM;AAAA,IACF,MAAAC,IAAO;AAAA,IACP,eAAAC,IAAgB;AAAA,IAChB,QAAAC,IAAS;AAAA,IACT,SAAAC,IAAUN;AAAA,IACV,WAAAO,IAAYC;AAAA,IACZ,UAAAC,IAAWD;AAAA,IACX,kBAAAE,IAAmBF;AAAA,IACnB,UAAAG;AAAA,EAAA,IACAT,GAEEU,IAAyB,CAACR,GAE1BS,IAAuB,MAAMH,EAAA,GAC7BI,IAA0B,CAACC,MAAoC;AACjE,IAAIA,MAAe,UACfR,EAAA,GAEAQ,MAAe,eACfN,EAAA;AAAA,EAER,GAEMO,IAAW;AAAA,IACb,MAAM,EAAE,SAAS,GAAG,QAAQ,OAAA;AAAA,IAC5B,WAAW,EAAE,SAAS,GAAG,QAAQ,EAAA;AAAA,EAAE;AAGvC,SACI,gBAAAC,EAAAC,GAAA,EACI,4BAACC,GAAA,EAAgB,SAASd,GAAQ,MAAK,QACjC,gBAAQO,MACN,gBAAAK;AAAA,IAACG,EAAO;AAAA,IAAP;AAAA,MAEG,SAAQ;AAAA,MACR,SAASjB,IAAO,SAAS;AAAA,MACzB,MAAK;AAAA,MACL,WAAU;AAAA,MACV,UAAAa;AAAA,MACA,YAAY,EAAE,UAAUV,IAAU,KAAM,MAAM,SAAA;AAAA,MAC9C,qBAAqBQ;AAAA,MACrB,kBAAkBD;AAAA,MAEjB,UAAAF;AAAA,IAAA;AAAA,IAVG;AAAA,EAAA,GAahB,EAAA,CACJ;AAER;"}

package/components/contentLoader/ContentLoader.d.ts

@@ -1,4 +1,4 @@
-import type { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 declare const RECT = "rect";
 declare const CIRCLE = "circle";
 export type ContentLoaderProps = {

package/components/contentLoader/ContentLoader.js

@@ -1,49 +1,44 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { default as _ContentLoader } from 'react-content-loader';
-import { isNil } from 'es-toolkit/predicate';
-import { cond } from 'es-toolkit/compat';
-import useDarkMode from "../../hooks/useDarkMode.js";
-const RECT = 'rect';
-const CIRCLE = 'circle';
-const DEFAULT_SPEED = 2;
-const DEFAULT_HEIGHT = 14;
-const DEFAULT_WIDTH = '100%';
-const DEFAULT_RADIUS = 16;
-const DEFAULT_TYPE = RECT;
-const hasChildren = ({ children }) => !isNil(children);
-const renderChildren = ({ children }) => children;
-const isRect = ({ type }) => type === RECT;
-const isCircle = ({ type }) => type === CIRCLE;
-const renderRect = ({ rx = 3, ry = 3 }) => (_jsx("rect", { width: '100%', height: '100%', rx: rx, ry: ry }));
-const renderCircle = ({ radius }) => _jsx("circle", { cx: radius, cy: radius, r: radius });
-/**
- * This UIKIT component is simple wrapper to make it easier to use with a predefined look and feel. It still
- * allows for more complex configurations as all additional props are passed down to the third-party
- * ContentLoader component. For individual customization, it allows passing svg components as rect or circle
- * directly as children.
- * @param props
- * @returns
- */
-const ContentLoader = (props) => {
-    const { speed = DEFAULT_SPEED, width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, radius = DEFAULT_RADIUS, type = DEFAULT_TYPE, className = '', children, ...remainingProps } = props;
-    const isDarkMode = useDarkMode();
-    // Since we define the default values while destructuring the props, we have to build up a new object
-    // with that defaults to be used in the conditional rendering, otherwise it would use only the props as
-    // passed into the component without the defined defaults.
-    const propsWithDefaults = {
-        type,
-        radius,
-        children,
-    };
-    const content = cond([
-        [hasChildren, renderChildren],
-        [isRect, renderRect],
-        [isCircle, renderCircle],
-    ])(propsWithDefaults);
-    const wrapperHeight = isCircle(propsWithDefaults) ? radius * 2 : height;
-    const wrapperWidth = isCircle(propsWithDefaults) ? wrapperHeight : width;
-    return (_jsx(_ContentLoader, { backgroundColor: '#f5f6f7', foregroundColor: isDarkMode ? '#aaaaaa' : '#eeeeee', speed: speed, height: wrapperHeight, width: wrapperWidth, className: `ContentLoader ${className} ${isDarkMode ? 'use-mix-blend-mode' : ''}`, ...remainingProps, children: content }));
+import { jsx as n } from "react/jsx-runtime";
+import T from "react-content-loader";
+import { isNil as g } from "es-toolkit/predicate";
+import { cond as R } from "es-toolkit/compat";
+import u from "../../hooks/useDarkMode.js";
+const c = "rect", d = "circle", A = 2, U = 14, _ = "100%", w = 16, F = c, I = ({ children: e }) => !g(e), x = ({ children: e }) => e, H = ({ type: e }) => e === c, r = ({ type: e }) => e === d, k = ({ rx: e = 3, ry: o = 3 }) => /* @__PURE__ */ n("rect", { width: "100%", height: "100%", rx: e, ry: o }), N = ({ radius: e }) => /* @__PURE__ */ n("circle", { cx: e, cy: e, r: e }), h = (e) => {
+  const {
+    speed: o = A,
+    width: l = _,
+    height: m = U,
+    radius: s = w,
+    type: p = F,
+    className: C = "",
+    children: E,
+    ...f
+  } = e, i = u(), t = {
+    type: p,
+    radius: s,
+    children: E
+  }, D = R([
+    [I, x],
+    [H, k],
+    [r, N]
+  ])(t), a = r(t) ? s * 2 : m, L = r(t) ? a : l;
+  return /* @__PURE__ */ n(
+    T,
+    {
+      backgroundColor: "#f5f6f7",
+      foregroundColor: i ? "#aaaaaa" : "#eeeeee",
+      speed: o,
+      height: a,
+      width: L,
+      className: `ContentLoader ${C} ${i ? "use-mix-blend-mode" : ""}`,
+      ...f,
+      children: D
+    }
+  );
 };
-ContentLoader.RECT = RECT;
-ContentLoader.CIRCLE = CIRCLE;
-export default ContentLoader;
+h.RECT = c;
+h.CIRCLE = d;
+export {
+  h as default
+};
+//# sourceMappingURL=ContentLoader.js.map

package/components/contentLoader/ContentLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentLoader.js","sources":["../../../src/components/contentLoader/ContentLoader.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport { default as _ContentLoader } from 'react-content-loader';\nimport { isNil } from 'es-toolkit/predicate';\nimport { cond } from 'es-toolkit/compat';\n\nimport useDarkMode from '../../hooks/useDarkMode';\n\nconst RECT = 'rect';\nconst CIRCLE = 'circle';\n\nconst DEFAULT_SPEED = 2;\nconst DEFAULT_HEIGHT = 14;\nconst DEFAULT_WIDTH = '100%';\nconst DEFAULT_RADIUS = 16;\nconst DEFAULT_TYPE = RECT;\n\nexport type ContentLoaderProps = {\n    /**\n     * Sets the animation speed.\n     * @default 2\n     */\n    speed?: number;\n    /**\n     * Sets the height of the svg element.\n     * @default 14\n     */\n    height?: string | number;\n    /**\n     * Sets the width of the svg element.\n     * @default 100%\n     */\n    width?: string | number;\n    /**\n     * Sets the radius of the svg element. Only relevant for circle elements.\n     * @default 16\n     */\n    radius?: number;\n    /**\n     * Renders either a rectangle or circle.\n     *\n     * Possible values are:\n     * `ContentLoader.RECT`, `ContentLoader.CIRCLE` or `rect`, `circle`\n     */\n    type?: typeof RECT | typeof CIRCLE;\n    /**\n     * Additional class names to ab added to the wrapping svg element.\n     */\n    className?: string;\n    /** Rect object prop. Used internally. */\n    rx?: number;\n    /** Rect object prop. Used internally. */\n    ry?: number;\n};\n\ntype ContentLoaderPropsWithChildren = PropsWithChildren<ContentLoaderProps>;\n\nconst hasChildren = ({ children }: ContentLoaderPropsWithChildren) => !isNil(children);\nconst renderChildren = ({ children }: ContentLoaderPropsWithChildren) => children;\n\nconst isRect = ({ type }: ContentLoaderPropsWithChildren) => type === RECT;\nconst isCircle = ({ type }: ContentLoaderPropsWithChildren) => type === CIRCLE;\n\nconst renderRect = ({ rx = 3, ry = 3 }: ContentLoaderPropsWithChildren) => (\n    <rect width='100%' height='100%' rx={rx} ry={ry} />\n);\nconst renderCircle = ({ radius }: ContentLoaderPropsWithChildren) => <circle cx={radius} cy={radius} r={radius} />;\n\n/**\n * This UIKIT component is simple wrapper to make it easier to use with a predefined look and feel. It still\n * allows for more complex configurations as all additional props are passed down to the third-party\n * ContentLoader component. For individual customization, it allows passing svg components as rect or circle\n * directly as children.\n * @param props\n * @returns\n */\nconst ContentLoader = (props: ContentLoaderPropsWithChildren) => {\n    const {\n        speed = DEFAULT_SPEED,\n        width = DEFAULT_WIDTH,\n        height = DEFAULT_HEIGHT,\n        radius = DEFAULT_RADIUS,\n        type = DEFAULT_TYPE,\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const isDarkMode = useDarkMode();\n\n    // Since we define the default values while destructuring the props, we have to build up a new object\n    // with that defaults to be used in the conditional rendering, otherwise it would use only the props as\n    // passed into the component without the defined defaults.\n    const propsWithDefaults = {\n        type,\n        radius,\n        children,\n    } as ContentLoaderPropsWithChildren;\n\n    const content = cond([\n        [hasChildren, renderChildren],\n        [isRect, renderRect],\n        [isCircle, renderCircle],\n    ])(propsWithDefaults);\n\n    const wrapperHeight = isCircle(propsWithDefaults) ? radius * 2 : height;\n    const wrapperWidth = isCircle(propsWithDefaults) ? wrapperHeight : width;\n\n    return (\n        <_ContentLoader\n            backgroundColor='#f5f6f7'\n            foregroundColor={isDarkMode ? '#aaaaaa' : '#eeeeee'}\n            speed={speed}\n            height={wrapperHeight}\n            width={wrapperWidth}\n            className={`ContentLoader ${className} ${isDarkMode ? 'use-mix-blend-mode' : ''}`}\n            {...remainingProps}\n        >\n            {content}\n        </_ContentLoader>\n    );\n};\n\nContentLoader.RECT = RECT as typeof RECT;\nContentLoader.CIRCLE = CIRCLE as typeof CIRCLE;\n\nexport default ContentLoader;\n"],"names":["RECT","CIRCLE","DEFAULT_SPEED","DEFAULT_HEIGHT","DEFAULT_WIDTH","DEFAULT_RADIUS","DEFAULT_TYPE","hasChildren","children","isNil","renderChildren","isRect","type","isCircle","renderRect","rx","ry","jsx","renderCircle","radius","ContentLoader","props","speed","width","height","className","remainingProps","isDarkMode","useDarkMode","propsWithDefaults","content","cond","wrapperHeight","wrapperWidth","_ContentLoader"],"mappings":";;;;;AAOA,MAAMA,IAAO,QACPC,IAAS,UAETC,IAAgB,GAChBC,IAAiB,IACjBC,IAAgB,QAChBC,IAAiB,IACjBC,IAAeN,GA0CfO,IAAc,CAAC,EAAE,UAAAC,QAA+C,CAACC,EAAMD,CAAQ,GAC/EE,IAAiB,CAAC,EAAE,UAAAF,EAAA,MAA+CA,GAEnEG,IAAS,CAAC,EAAE,MAAAC,EAAA,MAA2CA,MAASZ,GAChEa,IAAW,CAAC,EAAE,MAAAD,EAAA,MAA2CA,MAASX,GAElEa,IAAa,CAAC,EAAE,IAAAC,IAAK,GAAG,IAAAC,IAAK,EAAA,MAC/B,gBAAAC,EAAC,UAAK,OAAM,QAAO,QAAO,QAAO,IAAAF,GAAQ,IAAAC,GAAQ,GAE/CE,IAAe,CAAC,EAAE,QAAAC,QAA6C,gBAAAF,EAAC,UAAA,EAAO,IAAIE,GAAQ,IAAIA,GAAQ,GAAGA,EAAA,CAAQ,GAU1GC,IAAgB,CAACC,MAA0C;AAC7D,QAAM;AAAA,IACF,OAAAC,IAAQpB;AAAA,IACR,OAAAqB,IAAQnB;AAAA,IACR,QAAAoB,IAASrB;AAAA,IACT,QAAAgB,IAASd;AAAA,IACT,MAAAO,IAAON;AAAA,IACP,WAAAmB,IAAY;AAAA,IACZ,UAAAjB;AAAA,IACA,GAAGkB;AAAA,EAAA,IACHL,GAEEM,IAAaC,EAAA,GAKbC,IAAoB;AAAA,IACtB,MAAAjB;AAAA,IACA,QAAAO;AAAA,IACA,UAAAX;AAAA,EAAA,GAGEsB,IAAUC,EAAK;AAAA,IACjB,CAACxB,GAAaG,CAAc;AAAA,IAC5B,CAACC,GAAQG,CAAU;AAAA,IACnB,CAACD,GAAUK,CAAY;AAAA,EAAA,CAC1B,EAAEW,CAAiB,GAEdG,IAAgBnB,EAASgB,CAAiB,IAAIV,IAAS,IAAIK,GAC3DS,IAAepB,EAASgB,CAAiB,IAAIG,IAAgBT;AAEnE,SACI,gBAAAN;AAAA,IAACiB;AAAA,IAAA;AAAA,MACG,iBAAgB;AAAA,MAChB,iBAAiBP,IAAa,YAAY;AAAA,MAC1C,OAAAL;AAAA,MACA,QAAQU;AAAA,MACR,OAAOC;AAAA,MACP,WAAW,iBAAiBR,CAAS,IAAIE,IAAa,uBAAuB,EAAE;AAAA,MAC9E,GAAGD;AAAA,MAEH,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGb;AAEAV,EAAc,OAAOpB;AACrBoB,EAAc,SAASnB;"}

package/components/dataTabs/DataTab.d.ts

@@ -1,5 +1,4 @@
-import type React from 'react';
-import type { PropsWithChildren } from 'react';
+import { default as React, PropsWithChildren } from 'react';
 export type DataTabProps = {
     /**
      * Whether this tab is the one currently active.

package/components/dataTabs/DataTab.js

@@ -1,15 +1,37 @@
-import { createElement as _createElement } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { motion } from 'motion/react';
-const DataTab = (props) => {
-    const { active = false, title, // exclude from remainingProps to avoid being set to the div element
-    tabKey, disableTransition = false, className = '', onAnimationStart = () => { }, onAnimationEnd = () => { }, children, ...remainingProps } = props;
-    if (disableTransition) {
-        return _jsx("div", { children: active && children });
-    }
-    if (!active) {
-        return null;
-    }
-    return (_createElement(motion.div, { ...remainingProps, key: tabKey, initial: { x: 0, y: 0, opacity: 0 }, animate: { x: 0, y: 0, opacity: 1 }, exit: { x: 0, y: 0, opacity: 0 }, transition: { duration: 0.1 }, onAnimationStart: onAnimationStart, onAnimationEnd: onAnimationEnd }, children));
+import { jsx as l } from "react/jsx-runtime";
+import { createElement as s } from "react";
+import { motion as c } from "motion/react";
+const x = (a) => {
+  const {
+    active: i = !1,
+    title: d,
+    // exclude from remainingProps to avoid being set to the div element
+    tabKey: n,
+    disableTransition: e = !1,
+    className: f = "",
+    onAnimationStart: o = () => {
+    },
+    onAnimationEnd: r = () => {
+    },
+    children: t,
+    ...m
+  } = a;
+  return e ? /* @__PURE__ */ l("div", { children: i && t }) : i ? /* @__PURE__ */ s(
+    c.div,
+    {
+      ...m,
+      key: n,
+      initial: { x: 0, y: 0, opacity: 0 },
+      animate: { x: 0, y: 0, opacity: 1 },
+      exit: { x: 0, y: 0, opacity: 0 },
+      transition: { duration: 0.1 },
+      onAnimationStart: o,
+      onAnimationEnd: r
+    },
+    t
+  ) : null;
 };
-export default DataTab;
+export {
+  x as default
+};
+//# sourceMappingURL=DataTab.js.map

package/components/dataTabs/DataTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTab.js","sources":["../../../src/components/dataTabs/DataTab.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\nimport { motion } from 'motion/react';\n\nexport type DataTabProps = {\n    /**\n     * Whether this tab is the one currently active.\n     *\n     * @default false\n     */\n    active?: boolean;\n\n    /**\n     * Used to identify the tab.\n     */\n    tabKey: string;\n\n    /**\n     * Whether the transition effect should be disabled.\n     *\n     * @default false\n     */\n    disableTransition?: boolean;\n\n    /**\n     * The content for the tab.\n     */\n    title: React.ReactNode;\n\n    /**\n     * Callback for when the animation starts.\n     */\n    onAnimationStart?: VoidFunction;\n\n    /**\n     * Callback for when the animation ends.\n     */\n    onAnimationEnd?: VoidFunction;\n\n    /**\n     * Additional classes to be set on the element.\n     */\n    className?: string;\n};\n\nconst DataTab = (props: PropsWithChildren<DataTabProps>) => {\n    const {\n        active = false,\n        title, // exclude from remainingProps to avoid being set to the div element\n        tabKey,\n        disableTransition = false,\n        className = '',\n        onAnimationStart = () => {},\n        onAnimationEnd = () => {},\n        children,\n        ...remainingProps\n    } = props;\n\n    if (disableTransition) {\n        return <div>{active && children}</div>;\n    }\n\n    if (!active) {\n        return null;\n    }\n\n    return (\n        <motion.div\n            {...remainingProps}\n            key={tabKey}\n            initial={{ x: 0, y: 0, opacity: 0 }}\n            animate={{ x: 0, y: 0, opacity: 1 }}\n            exit={{ x: 0, y: 0, opacity: 0 }}\n            transition={{ duration: 0.1 }}\n            onAnimationStart={onAnimationStart}\n            onAnimationEnd={onAnimationEnd}\n        >\n            {children}\n        </motion.div>\n    );\n};\n\nexport default DataTab;\n"],"names":["DataTab","props","active","title","tabKey","disableTransition","className","onAnimationStart","onAnimationEnd","children","remainingProps","jsx","createElement","motion"],"mappings":";;;AA6CA,MAAMA,IAAU,CAACC,MAA2C;AACxD,QAAM;AAAA,IACF,QAAAC,IAAS;AAAA,IACT,OAAAC;AAAA;AAAA,IACA,QAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,WAAAC,IAAY;AAAA,IACZ,kBAAAC,IAAmB,MAAM;AAAA,IAAC;AAAA,IAC1B,gBAAAC,IAAiB,MAAM;AAAA,IAAC;AAAA,IACxB,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHT;AAEJ,SAAII,IACO,gBAAAM,EAAC,OAAA,EAAK,UAAAT,KAAUO,EAAA,CAAS,IAG/BP,IAKD,gBAAAU;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACI,GAAGH;AAAA,MACJ,KAAKN;AAAA,MACL,SAAS,EAAE,GAAG,GAAG,GAAG,GAAG,SAAS,EAAA;AAAA,MAChC,SAAS,EAAE,GAAG,GAAG,GAAG,GAAG,SAAS,EAAA;AAAA,MAChC,MAAM,EAAE,GAAG,GAAG,GAAG,GAAG,SAAS,EAAA;AAAA,MAC7B,YAAY,EAAE,UAAU,IAAA;AAAA,MACxB,kBAAAG;AAAA,MACA,gBAAAC;AAAA,IAAA;AAAA,IAECC;AAAA,EAAA,IAdE;AAiBf;"}

package/components/dataTabs/DataTabHeader.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import { default as React } from 'react';
 export type DataTabHeaderProps = {
     isActive?: boolean;
     tabKey: string;