@rio-cloud/rio-uikit 2.5.1 → 3.0.0-beta.1

package/components/clearableInput/ClearableInput.js

@@ -1,141 +1,102 @@
-import { jsxs as pe, jsx as u } from "react/jsx-runtime";
-import { forwardRef as me, useState as d, useRef as fe } from "react";
-import { omit as de, isEmpty as he } from "es-toolkit/compat";
-import { isNil as Ce, isFunction as ge } from "es-toolkit/predicate";
-import { noop as t } from "es-toolkit/function";
-import { IMaskInput as ve } from "react-imask";
-import h from "../../utils/classNames.js";
-import ke from "../../hooks/usePrevious.js";
-import ye from "../../hooks/useMergeRefs.js";
-const R = "text", Ie = ["text", "password", "email"], T = (i) => !he(`${i}`), De = me((i, C) => {
-  const {
-    type: D = R,
-    defaultValue: M,
-    value: s,
-    showClearButton: g = !0,
-    maxLength: S,
-    tabIndex: O = 0,
-    hasError: L = !1,
-    inputRef: v,
-    autoComplete: _,
-    onChange: a = t,
-    onBlur: j = t,
-    onFocus: A = t,
-    onClear: k = t,
-    onKeyPress: K = t,
-    onClick: U = t,
-    mask: y,
-    maskPlaceholder: Y = "_",
-    maskVisibility: z = "always",
-    maskOverwrite: $ = !0,
-    maskDefinitions: q,
-    maskDispatch: I,
-    inputClassName: G = "",
-    disabled: c = !1,
-    readOnly: H = !1,
-    className: P = "",
-    children: p,
-    ...J
-  } = i, w = s || M || "", [b, Q] = d(w), [N, W] = d(T(w)), [V, x] = d(!1), B = !Ce(s), o = fe(null), X = ye(o, v, C), r = !!y, Z = () => {
-    switch (z) {
-      case "always":
-        return !0;
-      case "onFocus":
-        return V;
-      case "never":
-        return !1;
-      default:
-        return V;
-    }
-  }, l = (e = "") => {
-    b !== e && (Q(e), W(T(e)));
-  };
-  ke(s) !== s && l(s);
-  const ee = (e) => {
-    const n = e.target.value;
-    B || l(n), a(n, e);
-  }, te = (e, n, we) => {
-    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()
-    };
-    f.target.unmaskedValue = n.unmaskedValue, B || l(e), a(e, f);
-  }, se = (e) => {
-    x(!0), A(e);
-  }, ae = (e) => {
-    x(!1), j(e);
-  }, ne = (e) => {
-    K(e);
-  }, oe = (e) => {
-    l(""), a("", e), k && k(e);
-  }, re = h(
-    "ClearableInput",
-    "input-group",
-    L && "has-error",
-    c && "pointer-events-none",
-    P && P
-  ), le = h(
-    "form-control",
-    G,
-    N && g && "withClearButton",
-    r && "withInputMask",
-    c && "disabled"
-  ), ue = h("clearButton", (!N || !g) && "hide"), E = D?.toLowerCase(), ie = Ie.indexOf(E) !== -1 ? E : R, m = {
-    ...de(J, ["value", "defaultValue", "onClear"]),
-    className: le,
-    autoComplete: _,
-    type: ie,
-    value: b,
-    onKeyPress: ne,
-    onBlur: ae,
-    onFocus: se,
-    onChange: r ? void 0 : ee,
-    // In case of masked input, the onAccept callback is used
-    onClick: U,
-    disabled: c,
-    readOnly: H,
-    maxLength: r ? void 0 : S,
-    tabIndex: O
-  }, F = {};
-  I && (F.dispatch = I);
-  const ce = r ? /* @__PURE__ */ u(
-    ve,
-    {
-      ...m,
-      inputRef: X,
-      mask: y,
-      definitions: q,
-      ...F,
-      placeholderChar: Y,
-      onAccept: te,
-      lazy: !Z(),
-      overwrite: $
-    }
-  ) : /* @__PURE__ */ u("input", { ...m, ref: v || C });
-  return /* @__PURE__ */ pe("div", { className: re, children: [
-    p && ge(p) ? p(m) : ce,
-    /* @__PURE__ */ u("span", { className: ue, onClick: oe, children: /* @__PURE__ */ u("span", { className: "clearButtonIcon rioglyph rioglyph-remove-sign" }) })
-  ] });
+import e from "../../hooks/usePrevious.js";
+import t from "../../utils/classNames.js";
+import n from "../../hooks/useMergeRefs.js";
+import { forwardRef as r, useRef as i, useState as a } from "react";
+import { noop as o } from "es-toolkit/function";
+import { isEmpty as s, omit as c } from "es-toolkit/compat";
+import { isFunction as l, isNil as ee } from "es-toolkit/predicate";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { IMaskInput as f } from "react-imask";
+//#region src/components/clearableInput/ClearableInput.tsx
+var p = "text", m = [
+	"text",
+	"password",
+	"email"
+], h = (e) => !s(`${e}`), g = r((r, s) => {
+	let { type: g = p, defaultValue: _, value: v, showClearButton: y = !0, maxLength: b, tabIndex: x = 0, hasError: S = !1, inputRef: C, autoComplete: w, onChange: T = o, onBlur: E = o, onFocus: te = o, onClear: D = o, onKeyPress: ne = o, onClick: re = o, mask: O, maskPlaceholder: ie = "_", maskVisibility: k = "always", maskOverwrite: A = !0, maskDefinitions: j, maskDispatch: M, inputClassName: N = "", disabled: P = !1, readOnly: F = !1, className: I = "", children: L, ...R } = r, z = v || _ || "", [B, V] = a(z), [H, U] = a(h(z)), [W, G] = a(!1), K = !ee(v), q = i(null), J = n(q, C, s), Y = !!O, ae = () => {
+		switch (k) {
+			case "always": return !0;
+			case "onFocus": return W;
+			case "never": return !1;
+			default: return W;
+		}
+	}, X = (e = "") => {
+		B !== e && (V(e), U(h(e)));
+	};
+	e(v) !== v && X(v);
+	let oe = (e) => {
+		let t = e.target.value;
+		K || X(t), T(t, e);
+	}, se = (e, t, n) => {
+		if (!q.current) return;
+		let r = {
+			target: q.current,
+			currentTarget: q.current,
+			bubbles: !0,
+			cancelable: !0,
+			defaultPrevented: !1,
+			isTrusted: !0,
+			preventDefault: () => {},
+			stopPropagation: () => {},
+			persist: () => {},
+			nativeEvent: {},
+			type: "change",
+			timeStamp: Date.now()
+		};
+		r.target.unmaskedValue = t.unmaskedValue, K || X(e), T(e, r);
+	}, ce = (e) => {
+		G(!0), te(e);
+	}, le = (e) => {
+		G(!1), E(e);
+	}, ue = (e) => {
+		ne(e);
+	}, de = (e) => {
+		X(""), T("", e), D && D(e);
+	}, fe = t("ClearableInput", "input-group", S && "has-error", P && "pointer-events-none", I && I), pe = t("form-control", N, H && y && "withClearButton", Y && "withInputMask", P && "disabled"), me = t("clearButton", (!H || !y) && "hide"), Z = g?.toLowerCase(), he = m.indexOf(Z) === -1 ? p : Z, Q = {
+		...c(R, [
+			"value",
+			"defaultValue",
+			"onClear"
+		]),
+		className: pe,
+		autoComplete: w,
+		type: he,
+		value: B,
+		onKeyPress: ue,
+		onBlur: le,
+		onFocus: ce,
+		onChange: Y ? void 0 : oe,
+		onClick: re,
+		disabled: P,
+		readOnly: F,
+		maxLength: Y ? void 0 : b,
+		tabIndex: x
+	}, $ = {};
+	M && ($.dispatch = M);
+	let ge = Y ? /* @__PURE__ */ u(f, {
+		...Q,
+		inputRef: J,
+		mask: O,
+		definitions: j,
+		...$,
+		placeholderChar: ie,
+		onAccept: se,
+		lazy: !ae(),
+		overwrite: A
+	}) : /* @__PURE__ */ u("input", {
+		...Q,
+		ref: C || s
+	});
+	return /* @__PURE__ */ d("div", {
+		className: fe,
+		children: [L && l(L) ? L(Q) : ge, /* @__PURE__ */ u("span", {
+			className: me,
+			onClick: de,
+			children: /* @__PURE__ */ u("span", { className: "clearButtonIcon uikit-icon icon-remove-sign" })
+		})]
+	});
 });
-export {
-  R as DEFAULT_TYPE,
-  Ie as SUPPORTED_TYPES,
-  De as default
-};
-//# sourceMappingURL=ClearableInput.js.map
+//#endregion
+export { p as DEFAULT_TYPE, m as SUPPORTED_TYPES, g as default };
+
+//# sourceMappingURL=ClearableInput.js.map

package/components/clearableInput/ClearableInput.js.map

@@ -1 +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 { 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 classNames from '../../utils/classNames';\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     * @default 'text'\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     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Defined whether or not the input has the error styling.\n     *\n     * @default false\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     * - \"a\" = allowed input: \"a-z, A-Z\" (letter)\n     * - \"*\" = allowed input: any character\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     * - {} - include fixed part in unmasked value\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     * Pattern used by IMask date masks.\n     *\n     * @example\n     * 'Y-m-d'\n     */\n    pattern?: string;\n\n    /**\n     * Formats a typed date value to the masked string representation.\n     */\n    format?: (value: Date | null, masked: unknown) => string;\n\n    /**\n     * Parses the masked string representation back to a typed date value.\n     */\n    parse?: (value: string, masked: unknown) => Date | null;\n\n    /**\n     * Custom IMask blocks for pattern masks.\n     */\n    blocks?: Record<string, unknown>;\n\n    /**\n     * Enables IMask autofix behavior for date and number masks.\n     */\n    autofix?: boolean | 'pad';\n\n    /**\n     * Controls when the mask pattern is visible.\n     *\n     * - 'always': Mask is always visible\n     * - 'onFocus': Mask is hidden but shown when input is focused\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     * Makes the input read-only.\n     */\n    readOnly?: boolean;\n\n    /**\n     * Controls whether the clear button is rendered.\n     * This might be useful to reuse this component for other use-cases.\n     *\n     * @default true\n     */\n    showClearButton?: 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    /**\n     * Render-prop to customize the rendered input.\n     *\n     * The function gets the `inputProps` passed and is responsible for rendering the custom `<input>` component.\n     *\n     * Receives the computed `input` props so you can render your own field. See: {@link https://reactjs.org/docs/render-props.html}\n     */\n    children?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;\n};\n\nconst hasValue = (value: unknown) => !isEmpty(`${value}`);\n\nconst ClearableInput = forwardRef((props: ClearableInputProps, ref: ForwardedRef<HTMLInputElement>) => {\n    const {\n        type = DEFAULT_TYPE,\n        defaultValue,\n        value,\n        showClearButton = true,\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        readOnly = 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 && showClearButton && 'withClearButton',\n        hasMask && 'withInputMask',\n        disabled && 'disabled'\n    );\n\n    const clearButtonClassNames = classNames('clearButton', (!showClear || !showClearButton) && '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        readOnly,\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","showClearButton","maxLength","tabIndex","hasError","inputRef","autoComplete","onChange","noop","onBlur","onFocus","onClear","onKeyPress","onClick","mask","maskPlaceholder","maskVisibility","maskOverwrite","maskDefinitions","maskDispatch","inputClassName","disabled","readOnly","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","_event","syntheticEvent","handleInputFocus","handleInputBlur","handleKeyPress","clearInputValue","classes","classNames","inputClassNames","clearButtonClassNames","convertedType","inputType","inputProps","omit","maskDispatchObj","input","jsx","IMaskInput","jsxs","isFunction"],"mappings":"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"}
+{"version":3,"file":"ClearableInput.js","names":[],"sources":["../../../src/components/clearableInput/ClearableInput.tsx"],"sourcesContent":["/** biome-ignore-all lint/complexity/noBannedTypes: <explanation> */\nimport React, { useState, forwardRef, type ForwardedRef, useRef } from 'react';\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 classNames from '../../utils/classNames';\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     * @default 'text'\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     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Defined whether or not the input has the error styling.\n     *\n     * @default false\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 | null>;\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     * - \"a\" = allowed input: \"a-z, A-Z\" (letter)\n     * - \"*\" = allowed input: any character\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     * - {} - include fixed part in unmasked value\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     * Pattern used by IMask date masks.\n     *\n     * @example\n     * 'Y-m-d'\n     */\n    pattern?: string;\n\n    /**\n     * Formats a typed date value to the masked string representation.\n     */\n    format?: (value: Date | null, masked: unknown) => string;\n\n    /**\n     * Parses the masked string representation back to a typed date value.\n     */\n    parse?: (value: string, masked: unknown) => Date | null;\n\n    /**\n     * Custom IMask blocks for pattern masks.\n     */\n    blocks?: Record<string, unknown>;\n\n    /**\n     * Enables IMask autofix behavior for date and number masks.\n     */\n    autofix?: boolean | 'pad';\n\n    /**\n     * Controls when the mask pattern is visible.\n     *\n     * - 'always': Mask is always visible\n     * - 'onFocus': Mask is hidden but shown when input is focused\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     * Makes the input read-only.\n     */\n    readOnly?: boolean;\n\n    /**\n     * Controls whether the clear button is rendered.\n     * This might be useful to reuse this component for other use-cases.\n     *\n     * @default true\n     */\n    showClearButton?: 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    /**\n     * Render-prop to customize the rendered input.\n     *\n     * The function gets the `inputProps` passed and is responsible for rendering the custom `<input>` component.\n     *\n     * Receives the computed `input` props so you can render your own field. See: {@link https://reactjs.org/docs/render-props.html}\n     */\n    children?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;\n};\n\nconst hasValue = (value: unknown) => !isEmpty(`${value}`);\n\nconst ClearableInput = forwardRef((props: ClearableInputProps, ref: ForwardedRef<HTMLInputElement>) => {\n    const {\n        type = DEFAULT_TYPE,\n        defaultValue,\n        value,\n        showClearButton = true,\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        readOnly = 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 && showClearButton && 'withClearButton',\n        hasMask && 'withInputMask',\n        disabled && 'disabled'\n    );\n\n    const clearButtonClassNames = classNames('clearButton', (!showClear || !showClearButton) && '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        readOnly,\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 uikit-icon icon-remove-sign' />\n            </span>\n        </div>\n    );\n});\n\nexport default ClearableInput;\n"],"mappings":"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"}

