@rio-cloud/rio-uikit 2.0.1 → 2.2.0

package/components/button/Button.js

@@ -1,10 +1,10 @@
-import { jsxs as v, jsx as U } from "react/jsx-runtime";
-import { forwardRef as h, useState as b, useRef as P } from "react";
-import j from "classnames";
-import { noop as x } from "es-toolkit/function";
-import { createButtonRipple as K } from "../../utils/buttonEffect.js";
-import Y from "../../hooks/useMergeRefs.js";
-const w = {
+import { jsxs as R, jsx as E } from "react/jsx-runtime";
+import { forwardRef as j, useState as L, useRef as K } from "react";
+import { noop as Y } from "es-toolkit/function";
+import $ from "../../utils/classNames.js";
+import { createButtonRipple as S } from "../../utils/buttonEffect.js";
+import w from "../../hooks/useMergeRefs.js";
+const B = {
   DEFAULT: "default",
   UNSTYLED: "unstyled",
   PRIMARY: "primary",
@@ -15,7 +15,7 @@ const w = {
   SUCCESS: "success",
   MUTED: "muted",
   MUTED_FILLED: "muted-filled"
-}, t = {
+}, s = {
   VARIANT_LINK: "link",
   VARIANT_LINK_INLINE: "link-inline",
   VARIANT_OUTLINE: "outline",
@@ -25,75 +25,98 @@ const w = {
   SM: "sm",
   MD: "md",
   LG: "lg"
-}, o = h((I, m) => {
+}, r = j((_, k) => {
   const {
-    active: n = !1,
-    disabled: u = !1,
-    asToggle: l = !1,
-    onClick: a = x,
-    bsStyle: T = "default",
-    bsSize: c,
-    variant: e,
-    iconOnly: g = !1,
-    iconName: r,
-    iconRight: R = !1,
-    multiline: d = !1,
-    block: p = !1,
-    className: E = "",
-    noRippleEffect: S = !1,
-    type: L = "button",
-    tabIndex: _ = 0,
-    children: k,
-    ...O
-  } = I, [N, f] = b(n), A = P(null), C = Y(A, m), [M, V] = b(n);
-  n !== M && (f(n), V(n));
-  const y = (s) => {
-    if (S || K(s.nativeEvent, s.currentTarget), l) {
-      const i = !N;
-      f(i), i && A.current?.blur(), a(i);
+    as: a = "button",
+    active: t = !1,
+    disabled: e = !1,
+    asToggle: f = !1,
+    onClick: l = Y,
+    bsStyle: C = "default",
+    bsSize: N,
+    variant: i,
+    iconOnly: O = !1,
+    iconName: o,
+    iconRight: h = !1,
+    multiline: y = !1,
+    block: D = !1,
+    className: M = "",
+    noRippleEffect: b = !1,
+    type: V = "button",
+    tabIndex: u = 0,
+    children: A,
+    ...I
+  } = _, [m, d] = L(t), g = K(null), T = w(g, k), [v, U] = L(t);
+  t !== v && (d(t), U(t));
+  const x = (n) => {
+    if (b || S(n.nativeEvent, n.currentTarget), f) {
+      const c = !m;
+      d(c), c && g.current?.blur(), l(c);
     } else
-      a(s);
-  }, D = j(
+      l(n);
+  }, P = (n) => {
+    if (e) {
+      n.preventDefault();
+      return;
+    }
+    b || S(n.nativeEvent, n.currentTarget), l(n);
+  }, p = $(
     "btn",
-    `btn-${T}`,
-    e === t.VARIANT_LINK && "btn-link",
-    e === t.VARIANT_LINK_INLINE && "btn-link btn-link-inline",
-    e === t.VARIANT_OUTLINE && "btn-outline",
-    e === t.VARIANT_ACTION && "btn-action",
-    c && `btn-${c}`,
-    l && "btn-toggle",
-    N && "active",
-    g && "btn-icon-only",
-    R && "btn-icon-right",
-    d && "btn-multiline",
-    p && "btn-block",
+    `btn-${C}`,
+    i === s.VARIANT_LINK && "btn-link",
+    i === s.VARIANT_LINK_INLINE && "btn-link btn-link-inline",
+    i === s.VARIANT_OUTLINE && "btn-outline",
+    i === s.VARIANT_ACTION && "btn-action",
+    N && `btn-${N}`,
+    f && "btn-toggle",
+    m && "active",
+    O && "btn-icon-only",
+    h && "btn-icon-right",
+    y && "btn-multiline",
+    D && "btn-block",
+    a === "a" && "gap-0",
+    a === "a" && e && "disabled",
     "btn-component",
-    E
+    M
   );
-  return /* @__PURE__ */ v(
+  return a === "a" ? /* @__PURE__ */ R(
+    "a",
+    {
+      ref: T,
+      ...I,
+      className: p,
+      onClick: P,
+      "aria-disabled": e || void 0,
+      tabIndex: e ? -1 : u,
+      children: [
+        o && /* @__PURE__ */ E("span", { className: `rioglyph ${o}` }),
+        A
+      ]
+    }
+  ) : /* @__PURE__ */ R(
     "button",
     {
-      ref: C,
-      type: L,
-      ...O,
-      className: D,
-      onClick: y,
-      disabled: u,
-      tabIndex: _,
+      ref: T,
+      type: V,
+      ...I,
+      className: p,
+      onClick: x,
+      disabled: e,
+      tabIndex: u,
       children: [
-        r && /* @__PURE__ */ U("span", { className: `rioglyph ${r}` }),
-        k
+        o && /* @__PURE__ */ E("span", { className: `rioglyph ${o}` }),
+        A
       ]
     }
   );
 });
-Object.assign(o, w);
-Object.assign(o, t);
-Object.assign(o, F);
+Object.assign(r, B);
+Object.assign(r, s);
+Object.assign(r, F);
 export {
   F as SIZES_MAP,
-  w as STYLES_MAP,
-  t as VARIANTS_MAP,
-  o as default
+  B as STYLES_MAP,
+  s as VARIANTS_MAP,
+  r as default
 };
 //# sourceMappingURL=Button.js.map

package/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    type ForwardRefExoticComponent,\n    type HTMLProps,\n    type PropsWithChildren,\n    type RefAttributes,\n    type SyntheticEvent,\n    useRef,\n    useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nimport { createButtonRipple } from '../../utils/buttonEffect';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport type { ObjectValues } from '../../utils/ObjectValues';\n\nexport const STYLES_MAP = {\n    DEFAULT: 'default',\n    UNSTYLED: 'unstyled',\n    PRIMARY: 'primary',\n    SECONDARY: 'secondary',\n    INFO: 'info',\n    WARNING: 'warning',\n    DANGER: 'danger',\n    SUCCESS: 'success',\n    MUTED: 'muted',\n    MUTED_FILLED: 'muted-filled',\n} as const;\n\n// export for convenient usage on client side\nexport type BUTTON_STYLE = ObjectValues<typeof STYLES_MAP>;\n\nexport const VARIANTS_MAP = {\n    VARIANT_LINK: 'link',\n    VARIANT_LINK_INLINE: 'link-inline',\n    VARIANT_OUTLINE: 'outline',\n    VARIANT_ACTION: 'action',\n} as const;\n\nexport type BUTTON_VARIANT = ObjectValues<typeof VARIANTS_MAP>;\n\nexport const SIZES_MAP = {\n    XS: 'xs',\n    SM: 'sm',\n    MD: 'md',\n    LG: 'lg',\n} as const;\n\nexport type BUTTON_SIZE = ObjectValues<typeof SIZES_MAP>;\n\n/*\n *  ATTENTION: We're typing the onClick handler based on the value of `asToggle`.\n *\n *  It does not fully work here inside of this file, though. Therefore, we have to apply some explicit casts below.\n *  In code _using_ the Button component, however, the parameter type of the onClick handler must either be a boolean or\n *  a React.MouseEvent, respectively.\n */\n\ntype RegularButton = {\n    /**\n     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.\n     * @default false\n     */\n    asToggle?: false;\n\n    /**\n     * Callback function triggered when clicking the button.\n     * @param event The MouseEvent that triggered the click.\n     */\n    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n};\n\ntype ToggleButton = {\n    /**\n     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.\n     * @default false\n     */\n    asToggle: true;\n\n    /**\n     * Callback function triggered when clicking the button.\n     * @param value The new value of the toggle button.\n     */\n    onClick?: (value: boolean) => void;\n};\n\nexport type ButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'onClick'> & {\n    /**\n     * Whether the button should be disabled.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Set the button toggled. Should be used in combination with \"asToggle\" prop.\n     * @default false\n     */\n    active?: boolean;\n\n    /**\n     * Defines the type of the button. This may be used for form submit buttons.\n     * @default 'button'\n     */\n    type?: 'button' | 'submit';\n\n    /**\n     * Use when the content of the button is an icon only to adapt the button spacing accordingly.\n     * @default false\n     */\n    iconOnly?: boolean;\n\n    /**\n     * Adds right side spacing for an icon. This should be used when having navigation buttons\n     * that use an icon on the right side.\n     * @default false\n     */\n    iconRight?: boolean;\n\n    /**\n     * Optional rio-glyph icon name that comes in handy for icon only buttons for not adding\n     * a span tag for the icon which reduces boilerplate code.\n     */\n    iconName?: string;\n\n    /**\n     * Defines whether the button text break into multiple lines when the button space exceeds.\n     *\n     * Multiline buttons should be used as exception only.\n     * @default false\n     */\n    multiline?: boolean;\n\n    /**\n     * Defines whether the button takes up the full width of the parent element.\n     * @default false\n     */\n    block?: boolean;\n\n    /**\n     * Sets the button style.\n     * @default \"default\"\n     */\n    bsStyle?: BUTTON_STYLE;\n\n    /**\n     * Sets the button size.\n     */\n    bsSize?: BUTTON_SIZE;\n\n    /**\n     * Sets the button variant.\n     */\n    variant?: BUTTON_VARIANT;\n\n    /**\n     * Whether the \"ripple\" effect should be suppressed on this button.\n     */\n    noRippleEffect?: boolean;\n\n    /**\n     * Number of the index used for keyboard support.\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Additional classes to be set on the button element.\n     */\n    className?: string;\n} & (RegularButton | ToggleButton);\n\ntype Props = PropsWithChildren<ButtonProps>;\n\n// Define statics to be used as \"Button.PRIMARY\"\ntype ButtonType = ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> & {\n    DEFAULT: 'default';\n    UNSTYLED: 'unstyled';\n    PRIMARY: 'primary';\n    SECONDARY: 'secondary';\n    INFO: 'info';\n    WARNING: 'warning';\n    DANGER: 'danger';\n    SUCCESS: 'success';\n    MUTED: 'muted';\n    MUTED_FILLED: 'muted-filled';\n\n    VARIANT_LINK: 'link';\n    VARIANT_LINK_INLINE: 'link-inline';\n    VARIANT_OUTLINE: 'outline';\n    VARIANT_ACTION: 'action';\n\n    XS: 'xs';\n    SM: 'sm';\n    MD: 'md';\n    LG: 'lg';\n};\n\nconst Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {\n    const {\n        active = false,\n        disabled = false,\n        asToggle = false,\n        onClick = noop,\n        bsStyle = 'default',\n        bsSize,\n        variant,\n        iconOnly = false,\n        iconName,\n        iconRight = false,\n        multiline = false,\n        block = false,\n        className = '',\n        noRippleEffect = false,\n        type = 'button',\n        tabIndex = 0,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [isToggled, setIsToggled] = useState(active);\n\n    const btnRef = useRef<HTMLButtonElement>(null);\n\n    const buttonRef = useMergeRefs(btnRef, ref);\n\n    // Update internal toggle state when used as controlled component and outside toggle state changes\n    // Note, using the usePrevious hook resulted in an endless loop, hence the useState here\n    const [previousActive, setPreviousActive] = useState(active);\n    if (active !== previousActive) {\n        setIsToggled(active);\n        setPreviousActive(active);\n    }\n\n    const handleClick = (event: SyntheticEvent<HTMLButtonElement, MouseEvent>) => {\n        if (!noRippleEffect) {\n            createButtonRipple(event.nativeEvent, event.currentTarget);\n        }\n\n        if (asToggle) {\n            // Intercept click handler only for toggle button to update internal state and blur after click\n            const newIsToggled = !isToggled;\n            setIsToggled(newIsToggled);\n\n            if (newIsToggled) {\n                btnRef.current?.blur();\n            }\n\n            (onClick as (x: boolean) => void)(newIsToggled);\n        } else {\n            (onClick as (x: SyntheticEvent<HTMLButtonElement, MouseEvent>) => void)(event);\n        }\n    };\n\n    const buttonClassNames = classNames(\n        'btn',\n        `btn-${bsStyle}`,\n        variant === VARIANTS_MAP.VARIANT_LINK && 'btn-link',\n        variant === VARIANTS_MAP.VARIANT_LINK_INLINE && 'btn-link btn-link-inline',\n        variant === VARIANTS_MAP.VARIANT_OUTLINE && 'btn-outline',\n        variant === VARIANTS_MAP.VARIANT_ACTION && 'btn-action',\n        bsSize && `btn-${bsSize}`,\n        asToggle && 'btn-toggle',\n        isToggled && 'active',\n        iconOnly && 'btn-icon-only',\n        iconRight && 'btn-icon-right',\n        multiline && 'btn-multiline',\n        block && 'btn-block',\n        'btn-component',\n        className\n    );\n\n    return (\n        <button\n            ref={buttonRef}\n            type={type}\n            {...remainingProps}\n            className={buttonClassNames}\n            onClick={handleClick}\n            disabled={disabled}\n            tabIndex={tabIndex}\n        >\n            {iconName && <span className={`rioglyph ${iconName}`} />}\n            {children}\n        </button>\n    );\n}) as ButtonType;\n\nObject.assign(Button, STYLES_MAP);\nObject.assign(Button, VARIANTS_MAP);\nObject.assign(Button, SIZES_MAP);\n\nexport default Button;\n"],"names":["STYLES_MAP","VARIANTS_MAP","SIZES_MAP","Button","forwardRef","props","ref","active","disabled","asToggle","onClick","noop","bsStyle","bsSize","variant","iconOnly","iconName","iconRight","multiline","block","className","noRippleEffect","type","tabIndex","children","remainingProps","isToggled","setIsToggled","useState","btnRef","useRef","buttonRef","useMergeRefs","previousActive","setPreviousActive","handleClick","event","createButtonRipple","newIsToggled","buttonClassNames","classNames","jsxs","jsx"],"mappings":";;;;;;AAiBO,MAAMA,IAAa;AAAA,EACtB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AAAA,EACX,MAAM;AAAA,EACN,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AAAA,EACP,cAAc;AAClB,GAKaC,IAAe;AAAA,EACxB,cAAc;AAAA,EACd,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,gBAAgB;AACpB,GAIaC,IAAY;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR,GAwJMC,IAASC,EAAqC,CAACC,GAAOC,MAAQ;AAChE,QAAM;AAAA,IACF,QAAAC,IAAS;AAAA,IACT,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,SAAAC,IAAUC;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,WAAAC,IAAY;AAAA,IACZ,OAAAC,IAAQ;AAAA,IACR,WAAAC,IAAY;AAAA,IACZ,gBAAAC,IAAiB;AAAA,IACjB,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHpB,GAEE,CAACqB,GAAWC,CAAY,IAAIC,EAASrB,CAAM,GAE3CsB,IAASC,EAA0B,IAAI,GAEvCC,IAAYC,EAAaH,GAAQvB,CAAG,GAIpC,CAAC2B,GAAgBC,CAAiB,IAAIN,EAASrB,CAAM;AAC3D,EAAIA,MAAW0B,MACXN,EAAapB,CAAM,GACnB2B,EAAkB3B,CAAM;AAG5B,QAAM4B,IAAc,CAACC,MAAyD;AAK1E,QAJKf,KACDgB,EAAmBD,EAAM,aAAaA,EAAM,aAAa,GAGzD3B,GAAU;AAEV,YAAM6B,IAAe,CAACZ;AACtB,MAAAC,EAAaW,CAAY,GAErBA,KACAT,EAAO,SAAS,KAAA,GAGnBnB,EAAiC4B,CAAY;AAAA,IAClD;AACK,MAAA5B,EAAuE0B,CAAK;AAAA,EAErF,GAEMG,IAAmBC;AAAA,IACrB;AAAA,IACA,OAAO5B,CAAO;AAAA,IACdE,MAAYb,EAAa,gBAAgB;AAAA,IACzCa,MAAYb,EAAa,uBAAuB;AAAA,IAChDa,MAAYb,EAAa,mBAAmB;AAAA,IAC5Ca,MAAYb,EAAa,kBAAkB;AAAA,IAC3CY,KAAU,OAAOA,CAAM;AAAA,IACvBJ,KAAY;AAAA,IACZiB,KAAa;AAAA,IACbX,KAAY;AAAA,IACZE,KAAa;AAAA,IACbC,KAAa;AAAA,IACbC,KAAS;AAAA,IACT;AAAA,IACAC;AAAA,EAAA;AAGJ,SACI,gBAAAqB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKV;AAAA,MACL,MAAAT;AAAA,MACC,GAAGG;AAAA,MACJ,WAAWc;AAAA,MACX,SAASJ;AAAA,MACT,UAAA3B;AAAA,MACA,UAAAe;AAAA,MAEC,UAAA;AAAA,QAAAP,KAAY,gBAAA0B,EAAC,QAAA,EAAK,WAAW,YAAY1B,CAAQ,IAAI;AAAA,QACrDQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;AAED,OAAO,OAAOrB,GAAQH,CAAU;AAChC,OAAO,OAAOG,GAAQF,CAAY;AAClC,OAAO,OAAOE,GAAQD,CAAS;"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    type ForwardRefExoticComponent,\n    type HTMLProps,\n    type PropsWithChildren,\n    type RefAttributes,\n    useRef,\n    useState,\n} from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { createButtonRipple } from '../../utils/buttonEffect';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport type { ObjectValues } from '../../utils/ObjectValues';\n\nexport const STYLES_MAP = {\n    DEFAULT: 'default',\n    UNSTYLED: 'unstyled',\n    PRIMARY: 'primary',\n    SECONDARY: 'secondary',\n    INFO: 'info',\n    WARNING: 'warning',\n    DANGER: 'danger',\n    SUCCESS: 'success',\n    MUTED: 'muted',\n    MUTED_FILLED: 'muted-filled',\n} as const;\n\n// export for convenient usage on client side\nexport type BUTTON_STYLE = ObjectValues<typeof STYLES_MAP>;\n\nexport const VARIANTS_MAP = {\n    VARIANT_LINK: 'link',\n    VARIANT_LINK_INLINE: 'link-inline',\n    VARIANT_OUTLINE: 'outline',\n    VARIANT_ACTION: 'action',\n} as const;\n\nexport type BUTTON_VARIANT = ObjectValues<typeof VARIANTS_MAP>;\n\nexport const SIZES_MAP = {\n    XS: 'xs',\n    SM: 'sm',\n    MD: 'md',\n    LG: 'lg',\n} as const;\n\nexport type BUTTON_SIZE = ObjectValues<typeof SIZES_MAP>;\n\n/*\n *  ATTENTION: We're typing the onClick handler based on the value of `asToggle`.\n *\n *  It does not fully work here inside of this file, though. Therefore, we have to apply some explicit casts below.\n *  In code _using_ the Button component, however, the parameter type of the onClick handler must either be a boolean or\n *  a React.MouseEvent, respectively.\n */\n\ntype RegularButton = {\n    /**\n     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.\n     *\n     * @default false\n     */\n    asToggle?: false;\n\n    /**\n     * Callback function triggered when clicking the button.\n     *\n     * @param event The MouseEvent that triggered the click.\n     */\n    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n};\n\ntype ToggleButton = {\n    /**\n     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.\n     *\n     * @default false\n     */\n    asToggle: true;\n\n    /**\n     * Callback function triggered when clicking the button.\n     *\n     * @param value The new value of the toggle button.\n     */\n    onClick?: (value: boolean) => void;\n};\n\ntype BaseButtonProps = {\n    /**\n     * Whether the button should be disabled.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Set the button toggled. Should be used in combination with \"asToggle\" prop.\n     *\n     * @default false\n     */\n    active?: boolean;\n\n    /**\n     * Use when the content of the button is an icon only to adapt the button spacing accordingly.\n     *\n     * @default false\n     */\n    iconOnly?: boolean;\n\n    /**\n     * Adds right side spacing for an icon. This should be used when having navigation buttons\n     * that use an icon on the right side.\n     *\n     * @default false\n     */\n    iconRight?: boolean;\n\n    /**\n     * Optional rio-glyph icon name that comes in handy for icon only buttons for not adding\n     * a span tag for the icon which reduces boilerplate code.\n     */\n    iconName?: string;\n\n    /**\n     * Defines whether the button text break into multiple lines when the button space exceeds.\n     *\n     * Multiline buttons should be used as exception only.\n     *\n     * @default false\n     */\n    multiline?: boolean;\n\n    /**\n     * Defines whether the button takes up the full width of the parent element.\n     *\n     * @default false\n     */\n    block?: boolean;\n\n    /**\n     * Sets the button style.\n     * @default 'default'\n     */\n    bsStyle?: BUTTON_STYLE;\n\n    /**\n     * Sets the button size.\n     */\n    bsSize?: BUTTON_SIZE;\n\n    /**\n     * Sets the button variant.\n     */\n    variant?: BUTTON_VARIANT;\n\n    /**\n     * Whether the \"ripple\" effect should be suppressed on this button.\n     */\n    noRippleEffect?: boolean;\n\n    /**\n     * Number of the index used for keyboard support.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Additional classes to be set on the button element.\n     */\n    className?: string;\n};\n\ntype NativeButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'onClick' | 'ref'> &\n    BaseButtonProps & {\n        /**\n         * Defines this component as a native button element.\n         *\n         * @default 'button'\n         */\n        as?: 'button';\n\n        /**\n         * Defines the type of the button. This may be used for form submit buttons.\n         *\n         * @default 'button'\n         */\n        type?: 'button' | 'submit';\n    } & (RegularButton | ToggleButton);\n\ntype LinkButtonProps = Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'type' | 'onClick' | 'ref'> &\n    BaseButtonProps & {\n        /**\n         * Defines this component as a link element.\n         */\n        as: 'a';\n\n        /**\n         * Native button type is not supported when using `as=\"a\"`.\n         */\n        type?: never;\n\n        /**\n         * Defines the destination URL for the link button.\n         */\n        href: string;\n\n        /**\n         * Toggle behavior is not supported when using `as=\"a\"`.\n         *\n         * @default false\n         */\n        asToggle?: false;\n\n        /**\n         * Callback function triggered when clicking the link.\n         *\n         * @param event The MouseEvent that triggered the click.\n         */\n        onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;\n    };\n\nexport type ButtonProps = NativeButtonProps | LinkButtonProps;\n\ntype Props = PropsWithChildren<ButtonProps>;\n\n// Define statics to be used as \"Button.PRIMARY\"\ntype ButtonType = ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> & {\n    DEFAULT: 'default';\n    UNSTYLED: 'unstyled';\n    PRIMARY: 'primary';\n    SECONDARY: 'secondary';\n    INFO: 'info';\n    WARNING: 'warning';\n    DANGER: 'danger';\n    SUCCESS: 'success';\n    MUTED: 'muted';\n    MUTED_FILLED: 'muted-filled';\n\n    VARIANT_LINK: 'link';\n    VARIANT_LINK_INLINE: 'link-inline';\n    VARIANT_OUTLINE: 'outline';\n    VARIANT_ACTION: 'action';\n\n    XS: 'xs';\n    SM: 'sm';\n    MD: 'md';\n    LG: 'lg';\n};\n\nconst Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {\n    const {\n        as = 'button',\n        active = false,\n        disabled = false,\n        asToggle = false,\n        onClick = noop,\n        bsStyle = 'default',\n        bsSize,\n        variant,\n        iconOnly = false,\n        iconName,\n        iconRight = false,\n        multiline = false,\n        block = false,\n        className = '',\n        noRippleEffect = false,\n        type = 'button',\n        tabIndex = 0,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [isToggled, setIsToggled] = useState(active);\n\n    const btnRef = useRef<HTMLButtonElement>(null);\n\n    const buttonRef = useMergeRefs(btnRef, ref);\n\n    // Update internal toggle state when used as controlled component and outside toggle state changes\n    // Note, using the usePrevious hook resulted in an endless loop, hence the useState here\n    const [previousActive, setPreviousActive] = useState(active);\n    if (active !== previousActive) {\n        setIsToggled(active);\n        setPreviousActive(active);\n    }\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (!noRippleEffect) {\n            createButtonRipple(event.nativeEvent, event.currentTarget);\n        }\n\n        if (asToggle) {\n            // Intercept click handler only for toggle button to update internal state and blur after click\n            const newIsToggled = !isToggled;\n            setIsToggled(newIsToggled);\n\n            if (newIsToggled) {\n                btnRef.current?.blur();\n            }\n\n            (onClick as (x: boolean) => void)(newIsToggled);\n        } else {\n            (onClick as (x: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)(event);\n        }\n    };\n\n    const handleLinkClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        if (!noRippleEffect) {\n            createButtonRipple(event.nativeEvent, event.currentTarget);\n        }\n\n        (onClick as (x: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void)(event);\n    };\n\n    const buttonClassNames = classNames(\n        'btn',\n        `btn-${bsStyle}`,\n        variant === VARIANTS_MAP.VARIANT_LINK && 'btn-link',\n        variant === VARIANTS_MAP.VARIANT_LINK_INLINE && 'btn-link btn-link-inline',\n        variant === VARIANTS_MAP.VARIANT_OUTLINE && 'btn-outline',\n        variant === VARIANTS_MAP.VARIANT_ACTION && 'btn-action',\n        bsSize && `btn-${bsSize}`,\n        asToggle && 'btn-toggle',\n        isToggled && 'active',\n        iconOnly && 'btn-icon-only',\n        iconRight && 'btn-icon-right',\n        multiline && 'btn-multiline',\n        block && 'btn-block',\n        as === 'a' && 'gap-0',\n        as === 'a' && disabled && 'disabled',\n        'btn-component',\n        className\n    );\n\n    if (as === 'a') {\n        return (\n            <a\n                ref={buttonRef as React.Ref<HTMLAnchorElement>}\n                {...(remainingProps as Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'type' | 'onClick' | 'ref'>)}\n                className={buttonClassNames}\n                onClick={handleLinkClick}\n                aria-disabled={disabled || undefined}\n                tabIndex={disabled ? -1 : tabIndex}\n            >\n                {iconName && <span className={`rioglyph ${iconName}`} />}\n                {children}\n            </a>\n        );\n    }\n\n    return (\n        <button\n            ref={buttonRef}\n            type={type}\n            {...(remainingProps as Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'onClick' | 'ref'>)}\n            className={buttonClassNames}\n            onClick={handleButtonClick}\n            disabled={disabled}\n            tabIndex={tabIndex}\n        >\n            {iconName && <span className={`rioglyph ${iconName}`} />}\n            {children}\n        </button>\n    );\n}) as ButtonType;\n\nObject.assign(Button, STYLES_MAP);\nObject.assign(Button, VARIANTS_MAP);\nObject.assign(Button, SIZES_MAP);\n\nexport default Button;\n"],"names":["STYLES_MAP","VARIANTS_MAP","SIZES_MAP","Button","forwardRef","props","ref","as","active","disabled","asToggle","onClick","noop","bsStyle","bsSize","variant","iconOnly","iconName","iconRight","multiline","block","className","noRippleEffect","type","tabIndex","children","remainingProps","isToggled","setIsToggled","useState","btnRef","useRef","buttonRef","useMergeRefs","previousActive","setPreviousActive","handleButtonClick","event","createButtonRipple","newIsToggled","handleLinkClick","buttonClassNames","classNames","jsxs","jsx"],"mappings":"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"}

package/components/button/ButtonToolbar.js

@@ -1,5 +1,5 @@
 import { jsx as a } from "react/jsx-runtime";
-import c from "classnames";
+import c from "../../utils/classNames.js";
 const m = (e) => {
   const { className: n = "", alignment: t, children: s, ...o } = e, r = c(
     n,

package/components/button/ButtonToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonToolbar.js","sources":["../../../src/components/button/ButtonToolbar.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nexport type ButtonToolbarProps = ComponentProps<'div'> & {\n    /**\n     * Align buttons to a defined side or set them apart.\n     */\n    alignment?: 'left' | 'right' | 'center' | 'space-between';\n\n    /**\n     * Additional classes set to the outer element.\n     */\n    className?: string;\n};\n\nconst ButtonToolbar = (props: PropsWithChildren<ButtonToolbarProps>) => {\n    const { className = '', alignment, children, ...remainingProps } = props;\n\n    const classes = classNames(\n        className,\n        'btn-toolbar',\n        alignment === 'left' && 'justify-content-start',\n        alignment === 'right' && 'justify-content-end',\n        alignment === 'center' && 'justify-content-center',\n        alignment === 'space-between' && 'justify-content-between'\n    );\n\n    return (\n        <div {...remainingProps} className={classes}>\n            {children}\n        </div>\n    );\n};\n\nexport default ButtonToolbar;\n"],"names":["ButtonToolbar","props","className","alignment","children","remainingProps","classes","classNames"],"mappings":";;AAeA,MAAMA,IAAgB,CAACC,MAAiD;AACpE,QAAM,EAAE,WAAAC,IAAY,IAAI,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAmBJ,GAE7DK,IAAUC;AAAA,IACZL;AAAA,IACA;AAAA,IACAC,MAAc,UAAU;AAAA,IACxBA,MAAc,WAAW;AAAA,IACzBA,MAAc,YAAY;AAAA,IAC1BA,MAAc,mBAAmB;AAAA,EAAA;AAGrC,2BACK,OAAA,EAAK,GAAGE,GAAgB,WAAWC,GAC/B,UAAAF,GACL;AAER;"}
+{"version":3,"file":"ButtonToolbar.js","sources":["../../../src/components/button/ButtonToolbar.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type ButtonToolbarProps = ComponentProps<'div'> & {\n    /**\n     * Align buttons to a defined side or set them apart.\n     */\n    alignment?: 'left' | 'right' | 'center' | 'space-between';\n\n    /**\n     * Additional classes set to the outer element.\n     */\n    className?: string;\n};\n\nconst ButtonToolbar = (props: PropsWithChildren<ButtonToolbarProps>) => {\n    const { className = '', alignment, children, ...remainingProps } = props;\n\n    const classes = classNames(\n        className,\n        'btn-toolbar',\n        alignment === 'left' && 'justify-content-start',\n        alignment === 'right' && 'justify-content-end',\n        alignment === 'center' && 'justify-content-center',\n        alignment === 'space-between' && 'justify-content-between'\n    );\n\n    return (\n        <div {...remainingProps} className={classes}>\n            {children}\n        </div>\n    );\n};\n\nexport default ButtonToolbar;\n"],"names":["ButtonToolbar","props","className","alignment","children","remainingProps","classes","classNames"],"mappings":";;AAgBA,MAAMA,IAAgB,CAACC,MAAiD;AACpE,QAAM,EAAE,WAAAC,IAAY,IAAI,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAmBJ,GAE7DK,IAAUC;AAAA,IACZL;AAAA,IACA;AAAA,IACAC,MAAc,UAAU;AAAA,IACxBA,MAAc,WAAW;AAAA,IACzBA,MAAc,YAAY;AAAA,IAC1BA,MAAc,mBAAmB;AAAA,EAAA;AAGrC,2BACK,OAAA,EAAK,GAAGE,GAAgB,WAAWC,GAC/B,UAAAF,GACL;AAER;"}

package/components/button/ToggleButton.d.ts

@@ -1,6 +1,9 @@
 import { PropsWithChildren } from 'react';
 import { ButtonProps } from './Button';
-export type ToggleButtonProps = Omit<ButtonProps, 'onClick'> & {
+type NonLinkButtonProps = Exclude<ButtonProps, {
+    as: 'a';
+}>;
+export type ToggleButtonProps = Omit<NonLinkButtonProps, 'onClick' | 'asToggle'> & {
     /**
      * Callback function triggered when clicking the button.
      * @param value The new value of the toggle button.

package/components/button/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","sources":["../../../src/components/button/ToggleButton.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nimport Button, { type ButtonProps } from './Button';\n\nexport type ToggleButtonProps = Omit<ButtonProps, 'onClick'> & {\n    /**\n     * Callback function triggered when clicking the button.\n     * @param value The new value of the toggle button.\n     */\n    onClick?: (value: boolean) => void;\n};\n\nconst ToggleButton = (props: PropsWithChildren<ToggleButtonProps>) => <Button {...props} asToggle />;\n\nexport default ToggleButton;\n"],"names":["ToggleButton","props","jsx","Button"],"mappings":";;AAYA,MAAMA,IAAe,CAACC,MAAgD,gBAAAC,EAACC,KAAQ,GAAGF,GAAO,UAAQ,GAAA,CAAC;"}
+{"version":3,"file":"ToggleButton.js","sources":["../../../src/components/button/ToggleButton.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nimport Button, { type ButtonProps } from './Button';\n\ntype NonLinkButtonProps = Exclude<ButtonProps, { as: 'a' }>;\n\nexport type ToggleButtonProps = Omit<NonLinkButtonProps, 'onClick' | 'asToggle'> & {\n    /**\n     * Callback function triggered when clicking the button.\n     * @param value The new value of the toggle button.\n     */\n    onClick?: (value: boolean) => void;\n};\n\nconst ToggleButton = (props: PropsWithChildren<ToggleButtonProps>) => <Button {...props} asToggle />;\n\nexport default ToggleButton;\n"],"names":["ToggleButton","props","jsx","Button"],"mappings":";;AAcA,MAAMA,IAAe,CAACC,MAAgD,gBAAAC,EAACC,KAAQ,GAAGF,GAAO,UAAQ,GAAA,CAAC;"}

package/components/calendarStripe/CalendarStripe.d.ts

@@ -25,7 +25,7 @@ export type CalendarStripeProps = {
      *
      * @param date The day to render
      */
-    renderDay?: (date: Date) => React.JSX.Element;
+    renderDay: (date: Date) => React.JSX.Element;
     /**
      * Defines whether the days for the weekends are included.
      *

package/components/calendarStripe/CalendarStripe.js

@@ -1,36 +1,34 @@
 import { jsxs as Z, jsx as n } from "react/jsx-runtime";
 import { forwardRef as ee, useState as h, useRef as se, useEffect as te } from "react";
-import f from "classnames";
 import { AnimatePresence as ae, motion as ne } from "motion/react";
 import { noop as E } from "es-toolkit/compat";
+import f from "../../utils/classNames.js";
 import re from "../../hooks/useAfterMount.js";
 import oe from "../../hooks/useElementSize.js";
-import ie from "../../hooks/usePrevious.js";
-import { hasDisplayClass as v, hasAlignItemsClass as k, hasOverflowClass as le, hasBgClass as ce, hasBorderClass as me, hasRoundedClass as de, hasHoverScaleClass as pe, hasHoverTextColorClass as ue, hasPaddingClass as he, hasCursorClass as fe, hasTextColorClass as Ce, hasTextSizeClass as ge, hasAlignSelfClass as De, hasSpaceClass as F, hasUserSelectClass as M, hasFlexClass as Ne } from "../../utils/hasUtilityClass.js";
-const ye = 200, ve = 1, xe = 7, Ae = 0.2, _ = "page", Se = "pageBack", B = "ColumnItem", we = {
+import le from "../../hooks/usePrevious.js";
+import { hasRoundedClass as ie, hasBorderClass as ce, hasBgClass as me, hasOverflowClass as de, hasAlignItemsClass as k, hasDisplayClass as y, hasAlignSelfClass as pe, hasTextSizeClass as ue, hasTextColorClass as he, hasCursorClass as fe, hasPaddingClass as Ce, hasHoverTextColorClass as ge, hasHoverScaleClass as De, hasUserSelectClass as F, hasSpaceClass as M, hasFlexClass as Ne } from "../../utils/hasUtilityClass.js";
+const ye = 200, ve = 1, xe = 7, Ae = 0.2, _ = "page", we = "pageBack", B = "ColumnItem", Se = {
   pageEnter: (t) => ({
     x: t === _ ? "60%" : "-60%",
     opacity: 0
   }),
   pageCenter: () => ({ x: 0, opacity: 1 })
-}, i = (t) => t.toISOString().split("T").at(0), O = (t) => [...t.classList].includes(B) ? t : O(t.children[0]), be = ee((t, b) => {
+}, l = (t) => t.toISOString().split("T").at(0), O = (t) => [...t.classList].includes(B) ? t : O(t.children[0]), be = ee((t, b) => {
   const {
-    minDayWith: x = ye,
+    minDayWith: v = ye,
     minDays: P = ve,
     maxDays: R = xe,
-    renderDay: C,
+    renderDay: x,
     skipWeekends: L = !1,
-    startDate: l = /* @__PURE__ */ new Date(),
+    startDate: i = /* @__PURE__ */ new Date(),
     onNextClick: U = E,
     onPreviousClick: z = E,
     buttonClassName: s = "",
     className: o = "",
     daysWrapperClassName: m = "",
     dayWrapperClassName: d = ""
-  } = t;
-  C || console.error('CalendarStripe component is missing the required "renderDay" prop');
-  const [r, g] = h(l), [a, A] = h(1), [H, j] = h(!1), c = se(null), [S] = oe(c), V = ie(i(r)), w = i(r) > V ? _ : Se, [X, Y] = h(l);
-  i(l) !== i(X) && (g(l), Y(l)), re(() => {
+  } = t, [r, C] = h(i), [a, A] = h(1), [H, j] = h(!1), c = se(null), [w] = oe(c), V = le(l(r)), S = l(r) > V ? _ : we, [X, Y] = h(i);
+  l(i) !== l(X) && (C(i), Y(i)), re(() => {
     j(!0);
   }, []), te(() => {
     if (!c.current)
@@ -38,79 +36,79 @@ const ye = 200, ve = 1, xe = 7, Ae = 0.2, _ = "page", Se = "pageBack", B = "Colu
     const e = O(c.current.children[0]);
     if (!e)
       return;
-    const D = e.getBoundingClientRect().width, N = a - 1 >= P, u = a + 1 <= R, Q = N && D <= x;
-    if (u && (a + 1) * x <= S) {
-      const y = a + 1;
-      A(y);
+    const g = e.getBoundingClientRect().width, D = a - 1 >= P, u = a + 1 <= R, Q = D && g <= v;
+    if (u && (a + 1) * v <= w) {
+      const N = a + 1;
+      A(N);
       return;
     }
     if (Q) {
-      const y = a - 1;
-      A(y);
+      const N = a - 1;
+      A(N);
       return;
     }
-  }, [S, c.current, a, r]);
-  const q = () => {
+  }, [w, c.current, a, r]);
+  const K = () => {
     const e = new Date(r);
-    e.setDate(e.getDate() + a), g(e), U(e);
-  }, K = () => {
+    e.setDate(e.getDate() + a), C(e), U(e);
+  }, $ = () => {
     const e = new Date(r);
-    e.setDate(e.getDate() - a), g(e), z(e);
+    e.setDate(e.getDate() - a), C(e), z(e);
   }, p = [];
   let I = !0, T = 1;
   for (; I; ) {
     const e = new Date(r);
     e.setDate(r.getDate() + T);
-    const D = e.getDay() === 6, N = e.getDay() === 0, u = D || N;
+    const g = e.getDay() === 6, D = e.getDay() === 0, u = g || D;
     u && !L ? p.push(e) : u || p.push(e), T++, p.length === a && (I = !1);
   }
-  const $ = f(
+  const q = f(
     "CalenderStripe",
-    !v(o) && "display-flex",
+    !y(o) && "display-flex",
     !k(o) && "align-items-center",
-    !le(o) && "overflow-hidden",
-    !ce(o) && "bg-white",
-    !me(o) && "border",
-    !de(o) && "rounded",
+    !de(o) && "overflow-hidden",
+    !me(o) && "bg-white",
+    !ce(o) && "border",
+    !ie(o) && "rounded",
     o
   ), W = f(
     !k(s) && "align-items-center",
-    !v(s) && "display-flex",
-    !pe(s) && "hover-scale-105",
-    !ue(s) && "hover-text-color-darkest",
-    !he(s) && "padding-10",
+    !y(s) && "display-flex",
+    !De(s) && "hover-scale-105",
+    !ge(s) && "hover-text-color-darkest",
+    !Ce(s) && "padding-10",
     !fe(s) && "cursor-pointer",
-    !Ce(s) && "text-color-darker",
-    !ge(s) && "text-size-12",
-    !De(s) && "align-self-stretch",
+    !he(s) && "text-color-darker",
+    !ue(s) && "text-size-12",
+    !pe(s) && "align-self-stretch",
     s
   ), G = f(
-    !v(m) && "display-flex",
-    !F(m) && "space-x--1",
-    !M(m) && "user-select-none",
+    !y(m) && "display-flex",
+    !M(m) && "space-x--1",
+    !F(m) && "user-select-none",
     m
   ), J = f(
     B,
     !Ne(d) && "flex-1-1-0",
-    !F(d) && "space-x--1",
-    !M(d) && "user-select-none",
+    !M(d) && "space-x--1",
+    !F(d) && "user-select-none",
     d
   );
-  return /* @__PURE__ */ Z("div", { ref: b, className: $, children: [
-    /* @__PURE__ */ n("div", { className: W, onClick: K, children: /* @__PURE__ */ n("span", { className: "rioglyph rioglyph-chevron-left" }) }),
-    /* @__PURE__ */ n("div", { className: "flex-1-1 overflow-hidden", ref: c, children: /* @__PURE__ */ n(ae, { mode: "wait", custom: w, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ Z("div", { ref: b, className: q, children: [
+    /* @__PURE__ */ n("div", { className: W, onClick: $, children: /* @__PURE__ */ n("span", { className: "rioglyph rioglyph-chevron-left" }) }),
+    /* @__PURE__ */ n("div", { className: "flex-1-1 overflow-hidden", ref: c, children: /* @__PURE__ */ n(ae, { mode: "wait", custom: S, children: /* @__PURE__ */ n(
       ne.div,
       {
-        variants: we,
+        variants: Se,
         initial: H ? "pageEnter" : !1,
         animate: "pageCenter",
-        custom: w,
+        custom: S,
         transition: { duration: Ae },
-        children: /* @__PURE__ */ n("div", { className: G, children: p.map((e) => /* @__PURE__ */ n("div", { className: J, children: C ? C(e) : null }, `${i(e)}`)) })
+        children: /* @__PURE__ */ n("div", { className: G, children: p.map((e) => /* @__PURE__ */ n("div", { className: J, children: x ? x(e) : null }, `${l(e)}`)) })
       },
-      i(r)
+      l(r)
     ) }) }),
-    /* @__PURE__ */ n("div", { className: W, onClick: q, children: /* @__PURE__ */ n("span", { className: "rioglyph rioglyph-chevron-right" }) })
+    /* @__PURE__ */ n("div", { className: W, onClick: K, children: /* @__PURE__ */ n("span", { className: "rioglyph rioglyph-chevron-right" }) })
   ] });
 });
 export {

package/components/calendarStripe/CalendarStripe.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarStripe.js","sources":["../../../src/components/calendarStripe/CalendarStripe.tsx"],"sourcesContent":["import type React from 'react';\nimport { forwardRef, useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { noop } from 'es-toolkit/compat';\n\nimport useAfterMount from '../../hooks/useAfterMount';\nimport useElementSize from '../../hooks/useElementSize';\nimport usePrevious from '../../hooks/usePrevious';\nimport {\n    hasAlignItemsClass,\n    hasAlignSelfClass,\n    hasBgClass,\n    hasBorderClass,\n    hasCursorClass,\n    hasDisplayClass,\n    hasFlexClass,\n    hasHoverScaleClass,\n    hasHoverTextColorClass,\n    hasOverflowClass,\n    hasPaddingClass,\n    hasRoundedClass,\n    hasSpaceClass,\n    hasTextColorClass,\n    hasTextSizeClass,\n    hasUserSelectClass,\n} from '../../utils/hasUtilityClass';\n\nconst DEFAULT_MIN_WITH = 200;\nconst DEFAULT_MIN_DAYS = 1;\nconst DEFAULT_MAX_DAYS = 7;\n\nconst ANIMATION_DURATION = 0.2;\nconst ANIMATION_NEXT = 'page';\nconst ANIMATION_BACK = 'pageBack';\n\nconst ITEM_NAME = 'ColumnItem';\n\nconst variants = {\n    pageEnter: (pageDirection: typeof ANIMATION_NEXT | typeof ANIMATION_BACK) => ({\n        x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',\n        opacity: 0,\n    }),\n    pageCenter: () => ({ x: 0, opacity: 1 }),\n};\n\nconst getDateString = (date: Date) => date.toISOString().split('T').at(0) as string;\n\nconst getFirstColumnItem = (node: Element): Element => {\n    if ([...node.classList].includes(ITEM_NAME)) {\n        return node;\n    }\n    return getFirstColumnItem(node.children[0]);\n};\n\nexport type CalendarStripeProps = {\n    /**\n     * The minimum width in pixel of a single day column\n     *\n     * This value determines how many days are shown per page depending on the parent width.\n     *\n     * @default 200\n     */\n    minDayWith?: number;\n\n    /**\n     * The minimum amount of days that should be shown per page.\n     *\n     * @default 1\n     */\n    minDays?: number;\n\n    /**\n     * The maximum amount of days that should be shown per page.\n     *\n     * @default 7\n     */\n    maxDays?: number;\n\n    /**\n     * A function that renders each individual day to be displayed.\n     *\n     * @param date The day to render\n     */\n    renderDay?: (date: Date) => React.JSX.Element;\n\n    /**\n     * Defines whether the days for the weekends are included.\n     *\n     * @default false\n     */\n    skipWeekends?: boolean;\n\n    /**\n     * The date of the first day that are rendered.\n     *\n     * @default the current date\n     */\n    startDate?: Date;\n\n    /**\n     * Callback function for when the next button is clicked.\n     *\n     * @param newStartDate Date value that is now the start of the stripe.\n     */\n    onNextClick?: (newStartDate: Date) => void;\n\n    /**\n     * Callback function for when the previous button is clicked.\n     *\n     * @param newStartDate Date value that is now the start of the stripe.\n     */\n    onPreviousClick?: (newStartDate: Date) => void;\n\n    /**\n     * Additional classes set to the navigation buttons.\n     */\n    buttonClassName?: string;\n\n    /**\n     * Additional classes set to the calendar element.\n     */\n    className?: string;\n\n    /**\n     * Additional classes set to the days wrapper element.\n     */\n    daysWrapperClassName?: string;\n\n    /**\n     * Additional classes set to the days wrapper element.\n     */\n    dayWrapperClassName?: string;\n};\n\nconst CalendarStripe = forwardRef<HTMLDivElement, CalendarStripeProps>((props: CalendarStripeProps, ref) => {\n    const {\n        minDayWith = DEFAULT_MIN_WITH,\n        minDays = DEFAULT_MIN_DAYS,\n        maxDays = DEFAULT_MAX_DAYS,\n        renderDay,\n        skipWeekends = false,\n        startDate = new Date(),\n        onNextClick = noop,\n        onPreviousClick = noop,\n        buttonClassName = '',\n        className = '',\n        daysWrapperClassName = '',\n        dayWrapperClassName = '',\n    } = props;\n\n    if (!renderDay) {\n        console.error('CalendarStripe component is missing the required \"renderDay\" prop');\n    }\n\n    const [firstDate, setFirstDate] = useState(startDate);\n    const [amountOfDaysToShow, setAmountOfDaysToShow] = useState(1);\n    const [enableInitialAnimation, setEnableInitialAnimation] = useState(false);\n\n    // The base for reacting on changing width of the wrapping element.\n    // It uses a ResizeObserver under the hood.\n    const columnWrapperRef = useRef<HTMLDivElement>(null);\n    const [columnWrapperWidth] = useElementSize(columnWrapperRef);\n\n    const previous = usePrevious(getDateString(firstDate));\n    const animationDirection = getDateString(firstDate) > (previous as string) ? ANIMATION_NEXT : ANIMATION_BACK;\n\n    // Update startDate from outside\n    const [previousStartDate, setPreviousStartDate] = useState(startDate);\n    if (getDateString(startDate) !== getDateString(previousStartDate)) {\n        setFirstDate(startDate);\n        setPreviousStartDate(startDate);\n    }\n\n    useAfterMount(() => {\n        setEnableInitialAnimation(true);\n    }, []);\n\n    useEffect(() => {\n        if (!columnWrapperRef.current) {\n            return;\n        }\n\n        const firstItem = getFirstColumnItem(columnWrapperRef.current.children[0]);\n        if (!firstItem) {\n            return;\n        }\n\n        // Get the width of the first column to calculate how many columns fit on one page\n        // according to the given minWidth per column\n        const columnWidth = firstItem.getBoundingClientRect().width;\n\n        // Limit columns per page for given min and max values\n        const allowForLessColumns = amountOfDaysToShow - 1 >= minDays;\n        const allowForMoreColumns = amountOfDaysToShow + 1 <= maxDays;\n\n        const goSmaller = allowForLessColumns && columnWidth <= minDayWith;\n        const goBigger =\n            allowForMoreColumns && (amountOfDaysToShow + 1) * minDayWith <= (columnWrapperWidth as unknown as number);\n\n        if (goBigger) {\n            const newValue = amountOfDaysToShow + 1;\n            setAmountOfDaysToShow(newValue);\n            return;\n        }\n\n        if (goSmaller) {\n            const newValue = amountOfDaysToShow - 1;\n            setAmountOfDaysToShow(newValue);\n            return;\n        }\n    }, [columnWrapperWidth, columnWrapperRef.current, amountOfDaysToShow, firstDate]);\n\n    const handleNext = () => {\n        const newFirstDate = new Date(firstDate);\n        newFirstDate.setDate(newFirstDate.getDate() + amountOfDaysToShow);\n        setFirstDate(newFirstDate);\n\n        onNextClick(newFirstDate);\n    };\n\n    const handlePrev = () => {\n        const newFirstDate = new Date(firstDate);\n        newFirstDate.setDate(newFirstDate.getDate() - amountOfDaysToShow);\n        setFirstDate(newFirstDate);\n\n        onPreviousClick(newFirstDate);\n    };\n\n    // Re-calculate the dates to show depending on the amount of days to show\n    const dates = [];\n\n    let addDays = true;\n    let index = 1;\n\n    while (addDays) {\n        const currentDate = new Date(firstDate);\n        currentDate.setDate(firstDate.getDate() + index);\n\n        const isSaturday = currentDate.getDay() === 6;\n        const isSunday = currentDate.getDay() === 0;\n        const isWeekend = isSaturday || isSunday;\n\n        if (isWeekend && !skipWeekends) {\n            dates.push(currentDate);\n        } else if (!isWeekend) {\n            dates.push(currentDate);\n        }\n\n        index++;\n\n        if (dates.length === amountOfDaysToShow) {\n            addDays = false;\n        }\n    }\n\n    const wrapperClassNames = classNames(\n        'CalenderStripe',\n        !hasDisplayClass(className) && 'display-flex',\n        !hasAlignItemsClass(className) && 'align-items-center',\n        !hasOverflowClass(className) && 'overflow-hidden',\n        !hasBgClass(className) && 'bg-white',\n        !hasBorderClass(className) && 'border',\n        !hasRoundedClass(className) && 'rounded',\n        className\n    );\n\n    const baseButtonClassNames = classNames(\n        !hasAlignItemsClass(buttonClassName) && 'align-items-center',\n        !hasDisplayClass(buttonClassName) && 'display-flex',\n        !hasHoverScaleClass(buttonClassName) && 'hover-scale-105',\n        !hasHoverTextColorClass(buttonClassName) && 'hover-text-color-darkest',\n        !hasPaddingClass(buttonClassName) && 'padding-10',\n        !hasCursorClass(buttonClassName) && 'cursor-pointer',\n        !hasTextColorClass(buttonClassName) && 'text-color-darker',\n        !hasTextSizeClass(buttonClassName) && 'text-size-12',\n        !hasAlignSelfClass(buttonClassName) && 'align-self-stretch',\n        buttonClassName\n    );\n\n    const daysWrapperClassNames = classNames(\n        !hasDisplayClass(daysWrapperClassName) && 'display-flex',\n        !hasSpaceClass(daysWrapperClassName) && 'space-x--1',\n        !hasUserSelectClass(daysWrapperClassName) && 'user-select-none',\n        daysWrapperClassName\n    );\n\n    const dayWrapperClassNames = classNames(\n        ITEM_NAME,\n        !hasFlexClass(dayWrapperClassName) && 'flex-1-1-0',\n        !hasSpaceClass(dayWrapperClassName) && 'space-x--1',\n        !hasUserSelectClass(dayWrapperClassName) && 'user-select-none',\n        dayWrapperClassName\n    );\n\n    return (\n        <div ref={ref} className={wrapperClassNames}>\n            <div className={baseButtonClassNames} onClick={handlePrev}>\n                <span className='rioglyph rioglyph-chevron-left' />\n            </div>\n            <div className='flex-1-1 overflow-hidden' ref={columnWrapperRef}>\n                <AnimatePresence mode='wait' custom={animationDirection}>\n                    <motion.div\n                        key={getDateString(firstDate)}\n                        variants={variants}\n                        initial={enableInitialAnimation ? 'pageEnter' : false}\n                        animate='pageCenter'\n                        custom={animationDirection}\n                        transition={{ duration: ANIMATION_DURATION }}\n                    >\n                        <div className={daysWrapperClassNames}>\n                            {dates.map(date => (\n                                <div className={dayWrapperClassNames} key={`${getDateString(date)}`}>\n                                    {renderDay ? renderDay(date) : null}\n                                </div>\n                            ))}\n                        </div>\n                    </motion.div>\n                </AnimatePresence>\n            </div>\n            <div className={baseButtonClassNames} onClick={handleNext}>\n                <span className='rioglyph rioglyph-chevron-right' />\n            </div>\n        </div>\n    );\n});\n\nexport default CalendarStripe;\n"],"names":["DEFAULT_MIN_WITH","DEFAULT_MIN_DAYS","DEFAULT_MAX_DAYS","ANIMATION_DURATION","ANIMATION_NEXT","ANIMATION_BACK","ITEM_NAME","variants","pageDirection","getDateString","date","getFirstColumnItem","node","CalendarStripe","forwardRef","props","ref","minDayWith","minDays","maxDays","renderDay","skipWeekends","startDate","onNextClick","noop","onPreviousClick","buttonClassName","className","daysWrapperClassName","dayWrapperClassName","firstDate","setFirstDate","useState","amountOfDaysToShow","setAmountOfDaysToShow","enableInitialAnimation","setEnableInitialAnimation","columnWrapperRef","useRef","columnWrapperWidth","useElementSize","previous","usePrevious","animationDirection","previousStartDate","setPreviousStartDate","useAfterMount","useEffect","firstItem","columnWidth","allowForLessColumns","allowForMoreColumns","goSmaller","newValue","handleNext","newFirstDate","handlePrev","dates","addDays","index","currentDate","isSaturday","isSunday","isWeekend","wrapperClassNames","classNames","hasDisplayClass","hasAlignItemsClass","hasOverflowClass","hasBgClass","hasBorderClass","hasRoundedClass","baseButtonClassNames","hasHoverScaleClass","hasHoverTextColorClass","hasPaddingClass","hasCursorClass","hasTextColorClass","hasTextSizeClass","hasAlignSelfClass","daysWrapperClassNames","hasSpaceClass","hasUserSelectClass","dayWrapperClassNames","hasFlexClass","jsxs","jsx","AnimatePresence","motion"],"mappings":"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"}
+{"version":3,"file":"CalendarStripe.js","sources":["../../../src/components/calendarStripe/CalendarStripe.tsx"],"sourcesContent":["import type React from 'react';\nimport { forwardRef, useEffect, useRef, useState } from 'react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport useAfterMount from '../../hooks/useAfterMount';\nimport useElementSize from '../../hooks/useElementSize';\nimport usePrevious from '../../hooks/usePrevious';\nimport {\n    hasAlignItemsClass,\n    hasAlignSelfClass,\n    hasBgClass,\n    hasBorderClass,\n    hasCursorClass,\n    hasDisplayClass,\n    hasFlexClass,\n    hasHoverScaleClass,\n    hasHoverTextColorClass,\n    hasOverflowClass,\n    hasPaddingClass,\n    hasRoundedClass,\n    hasSpaceClass,\n    hasTextColorClass,\n    hasTextSizeClass,\n    hasUserSelectClass,\n} from '../../utils/hasUtilityClass';\n\nconst DEFAULT_MIN_WITH = 200;\nconst DEFAULT_MIN_DAYS = 1;\nconst DEFAULT_MAX_DAYS = 7;\n\nconst ANIMATION_DURATION = 0.2;\nconst ANIMATION_NEXT = 'page';\nconst ANIMATION_BACK = 'pageBack';\n\nconst ITEM_NAME = 'ColumnItem';\n\nconst variants = {\n    pageEnter: (pageDirection: typeof ANIMATION_NEXT | typeof ANIMATION_BACK) => ({\n        x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',\n        opacity: 0,\n    }),\n    pageCenter: () => ({ x: 0, opacity: 1 }),\n};\n\nconst getDateString = (date: Date) => date.toISOString().split('T').at(0) as string;\n\nconst getFirstColumnItem = (node: Element): Element => {\n    if ([...node.classList].includes(ITEM_NAME)) {\n        return node;\n    }\n    return getFirstColumnItem(node.children[0]);\n};\n\nexport type CalendarStripeProps = {\n    /**\n     * The minimum width in pixel of a single day column\n     *\n     * This value determines how many days are shown per page depending on the parent width.\n     *\n     * @default 200\n     */\n    minDayWith?: number;\n\n    /**\n     * The minimum amount of days that should be shown per page.\n     *\n     * @default 1\n     */\n    minDays?: number;\n\n    /**\n     * The maximum amount of days that should be shown per page.\n     *\n     * @default 7\n     */\n    maxDays?: number;\n\n    /**\n     * A function that renders each individual day to be displayed.\n     *\n     * @param date The day to render\n     */\n    renderDay: (date: Date) => React.JSX.Element;\n\n    /**\n     * Defines whether the days for the weekends are included.\n     *\n     * @default false\n     */\n    skipWeekends?: boolean;\n\n    /**\n     * The date of the first day that are rendered.\n     *\n     * @default the current date\n     */\n    startDate?: Date;\n\n    /**\n     * Callback function for when the next button is clicked.\n     *\n     * @param newStartDate Date value that is now the start of the stripe.\n     */\n    onNextClick?: (newStartDate: Date) => void;\n\n    /**\n     * Callback function for when the previous button is clicked.\n     *\n     * @param newStartDate Date value that is now the start of the stripe.\n     */\n    onPreviousClick?: (newStartDate: Date) => void;\n\n    /**\n     * Additional classes set to the navigation buttons.\n     */\n    buttonClassName?: string;\n\n    /**\n     * Additional classes set to the calendar element.\n     */\n    className?: string;\n\n    /**\n     * Additional classes set to the days wrapper element.\n     */\n    daysWrapperClassName?: string;\n\n    /**\n     * Additional classes set to the days wrapper element.\n     */\n    dayWrapperClassName?: string;\n};\n\nconst CalendarStripe = forwardRef<HTMLDivElement, CalendarStripeProps>((props: CalendarStripeProps, ref) => {\n    const {\n        minDayWith = DEFAULT_MIN_WITH,\n        minDays = DEFAULT_MIN_DAYS,\n        maxDays = DEFAULT_MAX_DAYS,\n        renderDay,\n        skipWeekends = false,\n        startDate = new Date(),\n        onNextClick = noop,\n        onPreviousClick = noop,\n        buttonClassName = '',\n        className = '',\n        daysWrapperClassName = '',\n        dayWrapperClassName = '',\n    } = props;\n\n    const [firstDate, setFirstDate] = useState(startDate);\n    const [amountOfDaysToShow, setAmountOfDaysToShow] = useState(1);\n    const [enableInitialAnimation, setEnableInitialAnimation] = useState(false);\n\n    // The base for reacting on changing width of the wrapping element.\n    // It uses a ResizeObserver under the hood.\n    const columnWrapperRef = useRef<HTMLDivElement>(null);\n    const [columnWrapperWidth] = useElementSize(columnWrapperRef);\n\n    const previous = usePrevious(getDateString(firstDate));\n    const animationDirection = getDateString(firstDate) > (previous as string) ? ANIMATION_NEXT : ANIMATION_BACK;\n\n    // Update startDate from outside\n    const [previousStartDate, setPreviousStartDate] = useState(startDate);\n    if (getDateString(startDate) !== getDateString(previousStartDate)) {\n        setFirstDate(startDate);\n        setPreviousStartDate(startDate);\n    }\n\n    useAfterMount(() => {\n        setEnableInitialAnimation(true);\n    }, []);\n\n    useEffect(() => {\n        if (!columnWrapperRef.current) {\n            return;\n        }\n\n        const firstItem = getFirstColumnItem(columnWrapperRef.current.children[0]);\n        if (!firstItem) {\n            return;\n        }\n\n        // Get the width of the first column to calculate how many columns fit on one page\n        // according to the given minWidth per column\n        const columnWidth = firstItem.getBoundingClientRect().width;\n\n        // Limit columns per page for given min and max values\n        const allowForLessColumns = amountOfDaysToShow - 1 >= minDays;\n        const allowForMoreColumns = amountOfDaysToShow + 1 <= maxDays;\n\n        const goSmaller = allowForLessColumns && columnWidth <= minDayWith;\n        const goBigger =\n            allowForMoreColumns && (amountOfDaysToShow + 1) * minDayWith <= (columnWrapperWidth as unknown as number);\n\n        if (goBigger) {\n            const newValue = amountOfDaysToShow + 1;\n            setAmountOfDaysToShow(newValue);\n            return;\n        }\n\n        if (goSmaller) {\n            const newValue = amountOfDaysToShow - 1;\n            setAmountOfDaysToShow(newValue);\n            return;\n        }\n    }, [columnWrapperWidth, columnWrapperRef.current, amountOfDaysToShow, firstDate]);\n\n    const handleNext = () => {\n        const newFirstDate = new Date(firstDate);\n        newFirstDate.setDate(newFirstDate.getDate() + amountOfDaysToShow);\n        setFirstDate(newFirstDate);\n\n        onNextClick(newFirstDate);\n    };\n\n    const handlePrev = () => {\n        const newFirstDate = new Date(firstDate);\n        newFirstDate.setDate(newFirstDate.getDate() - amountOfDaysToShow);\n        setFirstDate(newFirstDate);\n\n        onPreviousClick(newFirstDate);\n    };\n\n    // Re-calculate the dates to show depending on the amount of days to show\n    const dates = [];\n\n    let addDays = true;\n    let index = 1;\n\n    while (addDays) {\n        const currentDate = new Date(firstDate);\n        currentDate.setDate(firstDate.getDate() + index);\n\n        const isSaturday = currentDate.getDay() === 6;\n        const isSunday = currentDate.getDay() === 0;\n        const isWeekend = isSaturday || isSunday;\n\n        if (isWeekend && !skipWeekends) {\n            dates.push(currentDate);\n        } else if (!isWeekend) {\n            dates.push(currentDate);\n        }\n\n        index++;\n\n        if (dates.length === amountOfDaysToShow) {\n            addDays = false;\n        }\n    }\n\n    const wrapperClassNames = classNames(\n        'CalenderStripe',\n        !hasDisplayClass(className) && 'display-flex',\n        !hasAlignItemsClass(className) && 'align-items-center',\n        !hasOverflowClass(className) && 'overflow-hidden',\n        !hasBgClass(className) && 'bg-white',\n        !hasBorderClass(className) && 'border',\n        !hasRoundedClass(className) && 'rounded',\n        className\n    );\n\n    const baseButtonClassNames = classNames(\n        !hasAlignItemsClass(buttonClassName) && 'align-items-center',\n        !hasDisplayClass(buttonClassName) && 'display-flex',\n        !hasHoverScaleClass(buttonClassName) && 'hover-scale-105',\n        !hasHoverTextColorClass(buttonClassName) && 'hover-text-color-darkest',\n        !hasPaddingClass(buttonClassName) && 'padding-10',\n        !hasCursorClass(buttonClassName) && 'cursor-pointer',\n        !hasTextColorClass(buttonClassName) && 'text-color-darker',\n        !hasTextSizeClass(buttonClassName) && 'text-size-12',\n        !hasAlignSelfClass(buttonClassName) && 'align-self-stretch',\n        buttonClassName\n    );\n\n    const daysWrapperClassNames = classNames(\n        !hasDisplayClass(daysWrapperClassName) && 'display-flex',\n        !hasSpaceClass(daysWrapperClassName) && 'space-x--1',\n        !hasUserSelectClass(daysWrapperClassName) && 'user-select-none',\n        daysWrapperClassName\n    );\n\n    const dayWrapperClassNames = classNames(\n        ITEM_NAME,\n        !hasFlexClass(dayWrapperClassName) && 'flex-1-1-0',\n        !hasSpaceClass(dayWrapperClassName) && 'space-x--1',\n        !hasUserSelectClass(dayWrapperClassName) && 'user-select-none',\n        dayWrapperClassName\n    );\n\n    return (\n        <div ref={ref} className={wrapperClassNames}>\n            <div className={baseButtonClassNames} onClick={handlePrev}>\n                <span className='rioglyph rioglyph-chevron-left' />\n            </div>\n            <div className='flex-1-1 overflow-hidden' ref={columnWrapperRef}>\n                <AnimatePresence mode='wait' custom={animationDirection}>\n                    <motion.div\n                        key={getDateString(firstDate)}\n                        variants={variants}\n                        initial={enableInitialAnimation ? 'pageEnter' : false}\n                        animate='pageCenter'\n                        custom={animationDirection}\n                        transition={{ duration: ANIMATION_DURATION }}\n                    >\n                        <div className={daysWrapperClassNames}>\n                            {dates.map(date => (\n                                <div className={dayWrapperClassNames} key={`${getDateString(date)}`}>\n                                    {renderDay ? renderDay(date) : null}\n                                </div>\n                            ))}\n                        </div>\n                    </motion.div>\n                </AnimatePresence>\n            </div>\n            <div className={baseButtonClassNames} onClick={handleNext}>\n                <span className='rioglyph rioglyph-chevron-right' />\n            </div>\n        </div>\n    );\n});\n\nexport default CalendarStripe;\n"],"names":["DEFAULT_MIN_WITH","DEFAULT_MIN_DAYS","DEFAULT_MAX_DAYS","ANIMATION_DURATION","ANIMATION_NEXT","ANIMATION_BACK","ITEM_NAME","variants","pageDirection","getDateString","date","getFirstColumnItem","node","CalendarStripe","forwardRef","props","ref","minDayWith","minDays","maxDays","renderDay","skipWeekends","startDate","onNextClick","noop","onPreviousClick","buttonClassName","className","daysWrapperClassName","dayWrapperClassName","firstDate","setFirstDate","useState","amountOfDaysToShow","setAmountOfDaysToShow","enableInitialAnimation","setEnableInitialAnimation","columnWrapperRef","useRef","columnWrapperWidth","useElementSize","previous","usePrevious","animationDirection","previousStartDate","setPreviousStartDate","useAfterMount","useEffect","firstItem","columnWidth","allowForLessColumns","allowForMoreColumns","goSmaller","newValue","handleNext","newFirstDate","handlePrev","dates","addDays","index","currentDate","isSaturday","isSunday","isWeekend","wrapperClassNames","classNames","hasDisplayClass","hasAlignItemsClass","hasOverflowClass","hasBgClass","hasBorderClass","hasRoundedClass","baseButtonClassNames","hasHoverScaleClass","hasHoverTextColorClass","hasPaddingClass","hasCursorClass","hasTextColorClass","hasTextSizeClass","hasAlignSelfClass","daysWrapperClassNames","hasSpaceClass","hasUserSelectClass","dayWrapperClassNames","hasFlexClass","jsxs","jsx","AnimatePresence","motion"],"mappings":"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"}

package/components/card/Card.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import i from "classnames";
+import i from "../../utils/classNames.js";
 const l = (s) => {
   const { className: a = "", shadow: d = "default", padding: r = 15, children: e, ...o } = s, n = i("bg-white", "rounded", "border", `shadow-${d}`, `padding-${r}`, a);
   return /* @__PURE__ */ t("div", { ...o, className: n, children: e });

package/components/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../src/components/card/Card.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nexport type CardProps = ComponentProps<'div'> & {\n    /**\n     * Shadow classes.\n     *\n     * @default 'default'\n     */\n    shadow?: 'subtle' | 'muted' | 'accent' | 'default' | 'smooth' | 'muted-down' | 'default-down' | 'none';\n\n    /**\n     * Card padding.\n     *\n     * @default 15\n     */\n    padding?: 0 | 5 | 10 | 15 | 20 | 25 | 50;\n\n    /**\n     * Additional classes set to the outer element.\n     */\n    className?: string;\n};\n\nconst Card = (props: PropsWithChildren<CardProps>) => {\n    const { className = '', shadow = 'default', padding = 15, children, ...remainingProps } = props;\n\n    const classes = classNames('bg-white', 'rounded', 'border', `shadow-${shadow}`, `padding-${padding}`, className);\n\n    return (\n        <div {...remainingProps} className={classes}>\n            {children}\n        </div>\n    );\n};\n\nexport default Card;\n"],"names":["Card","props","className","shadow","padding","children","remainingProps","classes","classNames"],"mappings":";;AAwBA,MAAMA,IAAO,CAACC,MAAwC;AAClD,QAAM,EAAE,WAAAC,IAAY,IAAI,QAAAC,IAAS,WAAW,SAAAC,IAAU,IAAI,UAAAC,GAAU,GAAGC,EAAA,IAAmBL,GAEpFM,IAAUC,EAAW,YAAY,WAAW,UAAU,UAAUL,CAAM,IAAI,WAAWC,CAAO,IAAIF,CAAS;AAE/G,2BACK,OAAA,EAAK,GAAGI,GAAgB,WAAWC,GAC/B,UAAAF,GACL;AAER;"}
+{"version":3,"file":"Card.js","sources":["../../../src/components/card/Card.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type CardProps = ComponentProps<'div'> & {\n    /**\n     * Shadow classes.\n     *\n     * @default 'default'\n     */\n    shadow?: 'subtle' | 'muted' | 'accent' | 'default' | 'smooth' | 'muted-down' | 'default-down' | 'none';\n\n    /**\n     * Card padding.\n     *\n     * @default 15\n     */\n    padding?: 0 | 5 | 10 | 15 | 20 | 25 | 50;\n\n    /**\n     * Additional classes set to the outer element.\n     */\n    className?: string;\n};\n\nconst Card = (props: PropsWithChildren<CardProps>) => {\n    const { className = '', shadow = 'default', padding = 15, children, ...remainingProps } = props;\n\n    const classes = classNames('bg-white', 'rounded', 'border', `shadow-${shadow}`, `padding-${padding}`, className);\n\n    return (\n        <div {...remainingProps} className={classes}>\n            {children}\n        </div>\n    );\n};\n\nexport default Card;\n"],"names":["Card","props","className","shadow","padding","children","remainingProps","classes","classNames"],"mappings":";;AAyBA,MAAMA,IAAO,CAACC,MAAwC;AAClD,QAAM,EAAE,WAAAC,IAAY,IAAI,QAAAC,IAAS,WAAW,SAAAC,IAAU,IAAI,UAAAC,GAAU,GAAGC,EAAA,IAAmBL,GAEpFM,IAAUC,EAAW,YAAY,WAAW,UAAU,UAAUL,CAAM,IAAI,WAAWC,CAAO,IAAIF,CAAS;AAE/G,2BACK,OAAA,EAAK,GAAGI,GAAgB,WAAWC,GAC/B,UAAAF,GACL;AAER;"}

package/components/charts/Area.d.ts

@@ -1,8 +1,8 @@
 import { AreaProps as RechartsAreaProps } from 'recharts';
 import { CurveType } from 'recharts/types/shape/Curve';
-export type AreaProps<T = unknown> = Omit<RechartsAreaProps, 'ref'> & {
+export type AreaProps<T = any> = Omit<RechartsAreaProps, 'ref'> & {
     strokeColor?: string;
-    dataKey?: string | number | ((obj: T) => unknown);
+    dataKey?: string | number | ((obj: T) => any);
     unit?: string;
     legendType?: string;
     type?: CurveType;

package/components/charts/Area.js.map

@@ -1 +1 @@
-{"version":3,"file":"Area.js","sources":["../../../src/components/charts/Area.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport type { AreaProps as RechartsAreaProps } from 'recharts';\nimport type { CurveType } from 'recharts/types/shape/Curve';\n\nexport type AreaProps<T = unknown> = Omit<RechartsAreaProps, 'ref'> & {\n    strokeColor?: string;\n    dataKey?: string | number | ((obj: T) => unknown);\n    unit?: string;\n    legendType?: string;\n    type?: CurveType;\n    isAnimationActive?: boolean;\n};\n\nexport const getAreaDefaultProps = () => ({\n    dataKey: 'value',\n    unit: '',\n    strokeColor: 'color-coldplay-fountain',\n    legendType: 'square',\n    type: 'monotone',\n    isAnimationActive: true,\n});\n\nconst Area = (props: AreaProps) => null;\n\nexport default Area;\n"],"names":["getAreaDefaultProps","Area","props"],"mappings":"AAaO,MAAMA,IAAsB,OAAO;AAAA,EACtC,SAAS;AAAA,EACT,MAAM;AAAA,EACN,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,mBAAmB;AACvB,IAEMC,IAAO,CAACC,MAAqB;"}
+{"version":3,"file":"Area.js","sources":["../../../src/components/charts/Area.tsx"],"sourcesContent":["import type { AreaProps as RechartsAreaProps } from 'recharts';\nimport type { CurveType } from 'recharts/types/shape/Curve';\n\n// biome-ignore lint/suspicious/noExplicitAny: be less restrictive here\nexport type AreaProps<T = any> = Omit<RechartsAreaProps, 'ref'> & {\n    strokeColor?: string;\n    // biome-ignore lint/suspicious/noExplicitAny: see above\n    dataKey?: string | number | ((obj: T) => any);\n    unit?: string;\n    legendType?: string;\n    type?: CurveType;\n    isAnimationActive?: boolean;\n};\n\nexport const getAreaDefaultProps = () => ({\n    dataKey: 'value',\n    unit: '',\n    strokeColor: 'color-coldplay-fountain',\n    legendType: 'square',\n    type: 'monotone',\n    isAnimationActive: true,\n});\n\nconst Area = (props: AreaProps) => null;\n\nexport default Area;\n"],"names":["getAreaDefaultProps","Area","props"],"mappings":"AAcO,MAAMA,IAAsB,OAAO;AAAA,EACtC,SAAS;AAAA,EACT,MAAM;AAAA,EACN,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,mBAAmB;AACvB,IAEMC,IAAO,CAACC,MAAqB;"}

package/components/charts/Line.d.ts

@@ -1,8 +1,8 @@
 import { LineProps as RechartsLineProps } from 'recharts';
 import { CurveType } from 'recharts/types/shape/Curve';
-export type LineProps<T = unknown> = Omit<RechartsLineProps, 'ref'> & {
+export type LineProps<T = any> = Omit<RechartsLineProps, 'ref'> & {
     strokeColor?: string;
-    dataKey?: string | number | ((obj: T) => unknown);
+    dataKey?: string | number | ((obj: T) => any);
     unit?: string;
     legendType?: string;
     type?: CurveType;

package/components/charts/Line.js.map

@@ -1 +1 @@
-{"version":3,"file":"Line.js","sources":["../../../src/components/charts/Line.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport type { LineProps as RechartsLineProps } from 'recharts';\nimport type { CurveType } from 'recharts/types/shape/Curve';\n\nexport type LineProps<T = unknown> = Omit<RechartsLineProps, 'ref'> & {\n    strokeColor?: string;\n    dataKey?: string | number | ((obj: T) => unknown);\n    unit?: string;\n    legendType?: string;\n    type?: CurveType;\n    isAnimationActive?: boolean;\n};\n\nexport const getLineDefaultProps = () => ({\n    dataKey: 'value',\n    unit: '',\n    strokeColor: 'color-coldplay-fountain',\n    legendType: 'square',\n    type: 'monotone',\n    isAnimationActive: true,\n});\n\nconst Line = (props: LineProps) => null;\n\nexport default Line;\n"],"names":["getLineDefaultProps","Line","props"],"mappings":"AAaO,MAAMA,IAAsB,OAAO;AAAA,EACtC,SAAS;AAAA,EACT,MAAM;AAAA,EACN,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,mBAAmB;AACvB,IAEMC,IAAO,CAACC,MAAqB;"}
+{"version":3,"file":"Line.js","sources":["../../../src/components/charts/Line.tsx"],"sourcesContent":["import type { LineProps as RechartsLineProps } from 'recharts';\nimport type { CurveType } from 'recharts/types/shape/Curve';\n\n// biome-ignore lint/suspicious/noExplicitAny: be less restrictive here\nexport type LineProps<T = any> = Omit<RechartsLineProps, 'ref'> & {\n    strokeColor?: string;\n    // biome-ignore lint/suspicious/noExplicitAny: see above\n    dataKey?: string | number | ((obj: T) => any);\n    unit?: string;\n    legendType?: string;\n    type?: CurveType;\n    isAnimationActive?: boolean;\n};\n\nexport const getLineDefaultProps = () => ({\n    dataKey: 'value',\n    unit: '',\n    strokeColor: 'color-coldplay-fountain',\n    legendType: 'square',\n    type: 'monotone',\n    isAnimationActive: true,\n});\n\nconst Line = (props: LineProps) => null;\n\nexport default Line;\n"],"names":["getLineDefaultProps","Line","props"],"mappings":"AAcO,MAAMA,IAAsB,OAAO;AAAA,EACtC,SAAS;AAAA,EACT,MAAM;AAAA,EACN,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,mBAAmB;AACvB,IAEMC,IAAO,CAACC,MAAqB;"}