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

package/components/feedback/FeedbackRating.js

@@ -1,63 +1,56 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { useState as L, createElement as j } from "react";
-import p from "../../utils/classNames.js";
-import z from "../button/ToggleButton.js";
-const F = (b) => {
-  const {
-    headline: c,
-    count: h = 1,
-    circleButtons: u = !1,
-    buttonLabels: f,
-    buttonStyles: o,
-    buttonClassName: N = "",
-    leftLabel: i,
-    rightLabel: l,
-    leadingIcon: d,
-    trailingIcon: m,
-    onRatingChanged: x = () => {
-    },
-    ...v
-  } = b, [y, k] = L(), w = (r) => {
-    k(r), x(r);
-  }, n = !!i || !!l, C = p(
-    "display-flex gap-10",
-    n ? "align-items-start" : "align-items-center",
-    "text-size-14",
-    "margin-bottom-25"
-  ), g = p(
-    "display-flex align-items-center",
-    "text-size-200pct",
-    n && "padding-top-3"
-  );
-  return /* @__PURE__ */ s("div", { ...v, className: "FeedbackRating", children: [
-    c && /* @__PURE__ */ e("div", { className: "text-medium text-size-16 margin-bottom-10", children: c }),
-    /* @__PURE__ */ s("div", { className: C, children: [
-      d && /* @__PURE__ */ e("div", { className: g, children: d }),
-      /* @__PURE__ */ s("div", { children: [
-        /* @__PURE__ */ e("div", { className: "display-flex flex-wrap gap-10", children: Array.from({ length: h }, (r, a) => {
-          const t = a + 1;
-          return /* @__PURE__ */ j(
-            z,
-            {
-              ...o?.[a],
-              key: t,
-              active: y === t,
-              onClick: (R) => w(R ? t : void 0),
-              className: `${u ? "rounded-circle aspect-ratio-1" : ""} ${N} ${o?.[a].className ?? ""}`
-            },
-            f?.[a] ?? t
-          );
-        }) }),
-        n && /* @__PURE__ */ s("div", { className: "display-flex justify-content-between margin-top-5 gap-25", children: [
-          i ? /* @__PURE__ */ e("label", { className: "word-wrap text-color-dark", children: i }) : /* @__PURE__ */ e("div", {}),
-          l ? /* @__PURE__ */ e("label", { className: "word-wrap text-color-dark", children: l }) : /* @__PURE__ */ e("div", {})
-        ] })
-      ] }),
-      m && /* @__PURE__ */ e("div", { className: g, children: m })
-    ] })
-  ] });
+import e from "../../utils/classNames.js";
+import t from "../button/ToggleButton.js";
+import { createElement as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/feedback/FeedbackRating.tsx
+var o = (o) => {
+	let { headline: s, count: c = 1, circleButtons: l = !1, buttonLabels: u, buttonStyles: d, buttonClassName: f = "", leftLabel: p, rightLabel: m, leadingIcon: h, trailingIcon: g, onRatingChanged: _ = () => {}, ...v } = o, [y, b] = r(), x = (e) => {
+		b(e), _(e);
+	}, S = !!p || !!m, C = e("display-flex gap-10", S ? "align-items-start" : "align-items-center", "text-size-14", "margin-bottom-25"), w = e("display-flex align-items-center", "text-size-200pct", S && "padding-top-3");
+	return /* @__PURE__ */ a("div", {
+		...v,
+		className: "FeedbackRating",
+		children: [s && /* @__PURE__ */ i("div", {
+			className: "text-medium text-size-16 margin-bottom-10",
+			children: s
+		}), /* @__PURE__ */ a("div", {
+			className: C,
+			children: [
+				h && /* @__PURE__ */ i("div", {
+					className: w,
+					children: h
+				}),
+				/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("div", {
+					className: "display-flex flex-wrap gap-10",
+					children: Array.from({ length: c }, (e, r) => {
+						let i = r + 1;
+						return /* @__PURE__ */ n(t, {
+							...d?.[r],
+							key: i,
+							active: y === i,
+							onClick: (e) => x(e ? i : void 0),
+							className: `${l ? "rounded-circle aspect-ratio-1" : ""} ${f} ${d?.[r].className ?? ""}`
+						}, u?.[r] ?? i);
+					})
+				}), S && /* @__PURE__ */ a("div", {
+					className: "display-flex justify-content-between margin-top-5 gap-25",
+					children: [p ? /* @__PURE__ */ i("label", {
+						className: "word-wrap text-color-dark",
+						children: p
+					}) : /* @__PURE__ */ i("div", {}), m ? /* @__PURE__ */ i("label", {
+						className: "word-wrap text-color-dark",
+						children: m
+					}) : /* @__PURE__ */ i("div", {})]
+				})] }),
+				g && /* @__PURE__ */ i("div", {
+					className: w,
+					children: g
+				})
+			]
+		})]
+	});
 };
-export {
-  F as default
-};
-//# sourceMappingURL=FeedbackRating.js.map
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=FeedbackRating.js.map