package/components/collapse/Collapse.js

@@ -1,39 +1,40 @@
-import { jsx as e } from "react/jsx-runtime";
-import { AnimatePresence as u, motion as I } from "motion/react";
-import { noop as o } from "es-toolkit/function";
-const x = 200, S = (a) => {
-  const {
-    open: t = !1,
-    unmountOnExit: i = !1,
-    appear: l = !1,
-    timeout: s = x,
-    onEntered: p = o,
-    onExited: c = o,
-    onAnimationStart: m = o,
-    children: r
-  } = a, d = !i, h = () => m(), A = (n) => {
-    n === "open" && p(), n === "collapsed" && c();
-  }, f = {
-    open: { opacity: 1, height: "auto" },
-    collapsed: { opacity: 0, height: 0 }
-  };
-  return /* @__PURE__ */ e(u, { initial: l, mode: "wait", children: (t || d) && /* @__PURE__ */ e(
-    I.div,
-    {
-      initial: "collapsed",
-      animate: t ? "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"
-  ) });
+import { noop as e } from "es-toolkit/function";
+import { AnimatePresence as t, motion as n } from "motion/react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/collapse/Collapse.tsx
+var i = 200, a = (a) => {
+	let { open: o = !1, unmountOnExit: s = !1, appear: c = !1, timeout: l = i, onEntered: u = e, onExited: d = e, onAnimationStart: f = e, children: p } = a;
+	return /* @__PURE__ */ r(t, {
+		initial: c,
+		mode: "wait",
+		children: (o || !s) && /* @__PURE__ */ r(n.div, {
+			initial: "collapsed",
+			animate: o ? "open" : "collapsed",
+			exit: "collapsed",
+			className: "collapse display-block width-100pct",
+			variants: {
+				open: {
+					opacity: 1,
+					height: "auto"
+				},
+				collapsed: {
+					opacity: 0,
+					height: 0
+				}
+			},
+			transition: {
+				duration: l / 1e3,
+				ease: "easeIn"
+			},
+			onAnimationComplete: (e) => {
+				e === "open" && u(), e === "collapsed" && d();
+			},
+			onAnimationStart: () => f(),
+			children: p
+		}, "content")
+	});
 };
-export {
-  S as default
-};
-//# sourceMappingURL=Collapse.js.map
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=Collapse.js.map

package/components/collapse/Collapse.js.map

@@ -1 +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     *\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     *\n     * @default false\n     */\n    appear?: boolean;\n\n    /**\n     * Duration of the collapse animation in milliseconds.\n     *\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        <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\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","AnimatePresence","jsx","motion"],"mappings":";;;AAKA,MAAMA,IAA+B,KA+C/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,2BACKC,GAAA,EAAgB,SAASZ,GAAQ,MAAK,QACjC,gBAAQO,MACN,gBAAAM;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MAEG,SAAQ;AAAA,MACR,SAAShB,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;AAER;"}
+{"version":3,"file":"Collapse.js","names":[],"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     *\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     *\n     * @default false\n     */\n    appear?: boolean;\n\n    /**\n     * Duration of the collapse animation in milliseconds.\n     *\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        <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\nexport default Collapse;\n"],"mappings":";;;;AAKA,IAAM,IAA+B,KA+C/B,KAAY,MAA4C;CAC1D,IAAM,EACF,UAAO,IACP,mBAAgB,IAChB,YAAS,IACT,aAAU,GACV,eAAY,GACZ,cAAW,GACX,sBAAmB,GACnB,gBACA;CAmBJ,OACI,kBAAC,GAAD;EAAiB,SAAS;EAAQ,MAAK;aACjC,KAAQ,CAnBc,MAoBpB,kBAAC,EAAO,KAAR;GAEI,SAAQ;GACR,SAAS,IAAO,SAAS;GACzB,MAAK;GACL,WAAU;GACA,UAAA;IAbtB,MAAM;KAAE,SAAS;KAAG,QAAQ;IAAO;IACnC,WAAW;KAAE,SAAS;KAAG,QAAQ;IAAE;GAYb;GACV,YAAY;IAAE,UAAU,IAAU;IAAM,MAAM;GAAS;GACvD,sBAzBiB,MAAoC;IAIjE,AAHI,MAAe,UACf,EAAU,GAEV,MAAe,eACf,EAAS;GAEjB;GAmBgB,wBA3BmB,EAAiB;GA6BnC;EACO,GAXJ,SAWI;CAEH,CAAA;AAEzB"}

package/components/contentLoader/ContentLoader.js

@@ -1,44 +1,41 @@
-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
-    }
-  );
+import e from "../../hooks/useDarkMode.js";
+import { cond as t } from "es-toolkit/compat";
+import { isNil as n } from "es-toolkit/predicate";
+import { jsx as r } from "react/jsx-runtime";
+import i from "react-content-loader";
+//#region src/components/contentLoader/ContentLoader.tsx
+var a = "rect", o = "circle", s = 2, c = 14, l = "100%", u = 16, d = a, f = ({ children: e }) => !n(e), p = ({ children: e }) => e, m = ({ type: e }) => e === a, h = ({ type: e }) => e === o, g = ({ rx: e = 3, ry: t = 3 }) => /* @__PURE__ */ r("rect", {
+	width: "100%",
+	height: "100%",
+	rx: e,
+	ry: t
+}), _ = ({ radius: e }) => /* @__PURE__ */ r("circle", {
+	cx: e,
+	cy: e,
+	r: e
+}), v = (n) => {
+	let { speed: a = s, width: o = l, height: v = c, radius: y = u, type: b = d, className: x = "", children: S, ...C } = n, w = e(), T = {
+		type: b,
+		radius: y,
+		children: S
+	}, E = t([
+		[f, p],
+		[m, g],
+		[h, _]
+	])(T), D = h(T) ? y * 2 : v, O = h(T) ? D : o;
+	return /* @__PURE__ */ r(i, {
+		backgroundColor: "#f5f6f7",
+		foregroundColor: w ? "#aaaaaa" : "#eeeeee",
+		speed: a,
+		height: D,
+		width: O,
+		className: `ContentLoader ${x} ${w ? "use-mix-blend-mode" : ""}`,
+		...C,
+		children: E
+	});
 };
-h.RECT = c;
-h.CIRCLE = d;
-export {
-  h as default
-};
-//# sourceMappingURL=ContentLoader.js.map
+v.RECT = a, v.CIRCLE = o;
+//#endregion
+export { v as default };
+
+//# sourceMappingURL=ContentLoader.js.map

package/components/contentLoader/ContentLoader.js.map

@@ -1 +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     *\n     * @default 2\n     */\n    speed?: number;\n\n    /**\n     * Sets the height of the svg element.\n     *\n     * @default 14\n     */\n    height?: string | number;\n\n    /**\n     * Sets the width of the svg element.\n     *\n     * @default 100%\n     */\n    width?: string | number;\n\n    /**\n     * Sets the radius of the svg element. Only relevant for circle elements.\n     *\n     * @default 16\n     */\n    radius?: number;\n\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    /**\n     * Additional class names to ab added to the wrapping svg element.\n     */\n    className?: string;\n\n    /**\n     * Rect object prop. Used internally.\n     */\n    rx?: number;\n\n    /**\n     * Rect object prop. Used internally.\n     */\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);\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,GAyDfO,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,GAG/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;"}
+{"version":3,"file":"ContentLoader.js","names":[],"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     *\n     * @default 2\n     */\n    speed?: number;\n\n    /**\n     * Sets the height of the svg element.\n     *\n     * @default 14\n     */\n    height?: string | number;\n\n    /**\n     * Sets the width of the svg element.\n     *\n     * @default 100%\n     */\n    width?: string | number;\n\n    /**\n     * Sets the radius of the svg element. Only relevant for circle elements.\n     *\n     * @default 16\n     */\n    radius?: number;\n\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    /**\n     * Additional class names to ab added to the wrapping svg element.\n     */\n    className?: string;\n\n    /**\n     * Rect object prop. Used internally.\n     */\n    rx?: number;\n\n    /**\n     * Rect object prop. Used internally.\n     */\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);\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"],"mappings":";;;;;;AAOA,IAAM,IAAO,QACP,IAAS,UAET,IAAgB,GAChB,IAAiB,IACjB,IAAgB,QAChB,IAAiB,IACjB,IAAe,GAyDf,KAAe,EAAE,kBAA+C,CAAC,EAAM,CAAQ,GAC/E,KAAkB,EAAE,kBAA+C,GAEnE,KAAU,EAAE,cAA2C,MAAS,GAChE,KAAY,EAAE,cAA2C,MAAS,GAElE,KAAc,EAAE,QAAK,GAAG,QAAK,QAC/B,kBAAC,QAAD;CAAM,OAAM;CAAO,QAAO;CAAW;CAAQ;AAAK,CAAA,GAGhD,KAAgB,EAAE,gBAA6C,kBAAC,UAAD;CAAQ,IAAI;CAAQ,IAAI;CAAQ,GAAG;AAAS,CAAA,GAU3G,KAAiB,MAA0C;CAC7D,IAAM,EACF,WAAQ,GACR,WAAQ,GACR,YAAS,GACT,YAAS,GACT,UAAO,GACP,eAAY,IACZ,aACA,GAAG,MACH,GAEE,IAAa,EAAY,GAKzB,IAAoB;EACtB;EACA;EACA;CACJ,GAEM,IAAU,EAAK;EACjB,CAAC,GAAa,CAAc;EAC5B,CAAC,GAAQ,CAAU;EACnB,CAAC,GAAU,CAAY;CAC3B,CAAC,CAAC,CAAC,CAAiB,GAEd,IAAgB,EAAS,CAAiB,IAAI,IAAS,IAAI,GAC3D,IAAe,EAAS,CAAiB,IAAI,IAAgB;CAEnE,OACI,kBAAC,GAAD;EACI,iBAAgB;EAChB,iBAAiB,IAAa,YAAY;EACnC;EACP,QAAQ;EACR,OAAO;EACP,WAAW,iBAAiB,EAAU,GAAG,IAAa,uBAAuB;EAC7E,GAAI;YAEH;CACW,CAAA;AAExB;AAEA,EAAc,OAAO,GACrB,EAAc,SAAS"}

package/components/countedInput/CountedInput.d.ts

@@ -44,7 +44,7 @@ export type CountedInputProps = Omit<ClearableInputProps, 'children' | 'max' | '
      */
     onChange?: (newValue: string, isValid: boolean, event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>) => void;
 };
-declare const CountedInput: React.ForwardRefExoticComponent<Omit<ClearableInputProps, "max" | "min" | "children" | "onChange" | "showClearButton"> & {
+declare const CountedInput: React.ForwardRefExoticComponent<Omit<ClearableInputProps, "children" | "onChange" | "max" | "min" | "showClearButton"> & {
     /**
      * Defines the minimum amount of characters required for a valid value.
      * If set, the counter counts up to this value because this is the threshold for success.