@rio-cloud/rio-uikit 1.13.2 → 2.0.0-beta.2

package/components/banner/BannerContent.js

@@ -1,16 +1,33 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
-import useResizeObserver from '../../useResizeObserver';
-const DEFAULT_MIN_WIDTH_BREAKPOINT = 400;
-const BannerContent = (props) => {
-    const { title, actions, children, minWidthBreakpoint = DEFAULT_MIN_WIDTH_BREAKPOINT, className = '', ...remainingProps } = props;
-    // Check size of the container for responsive breakpoints
-    const [contentRef, _, { inlineSize }] = useResizeObserver();
-    const containerWidth = inlineSize ?? 0;
-    const contentWithActionClass = classNames('flex-1-1', 'BannerContent', 'display-flex gap-15', containerWidth < minWidthBreakpoint ? 'flex-column' : 'flex-row align-items-center', className);
-    if (actions) {
-        return (_jsxs("div", { ref: contentRef, className: contentWithActionClass, ...remainingProps, children: [_jsxs("div", { className: 'flex-1-1 min-width-100', children: [title && _jsx("div", { className: 'text-size-16 text-medium', children: title }), children] }), actions] }));
-    }
-    return (_jsxs("div", { className: 'flex-1-1', children: [title && _jsx("div", { className: 'text-size-16 text-medium', children: title }), children] }));
+import { jsxs as t, jsx as s } from "react/jsx-runtime";
+import f from "classnames";
+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
+  ] });
 };
-export default BannerContent;
+export {
+  z as default
+};
+//# sourceMappingURL=BannerContent.js.map

package/components/banner/BannerContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerContent.js","sources":["../../../src/components/banner/BannerContent.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\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;"}

package/components/banner/BannerIcon.d.ts

@@ -1,4 +1,4 @@
-import type { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 export type BannerIconProps = {
     /**
      * Additional classname added to the wrapper element.

package/components/banner/BannerIcon.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-const BannerIcon = ({ className = '', children, ...remainingProps }) => {
-    return (_jsx("div", { className: `BannerIcon flex-0 margin-x-5 min-width-25 ${className}`, ...remainingProps, children: children }));
+import { jsx as e } from "react/jsx-runtime";
+const t = ({ className: n = "", children: r, ...a }) => /* @__PURE__ */ e("div", { className: `BannerIcon flex-0 margin-x-5 min-width-25 ${n}`, ...a, children: r });
+export {
+  t as default
 };
-export default BannerIcon;
+//# sourceMappingURL=BannerIcon.js.map

package/components/banner/BannerIcon.js.map

@@ -0,0 +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    return (\n        <div className={`BannerIcon flex-0 margin-x-5 min-width-25 ${className}`} {...remainingProps}>\n            {children}\n        </div>\n    );\n};\n\nexport default BannerIcon;\n"],"names":["BannerIcon","className","children","remainingProps","jsx"],"mappings":";AASA,MAAMA,IAAa,CAAC,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,QAE3C,gBAAAC,EAAC,SAAI,WAAW,6CAA6CH,CAAS,IAAK,GAAGE,GACzE,UAAAD,GACL;"}

package/components/banner/BannerPage.d.ts

@@ -1,4 +1,4 @@
-import type { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 type BannerPageProps = {
     /**
      * Additional classname added to the wrapper element.

package/components/banner/BannerPage.js

@@ -1,5 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-const BannerPage = ({ className = '', children, ...remainingProps }) => {
-    return (_jsx("div", { className: `display-flex align-items-start align-items-center-ls width-100pct gap-15 ${className}`, ...remainingProps, children: children }));
+import { jsx as s } from "react/jsx-runtime";
+const r = ({ className: t = "", children: a, ...e }) => /* @__PURE__ */ s(
+  "div",
+  {
+    className: `display-flex align-items-start align-items-center-ls width-100pct gap-15 ${t}`,
+    ...e,
+    children: a
+  }
+);
+export {
+  r as default
 };
-export default BannerPage;
+//# sourceMappingURL=BannerPage.js.map

package/components/banner/BannerPage.js.map

@@ -0,0 +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    return (\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};\n\nexport default BannerPage;\n"],"names":["BannerPage","className","children","remainingProps","jsx"],"mappings":";AASA,MAAMA,IAAa,CAAC,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,QAE3C,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,4EAA4EH,CAAS;AAAA,IAC/F,GAAGE;AAAA,IAEH,UAAAD;AAAA,EAAA;AAAA;"}

package/components/barList/BarList.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { type SortDirectionType } from '../../utils/SortUtils';
+import { default as React } from 'react';
+import { SortDirectionType } from '../../utils/SortUtils';
 export type BarListRow<T> = T & {
     key?: string;
     href?: string;

package/components/barList/BarList.js

@@ -1,42 +1,118 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo } from 'react';
-import classNames from 'classnames';
-import { motion } from 'framer-motion';
-import { SortDirection } from '../../utils/SortUtils';
-import { useSortedBars } from './useSortedBars';
-// Animation variants
-const containerVariants = {
-    animate: {
-        transition: {
-            staggerChildren: 0.1,
-        },
-    },
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import f, { useMemo as j } from "react";
+import n from "classnames";
+import { motion as u } from "motion/react";
+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
+        )) })
+      ]
+    }
+  );
 };
