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

package/components/banner/BannerActions.js

@@ -1,6 +1,11 @@
-import { jsx as a } from "react/jsx-runtime";
-const e = ({ className: n = "", children: o, ...t }) => /* @__PURE__ */ a("div", { className: `BannerActions flex-0 btn-toolbar ${n}`, ...t, children: o });
-export {
-  e as default
-};
-//# sourceMappingURL=BannerActions.js.map
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/banner/BannerActions.tsx
+var t = ({ className: t = "", children: n, ...r }) => /* @__PURE__ */ e("div", {
+	className: `BannerActions flex-0 btn-toolbar ${t}`,
+	...r,
+	children: n
+});
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=BannerActions.js.map

package/components/banner/BannerActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerActions.js","sources":["../../../src/components/banner/BannerActions.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nexport type BannerActionsProps = {\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n};\n\nconst BannerActions = ({ className = '', children, ...remainingProps }: PropsWithChildren<BannerActionsProps>) => (\n    <div className={`BannerActions flex-0 btn-toolbar ${className}`} {...remainingProps}>\n        {children}\n    </div>\n);\n\nexport default BannerActions;\n"],"names":["BannerActions","className","children","remainingProps","jsx"],"mappings":";AASA,MAAMA,IAAgB,CAAC,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,EAAA,MAClD,gBAAAC,EAAC,SAAI,WAAW,oCAAoCH,CAAS,IAAK,GAAGE,GAChE,UAAAD,EAAA,CACL;"}
+{"version":3,"file":"BannerActions.js","names":[],"sources":["../../../src/components/banner/BannerActions.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nexport type BannerActionsProps = {\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n};\n\nconst BannerActions = ({ className = '', children, ...remainingProps }: PropsWithChildren<BannerActionsProps>) => (\n    <div className={`BannerActions flex-0 btn-toolbar ${className}`} {...remainingProps}>\n        {children}\n    </div>\n);\n\nexport default BannerActions;\n"],"mappings":";;AASA,IAAM,KAAiB,EAAE,eAAY,IAAI,aAAU,GAAG,QAClD,kBAAC,OAAD;CAAK,WAAW,oCAAoC;CAAa,GAAI;CAChE;AACA,CAAA"}

package/components/banner/BannerContent.js