package/components/feedback/FeedbackRating.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeedbackRating.js","sources":["../../../src/components/feedback/FeedbackRating.tsx"],"sourcesContent":["import React, { type ComponentProps, useState } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport ToggleButton from '../button/ToggleButton';\nimport type { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';\n\ntype FeedbackRatingProps = ComponentProps<'div'> & {\n    /**\n     * Optional headline\n     */\n    headline?: React.ReactNode;\n\n    /**\n     * The amount of toggle buttons used to rate.\n     *\n     * @default 1\n     */\n    count: number;\n\n    /**\n     * Defines whether the buttons are round.\n     *\n     * @default false\n     */\n    circleButtons?: boolean;\n\n    /**\n     * Optional class names applied to all the buttons.\n     * If you need more control on styling individual buttons, see `buttonStyles`.\n     */\n    buttonClassName?: string;\n\n    /**\n     * Array of button labels that will be used instead of the index.\n     * There needs to be a label for each button defined.\n     */\n    buttonLabels?: React.ReactNode[];\n\n    /**\n     * Array of button styles to individually define the button size, style and variant.\n     * There needs to be a item for each button defined.\n     */\n    buttonStyles?: { bsSize?: BUTTON_SIZE; bsStyle?: BUTTON_STYLE; variant?: BUTTON_VARIANT; className?: string }[];\n\n    /**\n     * Left aligned label to name the lowest rating option.\n     */\n    leftLabel?: React.ReactNode;\n\n    /**\n     * Right aligned label to name the highest rating option.\n     */\n    rightLabel?: React.ReactNode;\n\n    /**\n     * Additional icon placed in front of the rating buttons.\n     */\n    leadingIcon?: React.ReactNode;\n\n    /**\n     * Additional icon placed after the rating buttons.\n     */\n    trailingIcon?: React.ReactNode;\n\n    /**\n     * Callback triggered when the rating changes.\n     *\n     * @param rating The rating value. Undefined, when a toggle is unchecked.\n     * @returns\n     */\n    onRatingChanged?: (rating: number | undefined) => void;\n};\n\nconst FeedbackRating = (props: FeedbackRatingProps) => {\n    const {\n        headline,\n        count = 1,\n        circleButtons = false,\n        buttonLabels,\n        buttonStyles,\n        buttonClassName = '',\n        leftLabel,\n        rightLabel,\n        leadingIcon,\n        trailingIcon,\n        onRatingChanged = () => {},\n        ...remainingProps\n    } = props;\n\n    const [rating, setRating] = useState<number>();\n\n    const handleRating = (value: number | undefined) => {\n        setRating(value);\n        onRatingChanged(value);\n    };\n\n    const hasSubLabels = !!leftLabel || !!rightLabel;\n\n    const buttonWrapperClasses = classNames(\n        'display-flex gap-10',\n        hasSubLabels ? 'align-items-start' : 'align-items-center',\n        'text-size-14',\n        'margin-bottom-25'\n    );\n\n    const leadingTrailingIconClasses = classNames(\n        'display-flex align-items-center',\n        'text-size-200pct',\n        hasSubLabels && 'padding-top-3'\n    );\n\n    return (\n        <div {...remainingProps} className='FeedbackRating'>\n            {headline && <div className='text-medium text-size-16 margin-bottom-10'>{headline}</div>}\n            <div className={buttonWrapperClasses}>\n                {leadingIcon && <div className={leadingTrailingIconClasses}>{leadingIcon}</div>}\n                <div>\n                    <div className='display-flex flex-wrap gap-10'>\n                        {Array.from({ length: count }, (_, index) => {\n                            const indexNumber = index + 1;\n                            return (\n                                <ToggleButton\n                                    {...buttonStyles?.[index]}\n                                    key={indexNumber}\n                                    active={rating === indexNumber}\n                                    onClick={(toggled: boolean) => handleRating(toggled ? indexNumber : undefined)}\n                                    className={`${circleButtons ? 'rounded-circle aspect-ratio-1' : ''} ${buttonClassName} ${buttonStyles?.[index].className ?? ''}`}\n                                >\n                                    {buttonLabels?.[index] ?? indexNumber}\n                                </ToggleButton>\n                            );\n                        })}\n                    </div>\n                    {hasSubLabels && (\n                        <div className='display-flex justify-content-between margin-top-5 gap-25'>\n                            {leftLabel ? <label className='word-wrap text-color-dark'>{leftLabel}</label> : <div />}\n                            {rightLabel ? <label className='word-wrap text-color-dark'>{rightLabel}</label> : <div />}\n                        </div>\n                    )}\n                </div>\n                {trailingIcon && <div className={leadingTrailingIconClasses}>{trailingIcon}</div>}\n            </div>\n        </div>\n    );\n};\n\nexport default FeedbackRating;\n"],"names":["FeedbackRating","props","headline","count","circleButtons","buttonLabels","buttonStyles","buttonClassName","leftLabel","rightLabel","leadingIcon","trailingIcon","onRatingChanged","remainingProps","rating","setRating","useState","handleRating","value","hasSubLabels","buttonWrapperClasses","classNames","leadingTrailingIconClasses","jsxs","jsx","_","index","indexNumber","createElement","ToggleButton","toggled"],"mappings":";;;;AAyEA,MAAMA,IAAiB,CAACC,MAA+B;AACnD,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,eAAAC,IAAgB;AAAA,IAChB,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAClB,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC,IAAkB,MAAM;AAAA,IAAC;AAAA,IACzB,GAAGC;AAAA,EAAA,IACHZ,GAEE,CAACa,GAAQC,CAAS,IAAIC,EAAA,GAEtBC,IAAe,CAACC,MAA8B;AAChD,IAAAH,EAAUG,CAAK,GACfN,EAAgBM,CAAK;AAAA,EACzB,GAEMC,IAAe,CAAC,CAACX,KAAa,CAAC,CAACC,GAEhCW,IAAuBC;AAAA,IACzB;AAAA,IACAF,IAAe,sBAAsB;AAAA,IACrC;AAAA,IACA;AAAA,EAAA,GAGEG,IAA6BD;AAAA,IAC/B;AAAA,IACA;AAAA,IACAF,KAAgB;AAAA,EAAA;AAGpB,SACI,gBAAAI,EAAC,OAAA,EAAK,GAAGV,GAAgB,WAAU,kBAC9B,UAAA;AAAA,IAAAX,KAAY,gBAAAsB,EAAC,OAAA,EAAI,WAAU,6CAA6C,UAAAtB,GAAS;AAAA,IAClF,gBAAAqB,EAAC,OAAA,EAAI,WAAWH,GACX,UAAA;AAAA,MAAAV,KAAe,gBAAAc,EAAC,OAAA,EAAI,WAAWF,GAA6B,UAAAZ,GAAY;AAAA,wBACxE,OAAA,EACG,UAAA;AAAA,QAAA,gBAAAc,EAAC,OAAA,EAAI,WAAU,iCACV,UAAA,MAAM,KAAK,EAAE,QAAQrB,EAAA,GAAS,CAACsB,GAAGC,MAAU;AACzC,gBAAMC,IAAcD,IAAQ;AAC5B,iBACI,gBAAAE;AAAA,YAACC;AAAA,YAAA;AAAA,cACI,GAAGvB,IAAeoB,CAAK;AAAA,cACxB,KAAKC;AAAA,cACL,QAAQb,MAAWa;AAAA,cACnB,SAAS,CAACG,MAAqBb,EAAaa,IAAUH,IAAc,MAAS;AAAA,cAC7E,WAAW,GAAGvB,IAAgB,kCAAkC,EAAE,IAAIG,CAAe,IAAID,IAAeoB,CAAK,EAAE,aAAa,EAAE;AAAA,YAAA;AAAA,YAE7HrB,IAAeqB,CAAK,KAAKC;AAAA,UAAA;AAAA,QAGtC,CAAC,EAAA,CACL;AAAA,QACCR,KACG,gBAAAI,EAAC,OAAA,EAAI,WAAU,4DACV,UAAA;AAAA,UAAAf,sBAAa,SAAA,EAAM,WAAU,6BAA6B,UAAAA,GAAU,sBAAY,OAAA,CAAA,CAAI;AAAA,UACpFC,sBAAc,SAAA,EAAM,WAAU,6BAA6B,UAAAA,EAAA,CAAW,sBAAY,OAAA,CAAA,CAAI;AAAA,QAAA,EAAA,CAC3F;AAAA,MAAA,GAER;AAAA,MACCE,KAAgB,gBAAAa,EAAC,OAAA,EAAI,WAAWF,GAA6B,UAAAX,EAAA,CAAa;AAAA,IAAA,EAAA,CAC/E;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"FeedbackRating.js","names":[],"sources":["../../../src/components/feedback/FeedbackRating.tsx"],"sourcesContent":["import React, { type ComponentProps, useState } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport ToggleButton from '../button/ToggleButton';\nimport type { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';\n\ntype FeedbackRatingProps = ComponentProps<'div'> & {\n    /**\n     * Optional headline\n     */\n    headline?: React.ReactNode;\n\n    /**\n     * The amount of toggle buttons used to rate.\n     *\n     * @default 1\n     */\n    count: number;\n\n    /**\n     * Defines whether the buttons are round.\n     *\n     * @default false\n     */\n    circleButtons?: boolean;\n\n    /**\n     * Optional class names applied to all the buttons.\n     * If you need more control on styling individual buttons, see `buttonStyles`.\n     */\n    buttonClassName?: string;\n\n    /**\n     * Array of button labels that will be used instead of the index.\n     * There needs to be a label for each button defined.\n     */\n    buttonLabels?: React.ReactNode[];\n\n    /**\n     * Array of button styles to individually define the button size, style and variant.\n     * There needs to be a item for each button defined.\n     */\n    buttonStyles?: { bsSize?: BUTTON_SIZE; bsStyle?: BUTTON_STYLE; variant?: BUTTON_VARIANT; className?: string }[];\n\n    /**\n     * Left aligned label to name the lowest rating option.\n     */\n    leftLabel?: React.ReactNode;\n\n    /**\n     * Right aligned label to name the highest rating option.\n     */\n    rightLabel?: React.ReactNode;\n\n    /**\n     * Additional icon placed in front of the rating buttons.\n     */\n    leadingIcon?: React.ReactNode;\n\n    /**\n     * Additional icon placed after the rating buttons.\n     */\n    trailingIcon?: React.ReactNode;\n\n    /**\n     * Callback triggered when the rating changes.\n     *\n     * @param rating The rating value. Undefined, when a toggle is unchecked.\n     * @returns\n     */\n    onRatingChanged?: (rating: number | undefined) => void;\n};\n\nconst FeedbackRating = (props: FeedbackRatingProps) => {\n    const {\n        headline,\n        count = 1,\n        circleButtons = false,\n        buttonLabels,\n        buttonStyles,\n        buttonClassName = '',\n        leftLabel,\n        rightLabel,\n        leadingIcon,\n        trailingIcon,\n        onRatingChanged = () => {},\n        ...remainingProps\n    } = props;\n\n    const [rating, setRating] = useState<number>();\n\n    const handleRating = (value: number | undefined) => {\n        setRating(value);\n        onRatingChanged(value);\n    };\n\n    const hasSubLabels = !!leftLabel || !!rightLabel;\n\n    const buttonWrapperClasses = classNames(\n        'display-flex gap-10',\n        hasSubLabels ? 'align-items-start' : 'align-items-center',\n        'text-size-14',\n        'margin-bottom-25'\n    );\n\n    const leadingTrailingIconClasses = classNames(\n        'display-flex align-items-center',\n        'text-size-200pct',\n        hasSubLabels && 'padding-top-3'\n    );\n\n    return (\n        <div {...remainingProps} className='FeedbackRating'>\n            {headline && <div className='text-medium text-size-16 margin-bottom-10'>{headline}</div>}\n            <div className={buttonWrapperClasses}>\n                {leadingIcon && <div className={leadingTrailingIconClasses}>{leadingIcon}</div>}\n                <div>\n                    <div className='display-flex flex-wrap gap-10'>\n                        {Array.from({ length: count }, (_, index) => {\n                            const indexNumber = index + 1;\n                            return (\n                                <ToggleButton\n                                    {...buttonStyles?.[index]}\n                                    key={indexNumber}\n                                    active={rating === indexNumber}\n                                    onClick={(toggled: boolean) => handleRating(toggled ? indexNumber : undefined)}\n                                    className={`${circleButtons ? 'rounded-circle aspect-ratio-1' : ''} ${buttonClassName} ${buttonStyles?.[index].className ?? ''}`}\n                                >\n                                    {buttonLabels?.[index] ?? indexNumber}\n                                </ToggleButton>\n                            );\n                        })}\n                    </div>\n                    {hasSubLabels && (\n                        <div className='display-flex justify-content-between margin-top-5 gap-25'>\n                            {leftLabel ? <label className='word-wrap text-color-dark'>{leftLabel}</label> : <div />}\n                            {rightLabel ? <label className='word-wrap text-color-dark'>{rightLabel}</label> : <div />}\n                        </div>\n                    )}\n                </div>\n                {trailingIcon && <div className={leadingTrailingIconClasses}>{trailingIcon}</div>}\n            </div>\n        </div>\n    );\n};\n\nexport default FeedbackRating;\n"],"mappings":";;;;;AAyEA,IAAM,KAAkB,MAA+B;CACnD,IAAM,EACF,aACA,WAAQ,GACR,mBAAgB,IAChB,iBACA,iBACA,qBAAkB,IAClB,cACA,eACA,gBACA,iBACA,2BAAwB,CAAC,GACzB,GAAG,MACH,GAEE,CAAC,GAAQ,KAAa,EAAiB,GAEvC,KAAgB,MAA8B;EAEhD,AADA,EAAU,CAAK,GACf,EAAgB,CAAK;CACzB,GAEM,IAAe,CAAC,CAAC,KAAa,CAAC,CAAC,GAEhC,IAAuB,EACzB,uBACA,IAAe,sBAAsB,sBACrC,gBACA,kBACJ,GAEM,IAA6B,EAC/B,mCACA,oBACA,KAAgB,eACpB;CAEA,OACI,kBAAC,OAAD;EAAK,GAAI;EAAgB,WAAU;YAAnC,CACK,KAAY,kBAAC,OAAD;GAAK,WAAU;aAA6C;EAAc,CAAA,GACvF,kBAAC,OAAD;GAAK,WAAW;aAAhB;IACK,KAAe,kBAAC,OAAD;KAAK,WAAW;eAA6B;IAAiB,CAAA;IAC9E,kBAAC,OAAD,EAAA,UAAA,CACI,kBAAC,OAAD;KAAK,WAAU;eACV,MAAM,KAAK,EAAE,QAAQ,EAAM,IAAI,GAAG,MAAU;MACzC,IAAM,IAAc,IAAQ;MAC5B,OACI,kBAAC,GAAD;OACI,GAAI,IAAe;OACnB,KAAK;OACL,QAAQ,MAAW;OACnB,UAAU,MAAqB,EAAa,IAAU,IAAc,KAAA,CAAS;OAC7E,WAAW,GAAG,IAAgB,kCAAkC,GAAG,GAAG,EAAgB,GAAG,IAAe,EAAM,CAAC,aAAa;MAGlH,GADT,IAAe,MAAU,CAChB;KAEtB,CAAC;IACA,CAAA,GACJ,KACG,kBAAC,OAAD;KAAK,WAAU;eAAf,CACK,IAAY,kBAAC,SAAD;MAAO,WAAU;gBAA6B;KAAiB,CAAA,IAAI,kBAAC,OAAD,CAAM,CAAA,GACrF,IAAa,kBAAC,SAAD;MAAO,WAAU;gBAA6B;KAAkB,CAAA,IAAI,kBAAC,OAAD,CAAM,CAAA,CACvF;MAER,EAAA,CAAA;IACJ,KAAgB,kBAAC,OAAD;KAAK,WAAW;eAA6B;IAAkB,CAAA;GAC/E;IACJ;;AAEb"}

package/components/feedback/FeedbackReactions.js

@@ -1,114 +1,76 @@
-import { jsxs as f, jsx as l } from "react/jsx-runtime";
-import { useRef as C } from "react";
-import { motion as y } from "motion/react";
-import u from "../../utils/classNames.js";
-import v from "../../hooks/useHover.js";
-const z = (m) => {
-  const {
-    headline: x,
-    animated: s,
-    labelUp: t,
-    labelDown: a,
-    labelPosition: r = "bottom",
-    size: e = "md",
-    colorFillUp: p = "",
-    colorFillDown: d = "",
-    colorHoverUp: h = "primary",
-    colorHoverDown: i = "primary",
-    onVoteUp: o = () => {
-    },
-    onVoteDown: b = () => {
-    },
-    itemClassName: n,
-    ...c
-  } = m, g = u(
-    !!t || !!a ? "display-grid grid-cols-2" : "display-flex",
-    "gap-15",
-    "padding-top-5",
-    "user-select-none"
-  );
-  return /* @__PURE__ */ f("div", { ...c, className: g, children: [
-    /* @__PURE__ */ l(
-      N,
-      {
-        size: e,
-        fillColor: d,
-        hoverColor: i,
-        animated: s,
-        iconName: "thumbs-down",
-        text: a,
-        labelPosition: r,
-        onClick: b,
-        className: n
-      }
-    ),
-    /* @__PURE__ */ l(
-      N,
-      {
-        size: e,
-        fillColor: p,
-        hoverColor: h,
-        animated: s,
-        iconName: "thumbs-up",
-        text: t,
-        labelPosition: r,
-        onClick: o,
-        className: n
-      }
-    )
-  ] });
-}, N = (m) => {
-  const {
-    size: x,
-    text: s,
-    iconName: t,
-    onClick: a,
-    fillColor: r,
-    hoverColor: e,
-    animated: p = !1,
-    labelPosition: d = "bottom",
-    className: h
-  } = m, i = C(null), o = v(i), b = u(
-    x === "sm" ? "width-40" : "width-50",
-    "aspect-ratio-1",
-    "border rounded-circle",
-    r ? `bg-${r} text-color-white` : "bg-lightest",
-    o ? `border-color-${e} text-color-${e}` : "border-color-lightest",
-    "display-grid place-items-center",
-    "text-size-14"
-  ), n = u(
-    "display-flex",
-    "gap-10",
-    d === "bottom" ? "flex-column" : "",
-    "align-items-center",
-    "text-center",
-    "cursor-pointer",
-    h
-  ), c = t.includes("up");
-  return /* @__PURE__ */ f("div", { ref: i, className: n, onClick: a, children: [
-    /* @__PURE__ */ l("div", { className: b, children: /* @__PURE__ */ l(
-      y.span,
-      {
-        initial: { y: 0, rotate: 0 },
-        animate: p && o ? { y: [0, c ? -3 : 3, 0], rotate: [0, c ? -10 : 10, 0] } : { y: 0 },
-        transition: {
-          duration: 0.6,
-          repeat: o ? Number.POSITIVE_INFINITY : 0,
-          repeatType: "loop"
-        },
-        className: `rioglyph rioglyph-${t} text-size-200pct`
-      }
-    ) }),
-    /* @__PURE__ */ l(
-      "div",
-      {
-        className: `text-wrap-balance line-height-125rel text-medium ${o ? `text-color-${e}` : "text-color-darker"}`,
-        children: s
-      }
-    )
-  ] });
+import e from "../../hooks/useHover.js";
+import t from "../../utils/classNames.js";
+import { normalizeIconName as n } from "../../utils/iconNames.js";
+import { useRef as r } from "react";
+import { motion as i } from "motion/react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/feedback/FeedbackReactions.tsx
+var s = (e) => {
+	let { headline: n, animated: r, labelUp: i, labelDown: s, labelPosition: l = "bottom", size: u = "md", colorFillUp: d = "", colorFillDown: f = "", colorHoverUp: p = "primary", colorHoverDown: m = "primary", onVoteUp: h = () => {}, onVoteDown: g = () => {}, itemClassName: _, ...v } = e, y = t(i || s ? "display-grid grid-cols-2" : "display-flex", "gap-15", "padding-top-5", "user-select-none");
+	return /* @__PURE__ */ o("div", {
+		...v,
+		className: y,
+		children: [/* @__PURE__ */ a(c, {
+			size: u,
+			fillColor: f,
+			hoverColor: m,
+			animated: r,
+			iconName: "thumbs-down",
+			text: s,
+			labelPosition: l,
+			onClick: g,
+			className: _
+		}), /* @__PURE__ */ a(c, {
+			size: u,
+			fillColor: d,
+			hoverColor: p,
+			animated: r,
+			iconName: "thumbs-up",
+			text: i,
+			labelPosition: l,
+			onClick: h,
+			className: _
+		})]
+	});
+}, c = (s) => {
+	let { size: c, text: l, iconName: u, onClick: d, fillColor: f, hoverColor: p, animated: m = !1, labelPosition: h = "bottom", className: g } = s, _ = r(null), v = e(_), y = t(c === "sm" ? "width-40" : "width-50", "aspect-ratio-1", "border rounded-circle", f ? `bg-${f} text-color-white` : "bg-lightest", v ? `border-color-${p} text-color-${p}` : "border-color-lightest", "display-grid place-items-center", "text-size-14"), b = t("display-flex", "gap-10", h === "bottom" ? "flex-column" : "", "align-items-center", "text-center", "cursor-pointer", g), x = u.includes("up");
+	return /* @__PURE__ */ o("div", {
+		ref: _,
+		className: b,
+		onClick: d,
+		children: [/* @__PURE__ */ a("div", {
+			className: y,
+			children: /* @__PURE__ */ a(i.span, {
+				initial: {
+					y: 0,
+					rotate: 0
+				},
+				animate: m && v ? {
+					y: [
+						0,
+						x ? -3 : 3,
+						0
+					],
+					rotate: [
+						0,
+						x ? -10 : 10,
+						0
+					]
+				} : { y: 0 },
+				transition: {
+					duration: .6,
+					repeat: v ? Infinity : 0,
+					repeatType: "loop"
+				},
+				className: `uikit-icon ${n(u)} text-size-200pct`
+			})
+		}), /* @__PURE__ */ a("div", {
+			className: `text-wrap-balance line-height-125rel text-medium ${v ? `text-color-${p}` : "text-color-darker"}`,
+			children: l
+		})]
+	});
 };
-export {
-  z as default
-};
-//# sourceMappingURL=FeedbackReactions.js.map
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=FeedbackReactions.js.map

package/components/feedback/FeedbackReactions.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeedbackReactions.js","sources":["../../../src/components/feedback/FeedbackReactions.tsx"],"sourcesContent":["import React, { type ComponentProps, useRef } from 'react';\nimport { motion } from 'motion/react';\n\nimport classNames from '../../utils/classNames';\nimport useHover from '../../hooks/useHover';\n\ntype FeedbackReactionsProps = ComponentProps<'div'> & {\n    /**\n     * Optional headline inlined with the buttons.\n     */\n    headline?: React.ReactNode;\n\n    /**\n     * Size of the reaction buttons.\n     *\n     * @default 'md'\n     */\n    size?: 'sm' | 'md';\n\n    /**\n     * Position of the reaction button labels.\n     *\n     * @default 'bottom'\n     */\n    labelPosition?: 'right' | 'bottom';\n\n    /**\n     * Label for the up button.\n     */\n    labelUp?: React.ReactNode;\n\n    /**\n     * Label for the down button.\n     */\n    labelDown?: React.ReactNode;\n\n    /**\n     * Custom fill color for the up button.\n     *\n     * @default 'bg-lightest'\n     */\n    colorFillUp?: string;\n\n    /**\n     * Custom fill color for the down button.\n     *\n     * @default 'bg-lightest'\n     */\n    colorFillDown?: string;\n\n    /**\n     * Custom hover color for the up button.\n     *\n     * @default 'primary'\n     */\n    colorHoverUp?: string;\n\n    /**\n     * Custom hover color for the down button.\n     *\n     * @default 'primary'\n     */\n    colorHoverDown?: string;\n\n    /**\n     * Callback function triggered on up vote.\n     */\n    onVoteUp?: VoidFunction;\n\n    /**\n     * Callback function triggered on down vote.\n     */\n    onVoteDown?: VoidFunction;\n\n    /**\n     * Additional classes applied to the individual reaction item (button and label).\n     */\n    itemClassName?: string;\n\n    /**\n     * Defines whether the reaction icon is animated.\n     *\n     * @default false\n     */\n    animated?: boolean;\n};\n\nconst FeedbackReactions = (props: FeedbackReactionsProps) => {\n    const {\n        headline,\n        animated,\n        labelUp,\n        labelDown,\n        labelPosition = 'bottom',\n        size = 'md',\n        colorFillUp = '',\n        colorFillDown = '',\n        colorHoverUp = 'primary',\n        colorHoverDown = 'primary',\n        onVoteUp = () => {},\n        onVoteDown = () => {},\n        itemClassName,\n        ...remainingProps\n    } = props;\n\n    const hasLabels = !!labelUp || !!labelDown;\n\n    const wrapperClassName = classNames(\n        hasLabels ? 'display-grid grid-cols-2' : 'display-flex',\n        'gap-15',\n        'padding-top-5',\n        'user-select-none'\n    );\n\n    return (\n        <div {...remainingProps} className={wrapperClassName}>\n            <FeedbackItem\n                size={size}\n                fillColor={colorFillDown}\n                hoverColor={colorHoverDown}\n                animated={animated}\n                iconName='thumbs-down'\n                text={labelDown}\n                labelPosition={labelPosition}\n                onClick={onVoteDown}\n                className={itemClassName}\n            />\n            <FeedbackItem\n                size={size}\n                fillColor={colorFillUp}\n                hoverColor={colorHoverUp}\n                animated={animated}\n                iconName='thumbs-up'\n                text={labelUp}\n                labelPosition={labelPosition}\n                onClick={onVoteUp}\n                className={itemClassName}\n            />\n        </div>\n    );\n};\n\ntype FeedbackItemProps = {\n    text?: React.ReactNode;\n    iconName: string;\n    onClick: VoidFunction;\n    fillColor: string;\n    hoverColor: string;\n    animated?: boolean;\n    labelPosition?: 'right' | 'bottom';\n    size?: 'sm' | 'md';\n    className?: string;\n};\n\nconst FeedbackItem = (props: FeedbackItemProps) => {\n    const {\n        size,\n        text,\n        iconName,\n        onClick,\n        fillColor,\n        hoverColor,\n        animated = false,\n        labelPosition = 'bottom',\n        className,\n    } = props;\n\n    const ref = useRef<HTMLDivElement>(null);\n    const isHover = useHover(ref);\n\n    const iconClasses = classNames(\n        size === 'sm' ? 'width-40' : 'width-50',\n        'aspect-ratio-1',\n        'border rounded-circle',\n        fillColor ? `bg-${fillColor} text-color-white` : 'bg-lightest',\n        isHover ? `border-color-${hoverColor} text-color-${hoverColor}` : 'border-color-lightest',\n        'display-grid place-items-center',\n        'text-size-14'\n    );\n\n    const wrapperClassName = classNames(\n        'display-flex',\n        'gap-10',\n        labelPosition === 'bottom' ? 'flex-column' : '',\n        'align-items-center',\n        'text-center',\n        'cursor-pointer',\n        className\n    );\n\n    const isUp = iconName.includes('up');\n\n    return (\n        <div ref={ref} className={wrapperClassName} onClick={onClick}>\n            <div className={iconClasses}>\n                <motion.span\n                    initial={{ y: 0, rotate: 0 }}\n                    animate={\n                        animated && isHover ? { y: [0, isUp ? -3 : 3, 0], rotate: [0, isUp ? -10 : 10, 0] } : { y: 0 }\n                    }\n                    transition={{\n                        duration: 0.6,\n                        repeat: isHover ? Number.POSITIVE_INFINITY : 0,\n                        repeatType: 'loop',\n                    }}\n                    className={`rioglyph rioglyph-${iconName} text-size-200pct`}\n                />\n            </div>\n            <div\n                className={`text-wrap-balance line-height-125rel text-medium ${isHover ? `text-color-${hoverColor}` : 'text-color-darker'}`}\n            >\n                {text}\n            </div>\n        </div>\n    );\n};\n\nexport default FeedbackReactions;\n"],"names":["FeedbackReactions","props","headline","animated","labelUp","labelDown","labelPosition","size","colorFillUp","colorFillDown","colorHoverUp","colorHoverDown","onVoteUp","onVoteDown","itemClassName","remainingProps","wrapperClassName","classNames","jsxs","jsx","FeedbackItem","text","iconName","onClick","fillColor","hoverColor","className","ref","useRef","isHover","useHover","iconClasses","isUp","motion"],"mappings":";;;;;AAuFA,MAAMA,IAAoB,CAACC,MAAkC;AACzD,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,MAAAC,IAAO;AAAA,IACP,aAAAC,IAAc;AAAA,IACd,eAAAC,IAAgB;AAAA,IAChB,cAAAC,IAAe;AAAA,IACf,gBAAAC,IAAiB;AAAA,IACjB,UAAAC,IAAW,MAAM;AAAA,IAAC;AAAA,IAClB,YAAAC,IAAa,MAAM;AAAA,IAAC;AAAA,IACpB,eAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHd,GAIEe,IAAmBC;AAAA,IAFP,CAAC,CAACb,KAAW,CAAC,CAACC,IAGjB,6BAA6B;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGJ,SACI,gBAAAa,EAAC,OAAA,EAAK,GAAGH,GAAgB,WAAWC,GAChC,UAAA;AAAA,IAAA,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,MAAAb;AAAA,QACA,WAAWE;AAAA,QACX,YAAYE;AAAA,QACZ,UAAAR;AAAA,QACA,UAAS;AAAA,QACT,MAAME;AAAA,QACN,eAAAC;AAAA,QACA,SAASO;AAAA,QACT,WAAWC;AAAA,MAAA;AAAA,IAAA;AAAA,IAEf,gBAAAK;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,MAAAb;AAAA,QACA,WAAWC;AAAA,QACX,YAAYE;AAAA,QACZ,UAAAP;AAAA,QACA,UAAS;AAAA,QACT,MAAMC;AAAA,QACN,eAAAE;AAAA,QACA,SAASM;AAAA,QACT,WAAWE;AAAA,MAAA;AAAA,IAAA;AAAA,EACf,GACJ;AAER,GAcMM,IAAe,CAACnB,MAA6B;AAC/C,QAAM;AAAA,IACF,MAAAM;AAAA,IACA,MAAAc;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAtB,IAAW;AAAA,IACX,eAAAG,IAAgB;AAAA,IAChB,WAAAoB;AAAA,EAAA,IACAzB,GAEE0B,IAAMC,EAAuB,IAAI,GACjCC,IAAUC,EAASH,CAAG,GAEtBI,IAAcd;AAAA,IAChBV,MAAS,OAAO,aAAa;AAAA,IAC7B;AAAA,IACA;AAAA,IACAiB,IAAY,MAAMA,CAAS,sBAAsB;AAAA,IACjDK,IAAU,gBAAgBJ,CAAU,eAAeA,CAAU,KAAK;AAAA,IAClE;AAAA,IACA;AAAA,EAAA,GAGET,IAAmBC;AAAA,IACrB;AAAA,IACA;AAAA,IACAX,MAAkB,WAAW,gBAAgB;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACAoB;AAAA,EAAA,GAGEM,IAAOV,EAAS,SAAS,IAAI;AAEnC,SACI,gBAAAJ,EAAC,OAAA,EAAI,KAAAS,GAAU,WAAWX,GAAkB,SAAAO,GACxC,UAAA;AAAA,IAAA,gBAAAJ,EAAC,OAAA,EAAI,WAAWY,GACZ,UAAA,gBAAAZ;AAAA,MAACc,EAAO;AAAA,MAAP;AAAA,QACG,SAAS,EAAE,GAAG,GAAG,QAAQ,EAAA;AAAA,QACzB,SACI9B,KAAY0B,IAAU,EAAE,GAAG,CAAC,GAAGG,IAAO,KAAK,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAGA,IAAO,MAAM,IAAI,CAAC,EAAA,IAAM,EAAE,GAAG,EAAA;AAAA,QAE/F,YAAY;AAAA,UACR,UAAU;AAAA,UACV,QAAQH,IAAU,OAAO,oBAAoB;AAAA,UAC7C,YAAY;AAAA,QAAA;AAAA,QAEhB,WAAW,qBAAqBP,CAAQ;AAAA,MAAA;AAAA,IAAA,GAEhD;AAAA,IACA,gBAAAH;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,oDAAoDU,IAAU,cAAcJ,CAAU,KAAK,mBAAmB;AAAA,QAExH,UAAAJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GACJ;AAER;"}
+{"version":3,"file":"FeedbackReactions.js","names":[],"sources":["../../../src/components/feedback/FeedbackReactions.tsx"],"sourcesContent":["import React, { type ComponentProps, useRef } from 'react';\nimport { motion } from 'motion/react';\n\nimport classNames from '../../utils/classNames';\nimport { normalizeIconName } from '../../utils/iconNames';\nimport useHover from '../../hooks/useHover';\nimport type { IconType } from '../icon/Icon';\n\ntype FeedbackReactionsProps = ComponentProps<'div'> & {\n    /**\n     * Optional headline inlined with the buttons.\n     */\n    headline?: React.ReactNode;\n\n    /**\n     * Size of the reaction buttons.\n     *\n     * @default 'md'\n     */\n    size?: 'sm' | 'md';\n\n    /**\n     * Position of the reaction button labels.\n     *\n     * @default 'bottom'\n     */\n    labelPosition?: 'right' | 'bottom';\n\n    /**\n     * Label for the up button.\n     */\n    labelUp?: React.ReactNode;\n\n    /**\n     * Label for the down button.\n     */\n    labelDown?: React.ReactNode;\n\n    /**\n     * Custom fill color for the up button.\n     *\n     * @default 'bg-lightest'\n     */\n    colorFillUp?: string;\n\n    /**\n     * Custom fill color for the down button.\n     *\n     * @default 'bg-lightest'\n     */\n    colorFillDown?: string;\n\n    /**\n     * Custom hover color for the up button.\n     *\n     * @default 'primary'\n     */\n    colorHoverUp?: string;\n\n    /**\n     * Custom hover color for the down button.\n     *\n     * @default 'primary'\n     */\n    colorHoverDown?: string;\n\n    /**\n     * Callback function triggered on up vote.\n     */\n    onVoteUp?: VoidFunction;\n\n    /**\n     * Callback function triggered on down vote.\n     */\n    onVoteDown?: VoidFunction;\n\n    /**\n     * Additional classes applied to the individual reaction item (button and label).\n     */\n    itemClassName?: string;\n\n    /**\n     * Defines whether the reaction icon is animated.\n     *\n     * @default false\n     */\n    animated?: boolean;\n};\n\nconst FeedbackReactions = (props: FeedbackReactionsProps) => {\n    const {\n        headline,\n        animated,\n        labelUp,\n        labelDown,\n        labelPosition = 'bottom',\n        size = 'md',\n        colorFillUp = '',\n        colorFillDown = '',\n        colorHoverUp = 'primary',\n        colorHoverDown = 'primary',\n        onVoteUp = () => {},\n        onVoteDown = () => {},\n        itemClassName,\n        ...remainingProps\n    } = props;\n\n    const hasLabels = !!labelUp || !!labelDown;\n\n    const wrapperClassName = classNames(\n        hasLabels ? 'display-grid grid-cols-2' : 'display-flex',\n        'gap-15',\n        'padding-top-5',\n        'user-select-none'\n    );\n\n    return (\n        <div {...remainingProps} className={wrapperClassName}>\n            <FeedbackItem\n                size={size}\n                fillColor={colorFillDown}\n                hoverColor={colorHoverDown}\n                animated={animated}\n                iconName='thumbs-down'\n                text={labelDown}\n                labelPosition={labelPosition}\n                onClick={onVoteDown}\n                className={itemClassName}\n            />\n            <FeedbackItem\n                size={size}\n                fillColor={colorFillUp}\n                hoverColor={colorHoverUp}\n                animated={animated}\n                iconName='thumbs-up'\n                text={labelUp}\n                labelPosition={labelPosition}\n                onClick={onVoteUp}\n                className={itemClassName}\n            />\n        </div>\n    );\n};\n\ntype FeedbackItemProps = {\n    text?: React.ReactNode;\n    iconName: IconType;\n    onClick: VoidFunction;\n    fillColor: string;\n    hoverColor: string;\n    animated?: boolean;\n    labelPosition?: 'right' | 'bottom';\n    size?: 'sm' | 'md';\n    className?: string;\n};\n\nconst FeedbackItem = (props: FeedbackItemProps) => {\n    const {\n        size,\n        text,\n        iconName,\n        onClick,\n        fillColor,\n        hoverColor,\n        animated = false,\n        labelPosition = 'bottom',\n        className,\n    } = props;\n\n    const ref = useRef<HTMLDivElement>(null);\n    const isHover = useHover(ref);\n\n    const iconClasses = classNames(\n        size === 'sm' ? 'width-40' : 'width-50',\n        'aspect-ratio-1',\n        'border rounded-circle',\n        fillColor ? `bg-${fillColor} text-color-white` : 'bg-lightest',\n        isHover ? `border-color-${hoverColor} text-color-${hoverColor}` : 'border-color-lightest',\n        'display-grid place-items-center',\n        'text-size-14'\n    );\n\n    const wrapperClassName = classNames(\n        'display-flex',\n        'gap-10',\n        labelPosition === 'bottom' ? 'flex-column' : '',\n        'align-items-center',\n        'text-center',\n        'cursor-pointer',\n        className\n    );\n\n    const isUp = iconName.includes('up');\n\n    return (\n        <div ref={ref} className={wrapperClassName} onClick={onClick}>\n            <div className={iconClasses}>\n                <motion.span\n                    initial={{ y: 0, rotate: 0 }}\n                    animate={\n                        animated && isHover ? { y: [0, isUp ? -3 : 3, 0], rotate: [0, isUp ? -10 : 10, 0] } : { y: 0 }\n                    }\n                    transition={{\n                        duration: 0.6,\n                        repeat: isHover ? Number.POSITIVE_INFINITY : 0,\n                        repeatType: 'loop',\n                    }}\n                    className={`uikit-icon ${normalizeIconName(iconName)} text-size-200pct`}\n                />\n            </div>\n            <div\n                className={`text-wrap-balance line-height-125rel text-medium ${isHover ? `text-color-${hoverColor}` : 'text-color-darker'}`}\n            >\n                {text}\n            </div>\n        </div>\n    );\n};\n\nexport default FeedbackReactions;\n"],"mappings":";;;;;;;AAyFA,IAAM,KAAqB,MAAkC;CACzD,IAAM,EACF,aACA,aACA,YACA,cACA,mBAAgB,UAChB,UAAO,MACP,iBAAc,IACd,mBAAgB,IAChB,kBAAe,WACf,oBAAiB,WACjB,oBAAiB,CAAC,GAClB,sBAAmB,CAAC,GACpB,kBACA,GAAG,MACH,GAIE,IAAmB,EAFL,KAAa,IAGjB,6BAA6B,gBACzC,UACA,iBACA,kBACJ;CAEA,OACI,kBAAC,OAAD;EAAK,GAAI;EAAgB,WAAW;YAApC,CACI,kBAAC,GAAD;GACU;GACN,WAAW;GACX,YAAY;GACF;GACV,UAAS;GACT,MAAM;GACS;GACf,SAAS;GACT,WAAW;EACd,CAAA,GACD,kBAAC,GAAD;GACU;GACN,WAAW;GACX,YAAY;GACF;GACV,UAAS;GACT,MAAM;GACS;GACf,SAAS;GACT,WAAW;EACd,CAAA,CACA;;AAEb,GAcM,KAAgB,MAA6B;CAC/C,IAAM,EACF,SACA,SACA,aACA,YACA,cACA,eACA,cAAW,IACX,mBAAgB,UAChB,iBACA,GAEE,IAAM,EAAuB,IAAI,GACjC,IAAU,EAAS,CAAG,GAEtB,IAAc,EAChB,MAAS,OAAO,aAAa,YAC7B,kBACA,yBACA,IAAY,MAAM,EAAU,qBAAqB,eACjD,IAAU,gBAAgB,EAAW,cAAc,MAAe,yBAClE,mCACA,cACJ,GAEM,IAAmB,EACrB,gBACA,UACA,MAAkB,WAAW,gBAAgB,IAC7C,sBACA,eACA,kBACA,CACJ,GAEM,IAAO,EAAS,SAAS,IAAI;CAEnC,OACI,kBAAC,OAAD;EAAU;EAAK,WAAW;EAA2B;YAArD,CACI,kBAAC,OAAD;GAAK,WAAW;aACZ,kBAAC,EAAO,MAAR;IACI,SAAS;KAAE,GAAG;KAAG,QAAQ;IAAE;IAC3B,SACI,KAAY,IAAU;KAAE,GAAG;MAAC;MAAG,IAAO,KAAK;MAAG;KAAC;KAAG,QAAQ;MAAC;MAAG,IAAO,MAAM;MAAI;KAAC;IAAE,IAAI,EAAE,GAAG,EAAE;IAEjG,YAAY;KACR,UAAU;KACV,QAAQ,IAAU,WAA2B;KAC7C,YAAY;IAChB;IACA,WAAW,cAAc,EAAkB,CAAQ,EAAE;GACxD,CAAA;EACA,CAAA,GACL,kBAAC,OAAD;GACI,WAAW,oDAAoD,IAAU,cAAc,MAAe;aAErG;EACA,CAAA,CACJ;;AAEb"}

package/components/filepicker/FilePicker.js

@@ -1,52 +1,39 @@
-import { jsxs as d, jsx as c } from "react/jsx-runtime";
-import { useRef as h, useCallback as j, useEffect as y } from "react";
-import E from "react-dropzone";
-import { noop as I } from "es-toolkit/compat";
-import v from "../button/Button.js";
-const l = (D) => {
-  const {
-    displayMode: n = "button",
-    multiple: b = !0,
-    label: O = "Select files",
-    maxSize: P,
-    onPick: i = I,
-    className: k = "",
-    accept: e,
-    fullHeight: a = !1,
-    children: p,
-    ...g
-  } = D, u = h(null), t = h(null), m = n === "full", L = m || n === "button", z = m || n === "dropzone", R = j(
-    (o, s) => {
-      const _ = e && Object.keys(e).some((r) => r.startsWith("image")) ? o.map((r) => Object.assign(r, { preview: URL.createObjectURL(r) })) : o;
-      i(_, s);
-    },
-    [i, e]
-  ), S = () => u.current?.open();
-  return y(() => {
-    t.current && a && t.current.querySelector(".FilePicker > div")?.setAttribute("class", "height-100pct");
-  }, [a, t.current]), /* @__PURE__ */ d("div", { ref: t, className: "FilePicker", children: [
-    L && /* @__PURE__ */ c(v, { onClick: S, className: k, children: O }),
-    /* @__PURE__ */ c(
-      E,
-      {
-        ...g,
-        onDrop: R,
-        accept: e,
-        multiple: b,
-        maxSize: P,
-        ref: u,
-        children: ({ getRootProps: o, getInputProps: s, isDragActive: f }) => /* @__PURE__ */ d("div", { ...o(), children: [
-          /* @__PURE__ */ c("input", { ...s() }),
-          z && p && p({ isDragActive: f })
-        ] })
-      }
-    )
-  ] });
+import e from "../button/Button.js";
+import { useCallback as t, useEffect as n, useRef as r } from "react";
+import { noop as i } from "es-toolkit/compat";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import s from "react-dropzone";
+//#region src/components/filepicker/FilePicker.tsx
+var c = (c) => {
+	let { displayMode: l = "button", multiple: u = !0, label: d = "Select files", maxSize: f, onPick: p = i, className: m = "", accept: h, fullHeight: g = !1, children: _, ...v } = c, y = r(null), b = r(null), x = l === "full", S = x || l === "button", C = x || l === "dropzone", w = t((e, t) => {
+		let n = h && Object.keys(h).some((e) => e.startsWith("image")) ? e.map((e) => Object.assign(e, { preview: URL.createObjectURL(e) })) : e;
+		p(n, t);
+	}, [p, h]);
+	return n(() => {
+		b.current && g && b.current.querySelector(".FilePicker > div")?.setAttribute("class", "height-100pct");
+	}, [g, b.current]), /* @__PURE__ */ o("div", {
+		ref: b,
+		className: "FilePicker",
+		children: [S && /* @__PURE__ */ a(e, {
+			onClick: () => y.current?.open(),
+			className: m,
+			children: d
+		}), /* @__PURE__ */ a(s, {
+			...v,
+			onDrop: w,
+			accept: h,
+			multiple: u,
+			maxSize: f,
+			ref: y,
+			children: ({ getRootProps: e, getInputProps: t, isDragActive: n }) => /* @__PURE__ */ o("div", {
+				...e(),
+				children: [/* @__PURE__ */ a("input", { ...t() }), C && _ && _({ isDragActive: n })]
+			})
+		})]
+	});
 };
-l.DISPLAY_MODE_BUTTON = "button";
-l.DISPLAY_MODE_DROPZONE = "dropzone";
-l.DISPLAY_MODE_FULL = "full";
-export {
-  l as default
-};
-//# sourceMappingURL=FilePicker.js.map
+c.DISPLAY_MODE_BUTTON = "button", c.DISPLAY_MODE_DROPZONE = "dropzone", c.DISPLAY_MODE_FULL = "full";
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=FilePicker.js.map

package/components/filepicker/FilePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker.js","sources":["../../../src/components/filepicker/FilePicker.tsx"],"sourcesContent":["import { type ReactNode, useCallback, useEffect, useRef } from 'react';\nimport Dropzone, { type FileRejection, type DropzoneProps, type DropzoneRef } from 'react-dropzone';\nimport { noop } from 'es-toolkit/compat';\n\nimport Button from '../button/Button';\n\ntype FilePickerRenderProps = {\n    isDragActive: boolean;\n};\n\nexport type FilePickerProps = {\n    /**\n     * Defines the file picker display mode.\n     *\n     * Possible values are `'button'` for a single button, `'dropzone'` for a custom dropzone passed as child function,\n     * or `'full'` for showing both.\n     *\n     * @default 'button'\n     */\n    displayMode?: 'button' | 'dropzone' | 'full';\n\n    /**\n     * Indicating if multiple files may be selected.\n     *\n     * @default true\n     */\n    multiple?: boolean; // multi select\n\n    /**\n     * Text to display on Button if displayMode is set to \"button\".\n     *\n     * @default 'Select files'\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Maximum file size in byte. 5 MB = 5,242,880 byte\n     */\n    maxSize?: number;\n\n    /**\n     * Function called after one or multiple files have been picked.\n     */\n    onPick?: (files: File[], rejectedFiles: FileRejection[]) => void;\n\n    /**\n     * Additional classes for the select button.\n     */\n    className?: string;\n\n    /**\n     * Flag to set the dropzone wrapper element to 100% height.\n     *\n     * This comes in handy, when the dropzone should have 100 % height so it can grow.\n     *\n     * @default false\n     */\n    fullHeight?: boolean;\n\n    /**\n     * Object list of accepted Mime Types as keys and file extensions array as value.\n     */\n    accept?: { [mimeType: string]: string[] };\n\n    /**\n     * Pass a custom dropzone element as function receiving some render props.\n     */\n    children?: ({ isDragActive }: FilePickerRenderProps) => React.ReactElement;\n};\n\nconst FilePicker = (props: FilePickerProps) => {\n    const {\n        displayMode = 'button',\n        multiple = true,\n        label = 'Select files',\n        maxSize,\n        onPick = noop,\n        className = '',\n        accept,\n        fullHeight = false,\n        children,\n        ...remainingProps\n    } = props;\n\n    const dropzoneRef = useRef<DropzoneRef>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const isFull = displayMode === 'full';\n    const showButton = isFull || displayMode === 'button';\n    const showDropzone = isFull || displayMode === 'dropzone';\n\n    const handleDrop: NonNullable<DropzoneProps['onDrop']> = useCallback(\n        (acceptedFiles, rejectedFiles) => {\n            const hasImagesType = accept && Object.keys(accept).some(mimeType => mimeType.startsWith('image'));\n            const files = hasImagesType\n                ? acceptedFiles.map(file => Object.assign(file, { preview: URL.createObjectURL(file) }))\n                : acceptedFiles;\n\n            onPick(files, rejectedFiles);\n        },\n        [onPick, accept]\n    );\n\n    const handleClick = () => dropzoneRef.current?.open();\n\n    useEffect(() => {\n        // Set height to dropzones inner presentation div where there is no other access to this DOM element.\n        // This comes in handy, when the dropzone should have 100 % height so it can grow.\n        if (wrapperRef.current && fullHeight) {\n            wrapperRef.current.querySelector('.FilePicker > div')?.setAttribute('class', 'height-100pct');\n        }\n    }, [fullHeight, wrapperRef.current]);\n\n    return (\n        <div ref={wrapperRef} className='FilePicker'>\n            {showButton && (\n                <Button onClick={handleClick} className={className}>\n                    {label}\n                </Button>\n            )}\n            <Dropzone\n                {...remainingProps}\n                onDrop={handleDrop}\n                accept={accept}\n                multiple={multiple}\n                maxSize={maxSize}\n                ref={dropzoneRef}\n            >\n                {({ getRootProps, getInputProps, isDragActive }) => (\n                    <div {...getRootProps()}>\n                        <input {...getInputProps()} />\n                        {showDropzone && children && children({ isDragActive })}\n                    </div>\n                )}\n            </Dropzone>\n        </div>\n    );\n};\n\nFilePicker.DISPLAY_MODE_BUTTON = 'button' as const;\nFilePicker.DISPLAY_MODE_DROPZONE = 'dropzone' as const;\nFilePicker.DISPLAY_MODE_FULL = 'full' as const;\n\nexport default FilePicker;\n"],"names":["FilePicker","props","displayMode","multiple","label","maxSize","onPick","noop","className","accept","fullHeight","children","remainingProps","dropzoneRef","useRef","wrapperRef","isFull","showButton","showDropzone","handleDrop","useCallback","acceptedFiles","rejectedFiles","files","mimeType","file","handleClick","useEffect","jsxs","jsx","Button","Dropzone","getRootProps","getInputProps","isDragActive"],"mappings":";;;;;AAsEA,MAAMA,IAAa,CAACC,MAA2B;AAC3C,QAAM;AAAA,IACF,aAAAC,IAAc;AAAA,IACd,UAAAC,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,SAAAC;AAAA,IACA,QAAAC,IAASC;AAAA,IACT,WAAAC,IAAY;AAAA,IACZ,QAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHX,GAEEY,IAAcC,EAAoB,IAAI,GACtCC,IAAaD,EAAuB,IAAI,GAExCE,IAASd,MAAgB,QACzBe,IAAaD,KAAUd,MAAgB,UACvCgB,IAAeF,KAAUd,MAAgB,YAEzCiB,IAAmDC;AAAA,IACrD,CAACC,GAAeC,MAAkB;AAE9B,YAAMC,IADgBd,KAAU,OAAO,KAAKA,CAAM,EAAE,KAAK,CAAAe,MAAYA,EAAS,WAAW,OAAO,CAAC,IAE3FH,EAAc,IAAI,CAAAI,MAAQ,OAAO,OAAOA,GAAM,EAAE,SAAS,IAAI,gBAAgBA,CAAI,EAAA,CAAG,CAAC,IACrFJ;AAEN,MAAAf,EAAOiB,GAAOD,CAAa;AAAA,IAC/B;AAAA,IACA,CAAChB,GAAQG,CAAM;AAAA,EAAA,GAGbiB,IAAc,MAAMb,EAAY,SAAS,KAAA;AAE/C,SAAAc,EAAU,MAAM;AAGZ,IAAIZ,EAAW,WAAWL,KACtBK,EAAW,QAAQ,cAAc,mBAAmB,GAAG,aAAa,SAAS,eAAe;AAAA,EAEpG,GAAG,CAACL,GAAYK,EAAW,OAAO,CAAC,GAG/B,gBAAAa,EAAC,OAAA,EAAI,KAAKb,GAAY,WAAU,cAC3B,UAAA;AAAA,IAAAE,KACG,gBAAAY,EAACC,GAAA,EAAO,SAASJ,GAAa,WAAAlB,GACzB,UAAAJ,GACL;AAAA,IAEJ,gBAAAyB;AAAA,MAACE;AAAA,MAAA;AAAA,QACI,GAAGnB;AAAA,QACJ,QAAQO;AAAA,QACR,QAAAV;AAAA,QACA,UAAAN;AAAA,QACA,SAAAE;AAAA,QACA,KAAKQ;AAAA,QAEJ,UAAA,CAAC,EAAE,cAAAmB,GAAc,eAAAC,GAAe,cAAAC,EAAA,MAC7B,gBAAAN,EAAC,OAAA,EAAK,GAAGI,EAAA,GACL,UAAA;AAAA,UAAA,gBAAAH,EAAC,SAAA,EAAO,GAAGI,EAAA,EAAc,CAAG;AAAA,UAC3Bf,KAAgBP,KAAYA,EAAS,EAAE,cAAAuB,GAAc;AAAA,QAAA,EAAA,CAC1D;AAAA,MAAA;AAAA,IAAA;AAAA,EAER,GACJ;AAER;AAEAlC,EAAW,sBAAsB;AACjCA,EAAW,wBAAwB;AACnCA,EAAW,oBAAoB;"}
+{"version":3,"file":"FilePicker.js","names":[],"sources":["../../../src/components/filepicker/FilePicker.tsx"],"sourcesContent":["import { type ReactNode, useCallback, useEffect, useRef } from 'react';\nimport Dropzone, { type FileRejection, type DropzoneProps, type DropzoneRef } from 'react-dropzone';\nimport { noop } from 'es-toolkit/compat';\n\nimport Button from '../button/Button';\n\ntype FilePickerRenderProps = {\n    isDragActive: boolean;\n};\n\nexport type FilePickerProps = {\n    /**\n     * Defines the file picker display mode.\n     *\n     * Possible values are `'button'` for a single button, `'dropzone'` for a custom dropzone passed as child function,\n     * or `'full'` for showing both.\n     *\n     * @default 'button'\n     */\n    displayMode?: 'button' | 'dropzone' | 'full';\n\n    /**\n     * Indicating if multiple files may be selected.\n     *\n     * @default true\n     */\n    multiple?: boolean; // multi select\n\n    /**\n     * Text to display on Button if displayMode is set to \"button\".\n     *\n     * @default 'Select files'\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Maximum file size in byte. 5 MB = 5,242,880 byte\n     */\n    maxSize?: number;\n\n    /**\n     * Function called after one or multiple files have been picked.\n     */\n    onPick?: (files: File[], rejectedFiles: FileRejection[]) => void;\n\n    /**\n     * Additional classes for the select button.\n     */\n    className?: string;\n\n    /**\n     * Flag to set the dropzone wrapper element to 100% height.\n     *\n     * This comes in handy, when the dropzone should have 100 % height so it can grow.\n     *\n     * @default false\n     */\n    fullHeight?: boolean;\n\n    /**\n     * Object list of accepted Mime Types as keys and file extensions array as value.\n     */\n    accept?: { [mimeType: string]: string[] };\n\n    /**\n     * Pass a custom dropzone element as function receiving some render props.\n     */\n    children?: ({ isDragActive }: FilePickerRenderProps) => React.ReactElement;\n};\n\nconst FilePicker = (props: FilePickerProps) => {\n    const {\n        displayMode = 'button',\n        multiple = true,\n        label = 'Select files',\n        maxSize,\n        onPick = noop,\n        className = '',\n        accept,\n        fullHeight = false,\n        children,\n        ...remainingProps\n    } = props;\n\n    const dropzoneRef = useRef<DropzoneRef>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const isFull = displayMode === 'full';\n    const showButton = isFull || displayMode === 'button';\n    const showDropzone = isFull || displayMode === 'dropzone';\n\n    const handleDrop: NonNullable<DropzoneProps['onDrop']> = useCallback(\n        (acceptedFiles, rejectedFiles) => {\n            const hasImagesType = accept && Object.keys(accept).some(mimeType => mimeType.startsWith('image'));\n            const files = hasImagesType\n                ? acceptedFiles.map(file => Object.assign(file, { preview: URL.createObjectURL(file) }))\n                : acceptedFiles;\n\n            onPick(files, rejectedFiles);\n        },\n        [onPick, accept]\n    );\n\n    const handleClick = () => dropzoneRef.current?.open();\n\n    useEffect(() => {\n        // Set height to dropzones inner presentation div where there is no other access to this DOM element.\n        // This comes in handy, when the dropzone should have 100 % height so it can grow.\n        if (wrapperRef.current && fullHeight) {\n            wrapperRef.current.querySelector('.FilePicker > div')?.setAttribute('class', 'height-100pct');\n        }\n    }, [fullHeight, wrapperRef.current]);\n\n    return (\n        <div ref={wrapperRef} className='FilePicker'>\n            {showButton && (\n                <Button onClick={handleClick} className={className}>\n                    {label}\n                </Button>\n            )}\n            <Dropzone\n                {...remainingProps}\n                onDrop={handleDrop}\n                accept={accept}\n                multiple={multiple}\n                maxSize={maxSize}\n                ref={dropzoneRef}\n            >\n                {({ getRootProps, getInputProps, isDragActive }) => (\n                    <div {...getRootProps()}>\n                        <input {...getInputProps()} />\n                        {showDropzone && children && children({ isDragActive })}\n                    </div>\n                )}\n            </Dropzone>\n        </div>\n    );\n};\n\nFilePicker.DISPLAY_MODE_BUTTON = 'button' as const;\nFilePicker.DISPLAY_MODE_DROPZONE = 'dropzone' as const;\nFilePicker.DISPLAY_MODE_FULL = 'full' as const;\n\nexport default FilePicker;\n"],"mappings":";;;;;;AAsEA,IAAM,KAAc,MAA2B;CAC3C,IAAM,EACF,iBAAc,UACd,cAAW,IACX,WAAQ,gBACR,YACA,YAAS,GACT,eAAY,IACZ,WACA,gBAAa,IACb,aACA,GAAG,MACH,GAEE,IAAc,EAAoB,IAAI,GACtC,IAAa,EAAuB,IAAI,GAExC,IAAS,MAAgB,QACzB,IAAa,KAAU,MAAgB,UACvC,IAAe,KAAU,MAAgB,YAEzC,IAAmD,GACpD,GAAe,MAAkB;EAE9B,IAAM,IADgB,KAAU,OAAO,KAAK,CAAM,CAAC,CAAC,MAAK,MAAY,EAAS,WAAW,OAAO,CAAC,IAE3F,EAAc,KAAI,MAAQ,OAAO,OAAO,GAAM,EAAE,SAAS,IAAI,gBAAgB,CAAI,EAAE,CAAC,CAAC,IACrF;EAEN,EAAO,GAAO,CAAa;CAC/B,GACA,CAAC,GAAQ,CAAM,CACnB;CAYA,OARA,QAAgB;EAGZ,AAAI,EAAW,WAAW,KACtB,EAAW,QAAQ,cAAc,mBAAmB,CAAC,EAAE,aAAa,SAAS,eAAe;CAEpG,GAAG,CAAC,GAAY,EAAW,OAAO,CAAC,GAG/B,kBAAC,OAAD;EAAK,KAAK;EAAY,WAAU;YAAhC,CACK,KACG,kBAAC,GAAD;GAAQ,eAbM,EAAY,SAAS,KAAK;GAaC;aACpC;EACG,CAAA,GAEZ,kBAAC,GAAD;GACI,GAAI;GACJ,QAAQ;GACA;GACE;GACD;GACT,KAAK;cAEH,EAAE,iBAAc,kBAAe,sBAC7B,kBAAC,OAAD;IAAK,GAAI,EAAa;cAAtB,CACI,kBAAC,SAAD,EAAO,GAAI,EAAc,EAAI,CAAA,GAC5B,KAAgB,KAAY,EAAS,EAAE,gBAAa,CAAC,CACrD;;EAEH,CAAA,CACT;;AAEb;AAEA,EAAW,sBAAsB,UACjC,EAAW,wBAAwB,YACnC,EAAW,oBAAoB"}