-const barVariants = {
-    initial: { width: 0 },
-    animate: (width) => ({
-        width: `${width}%`,
-        transition: { duration: 0.8, ease: 'easeOut' },
-    }),
+g.displayName = "BarList";
+const W = f.forwardRef(g);
+export {
+  W as default
 };
-const DEFAULT_ROW_HEIGHT = 25;
-const DEFAULT_OPACITY = 0.5;
-const BarListInner = (props, forwardedRef) => {
-    const { data = [], valueFormatter = value => value.toString(), showAnimation = false, onSelectRow, referenceValue, sortOrder = SortDirection.DESCENDING, barColor = 'bg-highlight-light', labelColor = 'text-color-darker', background = 'bg-transparent', rowHeight = DEFAULT_ROW_HEIGHT, opacity = DEFAULT_OPACITY, className = '', ...remainingProps } = props;
-    const sortedData = useSortedBars(data, sortOrder, item => item.value);
-    const [hoveredIndex, setHoveredIndex] = React.useState(null);
-    const widths = useMemo(() => {
-        const base = referenceValue ?? Math.max(...sortedData.map(item => item.value), 0);
-        return sortedData.map(item => (base === 0 || item.value === 0 ? 0 : Math.max((item.value / base) * 100, 2)));
-    }, [sortedData, referenceValue]);
-    return (_jsxs("div", { ...remainingProps, ref: forwardedRef, className: classNames('display-flex justify-content-between gap-15', className), children: [_jsx(motion.div, { variants: showAnimation ? containerVariants : undefined, initial: 'initial', animate: 'animate', className: 'width-100pct space-y-5', children: sortedData.map((item, index) => {
-                    const width = widths[index];
-                    const itemLabelColor = item.color ?? labelColor;
-                    const itemBarColor = item.barColor ?? barColor;
-                    const itemBackground = item.background ?? background;
-                    return (_jsxs("div", { onMouseEnter: () => setHoveredIndex(index), onMouseLeave: () => setHoveredIndex(null), onClick: () => onSelectRow?.(item), className: classNames('position-relative width-100pct rounded-small', 'transition-all transition-ease-in-out transition-duration-01', itemBackground, onSelectRow && 'cursor-pointer', hoveredIndex === index && 'bg-lightest'), children: [_jsx(motion.div, { custom: width, variants: showAnimation ? barVariants : undefined, className: classNames('display-flex align-items-center rounded-small', 'transition-all transition-ease-in-out transition-duration-01', itemBarColor), style: { height: `${rowHeight}px`, opacity: hoveredIndex === index ? 1 : opacity }, role: 'presentation' }), _jsx("div", { className: 'position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10', children: item.href ? (_jsx("a", { href: item.href, className: itemLabelColor, target: '_blank', rel: 'noreferrer', onClick: event => event.stopPropagation(), children: item.name })) : (_jsx("div", { className: itemLabelColor, children: item.name })) })] }, item.key ?? item.name));
-                }) }), _jsx("div", { className: 'space-y-5', children: sortedData.map(item => (_jsx("div", { className: classNames('display-flex align-items-center justify-content-end'), style: { height: `${rowHeight}px` }, children: _jsx("div", { className: 'text-color-darkest', children: valueFormatter(item.value) }) }, item.key ?? item.name))) })] }));
-};
-BarListInner.displayName = 'BarList';
-const BarList = React.forwardRef(BarListInner);
-export default BarList;
+//# sourceMappingURL=BarList.js.map

package/components/barList/BarList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarList.js","sources":["../../../src/components/barList/BarList.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport classNames from 'classnames';\nimport { motion, type Variants } from 'motion/react';\n\nimport { SortDirection, type SortDirectionType } from '../../utils/SortUtils';\nimport { useSortedBars } from './useSortedBars';\n\nexport type BarListRow<T> = T & {\n    key?: string;\n    href?: string;\n    value: number;\n    name: string;\n    color?: string; // individual progress color override\n    barColor?: string; // individual bar color override\n    background?: string; // individual background override\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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"}

package/components/barList/useSortedBars.d.ts

@@ -1,2 +1,2 @@
-import { type SortDirectionType } from '../../utils/SortUtils';
+import { SortDirectionType } from '../../utils/SortUtils';
 export declare function useSortedBars<T>(data: T[], sortOrder: SortDirectionType | 'none', getValue: (item: T) => number): T[];

package/components/barList/useSortedBars.js

@@ -1,14 +1,12 @@
-import { useMemo } from 'react';
-import { SortDirection } from '../../utils/SortUtils';
-export function useSortedBars(data, sortOrder, getValue) {
-    return useMemo(() => {
-        if (sortOrder === 'none') {
-            return data;
-        }
-        return [...data].sort((a, b) => {
-            const aVal = getValue(a);
-            const bVal = getValue(b);
-            return sortOrder === SortDirection.ASCENDING ? aVal - bVal : bVal - aVal;
-        });
-    }, [data, sortOrder, getValue]);
+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]);
 }