@@ -1,33 +1,30 @@
-import { jsxs as t, jsx as s } from "react/jsx-runtime";
-import f from "../../utils/classNames.js";
-import x from "../../hooks/useResizeObserver.js";
-const h = 400, z = (r) => {
-  const {
-    title: e,
-    actions: n,
-    children: i,
-    minWidthBreakpoint: a = h,
-    className: c = "",
-    ...l
-  } = r, [o, N, { inlineSize: m }] = x(), d = f(
-    "flex-1-1",
-    "BannerContent",
-    "display-flex gap-15",
-    (m ?? 0) < a ? "flex-column" : "flex-row align-items-center",
-    c
-  );
-  return n ? /* @__PURE__ */ t("div", { ref: o, className: d, ...l, children: [
-    /* @__PURE__ */ t("div", { className: "flex-1-1 min-width-100", children: [
-      e && /* @__PURE__ */ s("div", { className: "text-size-16 text-medium", children: e }),
-      i
-    ] }),
-    n
-  ] }) : /* @__PURE__ */ t("div", { className: "flex-1-1", children: [
-    e && /* @__PURE__ */ s("div", { className: "text-size-16 text-medium", children: e }),
-    i
-  ] });
+import e from "../../hooks/useResizeObserver.js";
+import "../../useResizeObserver.js";
+import t from "../../utils/classNames.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/banner/BannerContent.tsx
+var i = 400, a = (a) => {
+	let { title: o, actions: s, children: c, minWidthBreakpoint: l = i, className: u = "", ...d } = a, [f, p, { inlineSize: m }] = e(), h = t("flex-1-1", "BannerContent", "display-flex gap-15", (m ?? 0) < l ? "flex-column" : "flex-row align-items-center", u);
+	return s ? /* @__PURE__ */ r("div", {
+		ref: f,
+		className: h,
+		...d,
+		children: [/* @__PURE__ */ r("div", {
+			className: "flex-1-1 min-width-100",
+			children: [o && /* @__PURE__ */ n("div", {
+				className: "text-size-16 text-medium",
+				children: o
+			}), c]
+		}), s]
+	}) : /* @__PURE__ */ r("div", {
+		className: "flex-1-1",
+		children: [o && /* @__PURE__ */ n("div", {
+			className: "text-size-16 text-medium",
+			children: o
+		}), c]
+	});
 };
-export {
-  z as default
-};
-//# sourceMappingURL=BannerContent.js.map
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=BannerContent.js.map

package/components/banner/BannerContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerContent.js","sources":["../../../src/components/banner/BannerContent.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport useResizeObserver from '../../useResizeObserver';\n\nconst DEFAULT_MIN_WIDTH_BREAKPOINT = 400;\n\ntype BannerContentProps = Partial<Pick<HTMLDivElement, 'id'>> & {\n    /**\n     * The title for the banner.\n     */\n    title?: string | React.ReactElement;\n\n    /**\n     * Use this to add the banner call-to-action buttons. Wrap them in a <Banner.Actions> component.\n     */\n    actions?: React.ReactElement;\n\n    /**\n     * Breakpoint in pixels where the action buttons are placed under the banner text.\n     *\n     * On larger screens, the buttons are next to the text.\n     *\n     * @default 400\n     */\n    minWidthBreakpoint?: number;\n\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n};\n\nconst BannerContent = (props: PropsWithChildren<BannerContentProps>) => {\n    const {\n        title,\n        actions,\n        children,\n        minWidthBreakpoint = DEFAULT_MIN_WIDTH_BREAKPOINT,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    // Check size of the container for responsive breakpoints\n    const [contentRef, _, { inlineSize }] = useResizeObserver();\n    const containerWidth = inlineSize ?? 0;\n\n    const contentWithActionClass = classNames(\n        'flex-1-1',\n        'BannerContent',\n        'display-flex gap-15',\n        containerWidth < minWidthBreakpoint ? 'flex-column' : 'flex-row align-items-center',\n        className\n    );\n\n    if (actions) {\n        return (\n            <div ref={contentRef} className={contentWithActionClass} {...remainingProps}>\n                <div className='flex-1-1 min-width-100'>\n                    {title && <div className='text-size-16 text-medium'>{title}</div>}\n                    {children}\n                </div>\n                {actions}\n            </div>\n        );\n    }\n\n    return (\n        <div className='flex-1-1'>\n            {title && <div className='text-size-16 text-medium'>{title}</div>}\n            {children}\n        </div>\n    );\n};\n\nexport default BannerContent;\n"],"names":["DEFAULT_MIN_WIDTH_BREAKPOINT","BannerContent","props","title","actions","children","minWidthBreakpoint","className","remainingProps","contentRef","_","inlineSize","useResizeObserver","contentWithActionClass","classNames","jsxs","jsx"],"mappings":";;;AAKA,MAAMA,IAA+B,KA4B/BC,IAAgB,CAACC,MAAiD;AACpE,QAAM;AAAA,IACF,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAAC,IAAqBN;AAAA,IACrB,WAAAO,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACHN,GAGE,CAACO,GAAYC,GAAG,EAAE,YAAAC,EAAA,CAAY,IAAIC,EAAA,GAGlCC,IAAyBC;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,KALmBH,KAAc,KAMhBL,IAAqB,gBAAgB;AAAA,IACtDC;AAAA,EAAA;AAGJ,SAAIH,sBAEK,OAAA,EAAI,KAAKK,GAAY,WAAWI,GAAyB,GAAGL,GACzD,UAAA;AAAA,IAAA,gBAAAO,EAAC,OAAA,EAAI,WAAU,0BACV,UAAA;AAAA,MAAAZ,KAAS,gBAAAa,EAAC,OAAA,EAAI,WAAU,4BAA4B,UAAAb,GAAM;AAAA,MAC1DE;AAAA,IAAA,GACL;AAAA,IACCD;AAAA,EAAA,GACL,IAKJ,gBAAAW,EAAC,OAAA,EAAI,WAAU,YACV,UAAA;AAAA,IAAAZ,KAAS,gBAAAa,EAAC,OAAA,EAAI,WAAU,4BAA4B,UAAAb,GAAM;AAAA,IAC1DE;AAAA,EAAA,GACL;AAER;"}
+{"version":3,"file":"BannerContent.js","names":[],"sources":["../../../src/components/banner/BannerContent.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport useResizeObserver from '../../useResizeObserver';\n\nconst DEFAULT_MIN_WIDTH_BREAKPOINT = 400;\n\ntype BannerContentProps = Partial<Pick<HTMLDivElement, 'id'>> & {\n    /**\n     * The title for the banner.\n     */\n    title?: string | React.ReactElement;\n\n    /**\n     * Use this to add the banner call-to-action buttons. Wrap them in a <Banner.Actions> component.\n     */\n    actions?: React.ReactElement;\n\n    /**\n     * Breakpoint in pixels where the action buttons are placed under the banner text.\n     *\n     * On larger screens, the buttons are next to the text.\n     *\n     * @default 400\n     */\n    minWidthBreakpoint?: number;\n\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n};\n\nconst BannerContent = (props: PropsWithChildren<BannerContentProps>) => {\n    const {\n        title,\n        actions,\n        children,\n        minWidthBreakpoint = DEFAULT_MIN_WIDTH_BREAKPOINT,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    // Check size of the container for responsive breakpoints\n    const [contentRef, _, { inlineSize }] = useResizeObserver();\n    const containerWidth = inlineSize ?? 0;\n\n    const contentWithActionClass = classNames(\n        'flex-1-1',\n        'BannerContent',\n        'display-flex gap-15',\n        containerWidth < minWidthBreakpoint ? 'flex-column' : 'flex-row align-items-center',\n        className\n    );\n\n    if (actions) {\n        return (\n            <div ref={contentRef} className={contentWithActionClass} {...remainingProps}>\n                <div className='flex-1-1 min-width-100'>\n                    {title && <div className='text-size-16 text-medium'>{title}</div>}\n                    {children}\n                </div>\n                {actions}\n            </div>\n        );\n    }\n\n    return (\n        <div className='flex-1-1'>\n            {title && <div className='text-size-16 text-medium'>{title}</div>}\n            {children}\n        </div>\n    );\n};\n\nexport default BannerContent;\n"],"mappings":";;;;;AAKA,IAAM,IAA+B,KA4B/B,KAAiB,MAAiD;CACpE,IAAM,EACF,UACA,YACA,aACA,wBAAqB,GACrB,eAAY,IACZ,GAAG,MACH,GAGE,CAAC,GAAY,GAAG,EAAE,mBAAgB,EAAkB,GAGpD,IAAyB,EAC3B,YACA,iBACA,wBALmB,KAAc,KAMhB,IAAqB,gBAAgB,+BACtD,CACJ;CAcA,OAZI,IAEI,kBAAC,OAAD;EAAK,KAAK;EAAY,WAAW;EAAwB,GAAI;YAA7D,CACI,kBAAC,OAAD;GAAK,WAAU;aAAf,CACK,KAAS,kBAAC,OAAD;IAAK,WAAU;cAA4B;GAAW,CAAA,GAC/D,CACA;MACJ,CACA;MAKT,kBAAC,OAAD;EAAK,WAAU;YAAf,CACK,KAAS,kBAAC,OAAD;GAAK,WAAU;aAA4B;EAAW,CAAA,GAC/D,CACA;;AAEb"}

package/components/banner/BannerIcon.js

@@ -1,6 +1,11 @@
-import { jsx as o } from "react/jsx-runtime";
-const i = ({ className: n = "", children: a, ...e }) => /* @__PURE__ */ o("div", { className: `BannerIcon flex-0 margin-x-5 min-width-25 ${n}`, ...e, children: a });
-export {
-  i as default
-};
-//# sourceMappingURL=BannerIcon.js.map
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/banner/BannerIcon.tsx
+var t = ({ className: t = "", children: n, ...r }) => /* @__PURE__ */ e("div", {
+	className: `BannerIcon flex-0 margin-x-5 min-width-25 ${t}`,
+	...r,
+	children: n
+});
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=BannerIcon.js.map

package/components/banner/BannerIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerIcon.js","sources":["../../../src/components/banner/BannerIcon.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nexport type BannerIconProps = {\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n};\n\nconst BannerIcon = ({ className = '', children, ...remainingProps }: PropsWithChildren<BannerIconProps>) => (\n    <div className={`BannerIcon flex-0 margin-x-5 min-width-25 ${className}`} {...remainingProps}>\n        {children}\n    </div>\n);\n\nexport default BannerIcon;\n"],"names":["BannerIcon","className","children","remainingProps","jsx"],"mappings":";AASA,MAAMA,IAAa,CAAC,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,EAAA,MAC/C,gBAAAC,EAAC,SAAI,WAAW,6CAA6CH,CAAS,IAAK,GAAGE,GACzE,UAAAD,EAAA,CACL;"}
+{"version":3,"file":"BannerIcon.js","names":[],"sources":["../../../src/components/banner/BannerIcon.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nexport type BannerIconProps = {\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n};\n\nconst BannerIcon = ({ className = '', children, ...remainingProps }: PropsWithChildren<BannerIconProps>) => (\n    <div className={`BannerIcon flex-0 margin-x-5 min-width-25 ${className}`} {...remainingProps}>\n        {children}\n    </div>\n);\n\nexport default BannerIcon;\n"],"mappings":";;AASA,IAAM,KAAc,EAAE,eAAY,IAAI,aAAU,GAAG,QAC/C,kBAAC,OAAD;CAAK,WAAW,6CAA6C;CAAa,GAAI;CACzE;AACA,CAAA"}

package/components/banner/BannerPage.js

@@ -1,13 +1,11 @@
-import { jsx as s } from "react/jsx-runtime";
-const l = ({ className: a = "", children: t, ...e }) => /* @__PURE__ */ s(
-  "div",
-  {
-    className: `display-flex align-items-start align-items-center-ls width-100pct gap-15 ${a}`,
-    ...e,
-    children: t
-  }
-);
-export {
-  l as default
-};
-//# sourceMappingURL=BannerPage.js.map
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/banner/BannerPage.tsx
+var t = ({ className: t = "", children: n, ...r }) => /* @__PURE__ */ e("div", {
+	className: `display-flex align-items-start align-items-center-ls width-100pct gap-15 ${t}`,
+	...r,
+	children: n
+});
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=BannerPage.js.map

package/components/banner/BannerPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerPage.js","sources":["../../../src/components/banner/BannerPage.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\ntype BannerPageProps = {\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n};\n\nconst BannerPage = ({ className = '', children, ...remainingProps }: PropsWithChildren<BannerPageProps>) => (\n    <div\n        className={`display-flex align-items-start align-items-center-ls width-100pct gap-15 ${className}`}\n        {...remainingProps}\n    >\n        {children}\n    </div>\n);\n\nexport default BannerPage;\n"],"names":["BannerPage","className","children","remainingProps","jsx"],"mappings":";AASA,MAAMA,IAAa,CAAC,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,QAC/C,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,4EAA4EH,CAAS;AAAA,IAC/F,GAAGE;AAAA,IAEH,UAAAD;AAAA,EAAA;AACL;"}
+{"version":3,"file":"BannerPage.js","names":[],"sources":["../../../src/components/banner/BannerPage.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\ntype BannerPageProps = {\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n};\n\nconst BannerPage = ({ className = '', children, ...remainingProps }: PropsWithChildren<BannerPageProps>) => (\n    <div\n        className={`display-flex align-items-start align-items-center-ls width-100pct gap-15 ${className}`}\n        {...remainingProps}\n    >\n        {children}\n    </div>\n);\n\nexport default BannerPage;\n"],"mappings":";;AASA,IAAM,KAAc,EAAE,eAAY,IAAI,aAAU,GAAG,QAC/C,kBAAC,OAAD;CACI,WAAW,4EAA4E;CACvF,GAAI;CAEH;AACA,CAAA"}

package/components/barList/BarList.js

@@ -1,118 +1,81 @@
-import { jsxs as h, jsx as e } from "react/jsx-runtime";
-import f, { useMemo as j } from "react";
-import { motion as u } from "motion/react";
-import n from "../../utils/classNames.js";
-import { SortDirection as A } from "../../utils/SortUtils.js";
-import { useSortedBars as H } from "./useSortedBars.js";
-const O = {
-  animate: {
-    transition: {
-      staggerChildren: 0.1
-    }
-  }
-}, R = {
-  initial: { width: 0 },
-  animate: (o) => ({
-    width: `${o}%`,
-    transition: { duration: 0.8, ease: "easeOut" }
-  })
-}, T = 25, _ = 0.5, g = (o, v) => {
-  const {
-    data: y = [],
-    valueFormatter: N = (a) => a.toString(),
-    showAnimation: s = !1,
-    onSelectRow: i,
-    referenceValue: l,
-    sortOrder: b = A.DESCENDING,
-    barColor: w = "bg-highlight-light",
-    labelColor: x = "text-color-darker",
-    background: k = "bg-transparent",
-    rowHeight: c = T,
-    opacity: C = _,
-    className: L = "",
-    ...B
-  } = o, r = H(y, b, (a) => a.value), [d, m] = f.useState(null), D = j(() => {
-    const a = l ?? Math.max(...r.map((t) => t.value), 0);
-    return r.map((t) => a === 0 || t.value === 0 ? 0 : Math.max(t.value / a * 100, 2));
-  }, [r, l]);
-  return /* @__PURE__ */ h(
-    "div",
-    {
-      ...B,
-      ref: v,
-      className: n("display-flex justify-content-between gap-15", L),
-      children: [
-        /* @__PURE__ */ e(
-          u.div,
-          {
-            variants: s ? O : void 0,
-            initial: "initial",
-            animate: "animate",
-            className: "width-100pct space-y-5",
-            children: r.map((a, t) => {
-              const E = D[t], p = a.color ?? x, I = a.barColor ?? w, S = a.background ?? k;
-              return /* @__PURE__ */ h(
-                "div",
-                {
-                  onMouseEnter: () => m(t),
-                  onMouseLeave: () => m(null),
-                  onClick: () => i?.(a),
-                  className: n(
-                    "position-relative width-100pct rounded-small",
-                    "transition-all transition-ease-in-out transition-duration-01",
-                    S,
-                    i && "cursor-pointer",
-                    d === t && "bg-lightest"
-                  ),
-                  children: [
-                    /* @__PURE__ */ e(
-                      u.div,
-                      {
-                        custom: E,
-                        variants: s ? R : void 0,
-                        className: n(
-                          "display-flex align-items-center rounded-small",
-                          "transition-all transition-ease-in-out transition-duration-01",
-                          I
-                        ),
-                        style: { height: `${c}px`, opacity: d === t ? 1 : C },
-                        role: "presentation"
-                      }
-                    ),
-                    /* @__PURE__ */ e("div", { className: "position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10", children: a.href ? /* @__PURE__ */ e(
-                      "a",
-                      {
-                        href: a.href,
-                        className: p,
-                        target: "_blank",
-                        rel: "noreferrer",
-                        onClick: (M) => M.stopPropagation(),
-                        children: a.name
-                      }
-                    ) : /* @__PURE__ */ e("div", { className: p, children: a.name }) })
-                  ]
-                },
-                a.key ?? a.name
-              );
-            })
-          }
-        ),
-        /* @__PURE__ */ e("div", { className: "space-y-5", children: r.map((a) => /* @__PURE__ */ e(
-          "div",
-          {
-            className: n("display-flex align-items-center justify-content-end"),
-            style: { height: `${c}px` },
-            children: /* @__PURE__ */ e("div", { className: "text-color-darkest", children: N(a.value) })
-          },
-          a.key ?? a.name
-        )) })
-      ]
-    }
-  );
+import { SortDirection as e } from "../../utils/SortUtils.js";
+import t from "../../utils/classNames.js";
+import { useSortedBars as n } from "./useSortedBars.js";
+import r, { useMemo as i } from "react";
+import { motion as a } from "motion/react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/barList/BarList.tsx
+var c = { animate: { transition: { staggerChildren: .1 } } }, l = {
+	initial: { width: 0 },
+	animate: (e) => ({
+		width: `${e}%`,
+		transition: {
+			duration: .8,
+			ease: "easeOut"
+		}
+	})
+}, u = 25, d = .5, f = (f, p) => {
+	let { data: m = [], valueFormatter: h = (e) => e.toString(), showAnimation: g = !1, onSelectRow: _, referenceValue: v, sortOrder: y = e.DESCENDING, barColor: b = "bg-highlight-light", labelColor: x = "text-color-darker", background: S = "bg-transparent", rowHeight: C = u, opacity: w = d, className: T = "", ...E } = f, D = n(m, y, (e) => e.value), [O, k] = r.useState(null), A = i(() => {
+		let e = v ?? Math.max(...D.map((e) => e.value), 0);
+		return D.map((t) => e === 0 || t.value === 0 ? 0 : Math.max(t.value / e * 100, 2));
+	}, [D, v]);
+	return /* @__PURE__ */ s("div", {
+		...E,
+		ref: p,
+		className: t("display-flex justify-content-between gap-15", T),
+		children: [/* @__PURE__ */ o(a.div, {
+			variants: g ? c : void 0,
+			initial: "initial",
+			animate: "animate",
+			className: "width-100pct space-y-5",
+			children: D.map((e, n) => {
+				let r = A[n], i = e.color ?? x, c = e.barColor ?? b;
+				return /* @__PURE__ */ s("div", {
+					onMouseEnter: () => k(n),
+					onMouseLeave: () => k(null),
+					onClick: () => _?.(e),
+					className: t("position-relative width-100pct rounded-small", "transition-all transition-ease-in-out transition-duration-01", e.background ?? S, _ && "cursor-pointer", O === n && "bg-lightest"),
+					children: [/* @__PURE__ */ o(a.div, {
+						custom: r,
+						variants: g ? l : void 0,
+						className: t("display-flex align-items-center rounded-small", "transition-all transition-ease-in-out transition-duration-01", c),
+						style: {
+							height: `${C}px`,
+							opacity: O === n ? 1 : w
+						},
+						role: "presentation"
+					}), /* @__PURE__ */ o("div", {
+						className: "position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10",
+						children: e.href ? /* @__PURE__ */ o("a", {
+							href: e.href,
+							className: i,
+							target: "_blank",
+							rel: "noreferrer",
+							onClick: (e) => e.stopPropagation(),
+							children: e.name
+						}) : /* @__PURE__ */ o("div", {
+							className: i,
+							children: e.name
+						})
+					})]
+				}, e.key ?? e.name);
+			})
+		}), /* @__PURE__ */ o("div", {
+			className: "space-y-5",
+			children: D.map((e) => /* @__PURE__ */ o("div", {
+				className: t("display-flex align-items-center justify-content-end"),
+				style: { height: `${C}px` },
+				children: /* @__PURE__ */ o("div", {
+					className: "text-color-darkest",
+					children: h(e.value)
+				})
+			}, e.key ?? e.name))
+		})]
+	});
 };
-g.displayName = "BarList";
-const W = f.forwardRef(g);
-export {
-  W as default
-};
-//# sourceMappingURL=BarList.js.map
+f.displayName = "BarList";
+var p = r.forwardRef(f);
+//#endregion
+export { p as default };
+
+//# sourceMappingURL=BarList.js.map

package/components/barList/BarList.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarList.js","sources":["../../../src/components/barList/BarList.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport classNames from '../../utils/classNames';\nimport { SortDirection, type SortDirectionType } from '../../utils/SortUtils';\nimport { useSortedBars } from './useSortedBars';\n\n/**\n * A single entry in the BarList.\n *\n * @template T Custom payload merged into the row data.\n */\nexport type BarListRow<T> = T & {\n    /**\n     * Optional unique identifier. Falls back to `name` when not provided.\n     */\n    key?: string;\n\n    /**\n     * Optional URL. When provided, the label renders as a link.\n     */\n    href?: string;\n\n    /**\n     * Numeric value used for sorting and bar width calculations.\n     */\n    value: number;\n\n    /**\n     * Label shown for the bar.\n     */\n    name: string;\n\n    /**\n     * Text color override for this specific row.\n     */\n    color?: string;\n\n    /**\n     * Progress color override for this specific row.\n     */\n    barColor?: string;\n\n    /**\n     * Background color override for this specific row.\n     */\n    background?: string;\n};\n\n/**\n * Props for the BarList component.\n *\n * @template T - The type of the custom data associated with each bar row.\n */\ntype BarListProps<T = unknown> = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * Array of bar row data to be rendered.\n     */\n    data: BarListRow<T>[];\n\n    /**\n     * Optional function to format the numeric value displayed on the right side of each bar.\n     * Can return a string or a React element.\n     *\n     * @example\n     * valueFormatter={(value) => `${value}%`}\n     */\n    valueFormatter?: (value: number) => string | React.ReactElement;\n\n    /**\n     * A reference value used to calculate relative widths.\n     * If not provided, the maximum value in `data` will be used.\n     *\n     * @default max(data.value)\n     */\n    referenceValue?: number;\n\n    /**\n     * Whether to animate the bar width transitions using Framer Motion.\n     *\n     * @default false\n     */\n    showAnimation?: boolean;\n\n    /**\n     * Callback fired when a bar is clicked.\n     *\n     * @param payload - The full data object of the clicked bar.\n     */\n    onSelectRow?: (payload: BarListRow<T>) => void;\n\n    /**\n     * The sort order for the bars. Options are 'asc', 'desc', or 'none'.\n     *\n     * @default 'none'\n     */\n    sortOrder?: SortDirectionType | 'none';\n\n    /**\n     * Height of each bar row in pixels.\n     *\n     * @default 32\n     */\n    rowHeight?: number;\n\n    /**\n     * Opacity applied to non-hovered bars (between 0 and 1).\n     *\n     * @default 0.5\n     */\n    opacity?: number;\n\n    /**\n     * CSS color string used for the active/progress portion of each bar.\n     *\n     * @default 'bg-highlight-light'\n     */\n    barColor?: string;\n\n    /**\n     * CSS color string used for the text labels.\n     *\n     * @default 'text-color-darker'\n     */\n    labelColor?: string;\n\n    /**\n     * CSS color string used for the bar background.\n     *\n     * @default 'bg-transparent'\n     */\n    background?: string;\n\n    /**\n     * Additional className added to the wrapper element.\n     */\n    className?: string;\n};\n\n// Animation variants\nconst containerVariants: Variants = {\n    animate: {\n        transition: {\n            staggerChildren: 0.1,\n        },\n    },\n};\n\nconst barVariants: Variants = {\n    initial: { width: 0 },\n    animate: (width: number) => ({\n        width: `${width}%`,\n        transition: { duration: 0.8, ease: 'easeOut' },\n    }),\n};\n\nconst DEFAULT_ROW_HEIGHT = 25;\nconst DEFAULT_OPACITY = 0.5;\n\nconst BarListInner = <T,>(props: BarListProps<T>, forwardedRef: React.ForwardedRef<HTMLDivElement>) => {\n    const {\n        data = [],\n        valueFormatter = value => value.toString(),\n        showAnimation = false,\n        onSelectRow,\n        referenceValue,\n        sortOrder = SortDirection.DESCENDING,\n        barColor = 'bg-highlight-light',\n        labelColor = 'text-color-darker',\n        background = 'bg-transparent',\n        rowHeight = DEFAULT_ROW_HEIGHT,\n        opacity = DEFAULT_OPACITY,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const sortedData = useSortedBars(data, sortOrder, item => item.value);\n\n    const [hoveredIndex, setHoveredIndex] = React.useState<number | null>(null);\n\n    const widths = useMemo(() => {\n        const base = referenceValue ?? Math.max(...sortedData.map(item => item.value), 0);\n        return sortedData.map(item => (base === 0 || item.value === 0 ? 0 : Math.max((item.value / base) * 100, 2)));\n    }, [sortedData, referenceValue]);\n\n    return (\n        <div\n            {...remainingProps}\n            ref={forwardedRef}\n            className={classNames('display-flex justify-content-between gap-15', className)}\n        >\n            <motion.div\n                variants={showAnimation ? containerVariants : undefined}\n                initial='initial'\n                animate='animate'\n                className='width-100pct space-y-5'\n            >\n                {sortedData.map((item, index) => {\n                    const width = widths[index];\n\n                    const itemLabelColor = item.color ?? labelColor;\n                    const itemBarColor = item.barColor ?? barColor;\n                    const itemBackground = item.background ?? background;\n\n                    return (\n                        <div\n                            key={item.key ?? item.name}\n                            onMouseEnter={() => setHoveredIndex(index)}\n                            onMouseLeave={() => setHoveredIndex(null)}\n                            onClick={() => onSelectRow?.(item)}\n                            className={classNames(\n                                'position-relative width-100pct rounded-small',\n                                'transition-all transition-ease-in-out transition-duration-01',\n                                itemBackground,\n                                onSelectRow && 'cursor-pointer',\n                                hoveredIndex === index && 'bg-lightest'\n                            )}\n                        >\n                            {/* Animated Progress Bar */}\n                            <motion.div\n                                custom={width}\n                                variants={showAnimation ? barVariants : undefined}\n                                className={classNames(\n                                    'display-flex align-items-center rounded-small',\n                                    'transition-all transition-ease-in-out transition-duration-01',\n                                    itemBarColor\n                                )}\n                                style={{ height: `${rowHeight}px`, opacity: hoveredIndex === index ? 1 : opacity }}\n                                role='presentation'\n                            />\n\n                            {/* Label */}\n                            <div className='position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10'>\n                                {item.href ? (\n                                    <a\n                                        href={item.href}\n                                        className={itemLabelColor}\n                                        target='_blank'\n                                        rel='noreferrer'\n                                        onClick={event => event.stopPropagation()}\n                                    >\n                                        {item.name}\n                                    </a>\n                                ) : (\n                                    <div className={itemLabelColor}>{item.name}</div>\n                                )}\n                            </div>\n                        </div>\n                    );\n                })}\n            </motion.div>\n\n            {/* legend */}\n            <div className='space-y-5'>\n                {sortedData.map(item => (\n                    <div\n                        key={item.key ?? item.name}\n                        className={classNames('display-flex align-items-center justify-content-end')}\n                        style={{ height: `${rowHeight}px` }}\n                    >\n                        <div className='text-color-darkest'>{valueFormatter(item.value)}</div>\n                    </div>\n                ))}\n            </div>\n        </div>\n    );\n};\n\nBarListInner.displayName = 'BarList';\n\nconst BarList = React.forwardRef(BarListInner) as <T>(\n    props: BarListProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => ReturnType<typeof BarListInner>;\n\nexport default BarList;\n"],"names":["containerVariants","barVariants","width","DEFAULT_ROW_HEIGHT","DEFAULT_OPACITY","BarListInner","props","forwardedRef","data","valueFormatter","value","showAnimation","onSelectRow","referenceValue","sortOrder","SortDirection","barColor","labelColor","background","rowHeight","opacity","className","remainingProps","sortedData","useSortedBars","item","hoveredIndex","setHoveredIndex","React","widths","useMemo","base","jsxs","classNames","jsx","motion","index","itemLabelColor","itemBarColor","itemBackground","event","BarList"],"mappings":"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"}
+{"version":3,"file":"BarList.js","names":[],"sources":["../../../src/components/barList/BarList.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport classNames from '../../utils/classNames';\nimport { SortDirection, type SortDirectionType } from '../../utils/SortUtils';\nimport { useSortedBars } from './useSortedBars';\n\n/**\n * A single entry in the BarList.\n *\n * @template T Custom payload merged into the row data.\n */\nexport type BarListRow<T> = T & {\n    /**\n     * Optional unique identifier. Falls back to `name` when not provided.\n     */\n    key?: string;\n\n    /**\n     * Optional URL. When provided, the label renders as a link.\n     */\n    href?: string;\n\n    /**\n     * Numeric value used for sorting and bar width calculations.\n     */\n    value: number;\n\n    /**\n     * Label shown for the bar.\n     */\n    name: string;\n\n    /**\n     * Text color override for this specific row.\n     */\n    color?: string;\n\n    /**\n     * Progress color override for this specific row.\n     */\n    barColor?: string;\n\n    /**\n     * Background color override for this specific row.\n     */\n    background?: string;\n};\n\n/**\n * Props for the BarList component.\n *\n * @template T - The type of the custom data associated with each bar row.\n */\ntype BarListProps<T = unknown> = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * Array of bar row data to be rendered.\n     */\n    data: BarListRow<T>[];\n\n    /**\n     * Optional function to format the numeric value displayed on the right side of each bar.\n     * Can return a string or a React element.\n     *\n     * @example\n     * valueFormatter={(value) => `${value}%`}\n     */\n    valueFormatter?: (value: number) => string | React.ReactElement;\n\n    /**\n     * A reference value used to calculate relative widths.\n     * If not provided, the maximum value in `data` will be used.\n     *\n     * @default max(data.value)\n     */\n    referenceValue?: number;\n\n    /**\n     * Whether to animate the bar width transitions using Framer Motion.\n     *\n     * @default false\n     */\n    showAnimation?: boolean;\n\n    /**\n     * Callback fired when a bar is clicked.\n     *\n     * @param payload - The full data object of the clicked bar.\n     */\n    onSelectRow?: (payload: BarListRow<T>) => void;\n\n    /**\n     * The sort order for the bars. Options are 'asc', 'desc', or 'none'.\n     *\n     * @default 'none'\n     */\n    sortOrder?: SortDirectionType | 'none';\n\n    /**\n     * Height of each bar row in pixels.\n     *\n     * @default 32\n     */\n    rowHeight?: number;\n\n    /**\n     * Opacity applied to non-hovered bars (between 0 and 1).\n     *\n     * @default 0.5\n     */\n    opacity?: number;\n\n    /**\n     * CSS color string used for the active/progress portion of each bar.\n     *\n     * @default 'bg-highlight-light'\n     */\n    barColor?: string;\n\n    /**\n     * CSS color string used for the text labels.\n     *\n     * @default 'text-color-darker'\n     */\n    labelColor?: string;\n\n    /**\n     * CSS color string used for the bar background.\n     *\n     * @default 'bg-transparent'\n     */\n    background?: string;\n\n    /**\n     * Additional className added to the wrapper element.\n     */\n    className?: string;\n};\n\n// Animation variants\nconst containerVariants: Variants = {\n    animate: {\n        transition: {\n            staggerChildren: 0.1,\n        },\n    },\n};\n\nconst barVariants: Variants = {\n    initial: { width: 0 },\n    animate: (width: number) => ({\n        width: `${width}%`,\n        transition: { duration: 0.8, ease: 'easeOut' },\n    }),\n};\n\nconst DEFAULT_ROW_HEIGHT = 25;\nconst DEFAULT_OPACITY = 0.5;\n\nconst BarListInner = <T,>(props: BarListProps<T>, forwardedRef: React.ForwardedRef<HTMLDivElement>) => {\n    const {\n        data = [],\n        valueFormatter = value => value.toString(),\n        showAnimation = false,\n        onSelectRow,\n        referenceValue,\n        sortOrder = SortDirection.DESCENDING,\n        barColor = 'bg-highlight-light',\n        labelColor = 'text-color-darker',\n        background = 'bg-transparent',\n        rowHeight = DEFAULT_ROW_HEIGHT,\n        opacity = DEFAULT_OPACITY,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const sortedData = useSortedBars(data, sortOrder, item => item.value);\n\n    const [hoveredIndex, setHoveredIndex] = React.useState<number | null>(null);\n\n    const widths = useMemo(() => {\n        const base = referenceValue ?? Math.max(...sortedData.map(item => item.value), 0);\n        return sortedData.map(item => (base === 0 || item.value === 0 ? 0 : Math.max((item.value / base) * 100, 2)));\n    }, [sortedData, referenceValue]);\n\n    return (\n        <div\n            {...remainingProps}\n            ref={forwardedRef}\n            className={classNames('display-flex justify-content-between gap-15', className)}\n        >\n            <motion.div\n                variants={showAnimation ? containerVariants : undefined}\n                initial='initial'\n                animate='animate'\n                className='width-100pct space-y-5'\n            >\n                {sortedData.map((item, index) => {\n                    const width = widths[index];\n\n                    const itemLabelColor = item.color ?? labelColor;\n                    const itemBarColor = item.barColor ?? barColor;\n                    const itemBackground = item.background ?? background;\n\n                    return (\n                        <div\n                            key={item.key ?? item.name}\n                            onMouseEnter={() => setHoveredIndex(index)}\n                            onMouseLeave={() => setHoveredIndex(null)}\n                            onClick={() => onSelectRow?.(item)}\n                            className={classNames(\n                                'position-relative width-100pct rounded-small',\n                                'transition-all transition-ease-in-out transition-duration-01',\n                                itemBackground,\n                                onSelectRow && 'cursor-pointer',\n                                hoveredIndex === index && 'bg-lightest'\n                            )}\n                        >\n                            {/* Animated Progress Bar */}\n                            <motion.div\n                                custom={width}\n                                variants={showAnimation ? barVariants : undefined}\n                                className={classNames(\n                                    'display-flex align-items-center rounded-small',\n                                    'transition-all transition-ease-in-out transition-duration-01',\n                                    itemBarColor\n                                )}\n                                style={{ height: `${rowHeight}px`, opacity: hoveredIndex === index ? 1 : opacity }}\n                                role='presentation'\n                            />\n\n                            {/* Label */}\n                            <div className='position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10'>\n                                {item.href ? (\n                                    <a\n                                        href={item.href}\n                                        className={itemLabelColor}\n                                        target='_blank'\n                                        rel='noreferrer'\n                                        onClick={event => event.stopPropagation()}\n                                    >\n                                        {item.name}\n                                    </a>\n                                ) : (\n                                    <div className={itemLabelColor}>{item.name}</div>\n                                )}\n                            </div>\n                        </div>\n                    );\n                })}\n            </motion.div>\n\n            {/* legend */}\n            <div className='space-y-5'>\n                {sortedData.map(item => (\n                    <div\n                        key={item.key ?? item.name}\n                        className={classNames('display-flex align-items-center justify-content-end')}\n                        style={{ height: `${rowHeight}px` }}\n                    >\n                        <div className='text-color-darkest'>{valueFormatter(item.value)}</div>\n                    </div>\n                ))}\n            </div>\n        </div>\n    );\n};\n\nBarListInner.displayName = 'BarList';\n\nconst BarList = React.forwardRef(BarListInner) as <T>(\n    props: BarListProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => ReturnType<typeof BarListInner>;\n\nexport default BarList;\n"],"mappings":";;;;;;;AA4IA,IAAM,IAA8B,EAChC,SAAS,EACL,YAAY,EACR,iBAAiB,GACrB,EACJ,EACJ,GAEM,IAAwB;CAC1B,SAAS,EAAE,OAAO,EAAE;CACpB,UAAU,OAAmB;EACzB,OAAO,GAAG,EAAM;EAChB,YAAY;GAAE,UAAU;GAAK,MAAM;EAAU;CACjD;AACJ,GAEM,IAAqB,IACrB,IAAkB,IAElB,KAAoB,GAAwB,MAAqD;CACnG,IAAM,EACF,UAAO,CAAC,GACR,qBAAiB,MAAS,EAAM,SAAS,GACzC,mBAAgB,IAChB,gBACA,mBACA,eAAY,EAAc,YAC1B,cAAW,sBACX,gBAAa,qBACb,gBAAa,kBACb,eAAY,GACZ,aAAU,GACV,eAAY,IACZ,GAAG,MACH,GAEE,IAAa,EAAc,GAAM,IAAW,MAAQ,EAAK,KAAK,GAE9D,CAAC,GAAc,KAAmB,EAAM,SAAwB,IAAI,GAEpE,IAAS,QAAc;EACzB,IAAM,IAAO,KAAkB,KAAK,IAAI,GAAG,EAAW,KAAI,MAAQ,EAAK,KAAK,GAAG,CAAC;EAChF,OAAO,EAAW,KAAI,MAAS,MAAS,KAAK,EAAK,UAAU,IAAI,IAAI,KAAK,IAAK,EAAK,QAAQ,IAAQ,KAAK,CAAC,CAAE;CAC/G,GAAG,CAAC,GAAY,CAAc,CAAC;CAE/B,OACI,kBAAC,OAAD;EACI,GAAI;EACJ,KAAK;EACL,WAAW,EAAW,+CAA+C,CAAS;YAHlF,CAKI,kBAAC,EAAO,KAAR;GACI,UAAU,IAAgB,IAAoB,KAAA;GAC9C,SAAQ;GACR,SAAQ;GACR,WAAU;aAET,EAAW,KAAK,GAAM,MAAU;IAC7B,IAAM,IAAQ,EAAO,IAEf,IAAiB,EAAK,SAAS,GAC/B,IAAe,EAAK,YAAY;IAGtC,OACI,kBAAC,OAAD;KAEI,oBAAoB,EAAgB,CAAK;KACzC,oBAAoB,EAAgB,IAAI;KACxC,eAAe,IAAc,CAAI;KACjC,WAAW,EACP,gDACA,gEAVW,EAAK,cAAc,GAY9B,KAAe,kBACf,MAAiB,KAAS,aAC9B;eAXJ,CAcI,kBAAC,EAAO,KAAR;MACI,QAAQ;MACR,UAAU,IAAgB,IAAc,KAAA;MACxC,WAAW,EACP,iDACA,gEACA,CACJ;MACA,OAAO;OAAE,QAAQ,GAAG,EAAU;OAAK,SAAS,MAAiB,IAAQ,IAAI;MAAQ;MACjF,MAAK;KACR,CAAA,GAGD,kBAAC,OAAD;MAAK,WAAU;gBACV,EAAK,OACF,kBAAC,KAAD;OACI,MAAM,EAAK;OACX,WAAW;OACX,QAAO;OACP,KAAI;OACJ,UAAS,MAAS,EAAM,gBAAgB;iBAEvC,EAAK;MACP,CAAA,IAEH,kBAAC,OAAD;OAAK,WAAW;iBAAiB,EAAK;MAAU,CAAA;KAEnD,CAAA,CACJ;OAzCI,EAAK,OAAO,EAAK,IAyCrB;GAEb,CAAC;EACO,CAAA,GAGZ,kBAAC,OAAD;GAAK,WAAU;aACV,EAAW,KAAI,MACZ,kBAAC,OAAD;IAEI,WAAW,EAAW,qDAAqD;IAC3E,OAAO,EAAE,QAAQ,GAAG,EAAU,IAAI;cAElC,kBAAC,OAAD;KAAK,WAAU;eAAsB,EAAe,EAAK,KAAK;IAAO,CAAA;GACpE,GALI,EAAK,OAAO,EAAK,IAKrB,CACR;EACA,CAAA,CACJ;;AAEb;AAEA,EAAa,cAAc;AAE3B,IAAM,IAAU,EAAM,WAAW,CAAY"}

package/components/barList/useSortedBars.js

@@ -1,12 +1,17 @@
-import { useMemo as u } from "react";
-import { SortDirection as c } from "../../utils/SortUtils.js";
-function p(o, r, n) {
-  return u(() => r === "none" ? o : [...o].sort((e, m) => {
-    const t = n(e), i = n(m);
-    return r === c.ASCENDING ? t - i : i - t;
-  }), [o, r, n]);
+import { SortDirection as e } from "../../utils/SortUtils.js";
+import { useMemo as t } from "react";
+//#region src/components/barList/useSortedBars.ts
+function n(n, r, i) {
+	return t(() => r === "none" ? n : [...n].sort((t, n) => {
+		let a = i(t), o = i(n);
+		return r === e.ASCENDING ? a - o : o - a;
+	}), [
+		n,
+		r,
+		i
+	]);
 }
-export {
-  p as useSortedBars
-};
-//# sourceMappingURL=useSortedBars.js.map
+//#endregion
+export { n as useSortedBars };
+
+//# sourceMappingURL=useSortedBars.js.map

package/components/barList/useSortedBars.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSortedBars.js","sources":["../../../src/components/barList/useSortedBars.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { SortDirection, type SortDirectionType } from '../../utils/SortUtils';\n\nexport function useSortedBars<T>(data: T[], sortOrder: SortDirectionType | 'none', getValue: (item: T) => number) {\n    return useMemo(() => {\n        if (sortOrder === 'none') {\n            return data;\n        }\n\n        return [...data].sort((a, b) => {\n            const aVal = getValue(a);\n            const bVal = getValue(b);\n            return sortOrder === SortDirection.ASCENDING ? aVal - bVal : bVal - aVal;\n        });\n    }, [data, sortOrder, getValue]);\n}\n"],"names":["useSortedBars","data","sortOrder","getValue","useMemo","a","b","aVal","bVal","SortDirection"],"mappings":";;AAGO,SAASA,EAAiBC,GAAWC,GAAuCC,GAA+B;AAC9G,SAAOC,EAAQ,MACPF,MAAc,SACPD,IAGJ,CAAC,GAAGA,CAAI,EAAE,KAAK,CAACI,GAAGC,MAAM;AAC5B,UAAMC,IAAOJ,EAASE,CAAC,GACjBG,IAAOL,EAASG,CAAC;AACvB,WAAOJ,MAAcO,EAAc,YAAYF,IAAOC,IAAOA,IAAOD;AAAA,EACxE,CAAC,GACF,CAACN,GAAMC,GAAWC,CAAQ,CAAC;AAClC;"}
+{"version":3,"file":"useSortedBars.js","names":[],"sources":["../../../src/components/barList/useSortedBars.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { SortDirection, type SortDirectionType } from '../../utils/SortUtils';\n\nexport function useSortedBars<T>(data: T[], sortOrder: SortDirectionType | 'none', getValue: (item: T) => number) {\n    return useMemo(() => {\n        if (sortOrder === 'none') {\n            return data;\n        }\n\n        return [...data].sort((a, b) => {\n            const aVal = getValue(a);\n            const bVal = getValue(b);\n            return sortOrder === SortDirection.ASCENDING ? aVal - bVal : bVal - aVal;\n        });\n    }, [data, sortOrder, getValue]);\n}\n"],"mappings":";;;AAGA,SAAgB,EAAiB,GAAW,GAAuC,GAA+B;CAC9G,OAAO,QACC,MAAc,SACP,IAGJ,CAAC,GAAG,CAAI,CAAC,CAAC,MAAM,GAAG,MAAM;EAC5B,IAAM,IAAO,EAAS,CAAC,GACjB,IAAO,EAAS,CAAC;EACvB,OAAO,MAAc,EAAc,YAAY,IAAO,IAAO,IAAO;CACxE,CAAC,GACF;EAAC;EAAM;EAAW;CAAQ,CAAC;AAClC"}

package/components/bottomSheet/BottomSheet.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject, PropsWithChildren, ReactElement, ReactNode } from 'react';
+import { MutableRefObject, MouseEvent, PropsWithChildren, ReactElement, ReactNode } from 'react';
 export type BottomSheetProps = {
     /**
      * Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen.
@@ -60,11 +60,17 @@ export type BottomSheetProps = {
      */
     hasBackdrop?: boolean;
     /**
-     * Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet.
+     * Defines whether or not the bottom sheet closes when the backdrop is clicked.
      *
-     * @default () => {}
+     * @default true
+     */
+    closeOnBackdropClick?: boolean;
+    /**
+     * Callback function triggered when the backdrop is clicked.
+     *
+     * @default undefined
      */
-    onBackdropClick?: VoidFunction;
+    onBackdropClick?: (event: MouseEvent<HTMLDivElement>) => void;
     /**
      * A react ref added to the bottom sheet body.
      */