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

package/components/countedInput/CountedInput.js

@@ -1,65 +1,46 @@
-import { jsx as r, jsxs as x } from "react/jsx-runtime";
-import { forwardRef as K, useState as I } from "react";
-import { isNil as O } from "es-toolkit/predicate";
-import { noop as N } from "es-toolkit/function";
-import c from "../../utils/classNames.js";
-import Q from "../clearableInput/ClearableInput.js";
-const v = (l, i, u) => {
-  const t = l.length;
-  return t >= i && t <= u;
-}, tt = K((l, i) => {
-  const {
-    defaultValue: u,
-    value: t,
-    minLength: h = 0,
-    maxLength: V,
-    clearable: S = !1,
-    showValidationState: w,
-    validateInitialEmpty: L = !1,
-    validationState: m = "warning",
-    className: b = "",
-    onChange: B = N,
-    onBlur: T = N,
-    ...y
-  } = l, n = V ?? h ?? 0, s = h ?? 0, M = t || u || "", [j, k] = I(M), [$, p] = I(!1), g = !O(t), o = g ? t || "" : j, d = v(o, s, n), a = w ?? (L || o.length > 0 || $), E = m === "error" ? "has-error" : "has-warning", P = m === "error" ? "text-color-danger" : "text-color-warning", f = a && d, C = s > 0 ? s : n, R = `${Math.min(o.length, C)}/${C}`, q = (e, H) => {
-    const J = v(e, s, n);
-    p(!0), g || k(e), B(e, J, H);
-  }, z = (e) => {
-    p(!0), T(e);
-  }, A = c(
-    "form-group",
-    "CountedInput",
-    a && "has-feedback",
-    a && (d ? "has-success" : E),
-    b
-  ), D = c(
-    "input-group-addon",
-    "CountedInputCounter text-bold",
-    a && (d ? "text-color-success" : P)
-  ), F = c("CountedInputCounterValue text-italic", f && "is-hidden"), G = c(
-    "CountedInputSuccessIcon rioglyph rioglyph-ok text-color-success",
-    f && "is-visible"
-  );
-  return /* @__PURE__ */ r("div", { className: A, children: /* @__PURE__ */ x("div", { className: "input-group", children: [
-    /* @__PURE__ */ r(
-      Q,
-      {
-        ...y,
-        ref: i,
-        value: o,
-        maxLength: n,
-        showClearButton: S,
-        onChange: q,
-        onBlur: z
-      }
-    ),
-    /* @__PURE__ */ x("span", { className: D, children: [
-      /* @__PURE__ */ r("span", { className: F, children: R }),
-      /* @__PURE__ */ r("span", { className: G, "aria-hidden": !0 })
-    ] })
-  ] }) });
+import e from "../../utils/classNames.js";
+import t from "../clearableInput/ClearableInput.js";
+import { forwardRef as n, useState as r } from "react";
+import { noop as i } from "es-toolkit/function";
+import { isNil as a } from "es-toolkit/predicate";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/countedInput/CountedInput.tsx
+var c = (e, t, n) => {
+	let r = e.length;
+	return r >= t && r <= n;
+}, l = n((n, l) => {
+	let { defaultValue: u, value: d, minLength: f = 0, maxLength: p, clearable: m = !1, showValidationState: h, validateInitialEmpty: g = !1, validationState: _ = "warning", className: v = "", onChange: y = i, onBlur: b = i, ...x } = n, S = p ?? f ?? 0, C = f ?? 0, [w, T] = r(d || u || ""), [E, D] = r(!1), O = !a(d), k = O ? d || "" : w, A = c(k, C, S), j = h ?? (g || k.length > 0 || E), M = _ === "error" ? "has-error" : "has-warning", N = _ === "error" ? "text-color-danger" : "text-color-warning", P = j && A, F = C > 0 ? C : S, I = `${Math.min(k.length, F)}/${F}`, L = (e, t) => {
+		let n = c(e, C, S);
+		D(!0), O || T(e), y(e, n, t);
+	}, R = (e) => {
+		D(!0), b(e);
+	}, z = e("form-group", "CountedInput", j && "has-feedback", j && (A ? "has-success" : M), v), B = e("input-group-addon", "CountedInputCounter text-bold", j && (A ? "text-color-success" : N)), V = e("CountedInputCounterValue text-italic", P && "is-hidden"), H = e("CountedInputSuccessIcon uikit-icon icon-ok text-color-success", P && "is-visible");
+	return /* @__PURE__ */ o("div", {
+		className: z,
+		children: /* @__PURE__ */ s("div", {
+			className: "input-group",
+			children: [/* @__PURE__ */ o(t, {
+				...x,
+				ref: l,
+				value: k,
+				maxLength: S,
+				showClearButton: m,
+				onChange: L,
+				onBlur: R
+			}), /* @__PURE__ */ s("span", {
+				className: B,
+				children: [/* @__PURE__ */ o("span", {
+					className: V,
+					children: I
+				}), /* @__PURE__ */ o("span", {
+					className: H,
+					"aria-hidden": !0
+				})]
+			})]
+		})
+	});
 });
-export {
-  tt as default
-};
-//# sourceMappingURL=CountedInput.js.map
+//#endregion
+export { l as default };
+
+//# sourceMappingURL=CountedInput.js.map

package/components/countedInput/CountedInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CountedInput.js","sources":["../../../src/components/countedInput/CountedInput.tsx"],"sourcesContent":["import React, { forwardRef, useState, type ForwardedRef } from 'react';\nimport { isNil } from 'es-toolkit/predicate';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport ClearableInput, { type ClearableInputProps } from '../clearableInput/ClearableInput';\n\nexport type CountedInputProps = Omit<\n    ClearableInputProps,\n    'children' | 'max' | 'min' | 'onChange' | 'showClearButton'\n> & {\n    /**\n     * Defines the minimum amount of characters required for a valid value.\n     * If set, the counter counts up to this value because this is the threshold for success.\n     * If no `maxLength` is set, this value is also used as the maximum amount of characters that can be entered.\n     * Set at least one of `minLength` or `maxLength`.\n     *\n     * @default 0\n     */\n    minLength?: number;\n\n    /**\n     * Defines the maximum amount of characters that can be entered.\n     * If no `minLength` is set, the counter counts up to this value.\n     * Set at least one of `minLength` or `maxLength`.\n     */\n    maxLength?: number;\n\n    /**\n     * Controls whether the clear button is rendered.\n     *\n     * @default false\n     */\n    clearable?: boolean;\n\n    /**\n     * Controls whether success or warning feedback styling is rendered. If omitted, feedback is shown after user\n     * interaction or when the input has a value.\n     */\n    showValidationState?: boolean;\n\n    /**\n     * Controls whether an initially empty input is validated before user interaction.\n     *\n     * @default false\n     */\n    validateInitialEmpty?: boolean;\n\n    /**\n     * Defines the invalid feedback style used while the character criteria are not met.\n     *\n     * @default 'warning'\n     */\n    validationState?: 'warning' | 'error';\n\n    /**\n     * Callback function for when the value changes. Receives the new value and validity as arguments.\n     */\n    onChange?: (\n        newValue: string,\n        isValid: boolean,\n        event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>\n    ) => void;\n};\n\nconst getIsValid = (value: string, minLength: number, maxLength: number) => {\n    const length = value.length;\n    return length >= minLength && length <= maxLength;\n};\n\nconst CountedInput = forwardRef((props: CountedInputProps, ref: ForwardedRef<HTMLInputElement>) => {\n    const {\n        defaultValue,\n        value,\n        minLength = 0,\n        maxLength,\n        clearable = false,\n        showValidationState,\n        validateInitialEmpty = false,\n        validationState = 'warning',\n        className = '',\n        onChange = noop,\n        onBlur = noop,\n        ...remainingProps\n    } = props;\n\n    const effectiveMaxLength = maxLength ?? minLength ?? 0;\n    const effectiveMinLength = minLength ?? 0;\n    const initialValue = value || defaultValue || '';\n\n    const [inputValue, setInputValue] = useState(initialValue);\n    const [isTouched, setTouched] = useState(false);\n\n    const isControlled = !isNil(value);\n    const currentValue = isControlled ? value || '' : inputValue;\n\n    const isValid = getIsValid(currentValue, effectiveMinLength, effectiveMaxLength);\n\n    const shouldShowValidationState =\n        showValidationState ?? (validateInitialEmpty || currentValue.length > 0 || isTouched);\n\n    const invalidClassName = validationState === 'error' ? 'has-error' : 'has-warning';\n    const invalidTextColor = validationState === 'error' ? 'text-color-danger' : 'text-color-warning';\n\n    const showSuccessIcon = shouldShowValidationState && isValid;\n    const counterTargetLength = effectiveMinLength > 0 ? effectiveMinLength : effectiveMaxLength;\n    const counter = `${Math.min(currentValue.length, counterTargetLength)}/${counterTargetLength}`;\n\n    const handleChange: ClearableInputProps['onChange'] = (newValue, event) => {\n        const nextIsValid = getIsValid(newValue, effectiveMinLength, effectiveMaxLength);\n\n        setTouched(true);\n\n        if (!isControlled) {\n            setInputValue(newValue);\n        }\n\n        onChange(newValue, nextIsValid, event);\n    };\n\n    const handleBlur: ClearableInputProps['onBlur'] = event => {\n        setTouched(true);\n        onBlur(event);\n    };\n\n    const classes = classNames(\n        'form-group',\n        'CountedInput',\n        shouldShowValidationState && 'has-feedback',\n        shouldShowValidationState && (isValid ? 'has-success' : invalidClassName),\n        className\n    );\n\n    const counterClassNames = classNames(\n        'input-group-addon',\n        'CountedInputCounter text-bold',\n        shouldShowValidationState && (isValid ? 'text-color-success' : invalidTextColor)\n    );\n\n    const counterValueClassNames = classNames('CountedInputCounterValue text-italic', showSuccessIcon && 'is-hidden');\n    const successIconClassNames = classNames(\n        'CountedInputSuccessIcon rioglyph rioglyph-ok text-color-success',\n        showSuccessIcon && 'is-visible'\n    );\n\n    return (\n        <div className={classes}>\n            <div className='input-group'>\n                <ClearableInput\n                    {...remainingProps}\n                    ref={ref}\n                    value={currentValue}\n                    maxLength={effectiveMaxLength}\n                    showClearButton={clearable}\n                    onChange={handleChange}\n                    onBlur={handleBlur}\n                />\n                <span className={counterClassNames}>\n                    <span className={counterValueClassNames}>{counter}</span>\n                    <span className={successIconClassNames} aria-hidden />\n                </span>\n            </div>\n        </div>\n    );\n});\n\nexport default CountedInput;\n"],"names":["getIsValid","value","minLength","maxLength","length","CountedInput","forwardRef","props","ref","defaultValue","clearable","showValidationState","validateInitialEmpty","validationState","className","onChange","noop","onBlur","remainingProps","effectiveMaxLength","effectiveMinLength","initialValue","inputValue","setInputValue","useState","isTouched","setTouched","isControlled","isNil","currentValue","isValid","shouldShowValidationState","invalidClassName","invalidTextColor","showSuccessIcon","counterTargetLength","counter","handleChange","newValue","event","nextIsValid","handleBlur","classes","classNames","counterClassNames","counterValueClassNames","successIconClassNames","jsxs","jsx","ClearableInput"],"mappings":";;;;;;AAiEA,MAAMA,IAAa,CAACC,GAAeC,GAAmBC,MAAsB;AACxE,QAAMC,IAASH,EAAM;AACrB,SAAOG,KAAUF,KAAaE,KAAUD;AAC5C,GAEME,KAAeC,EAAW,CAACC,GAA0BC,MAAwC;AAC/F,QAAM;AAAA,IACF,cAAAC;AAAA,IACA,OAAAR;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,WAAAC;AAAA,IACA,WAAAO,IAAY;AAAA,IACZ,qBAAAC;AAAA,IACA,sBAAAC,IAAuB;AAAA,IACvB,iBAAAC,IAAkB;AAAA,IAClB,WAAAC,IAAY;AAAA,IACZ,UAAAC,IAAWC;AAAA,IACX,QAAAC,IAASD;AAAA,IACT,GAAGE;AAAA,EAAA,IACHX,GAEEY,IAAqBhB,KAAaD,KAAa,GAC/CkB,IAAqBlB,KAAa,GAClCmB,IAAepB,KAASQ,KAAgB,IAExC,CAACa,GAAYC,CAAa,IAAIC,EAASH,CAAY,GACnD,CAACI,GAAWC,CAAU,IAAIF,EAAS,EAAK,GAExCG,IAAe,CAACC,EAAM3B,CAAK,GAC3B4B,IAAeF,IAAe1B,KAAS,KAAKqB,GAE5CQ,IAAU9B,EAAW6B,GAAcT,GAAoBD,CAAkB,GAEzEY,IACFpB,MAAwBC,KAAwBiB,EAAa,SAAS,KAAKJ,IAEzEO,IAAmBnB,MAAoB,UAAU,cAAc,eAC/DoB,IAAmBpB,MAAoB,UAAU,sBAAsB,sBAEvEqB,IAAkBH,KAA6BD,GAC/CK,IAAsBf,IAAqB,IAAIA,IAAqBD,GACpEiB,IAAU,GAAG,KAAK,IAAIP,EAAa,QAAQM,CAAmB,CAAC,IAAIA,CAAmB,IAEtFE,IAAgD,CAACC,GAAUC,MAAU;AACvE,UAAMC,IAAcxC,EAAWsC,GAAUlB,GAAoBD,CAAkB;AAE/E,IAAAO,EAAW,EAAI,GAEVC,KACDJ,EAAce,CAAQ,GAG1BvB,EAASuB,GAAUE,GAAaD,CAAK;AAAA,EACzC,GAEME,IAA4C,CAAAF,MAAS;AACvD,IAAAb,EAAW,EAAI,GACfT,EAAOsB,CAAK;AAAA,EAChB,GAEMG,IAAUC;AAAA,IACZ;AAAA,IACA;AAAA,IACAZ,KAA6B;AAAA,IAC7BA,MAA8BD,IAAU,gBAAgBE;AAAA,IACxDlB;AAAA,EAAA,GAGE8B,IAAoBD;AAAA,IACtB;AAAA,IACA;AAAA,IACAZ,MAA8BD,IAAU,uBAAuBG;AAAA,EAAA,GAG7DY,IAAyBF,EAAW,wCAAwCT,KAAmB,WAAW,GAC1GY,IAAwBH;AAAA,IAC1B;AAAA,IACAT,KAAmB;AAAA,EAAA;AAGvB,2BACK,OAAA,EAAI,WAAWQ,GACZ,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,eACX,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACI,GAAG/B;AAAA,QACJ,KAAAV;AAAA,QACA,OAAOqB;AAAA,QACP,WAAWV;AAAA,QACX,iBAAiBT;AAAA,QACjB,UAAU2B;AAAA,QACV,QAAQI;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ,gBAAAM,EAAC,QAAA,EAAK,WAAWH,GACb,UAAA;AAAA,MAAA,gBAAAI,EAAC,QAAA,EAAK,WAAWH,GAAyB,UAAAT,GAAQ;AAAA,MAClD,gBAAAY,EAAC,QAAA,EAAK,WAAWF,GAAuB,eAAW,GAAA,CAAC;AAAA,IAAA,EAAA,CACxD;AAAA,EAAA,EAAA,CACJ,EAAA,CACJ;AAER,CAAC;"}
+{"version":3,"file":"CountedInput.js","names":[],"sources":["../../../src/components/countedInput/CountedInput.tsx"],"sourcesContent":["import React, { forwardRef, useState, type ForwardedRef } from 'react';\nimport { isNil } from 'es-toolkit/predicate';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport ClearableInput, { type ClearableInputProps } from '../clearableInput/ClearableInput';\n\nexport type CountedInputProps = Omit<\n    ClearableInputProps,\n    'children' | 'max' | 'min' | 'onChange' | 'showClearButton'\n> & {\n    /**\n     * Defines the minimum amount of characters required for a valid value.\n     * If set, the counter counts up to this value because this is the threshold for success.\n     * If no `maxLength` is set, this value is also used as the maximum amount of characters that can be entered.\n     * Set at least one of `minLength` or `maxLength`.\n     *\n     * @default 0\n     */\n    minLength?: number;\n\n    /**\n     * Defines the maximum amount of characters that can be entered.\n     * If no `minLength` is set, the counter counts up to this value.\n     * Set at least one of `minLength` or `maxLength`.\n     */\n    maxLength?: number;\n\n    /**\n     * Controls whether the clear button is rendered.\n     *\n     * @default false\n     */\n    clearable?: boolean;\n\n    /**\n     * Controls whether success or warning feedback styling is rendered. If omitted, feedback is shown after user\n     * interaction or when the input has a value.\n     */\n    showValidationState?: boolean;\n\n    /**\n     * Controls whether an initially empty input is validated before user interaction.\n     *\n     * @default false\n     */\n    validateInitialEmpty?: boolean;\n\n    /**\n     * Defines the invalid feedback style used while the character criteria are not met.\n     *\n     * @default 'warning'\n     */\n    validationState?: 'warning' | 'error';\n\n    /**\n     * Callback function for when the value changes. Receives the new value and validity as arguments.\n     */\n    onChange?: (\n        newValue: string,\n        isValid: boolean,\n        event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>\n    ) => void;\n};\n\nconst getIsValid = (value: string, minLength: number, maxLength: number) => {\n    const length = value.length;\n    return length >= minLength && length <= maxLength;\n};\n\nconst CountedInput = forwardRef((props: CountedInputProps, ref: ForwardedRef<HTMLInputElement>) => {\n    const {\n        defaultValue,\n        value,\n        minLength = 0,\n        maxLength,\n        clearable = false,\n        showValidationState,\n        validateInitialEmpty = false,\n        validationState = 'warning',\n        className = '',\n        onChange = noop,\n        onBlur = noop,\n        ...remainingProps\n    } = props;\n\n    const effectiveMaxLength = maxLength ?? minLength ?? 0;\n    const effectiveMinLength = minLength ?? 0;\n    const initialValue = value || defaultValue || '';\n\n    const [inputValue, setInputValue] = useState(initialValue);\n    const [isTouched, setTouched] = useState(false);\n\n    const isControlled = !isNil(value);\n    const currentValue = isControlled ? value || '' : inputValue;\n\n    const isValid = getIsValid(currentValue, effectiveMinLength, effectiveMaxLength);\n\n    const shouldShowValidationState =\n        showValidationState ?? (validateInitialEmpty || currentValue.length > 0 || isTouched);\n\n    const invalidClassName = validationState === 'error' ? 'has-error' : 'has-warning';\n    const invalidTextColor = validationState === 'error' ? 'text-color-danger' : 'text-color-warning';\n\n    const showSuccessIcon = shouldShowValidationState && isValid;\n    const counterTargetLength = effectiveMinLength > 0 ? effectiveMinLength : effectiveMaxLength;\n    const counter = `${Math.min(currentValue.length, counterTargetLength)}/${counterTargetLength}`;\n\n    const handleChange: ClearableInputProps['onChange'] = (newValue, event) => {\n        const nextIsValid = getIsValid(newValue, effectiveMinLength, effectiveMaxLength);\n\n        setTouched(true);\n\n        if (!isControlled) {\n            setInputValue(newValue);\n        }\n\n        onChange(newValue, nextIsValid, event);\n    };\n\n    const handleBlur: ClearableInputProps['onBlur'] = event => {\n        setTouched(true);\n        onBlur(event);\n    };\n\n    const classes = classNames(\n        'form-group',\n        'CountedInput',\n        shouldShowValidationState && 'has-feedback',\n        shouldShowValidationState && (isValid ? 'has-success' : invalidClassName),\n        className\n    );\n\n    const counterClassNames = classNames(\n        'input-group-addon',\n        'CountedInputCounter text-bold',\n        shouldShowValidationState && (isValid ? 'text-color-success' : invalidTextColor)\n    );\n\n    const counterValueClassNames = classNames('CountedInputCounterValue text-italic', showSuccessIcon && 'is-hidden');\n    const successIconClassNames = classNames(\n        'CountedInputSuccessIcon uikit-icon icon-ok text-color-success',\n        showSuccessIcon && 'is-visible'\n    );\n\n    return (\n        <div className={classes}>\n            <div className='input-group'>\n                <ClearableInput\n                    {...remainingProps}\n                    ref={ref}\n                    value={currentValue}\n                    maxLength={effectiveMaxLength}\n                    showClearButton={clearable}\n                    onChange={handleChange}\n                    onBlur={handleBlur}\n                />\n                <span className={counterClassNames}>\n                    <span className={counterValueClassNames}>{counter}</span>\n                    <span className={successIconClassNames} aria-hidden />\n                </span>\n            </div>\n        </div>\n    );\n});\n\nexport default CountedInput;\n"],"mappings":";;;;;;;AAiEA,IAAM,KAAc,GAAe,GAAmB,MAAsB;CACxE,IAAM,IAAS,EAAM;CACrB,OAAO,KAAU,KAAa,KAAU;AAC5C,GAEM,IAAe,GAAY,GAA0B,MAAwC;CAC/F,IAAM,EACF,iBACA,UACA,eAAY,GACZ,cACA,eAAY,IACZ,wBACA,0BAAuB,IACvB,qBAAkB,WAClB,eAAY,IACZ,cAAW,GACX,YAAS,GACT,GAAG,MACH,GAEE,IAAqB,KAAa,KAAa,GAC/C,IAAqB,KAAa,GAGlC,CAAC,GAAY,KAAiB,EAFf,KAAS,KAAgB,EAEW,GACnD,CAAC,GAAW,KAAc,EAAS,EAAK,GAExC,IAAe,CAAC,EAAM,CAAK,GAC3B,IAAe,IAAe,KAAS,KAAK,GAE5C,IAAU,EAAW,GAAc,GAAoB,CAAkB,GAEzE,IACF,MAAwB,KAAwB,EAAa,SAAS,KAAK,IAEzE,IAAmB,MAAoB,UAAU,cAAc,eAC/D,IAAmB,MAAoB,UAAU,sBAAsB,sBAEvE,IAAkB,KAA6B,GAC/C,IAAsB,IAAqB,IAAI,IAAqB,GACpE,IAAU,GAAG,KAAK,IAAI,EAAa,QAAQ,CAAmB,EAAE,GAAG,KAEnE,KAAiD,GAAU,MAAU;EACvE,IAAM,IAAc,EAAW,GAAU,GAAoB,CAAkB;EAQ/E,AANA,EAAW,EAAI,GAEV,KACD,EAAc,CAAQ,GAG1B,EAAS,GAAU,GAAa,CAAK;CACzC,GAEM,KAA4C,MAAS;EAEvD,AADA,EAAW,EAAI,GACf,EAAO,CAAK;CAChB,GAEM,IAAU,EACZ,cACA,gBACA,KAA6B,gBAC7B,MAA8B,IAAU,gBAAgB,IACxD,CACJ,GAEM,IAAoB,EACtB,qBACA,iCACA,MAA8B,IAAU,uBAAuB,EACnE,GAEM,IAAyB,EAAW,wCAAwC,KAAmB,WAAW,GAC1G,IAAwB,EAC1B,iEACA,KAAmB,YACvB;CAEA,OACI,kBAAC,OAAD;EAAK,WAAW;YACZ,kBAAC,OAAD;GAAK,WAAU;aAAf,CACI,kBAAC,GAAD;IACI,GAAI;IACC;IACL,OAAO;IACP,WAAW;IACX,iBAAiB;IACjB,UAAU;IACV,QAAQ;GACX,CAAA,GACD,kBAAC,QAAD;IAAM,WAAW;cAAjB,CACI,kBAAC,QAAD;KAAM,WAAW;eAAyB;IAAc,CAAA,GACxD,kBAAC,QAAD;KAAM,WAAW;KAAuB,eAAA;IAAa,CAAA,CACnD;KACL;;CACJ,CAAA;AAEb,CAAC"}

package/components/dataTabs/DataTab.js

@@ -1,37 +1,33 @@
-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;
+import { createElement as e } from "react";
+import { motion as t } from "motion/react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/dataTabs/DataTab.tsx
+var r = (r) => {
+	let { active: i = !1, title: a, tabKey: o, disableTransition: s = !1, className: c = "", onAnimationStart: l = () => {}, onAnimationEnd: u = () => {}, children: d, ...f } = r;
+	return s ? /* @__PURE__ */ n("div", { children: i && d }) : i ? /* @__PURE__ */ e(t.div, {
+		...f,
+		key: o,
+		initial: {
+			x: 0,
+			y: 0,
+			opacity: 0
+		},
+		animate: {
+			x: 0,
+			y: 0,
+			opacity: 1
+		},
+		exit: {
+			x: 0,
+			y: 0,
+			opacity: 0
+		},
+		transition: { duration: .1 },
+		onAnimationStart: l,
+		onAnimationEnd: u
+	}, d) : null;
 };
-export {
-  x as default
-};
-//# sourceMappingURL=DataTab.js.map
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=DataTab.js.map

package/components/dataTabs/DataTab.js.map

@@ -1 +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;"}
+{"version":3,"file":"DataTab.js","names":[],"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"],"mappings":";;;;AA6CA,IAAM,KAAW,MAA2C;CACxD,IAAM,EACF,YAAS,IACT,UACA,WACA,uBAAoB,IACpB,eAAY,IACZ,4BAAyB,CAAC,GAC1B,0BAAuB,CAAC,GACxB,aACA,GAAG,MACH;CAUJ,OARI,IACO,kBAAC,OAAD,EAAA,UAAM,KAAU,EAAc,CAAA,IAGpC,IAKD,kBAAC,EAAO,KAAR;EACI,GAAI;EACJ,KAAK;EACL,SAAS;GAAE,GAAG;GAAG,GAAG;GAAG,SAAS;EAAE;EAClC,SAAS;GAAE,GAAG;GAAG,GAAG;GAAG,SAAS;EAAE;EAClC,MAAM;GAAE,GAAG;GAAG,GAAG;GAAG,SAAS;EAAE;EAC/B,YAAY,EAAE,UAAU,GAAI;EACV;EACF;CAGR,GADP,CACO,IAfL;AAiBf"}

package/components/dataTabs/DataTabHeader.js

@@ -1,49 +1,19 @@
-import { jsxs as f, jsx as p } from "react/jsx-runtime";
-import { useState as T } from "react";
-import H from "../../utils/classNames.js";
-const $ = (o) => {
-  const {
-    tabKey: s,
-    title: i,
-    isActive: a,
-    isFirstTab: l,
-    isLastTab: m,
-    onSelectTab: c,
-    tabFirstChildClassName: n,
-    tabLastChildClassName: b,
-    tabClassName: N,
-    tabHoverClassName: C,
-    tabActiveClassName: v,
-    arrowClassName: d,
-    className: e
-  } = o, [t, r] = T(!1), u = H(
-    "DataTab",
-    "tab",
-    l && n,
-    m && b,
-    !t && !a && N,
-    t && !a && C,
-    a && `active ${v}`,
-    !a && "cursor-pointer",
-    e && e
-  );
-  return /* @__PURE__ */ f(
-    "li",
-    {
-      className: u,
-      onClick: c,
-      "data-tabkey": s,
-      onMouseEnter: () => r(!0),
-      onMouseLeave: () => r(!1),
-      children: [
-        i,
-        /* @__PURE__ */ p("div", { className: `arrow ${d} ${a ? "in" : ""}` })
-      ]
-    },
-    s
-  );
+import e from "../../utils/classNames.js";
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/dataTabs/DataTabHeader.tsx
+var i = (i) => {
+	let { tabKey: a, title: o, isActive: s, isFirstTab: c, isLastTab: l, onSelectTab: u, tabFirstChildClassName: d, tabLastChildClassName: f, tabClassName: p, tabHoverClassName: m, tabActiveClassName: h, arrowClassName: g, className: _ } = i, [v, y] = t(!1);
+	return /* @__PURE__ */ r("li", {
+		className: e("DataTab", "tab", c && d, l && f, !v && !s && p, v && !s && m, s && `active ${h}`, !s && "cursor-pointer", _ && _),
+		onClick: u,
+		"data-tabkey": a,
+		onMouseEnter: () => y(!0),
+		onMouseLeave: () => y(!1),
+		children: [o, /* @__PURE__ */ n("div", { className: `arrow ${g} ${s ? "in" : ""}` })]
+	}, a);
 };
-export {
-  $ as default
-};
-//# sourceMappingURL=DataTabHeader.js.map
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=DataTabHeader.js.map

package/components/dataTabs/DataTabHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTabHeader.js","sources":["../../../src/components/dataTabs/DataTabHeader.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type DataTabHeaderProps = {\n    isActive?: boolean;\n    tabKey: string;\n    title: React.ReactNode;\n    onSelectTab?: (event: React.MouseEvent<HTMLLIElement>) => void;\n    isFirstTab?: boolean;\n    isLastTab?: boolean;\n    tabFirstChildClassName?: string;\n    tabLastChildClassName?: string;\n    tabClassName?: string;\n    tabHoverClassName?: string;\n    tabActiveClassName?: string;\n    arrowClassName?: string;\n    className?: string;\n};\n\nconst DataTabHeader = (props: DataTabHeaderProps) => {\n    const {\n        tabKey,\n        title,\n        isActive,\n        isFirstTab,\n        isLastTab,\n        onSelectTab,\n        tabFirstChildClassName,\n        tabLastChildClassName,\n        tabClassName,\n        tabHoverClassName,\n        tabActiveClassName,\n        arrowClassName,\n        className,\n    } = props;\n\n    const [isHovering, setIsHovering] = useState(false);\n\n    const tabClassNames = classNames(\n        'DataTab',\n        'tab',\n        isFirstTab && tabFirstChildClassName,\n        isLastTab && tabLastChildClassName,\n        !isHovering && !isActive && tabClassName,\n        isHovering && !isActive && tabHoverClassName,\n        isActive && `active ${tabActiveClassName}`,\n        !isActive && 'cursor-pointer',\n        className && className\n    );\n\n    return (\n        <li\n            key={tabKey}\n            className={tabClassNames}\n            onClick={onSelectTab}\n            data-tabkey={tabKey}\n            onMouseEnter={() => setIsHovering(true)}\n            onMouseLeave={() => setIsHovering(false)}\n        >\n            {title}\n            <div className={`arrow ${arrowClassName} ${isActive ? 'in' : ''}`} />\n        </li>\n    );\n};\n\nexport default DataTabHeader;\n"],"names":["DataTabHeader","props","tabKey","title","isActive","isFirstTab","isLastTab","onSelectTab","tabFirstChildClassName","tabLastChildClassName","tabClassName","tabHoverClassName","tabActiveClassName","arrowClassName","className","isHovering","setIsHovering","useState","tabClassNames","classNames","jsxs","jsx"],"mappings":";;;AAqBA,MAAMA,IAAgB,CAACC,MAA8B;AACjD,QAAM;AAAA,IACF,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,wBAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,IACAb,GAEE,CAACc,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAE5CC,IAAgBC;AAAA,IAClB;AAAA,IACA;AAAA,IACAd,KAAcG;AAAA,IACdF,KAAaG;AAAA,IACb,CAACM,KAAc,CAACX,KAAYM;AAAA,IAC5BK,KAAc,CAACX,KAAYO;AAAA,IAC3BP,KAAY,UAAUQ,CAAkB;AAAA,IACxC,CAACR,KAAY;AAAA,IACbU,KAAaA;AAAA,EAAA;AAGjB,SACI,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MAEG,WAAWF;AAAA,MACX,SAASX;AAAA,MACT,eAAaL;AAAA,MACb,cAAc,MAAMc,EAAc,EAAI;AAAA,MACtC,cAAc,MAAMA,EAAc,EAAK;AAAA,MAEtC,UAAA;AAAA,QAAAb;AAAA,QACD,gBAAAkB,EAAC,SAAI,WAAW,SAASR,CAAc,IAAIT,IAAW,OAAO,EAAE,GAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,IAR9DF;AAAA,EAAA;AAWjB;"}
+{"version":3,"file":"DataTabHeader.js","names":[],"sources":["../../../src/components/dataTabs/DataTabHeader.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type DataTabHeaderProps = {\n    isActive?: boolean;\n    tabKey: string;\n    title: React.ReactNode;\n    onSelectTab?: (event: React.MouseEvent<HTMLLIElement>) => void;\n    isFirstTab?: boolean;\n    isLastTab?: boolean;\n    tabFirstChildClassName?: string;\n    tabLastChildClassName?: string;\n    tabClassName?: string;\n    tabHoverClassName?: string;\n    tabActiveClassName?: string;\n    arrowClassName?: string;\n    className?: string;\n};\n\nconst DataTabHeader = (props: DataTabHeaderProps) => {\n    const {\n        tabKey,\n        title,\n        isActive,\n        isFirstTab,\n        isLastTab,\n        onSelectTab,\n        tabFirstChildClassName,\n        tabLastChildClassName,\n        tabClassName,\n        tabHoverClassName,\n        tabActiveClassName,\n        arrowClassName,\n        className,\n    } = props;\n\n    const [isHovering, setIsHovering] = useState(false);\n\n    const tabClassNames = classNames(\n        'DataTab',\n        'tab',\n        isFirstTab && tabFirstChildClassName,\n        isLastTab && tabLastChildClassName,\n        !isHovering && !isActive && tabClassName,\n        isHovering && !isActive && tabHoverClassName,\n        isActive && `active ${tabActiveClassName}`,\n        !isActive && 'cursor-pointer',\n        className && className\n    );\n\n    return (\n        <li\n            key={tabKey}\n            className={tabClassNames}\n            onClick={onSelectTab}\n            data-tabkey={tabKey}\n            onMouseEnter={() => setIsHovering(true)}\n            onMouseLeave={() => setIsHovering(false)}\n        >\n            {title}\n            <div className={`arrow ${arrowClassName} ${isActive ? 'in' : ''}`} />\n        </li>\n    );\n};\n\nexport default DataTabHeader;\n"],"mappings":";;;;AAqBA,IAAM,KAAiB,MAA8B;CACjD,IAAM,EACF,WACA,UACA,aACA,eACA,cACA,gBACA,2BACA,0BACA,iBACA,sBACA,uBACA,mBACA,iBACA,GAEE,CAAC,GAAY,KAAiB,EAAS,EAAK;CAclD,OACI,kBAAC,MAAD;EAEI,WAfc,EAClB,WACA,OACA,KAAc,GACd,KAAa,GACb,CAAC,KAAc,CAAC,KAAY,GAC5B,KAAc,CAAC,KAAY,GAC3B,KAAY,UAAU,KACtB,CAAC,KAAY,kBACb,KAAa,CAME;EACX,SAAS;EACT,eAAa;EACb,oBAAoB,EAAc,EAAI;EACtC,oBAAoB,EAAc,EAAK;YAN3C,CAQK,GACD,kBAAC,OAAD,EAAK,WAAW,SAAS,EAAe,GAAG,IAAW,OAAO,KAAO,CAAA,CACpE;IATK,CASL;AAEZ"}

package/components/dataTabs/DataTabs.js

@@ -1,79 +1,64 @@
-import { jsxs as j, jsx as n } from "react/jsx-runtime";
-import r, { useState as m } from "react";
-import { AnimatePresence as E } from "motion/react";
-import H from "../../utils/classNames.js";
-import I from "./DataTabHeader.js";
-const W = (i) => {
-  const [a] = i;
-  return a?.props.tabKey;
-}, G = (i) => {
-  const {
-    activeKey: a = "",
-    bordered: d = !0,
-    className: p,
-    commonTabContent: c,
-    disableTransition: l = !1,
-    arrowClassName: h = "bg-highlight-dark border-color-transparent",
-    onSelectTab: C = () => {
-    },
-    tabActiveClassName: u = "bg-highlight-dark text-color-white",
-    tabClassName: v = "",
-    tabContentClassName: N = "",
-    tabFirstChildClassName: T = "",
-    tabHoverClassName: f = "bg-highlight-decent text-color-darkest",
-    tabLastChildClassName: g = "",
-    tabsWrapperClassName: y = "",
-    vertical: A = !1,
-    children: s,
-    ...K
-  } = i, [o, D] = m(
-    a || W(r.Children.toArray(s))
-  ), [w, x] = m(a);
-  a !== w && (a && D(a), x(a));
-  const k = (t) => {
-    C(t.currentTarget?.getAttribute("data-tabkey"));
-  }, S = H(
-    "DataTabsContainer",
-    d && "DataTab-bordered",
-    p,
-    A ? "DataTabs-vertical" : "DataTabs-horizontal"
-  ), F = () => {
-    if (l)
-      return r.Children.map(s, (e) => e ? r.cloneElement(e, {
-        active: e.props.tabKey === o,
-        disableTransition: l
-      }) : null);
-    const t = r.Children.toArray(s).filter((e) => e.props.tabKey === o).map((e) => r.cloneElement(e, { active: !0, disableTransition: l }));
-    return /* @__PURE__ */ n(E, { initial: !1, mode: "wait", children: t });
-  };
-  return /* @__PURE__ */ j("div", { ...K, className: S, children: [
-    /* @__PURE__ */ n("div", { className: `DataTabsWrapper ${y}`, children: /* @__PURE__ */ n("ul", { className: "DataTabs", role: "tabList", children: r.Children.map(s, (t, e) => {
-      if (!t)
-        return null;
-      const { tabKey: b, title: L, className: P } = t.props;
-      return /* @__PURE__ */ n(
-        I,
-        {
-          isActive: b === o,
-          tabKey: b,
-          title: L,
-          onSelectTab: k,
-          isFirstTab: e === 0,
-          isLastTab: !!(s?.length - 1),
-          tabFirstChildClassName: T,
-          tabLastChildClassName: g,
-          tabActiveClassName: u,
-          tabClassName: v,
-          tabHoverClassName: f,
-          arrowClassName: h,
-          className: P
-        }
-      );
-    }) }) }),
-    /* @__PURE__ */ n("div", { className: `tab-content ${N}`, role: "tabpanel", children: c || F() })
-  ] });
+import e from "../../utils/classNames.js";
+import t from "./DataTabHeader.js";
+import n, { useState as r } from "react";
+import { AnimatePresence as i } from "motion/react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/dataTabs/DataTabs.tsx
+var s = (e) => {
+	let [t] = e;
+	return t?.props.tabKey;
+}, c = (c) => {
+	let { activeKey: l = "", bordered: u = !0, className: d, commonTabContent: f, disableTransition: p = !1, arrowClassName: m = "bg-highlight-dark border-color-transparent", onSelectTab: h = () => {}, tabActiveClassName: g = "bg-highlight-dark text-color-white", tabClassName: _ = "", tabContentClassName: v = "", tabFirstChildClassName: y = "", tabHoverClassName: b = "bg-highlight-decent text-color-darkest", tabLastChildClassName: x = "", tabsWrapperClassName: S = "", vertical: C = !1, children: w, ...T } = c, [E, D] = r(l || s(n.Children.toArray(w))), [O, k] = r(l);
+	l !== O && (l && D(l), k(l));
+	let A = (e) => {
+		h(e.currentTarget?.getAttribute("data-tabkey"));
+	}, j = e("DataTabsContainer", u && "DataTab-bordered", d, C ? "DataTabs-vertical" : "DataTabs-horizontal"), M = () => p ? n.Children.map(w, (e) => e ? n.cloneElement(e, {
+		active: e.props.tabKey === E,
+		disableTransition: p
+	}) : null) : /* @__PURE__ */ a(i, {
+		initial: !1,
+		mode: "wait",
+		children: n.Children.toArray(w).filter((e) => e.props.tabKey === E).map((e) => n.cloneElement(e, {
+			active: !0,
+			disableTransition: p
+		}))
+	});
+	return /* @__PURE__ */ o("div", {
+		...T,
+		className: j,
+		children: [/* @__PURE__ */ a("div", {
+			className: `DataTabsWrapper ${S}`,
+			children: /* @__PURE__ */ a("ul", {
+				className: "DataTabs",
+				role: "tabList",
+				children: n.Children.map(w, (e, n) => {
+					if (!e) return null;
+					let { tabKey: r, title: i, className: o } = e.props;
+					return /* @__PURE__ */ a(t, {
+						isActive: r === E,
+						tabKey: r,
+						title: i,
+						onSelectTab: A,
+						isFirstTab: n === 0,
+						isLastTab: !!(w?.length - 1),
+						tabFirstChildClassName: y,
+						tabLastChildClassName: x,
+						tabActiveClassName: g,
+						tabClassName: _,
+						tabHoverClassName: b,
+						arrowClassName: m,
+						className: o
+					});
+				})
+			})
+		}), /* @__PURE__ */ a("div", {
+			className: `tab-content ${v}`,
+			role: "tabpanel",
+			children: f || M()
+		})]
+	});
 };
-export {
-  G as default
-};
-//# sourceMappingURL=DataTabs.js.map
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=DataTabs.js.map

package/components/dataTabs/DataTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTabs.js","sources":["../../../src/components/dataTabs/DataTabs.tsx"],"sourcesContent":["import React, { type PropsWithChildren, useState } from 'react';\nimport { AnimatePresence } from 'motion/react';\n\nimport classNames from '../../utils/classNames';\nimport type { DataTabProps } from './DataTab';\nimport DataTabHeader from './DataTabHeader';\n\ntype DataTabElement = React.ReactElement<DataTabProps>;\n\nconst getFirstTabKey = (children: React.ReactNode): string => {\n    const [firstItem] = children as DataTabElement[];\n    return firstItem?.props.tabKey;\n};\n\nexport type DataTabsProps = {\n    /**\n     * Sets key and id.\n     *\n     * @default ''\n     */\n    activeKey?: string;\n\n    /**\n     * Whether the component should add a border.\n     *\n     * @default true\n     */\n    bordered?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Tab content that is used for all tabs.\n     *\n     * Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when\n     * switching tabs as it is a single tab content component.\n     */\n    commonTabContent?: React.ReactNode;\n\n    /**\n     * Transitions between tab contents are enabled by default. Set if you want to disable them.\n     *\n     * The Navigation tabs will still remain animated.\n     *\n     * @default false\n     */\n    disableTransition?: boolean;\n\n    /**\n     * Additional classes to be set on the arrow.\n     *\n     * @default 'bg-highlight-dark border-color-transparent'\n     */\n    arrowClassName?: string;\n\n    /**\n     * Called when a tab is being activated.\n     *\n     * @param tabKey Of the activated tab.\n     */\n    onSelectTab?: (tabKey: string) => void;\n\n    /**\n     * Additional classes to be set on the tab element.\n     */\n    tabClassName?: string;\n\n    /**\n     * Utility hover classes to be set on the tab element.\n     *\n     * @default 'bg-highlight-decent text-color-darkest'\n     */\n    tabHoverClassName?: string;\n\n    /**\n     * Utility active classes to be set on the tab element.\n     *\n     * @default 'bg-highlight-dark text-color-white'\n     */\n    tabActiveClassName?: string;\n\n    /**\n     * Utility first-child classes to be set on the tab element.\n     */\n    tabFirstChildClassName?: string;\n\n    /**\n     * Utility last-child classes to be set on the tab element.\n     */\n    tabLastChildClassName?: string;\n\n    /**\n     * Utility content classes to be set on the tab element.\n     */\n    tabContentClassName?: string;\n\n    /**\n     * Additional classes to be set on the tabs wrapper element.\n     */\n    tabsWrapperClassName?: string;\n\n    /**\n     * Whether the layout should be vertical.\n     *\n     * @default false\n     */\n    vertical?: boolean;\n};\n\nconst DataTabs = (props: PropsWithChildren<DataTabsProps>) => {\n    const {\n        activeKey = '',\n        bordered = true,\n        className: wrapperClassName,\n        commonTabContent,\n        disableTransition = false,\n        arrowClassName = 'bg-highlight-dark border-color-transparent',\n        onSelectTab = () => {},\n        tabActiveClassName = 'bg-highlight-dark text-color-white',\n        tabClassName = '',\n        tabContentClassName = '',\n        tabFirstChildClassName = '',\n        tabHoverClassName = 'bg-highlight-decent text-color-darkest',\n        tabLastChildClassName = '',\n        tabsWrapperClassName = '',\n        vertical = false,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [internalActiveKey, setInternalActiveKey] = useState(\n        activeKey || getFirstTabKey(React.Children.toArray(children))\n    );\n\n    // Update internal activeKey when props change\n    const [previousActiveKey, setPreviousActiveKey] = useState(activeKey);\n    if (activeKey !== previousActiveKey) {\n        activeKey && setInternalActiveKey(activeKey);\n        setPreviousActiveKey(activeKey);\n    }\n\n    const handleSelectTab = (event: React.MouseEvent<HTMLLIElement>) => {\n        onSelectTab(event.currentTarget?.getAttribute('data-tabkey') as string);\n    };\n\n    const wrapperClassNames = classNames(\n        'DataTabsContainer',\n        bordered && 'DataTab-bordered',\n        wrapperClassName,\n        vertical ? 'DataTabs-vertical' : 'DataTabs-horizontal'\n    );\n\n    const enrichChildren = () => {\n        if (disableTransition) {\n            return React.Children.map(children as DataTabElement[], child => {\n                if (!child) {\n                    return null;\n                }\n                return React.cloneElement(child, {\n                    active: child.props.tabKey === internalActiveKey,\n                    disableTransition,\n                });\n            });\n        }\n\n        const enhancedChildren = (React.Children.toArray(children) as DataTabElement[])\n            .filter(child => child.props.tabKey === internalActiveKey)\n            .map(child => React.cloneElement(child, { active: true, disableTransition }));\n\n        return (\n            <AnimatePresence initial={false} mode='wait'>\n                {enhancedChildren}\n            </AnimatePresence>\n        );\n    };\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames}>\n            <div className={`DataTabsWrapper ${tabsWrapperClassName}`}>\n                <ul className='DataTabs' role='tabList'>\n                    {React.Children.map(children as DataTabElement[], (child, index) => {\n                        if (!child) {\n                            return null;\n                        }\n\n                        const { tabKey, title, className } = child.props;\n\n                        return (\n                            <DataTabHeader\n                                isActive={tabKey === internalActiveKey}\n                                tabKey={tabKey}\n                                title={title}\n                                onSelectTab={handleSelectTab}\n                                isFirstTab={index === 0}\n                                isLastTab={!!((children as DataTabElement[])?.length - 1)}\n                                tabFirstChildClassName={tabFirstChildClassName}\n                                tabLastChildClassName={tabLastChildClassName}\n                                tabActiveClassName={tabActiveClassName}\n                                tabClassName={tabClassName}\n                                tabHoverClassName={tabHoverClassName}\n                                arrowClassName={arrowClassName}\n                                className={className}\n                            />\n                        );\n                    })}\n                </ul>\n            </div>\n            <div className={`tab-content ${tabContentClassName}`} role='tabpanel'>\n                {commonTabContent ? commonTabContent : enrichChildren()}\n            </div>\n        </div>\n    );\n};\n\nexport default DataTabs;\n"],"names":["getFirstTabKey","children","firstItem","DataTabs","props","activeKey","bordered","wrapperClassName","commonTabContent","disableTransition","arrowClassName","onSelectTab","tabActiveClassName","tabClassName","tabContentClassName","tabFirstChildClassName","tabHoverClassName","tabLastChildClassName","tabsWrapperClassName","vertical","remainingProps","internalActiveKey","setInternalActiveKey","useState","React","previousActiveKey","setPreviousActiveKey","handleSelectTab","event","wrapperClassNames","classNames","enrichChildren","child","enhancedChildren","AnimatePresence","jsxs","jsx","index","tabKey","title","className","DataTabHeader"],"mappings":";;;;;AASA,MAAMA,IAAiB,CAACC,MAAsC;AAC1D,QAAM,CAACC,CAAS,IAAID;AACpB,SAAOC,GAAW,MAAM;AAC5B,GAoGMC,IAAW,CAACC,MAA4C;AAC1D,QAAM;AAAA,IACF,WAAAC,IAAY;AAAA,IACZ,UAAAC,IAAW;AAAA,IACX,WAAWC;AAAA,IACX,kBAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,gBAAAC,IAAiB;AAAA,IACjB,aAAAC,IAAc,MAAM;AAAA,IAAC;AAAA,IACrB,oBAAAC,IAAqB;AAAA,IACrB,cAAAC,IAAe;AAAA,IACf,qBAAAC,IAAsB;AAAA,IACtB,wBAAAC,IAAyB;AAAA,IACzB,mBAAAC,IAAoB;AAAA,IACpB,uBAAAC,IAAwB;AAAA,IACxB,sBAAAC,IAAuB;AAAA,IACvB,UAAAC,IAAW;AAAA,IACX,UAAAlB;AAAA,IACA,GAAGmB;AAAA,EAAA,IACHhB,GAEE,CAACiB,GAAmBC,CAAoB,IAAIC;AAAA,IAC9ClB,KAAaL,EAAewB,EAAM,SAAS,QAAQvB,CAAQ,CAAC;AAAA,EAAA,GAI1D,CAACwB,GAAmBC,CAAoB,IAAIH,EAASlB,CAAS;AACpE,EAAIA,MAAcoB,MACdpB,KAAaiB,EAAqBjB,CAAS,GAC3CqB,EAAqBrB,CAAS;AAGlC,QAAMsB,IAAkB,CAACC,MAA2C;AAChE,IAAAjB,EAAYiB,EAAM,eAAe,aAAa,aAAa,CAAW;AAAA,EAC1E,GAEMC,IAAoBC;AAAA,IACtB;AAAA,IACAxB,KAAY;AAAA,IACZC;AAAA,IACAY,IAAW,sBAAsB;AAAA,EAAA,GAG/BY,IAAiB,MAAM;AACzB,QAAItB;AACA,aAAOe,EAAM,SAAS,IAAIvB,GAA8B,CAAA+B,MAC/CA,IAGER,EAAM,aAAaQ,GAAO;AAAA,QAC7B,QAAQA,EAAM,MAAM,WAAWX;AAAA,QAC/B,mBAAAZ;AAAA,MAAA,CACH,IALU,IAMd;AAGL,UAAMwB,IAAoBT,EAAM,SAAS,QAAQvB,CAAQ,EACpD,OAAO,CAAA+B,MAASA,EAAM,MAAM,WAAWX,CAAiB,EACxD,IAAI,CAAAW,MAASR,EAAM,aAAaQ,GAAO,EAAE,QAAQ,IAAM,mBAAAvB,EAAA,CAAmB,CAAC;AAEhF,6BACKyB,GAAA,EAAgB,SAAS,IAAO,MAAK,QACjC,UAAAD,GACL;AAAA,EAER;AAEA,SACI,gBAAAE,EAAC,OAAA,EAAK,GAAGf,GAAgB,WAAWS,GAChC,UAAA;AAAA,IAAA,gBAAAO,EAAC,SAAI,WAAW,mBAAmBlB,CAAoB,IACnD,4BAAC,MAAA,EAAG,WAAU,YAAW,MAAK,WACzB,UAAAM,EAAM,SAAS,IAAIvB,GAA8B,CAAC+B,GAAOK,MAAU;AAChE,UAAI,CAACL;AACD,eAAO;AAGX,YAAM,EAAE,QAAAM,GAAQ,OAAAC,GAAO,WAAAC,EAAA,IAAcR,EAAM;AAE3C,aACI,gBAAAI;AAAA,QAACK;AAAA,QAAA;AAAA,UACG,UAAUH,MAAWjB;AAAA,UACrB,QAAAiB;AAAA,UACA,OAAAC;AAAA,UACA,aAAaZ;AAAA,UACb,YAAYU,MAAU;AAAA,UACtB,WAAW,CAAC,EAAGpC,GAA+B,SAAS;AAAA,UACvD,wBAAAc;AAAA,UACA,uBAAAE;AAAA,UACA,oBAAAL;AAAA,UACA,cAAAC;AAAA,UACA,mBAAAG;AAAA,UACA,gBAAAN;AAAA,UACA,WAAA8B;AAAA,QAAA;AAAA,MAAA;AAAA,IAGZ,CAAC,GACL,GACJ;AAAA,IACA,gBAAAJ,EAAC,OAAA,EAAI,WAAW,eAAetB,CAAmB,IAAI,MAAK,YACtD,UAAAN,KAAsCuB,EAAA,EAAe,CAC1D;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"DataTabs.js","names":[],"sources":["../../../src/components/dataTabs/DataTabs.tsx"],"sourcesContent":["import React, { type PropsWithChildren, useState } from 'react';\nimport { AnimatePresence } from 'motion/react';\n\nimport classNames from '../../utils/classNames';\nimport type { DataTabProps } from './DataTab';\nimport DataTabHeader from './DataTabHeader';\n\ntype DataTabElement = React.ReactElement<DataTabProps>;\n\nconst getFirstTabKey = (children: React.ReactNode): string => {\n    const [firstItem] = children as DataTabElement[];\n    return firstItem?.props.tabKey;\n};\n\nexport type DataTabsProps = {\n    /**\n     * Sets key and id.\n     *\n     * @default ''\n     */\n    activeKey?: string;\n\n    /**\n     * Whether the component should add a border.\n     *\n     * @default true\n     */\n    bordered?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Tab content that is used for all tabs.\n     *\n     * Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when\n     * switching tabs as it is a single tab content component.\n     */\n    commonTabContent?: React.ReactNode;\n\n    /**\n     * Transitions between tab contents are enabled by default. Set if you want to disable them.\n     *\n     * The Navigation tabs will still remain animated.\n     *\n     * @default false\n     */\n    disableTransition?: boolean;\n\n    /**\n     * Additional classes to be set on the arrow.\n     *\n     * @default 'bg-highlight-dark border-color-transparent'\n     */\n    arrowClassName?: string;\n\n    /**\n     * Called when a tab is being activated.\n     *\n     * @param tabKey Of the activated tab.\n     */\n    onSelectTab?: (tabKey: string) => void;\n\n    /**\n     * Additional classes to be set on the tab element.\n     */\n    tabClassName?: string;\n\n    /**\n     * Utility hover classes to be set on the tab element.\n     *\n     * @default 'bg-highlight-decent text-color-darkest'\n     */\n    tabHoverClassName?: string;\n\n    /**\n     * Utility active classes to be set on the tab element.\n     *\n     * @default 'bg-highlight-dark text-color-white'\n     */\n    tabActiveClassName?: string;\n\n    /**\n     * Utility first-child classes to be set on the tab element.\n     */\n    tabFirstChildClassName?: string;\n\n    /**\n     * Utility last-child classes to be set on the tab element.\n     */\n    tabLastChildClassName?: string;\n\n    /**\n     * Utility content classes to be set on the tab element.\n     */\n    tabContentClassName?: string;\n\n    /**\n     * Additional classes to be set on the tabs wrapper element.\n     */\n    tabsWrapperClassName?: string;\n\n    /**\n     * Whether the layout should be vertical.\n     *\n     * @default false\n     */\n    vertical?: boolean;\n};\n\nconst DataTabs = (props: PropsWithChildren<DataTabsProps>) => {\n    const {\n        activeKey = '',\n        bordered = true,\n        className: wrapperClassName,\n        commonTabContent,\n        disableTransition = false,\n        arrowClassName = 'bg-highlight-dark border-color-transparent',\n        onSelectTab = () => {},\n        tabActiveClassName = 'bg-highlight-dark text-color-white',\n        tabClassName = '',\n        tabContentClassName = '',\n        tabFirstChildClassName = '',\n        tabHoverClassName = 'bg-highlight-decent text-color-darkest',\n        tabLastChildClassName = '',\n        tabsWrapperClassName = '',\n        vertical = false,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [internalActiveKey, setInternalActiveKey] = useState(\n        activeKey || getFirstTabKey(React.Children.toArray(children))\n    );\n\n    // Update internal activeKey when props change\n    const [previousActiveKey, setPreviousActiveKey] = useState(activeKey);\n    if (activeKey !== previousActiveKey) {\n        activeKey && setInternalActiveKey(activeKey);\n        setPreviousActiveKey(activeKey);\n    }\n\n    const handleSelectTab = (event: React.MouseEvent<HTMLLIElement>) => {\n        onSelectTab(event.currentTarget?.getAttribute('data-tabkey') as string);\n    };\n\n    const wrapperClassNames = classNames(\n        'DataTabsContainer',\n        bordered && 'DataTab-bordered',\n        wrapperClassName,\n        vertical ? 'DataTabs-vertical' : 'DataTabs-horizontal'\n    );\n\n    const enrichChildren = () => {\n        if (disableTransition) {\n            return React.Children.map(children as DataTabElement[], child => {\n                if (!child) {\n                    return null;\n                }\n                return React.cloneElement(child, {\n                    active: child.props.tabKey === internalActiveKey,\n                    disableTransition,\n                });\n            });\n        }\n\n        const enhancedChildren = (React.Children.toArray(children) as DataTabElement[])\n            .filter(child => child.props.tabKey === internalActiveKey)\n            .map(child => React.cloneElement(child, { active: true, disableTransition }));\n\n        return (\n            <AnimatePresence initial={false} mode='wait'>\n                {enhancedChildren}\n            </AnimatePresence>\n        );\n    };\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames}>\n            <div className={`DataTabsWrapper ${tabsWrapperClassName}`}>\n                <ul className='DataTabs' role='tabList'>\n                    {React.Children.map(children as DataTabElement[], (child, index) => {\n                        if (!child) {\n                            return null;\n                        }\n\n                        const { tabKey, title, className } = child.props;\n\n                        return (\n                            <DataTabHeader\n                                isActive={tabKey === internalActiveKey}\n                                tabKey={tabKey}\n                                title={title}\n                                onSelectTab={handleSelectTab}\n                                isFirstTab={index === 0}\n                                isLastTab={!!((children as DataTabElement[])?.length - 1)}\n                                tabFirstChildClassName={tabFirstChildClassName}\n                                tabLastChildClassName={tabLastChildClassName}\n                                tabActiveClassName={tabActiveClassName}\n                                tabClassName={tabClassName}\n                                tabHoverClassName={tabHoverClassName}\n                                arrowClassName={arrowClassName}\n                                className={className}\n                            />\n                        );\n                    })}\n                </ul>\n            </div>\n            <div className={`tab-content ${tabContentClassName}`} role='tabpanel'>\n                {commonTabContent ? commonTabContent : enrichChildren()}\n            </div>\n        </div>\n    );\n};\n\nexport default DataTabs;\n"],"mappings":";;;;;;AASA,IAAM,KAAkB,MAAsC;CAC1D,IAAM,CAAC,KAAa;CACpB,OAAO,GAAW,MAAM;AAC5B,GAoGM,KAAY,MAA4C;CAC1D,IAAM,EACF,eAAY,IACZ,cAAW,IACX,WAAW,GACX,qBACA,uBAAoB,IACpB,oBAAiB,8CACjB,uBAAoB,CAAC,GACrB,wBAAqB,sCACrB,kBAAe,IACf,yBAAsB,IACtB,4BAAyB,IACzB,uBAAoB,0CACpB,2BAAwB,IACxB,0BAAuB,IACvB,cAAW,IACX,aACA,GAAG,MACH,GAEE,CAAC,GAAmB,KAAwB,EAC9C,KAAa,EAAe,EAAM,SAAS,QAAQ,CAAQ,CAAC,CAChE,GAGM,CAAC,GAAmB,KAAwB,EAAS,CAAS;CACpE,AAAI,MAAc,MACd,KAAa,EAAqB,CAAS,GAC3C,EAAqB,CAAS;CAGlC,IAAM,KAAmB,MAA2C;EAChE,EAAY,EAAM,eAAe,aAAa,aAAa,CAAW;CAC1E,GAEM,IAAoB,EACtB,qBACA,KAAY,oBACZ,GACA,IAAW,sBAAsB,qBACrC,GAEM,UACE,IACO,EAAM,SAAS,IAAI,IAA8B,MAC/C,IAGE,EAAM,aAAa,GAAO;EAC7B,QAAQ,EAAM,MAAM,WAAW;EAC/B;CACJ,CAAC,IALU,IAMd,IAQD,kBAAC,GAAD;EAAiB,SAAS;EAAO,MAAK;YALhB,EAAM,SAAS,QAAQ,CAAQ,CAAC,CACrD,QAAO,MAAS,EAAM,MAAM,WAAW,CAAiB,CAAC,CACzD,KAAI,MAAS,EAAM,aAAa,GAAO;GAAE,QAAQ;GAAM;EAAkB,CAAC,CAItE;CACY,CAAA;CAIzB,OACI,kBAAC,OAAD;EAAK,GAAI;EAAgB,WAAW;YAApC,CACI,kBAAC,OAAD;GAAK,WAAW,mBAAmB;aAC/B,kBAAC,MAAD;IAAI,WAAU;IAAW,MAAK;cACzB,EAAM,SAAS,IAAI,IAA+B,GAAO,MAAU;KAChE,IAAI,CAAC,GACD,OAAO;KAGX,IAAM,EAAE,WAAQ,UAAO,iBAAc,EAAM;KAE3C,OACI,kBAAC,GAAD;MACI,UAAU,MAAW;MACb;MACD;MACP,aAAa;MACb,YAAY,MAAU;MACtB,WAAW,CAAC,EAAG,GAA+B,SAAS;MAC/B;MACD;MACH;MACN;MACK;MACH;MACL;KACd,CAAA;IAET,CAAC;GACD,CAAA;EACH,CAAA,GACL,kBAAC,OAAD;GAAK,WAAW,eAAe;GAAuB,MAAK;aACtD,KAAsC,EAAe;EACrD,CAAA,CACJ;;AAEb"}