+export {
+  p as useSortedBars
+};
+//# sourceMappingURL=useSortedBars.js.map

package/components/barList/useSortedBars.js.map

@@ -0,0 +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;"}

package/components/bottomSheet/BottomSheet.d.ts

@@ -1,4 +1,4 @@
-import { type MutableRefObject, type PropsWithChildren, type ReactElement, type ReactNode } from 'react';
+import { MutableRefObject, PropsWithChildren, ReactElement, ReactNode } from 'react';
 export type BottomSheetProps = {
     /**
      * Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen.

package/components/bottomSheet/BottomSheet.js

@@ -1,54 +1,97 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState, } from 'react';
-import { createPortal } from 'react-dom';
-import classNames from 'classnames';
-import isFunction from 'lodash/fp/isFunction';
-import { motion } from 'framer-motion';
-import { getOrCreatePortalRoot } from '../../utils/portalRoot';
-const OFFSET_POSITION = -1000;
-const DEFAULT_OFFSET_PX = 15;
-const BottomSheet = (props) => {
-    const { show = false, onClose, width, height, title, detach = false, detachOffset = DEFAULT_OFFSET_PX, hasBackdrop = false, showCloseButton = true, showMaximizeButton = false, onHeightChange = () => { }, bodyRef, bodyClassName, className, children, onBackdropClick = () => { }, ...remainingProps } = props;
-    const [isShown, setIsShown] = useState(show);
-    const [isMaxHeight, setIsMaxHeight] = useState(false);
-    useEffect(() => setIsShown(show), [show]);
-    const modalRoot = getOrCreatePortalRoot();
-    const handleToggle = () => {
-        const newValue = !isShown;
-        if (isFunction(onClose)) {
-            onClose(newValue);
+import { jsxs as n, Fragment as I, jsx as e } from "react/jsx-runtime";
+import { useState as g, useEffect as M } from "react";
+import { createPortal as j } from "react-dom";
+import f from "classnames";
+import { motion as R } from "motion/react";
+import { isFunction as V } from "es-toolkit/predicate";
+import { getOrCreatePortalRoot as _ } from "../../utils/portalRoot.js";
+const $ = -1e3, r = 15, J = (u) => {
+  const {
+    show: o = !1,
+    onClose: l,
+    width: w,
+    height: h,
+    title: c,
+    detach: s = !1,
+    detachOffset: A = r,
+    hasBackdrop: x = !1,
+    showCloseButton: N = !0,
+    showMaximizeButton: y = !1,
+    onHeightChange: C = () => {
+    },
+    bodyRef: v,
+    bodyClassName: d,
+    className: m,
+    children: k,
+    onBackdropClick: B = () => {
+    },
+    ...F
+  } = u, [t, p] = g(o), [i, S] = g(!1);
+  M(() => p(o), [o]);
+  const O = _(), b = () => {
+    const a = !t;
+    V(l) ? l(a) : p(a);
+  }, H = () => {
+    B(), b();
+  }, P = () => {
+    S(!i), C();
+  }, T = f(
+    "bottom-sheet",
+    "position-fixed left-0",
+    !h && !i && "height-auto",
+    "bg-white",
+    "shadow-hard",
+    s ? "rounded" : "rounded-top-left rounded-top-right",
+    m && m
+  ), z = f("bottom-sheet-body", "height-100pct", d && d), E = i ? window.innerHeight : h;
+  return j(
+    /* @__PURE__ */ n(I, { children: [
+      /* @__PURE__ */ n(
+        R.div,
+        {
+          ...F,
+          className: T,
+          style: {
+            width: w,
+            maxWidth: s ? `calc(100% - ${r * 2}px)` : "100%",
+            margin: s ? `${r}px` : 0
+          },
+          initial: { opacity: 0 },
+          animate: {
+            opacity: t ? 1 : 0,
+            y: 0,
+            bottom: t ? 0 : $,
+            height: t ? E : 0
+          },
+          children: [
+            /* @__PURE__ */ n("div", { className: "bottom-sheet-header", children: [
+              c && /* @__PURE__ */ e(
+                "div",
+                {
+                  className: "bottom-sheet-title display-flex justify-content-between padding-15 border border-top-none border-left-none border-right-none border-color-lighter",
+                  children: /* @__PURE__ */ e("div", { className: "text-size-18", children: c })
+                }
+              ),
+              N && /* @__PURE__ */ e("div", { className: "bottom-sheet-close position-absolute top-10 right-10", children: /* @__PURE__ */ e("button", { type: "button", className: "btn btn-muted btn-sm btn-icon-only", onClick: b, children: /* @__PURE__ */ e("span", { className: "rioglyph rioglyph-remove" }) }) }),
+              y && /* @__PURE__ */ e(
+                "div",
+                {
+                  className: "bottom-sheet-maximize height-30 position-absolute top-5 left-50pct translate-x-50 cursor-pointer",
+                  onClick: P,
+                  children: /* @__PURE__ */ e("div", { className: "height-5 width-40 rounded bg-lighter" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e("div", { className: z, ref: v, children: t && k })
+          ]
         }
-        else {
-            setIsShown(newValue);
-        }
-    };
-    const handleBackdropClick = () => {
-        onBackdropClick();
-        handleToggle();
-    };
-    const handleMaximize = () => {
-        const newValue = !isMaxHeight;
-        setIsMaxHeight(newValue);
-        onHeightChange();
-    };
-    const sheetClasses = classNames('bottom-sheet', 'position-fixed left-0', !height && !isMaxHeight && 'height-auto', 'bg-white', 'shadow-hard', detach ? 'rounded' : 'rounded-top-left rounded-top-right', className && className);
-    const sheetBodyClasses = classNames('bottom-sheet-body', 'height-100pct', bodyClassName && bodyClassName);
-    const sheetHeight = isMaxHeight ? window.innerHeight : height;
-    // Note: we always have to kep the body element in the DOM as there might be a ref assigned to it.
-    // Unmounting it will lead to losing the reference and breaking the functionality that is implemented on that ref.
-    // That is the reason why there is no "AnimatePresence" with an "exit" animation here.
-    // Instead, we change the "animate" values.
-    return createPortal(_jsxs(_Fragment, { children: [_jsxs(motion.div, { ...remainingProps, className: sheetClasses, style: {
-                    width,
-                    maxWidth: detach ? `calc(100% - ${DEFAULT_OFFSET_PX * 2}px)` : '100%',
-                    margin: detach ? `${DEFAULT_OFFSET_PX}px` : 0,
-                }, initial: { opacity: 0 }, animate: {
-                    opacity: isShown ? 1 : 0,
-                    y: 0,
-                    bottom: isShown ? 0 : OFFSET_POSITION,
-                    height: isShown ? sheetHeight : 0,
-                }, children: [_jsxs("div", { className: 'bottom-sheet-header', children: [title && (_jsx("div", { className: 'bottom-sheet-title display-flex justify-content-between padding-15 ' +
-                                    'border border-top-none border-left-none border-right-none border-color-lighter', children: _jsx("div", { className: 'text-size-18', children: title }) })), showCloseButton && (_jsx("div", { className: 'bottom-sheet-close position-absolute top-10 right-10', children: _jsx("button", { type: 'button', className: 'btn btn-muted btn-sm btn-icon-only', onClick: handleToggle, children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) }) })), showMaximizeButton && (_jsx("div", { className: 'bottom-sheet-maximize height-30 ' +
-                                    'position-absolute top-5 left-50pct translate-x-50 cursor-pointer', onClick: handleMaximize, children: _jsx("div", { className: 'height-5 width-40 rounded bg-lighter' }) }))] }), _jsx("div", { className: sheetBodyClasses, ref: bodyRef, children: isShown && children })] }), hasBackdrop && isShown && _jsx("div", { className: 'bottom-sheet-backdrop', onClick: handleBackdropClick })] }), modalRoot);
+      ),
+      x && t && /* @__PURE__ */ e("div", { className: "bottom-sheet-backdrop", onClick: H })
+    ] }),
+    O
+  );
+};
+export {
+  J as default
 };
-export default BottomSheet;
+//# sourceMappingURL=BottomSheet.js.map

package/components/bottomSheet/BottomSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.js","sources":["../../../src/components/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import {\n    type MutableRefObject,\n    type PropsWithChildren,\n    type ReactElement,\n    type ReactNode,\n    useEffect,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport classNames from 'classnames';\nimport { motion } from 'motion/react';\nimport { isFunction } from 'es-toolkit/predicate';\n\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\n\nconst OFFSET_POSITION = -1000;\nconst DEFAULT_OFFSET_PX = 15;\n\nexport type BottomSheetProps = {\n    /**\n     * Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen.\n     * @default false\n     */\n    show: boolean;\n\n    /**\n     * Callback for when the sheet closes.\n     */\n    onClose?: (isShown: boolean) => void;\n\n    /**\n     * The width of the bottom sheet. This is useful for desktop when not using the entire screen width.\n     * When no width is given it will take the width of the content and maximum `100%` of the screen.\n     * So it this case you might want to apply a `max-width-xxx` via `className` to control it better.\n     */\n    width?: number | string;\n\n    /**\n     * The height of the bottom sheet. If no height is given, the height is automatically\n     * calculated from the content.\n     */\n    height?: number | string;\n\n    /**\n     * The title content shown in the header. If no title is given, the bottom sheet header is not shown.\n     */\n    title?: string | ReactNode;\n\n    /**\n     * Defines whether or not the close button is shown.\n     * @default true\n     */\n    showCloseButton?: boolean;\n\n    /**\n     * Defines whether or not the maximize button in the header is shown.\n     * @default false\n     */\n    showMaximizeButton?: boolean;\n\n    /**\n     * The callback function triggered when the maximize button is clicked and the height changes.\n     */\n    onHeightChange?: VoidFunction;\n\n    /**\n     * Set to `true` to detach the bottom sheet from the left side and the bottom and create a little offset.\n     * @default false\n     */\n    detach?: boolean;\n\n    /**\n     * Defines the amount of pixels for the sheet.\n     * @default 15\n     */\n    detachOffset?: number;\n\n    /**\n     * Set to `true` to render a modal like backdrop to emphasize the bottom sheet.\n     * @default false\n     */\n    hasBackdrop?: boolean;\n\n    /**\n     * Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet.\n     */\n    onBackdropClick?: VoidFunction;\n\n    /** A react ref added to the bottom sheet body. */\n    bodyRef?: MutableRefObject<HTMLDivElement | null>;\n\n    /** Additional classes to be set on the body element. */\n    bodyClassName?: string;\n\n    /** Additional classes to be set on the wrapping element. */\n    className?: string;\n};\n\nconst BottomSheet = (props: BottomSheetProps & PropsWithChildren) => {\n    const {\n        show = false,\n        onClose,\n        width,\n        height,\n        title,\n        detach = false,\n        detachOffset = DEFAULT_OFFSET_PX,\n        hasBackdrop = false,\n        showCloseButton = true,\n        showMaximizeButton = false,\n        onHeightChange = () => {},\n        bodyRef,\n        bodyClassName,\n        className,\n        children,\n        onBackdropClick = () => {},\n        ...remainingProps\n    } = props;\n\n    const [isShown, setIsShown] = useState(show);\n    const [isMaxHeight, setIsMaxHeight] = useState(false);\n\n    useEffect(() => setIsShown(show), [show]);\n\n    const modalRoot = getOrCreatePortalRoot();\n\n    const handleToggle = () => {\n        const newValue = !isShown;\n        if (isFunction(onClose)) {\n            onClose(newValue);\n        } else {\n            setIsShown(newValue);\n        }\n    };\n\n    const handleBackdropClick = () => {\n        onBackdropClick();\n        handleToggle();\n    };\n\n    const handleMaximize = () => {\n        const newValue = !isMaxHeight;\n        setIsMaxHeight(newValue);\n        onHeightChange();\n    };\n\n    const sheetClasses = classNames(\n        'bottom-sheet',\n        'position-fixed left-0',\n        !height && !isMaxHeight && 'height-auto',\n        'bg-white',\n        'shadow-hard',\n        detach ? 'rounded' : 'rounded-top-left rounded-top-right',\n        className && className\n    );\n\n    const sheetBodyClasses = classNames('bottom-sheet-body', 'height-100pct', bodyClassName && bodyClassName);\n\n    const sheetHeight = isMaxHeight ? window.innerHeight : height;\n\n    // Note: we always have to kep the body element in the DOM as there might be a ref assigned to it.\n    // Unmounting it will lead to losing the reference and breaking the functionality that is implemented on that ref.\n    // That is the reason why there is no \"AnimatePresence\" with an \"exit\" animation here.\n    // Instead, we change the \"animate\" values.\n\n    return createPortal(\n        <>\n            <motion.div\n                {...remainingProps}\n                className={sheetClasses}\n                style={{\n                    width,\n                    maxWidth: detach ? `calc(100% - ${DEFAULT_OFFSET_PX * 2}px)` : '100%',\n                    margin: detach ? `${DEFAULT_OFFSET_PX}px` : 0,\n                }}\n                initial={{ opacity: 0 }}\n                animate={{\n                    opacity: isShown ? 1 : 0,\n                    y: 0,\n                    bottom: isShown ? 0 : OFFSET_POSITION,\n                    height: isShown ? sheetHeight : 0,\n                }}\n            >\n                <div className='bottom-sheet-header'>\n                    {title && (\n                        <div\n                            className={\n                                'bottom-sheet-title display-flex justify-content-between padding-15 ' +\n                                'border border-top-none border-left-none border-right-none border-color-lighter'\n                            }\n                        >\n                            <div className='text-size-18'>{title}</div>\n                        </div>\n                    )}\n                    {showCloseButton && (\n                        <div className='bottom-sheet-close position-absolute top-10 right-10'>\n                            <button type='button' className='btn btn-muted btn-sm btn-icon-only' onClick={handleToggle}>\n                                <span className='rioglyph rioglyph-remove' />\n                            </button>\n                        </div>\n                    )}\n                    {showMaximizeButton && (\n                        <div\n                            className={\n                                'bottom-sheet-maximize height-30 ' +\n                                'position-absolute top-5 left-50pct translate-x-50 cursor-pointer'\n                            }\n                            onClick={handleMaximize}\n                        >\n                            <div className='height-5 width-40 rounded bg-lighter' />\n                        </div>\n                    )}\n                </div>\n                <div className={sheetBodyClasses} ref={bodyRef}>\n                    {isShown && children}\n                </div>\n            </motion.div>\n\n            {hasBackdrop && isShown && <div className='bottom-sheet-backdrop' onClick={handleBackdropClick} />}\n        </>,\n        modalRoot\n    ) as ReactElement;\n};\n\nexport default BottomSheet;\n"],"names":["OFFSET_POSITION","DEFAULT_OFFSET_PX","BottomSheet","props","show","onClose","width","height","title","detach","detachOffset","hasBackdrop","showCloseButton","showMaximizeButton","onHeightChange","bodyRef","bodyClassName","className","children","onBackdropClick","remainingProps","isShown","setIsShown","useState","isMaxHeight","setIsMaxHeight","useEffect","modalRoot","getOrCreatePortalRoot","handleToggle","newValue","isFunction","handleBackdropClick","handleMaximize","sheetClasses","classNames","sheetBodyClasses","sheetHeight","createPortal","jsxs","Fragment","motion","jsx"],"mappings":"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"}

package/components/bottomSheet/TimedBottomSheet.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 type TimedBottomSheetProps = {
     /**
      * The `dismissed` flag can be used to tell this component that the user has clicked on the content