xtreme-ui 0.0.123 → 0.0.125

package/dist/components/ActionCard/exports.js

@@ -1,6 +1,8 @@
-import '../../index.css';/* empty css                   */
-import { A as i, E as t } from "../../ActionCard-B8grjL52.js";
+import '../base/ActionCard/actionCard.css';import '../../styles/index.css';/* empty css                      */
+/* empty css                                 */
+import { ActionCard as m } from "../base/ActionCard/ActionCard.js";
+import { EActionCardSize as e } from "../base/ActionCard/types.js";
 export {
-  i as ActionCard,
-  t as EActionCardSize
+  m as ActionCard,
+  e as EActionCardSize
 };

package/dist/components/Avatar/exports.js

@@ -1,6 +1,8 @@
-import '../../index.css';/* empty css                   */
-import { A as o, E as A } from "../../Avatar-soTst6QB.js";
+import '../base/Avatar/avatar.css';import '../../styles/index.css';/* empty css                      */
+/* empty css                         */
+import { Avatar as m } from "../base/Avatar/Avatar.js";
+import { EAvatarSize as e } from "../base/Avatar/types.js";
 export {
-  o as Avatar,
-  A as EAvatarSize
+  m as Avatar,
+  e as EAvatarSize
 };

package/dist/components/Button/exports.js

@@ -1,6 +1,8 @@
-import '../../index.css';/* empty css                   */
-import { B as r, E as s } from "../../Button-8OfYrlfv.js";
+import '../base/Button/button.css';import '../../styles/index.css';/* empty css                      */
+/* empty css                         */
+import { Button as m } from "../base/Button/Button.js";
+import { EButtonTypes as f } from "../base/Button/types.js";
 export {
-  r as Button,
-  s as EButtonTypes
+  m as Button,
+  f as EButtonTypes
 };

package/dist/components/ColorPicker/exports.js

@@ -1,5 +1,6 @@
-import '../../index.css';/* empty css                   */
-import { C as i } from "../../ColorPicker-DTlIMXCI.js";
+import '../base/ColorPicker/colorPicker.css';import '../../styles/index.css';/* empty css                      */
+/* empty css                                   */
+import { ColorPicker as p } from "../base/ColorPicker/ColorPicker.js";
 export {
-  i as ColorPicker
+  p as ColorPicker
 };

package/dist/components/ColorPopper/exports.js

@@ -1,5 +1,6 @@
-import '../../index.css';/* empty css                   */
-import { C as e } from "../../ColorPopper-DD-LwyH4.js";
+import '../base/ColorPopper/colorPopper.css';import '../../styles/index.css';/* empty css                      */
+/* empty css                                   */
+import { ColorPopper as t } from "../base/ColorPopper/ColorPopper.js";
 export {
-  e as ColorPopper
+  t as ColorPopper
 };

package/dist/components/DatePicker/exports.js

@@ -1,6 +1,8 @@
-import '../../index.css';/* empty css                   */
-import { D as t, E as i } from "../../types-BZuGVOZ5.js";
+import '../base/DatePicker/datePicker.css';import '../../styles/index.css';/* empty css                      */
+/* empty css                                 */
+import { DatePicker as p } from "../base/DatePicker/DatePicker.js";
+import { EDatePickerTypes as m } from "../base/DatePicker/types.js";
 export {
-  t as DatePicker,
-  i as EDatePickerTypes
+  p as DatePicker,
+  m as EDatePickerTypes
 };

package/dist/components/FilePicker/exports.js

@@ -1,6 +1,8 @@
-import '../../index.css';/* empty css                   */
-import { F as o, a } from "../../FilePicker-B0CAFe_F.js";
+import '../base/FilePicker/filePicker.css';import '../../styles/index.css';/* empty css                      */
+/* empty css                                 */
+import { FilePicker as m } from "../base/FilePicker/FilePicker.js";
+import { FilePickerIcon as t } from "../base/FilePicker/types.js";
 export {
-  o as FilePicker,
-  a as FilePickerIcon
+  m as FilePicker,
+  t as FilePickerIcon
 };

package/dist/components/ImageEditor/exports.js

@@ -1,5 +1,6 @@
-import '../../index.css';/* empty css                   */
-import { I as t } from "../../ImageEditor-CHAOpQQ3.js";
+import '../layout/ImageEditor/imageEditor.css';import '../../styles/index.css';/* empty css                      */
+/* empty css                                     */
+import { ImageEditor as i } from "../layout/ImageEditor/ImageEditor.js";
 export {
-  t as ImageEditor
+  i as ImageEditor
 };

package/dist/components/Navigation/exports.js

@@ -1,5 +1,6 @@
-import '../../index.css';/* empty css                   */
-import { N as r } from "../../Navigation-CZ6ofO5o.js";
+import '../layout/Navigation/navigation.css';import '../../styles/index.css';/* empty css                      */
+/* empty css                                   */
+import { Navigation as m } from "../layout/Navigation/Navigation.js";
 export {
-  r as Navigation
+  m as Navigation
 };

package/dist/components/ProgressBar/exports.js

@@ -1,5 +1,6 @@
-import '../../index.css';/* empty css                   */
-import { P as a } from "../../ProgressBar-BYsdT_xg.js";
+import '../base/ProgressBar/progressbar.css';import '../../styles/index.css';/* empty css                      */
+/* empty css                                   */
+import { ProgressBar as t } from "../base/ProgressBar/ProgressBar.js";
 export {
-  a as ProgressBar
+  t as ProgressBar
 };

package/dist/components/Select/exports.js

@@ -1,5 +1,6 @@
-import '../../index.css';/* empty css                   */
-import { S as t } from "../../Select-N5Uw9cYv.js";
+import '../base/Select/select.css';import '../../styles/index.css';/* empty css                      */
+/* empty css                         */
+import { Select as m } from "../base/Select/Select.js";
 export {
-  t as Select
+  m as Select
 };

package/dist/components/Sider/exports.js

@@ -1,5 +1,6 @@
-import '../../index.css';/* empty css                   */
-import { S as i } from "../../Sider-WB4MCj13.js";
+import '../layout/Sider/sider.css';import '../../styles/index.css';/* empty css                      */
+/* empty css                         */
+import { Sider as p } from "../layout/Sider/Sider.js";
 export {
-  i as Sider
+  p as Sider
 };

package/dist/components/SiderModal/exports.js

@@ -1,5 +1,6 @@
-import '../../index.css';/* empty css                   */
-import { S as d } from "../../SiderModal-0iZz0k9s.js";
+import '../layout/SiderModal/siderModal.css';import '../../styles/index.css';/* empty css                      */
+/* empty css                                   */
+import { SiderModal as p } from "../layout/SiderModal/SiderModal.js";
 export {
-  d as SiderModal
+  p as SiderModal
 };

package/dist/components/Spinner/exports.js

@@ -1,6 +1,8 @@
-import '../../index.css';/* empty css                   */
-import { E as n, S as p } from "../../Spinner-DvZRWrE7.js";
+import '../base/Spinner/spinner.css';import '../../styles/index.css';/* empty css                      */
+/* empty css                           */
+import { Spinner as i } from "../base/Spinner/Spinner.js";
+import { ESpinnerSize as n } from "../base/Spinner/types.js";
 export {
   n as ESpinnerSize,
-  p as Spinner
+  i as Spinner
 };

package/dist/components/Textfield/exports.js

@@ -1,5 +1,6 @@
-import '../../index.css';/* empty css                   */
-import { T as t } from "../../Textfield-DD7cRuMt.js";
+import '../base/Textfield/textfield.css';import '../../styles/index.css';/* empty css                      */
+/* empty css                               */
+import { Textfield as i } from "../base/Textfield/Textfield.js";
 export {
-  t as Textfield
+  i as Textfield
 };

package/dist/components/ThemePicker/exports.js

@@ -1,5 +1,6 @@
-import '../../index.css';/* empty css                   */
-import { T as o } from "../../ThemePicker-CcMoStgj.js";
+import '../layout/ThemePicker/themePicker.css';import '../../styles/index.css';/* empty css                      */
+/* empty css                                     */
+import { ThemePicker as i } from "../layout/ThemePicker/ThemePicker.js";
 export {
-  o as ThemePicker
+  i as ThemePicker
 };

package/dist/components/ThemeSelect/exports.js

@@ -1,5 +1,6 @@
-import '../../index.css';/* empty css                   */
-import { T as r } from "../../ThemeSelect-vklTxFpw.js";
+import '../layout/ThemeSelect/themeSelect.css';import '../../styles/index.css';/* empty css                      */
+/* empty css                                     */
+import { ThemeSelect as t } from "../layout/ThemeSelect/ThemeSelect.js";
 export {
-  r as ThemeSelect
+  t as ThemeSelect
 };

package/dist/components/ThemeSwitch/exports.js

@@ -1,5 +1,6 @@
-import '../../index.css';/* empty css                   */
-import { T as r } from "../../ThemeSwitch-DEvhyHpt.js";
+import '../layout/ThemeSwitch/themeSwitch.css';import '../../styles/index.css';/* empty css                      */
+/* empty css                                     */
+import { ThemeSwitch as e } from "../layout/ThemeSwitch/ThemeSwitch.js";
 export {
-  r as ThemeSwitch
+  e as ThemeSwitch
 };

package/dist/components/base/ActionCard/ActionCard.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import m from "clsx";
+import { forwardRef as p } from "react";
+import './actionCard.css';/* empty css                */
+import { EActionCardSize as t } from "./types.js";
+const f = p((i, a) => {
+  const { className: e, children: c, style: s = {}, size: r = "default", onClick: d } = i, o = Array.isArray(r) ? r : [t[r], t[r]], n = m("xtrActionCard", "shadowRipple", `${r}Size`, e);
+  return /* @__PURE__ */ l(
+    "footer",
+    {
+      ref: a,
+      className: n,
+      style: {
+        "--cardWidth": `${o[0]}px`,
+        "--cardHeight": `${o[1]}px`,
+        ...s
+      },
+      onClick: d,
+      children: c
+    }
+  );
+});
+f.displayName = "ActionCard";
+export {
+  f as ActionCard
+};

package/dist/components/base/ActionCard/types.js

@@ -0,0 +1,4 @@
+var u = /* @__PURE__ */ ((l) => (l[l.mini = 100] = "mini", l[l.default = 164] = "default", l[l.large = 254] = "large", l))(u || {});
+export {
+  u as EActionCardSize
+};

package/dist/components/base/Avatar/Avatar.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import z from "clsx";
+import { Icon as E } from "gliff";
+import { forwardRef as C, useState as c, useEffect as F } from "react";
+import { FACE_ICONS as m } from "../../../utils/constants/iconCollection.js";
+import { readImageFile as L, readImageSrc as b } from "../../../utils/helper/imageHelper.js";
+import './avatar.css';/* empty css            */
+import { EAvatarSize as M } from "./types.js";
+const R = C((h, g) => {
+  const { className: u, src: a, file: o, alt: v, placeholderIcon: y, size: l = "default", onClick: I } = h, [n, f] = c(), [x, A] = c(m.happy[0]), [N, t] = c(!!a || !!o), [p, r] = c(!1), d = typeof l == "number" ? l : M[l], S = z("xtrAvatar", u, N && "loading", p && "error"), s = (e) => {
+    e && setTimeout(() => f(e), 300), setTimeout(() => t(!1), 1e3);
+  };
+  return F(() => {
+    A(m.happy[Math.floor(Math.random() * m.happy.length)]);
+    try {
+      o ? (t(!0), r(!1), L(o).then((e) => s(e)).catch((e) => {
+        console.log(e), t(!1), r(!0);
+      })) : a ? (t(!0), r(!1), b(a).then((e) => s(e)).catch((e) => {
+        console.log(e, a), t(!1), r(!0);
+      })) : (f(void 0), s());
+    } catch {
+      s();
+    }
+  }, [a, o]), /* @__PURE__ */ i("div", { ref: g, className: S, style: { "--avatarSize": `${d}px` }, onClick: I, role: "img", children: n ? (
+    // biome-ignore lint/performance/noImgElement: library component wrapping img
+    /* @__PURE__ */ i("img", { className: "image", src: n, alt: v })
+  ) : /* @__PURE__ */ i(E, { className: "placeholder", type: "solid", size: 8 + d / 4, code: p ? "e1b7" : y ?? x }) });
+});
+R.displayName = "Avatar";
+export {
+  R as Avatar
+};

package/dist/components/base/Avatar/types.js

@@ -0,0 +1,4 @@
+var n = /* @__PURE__ */ ((l) => (l[l.mini = 64] = "mini", l[l.default = 96] = "default", l[l.large = 128] = "large", l))(n || {});
+export {
+  n as EAvatarSize
+};

package/dist/components/base/Button/Button.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsxs as N, jsx as t } from "react/jsx-runtime";
+import x from "clsx";
+import { Icon as B } from "gliff";
+import { forwardRef as b } from "react";
+import { ProgressBar as g } from "../ProgressBar/ProgressBar.js";
+import './button.css';/* empty css            */
+import { EButtonTypes as h } from "./types.js";
+const T = b((a, c) => {
+  const { className: m, style: p = {}, label: o, type: n = "primary", size: i = "default", disabled: d = !1, loading: l = !1, icon: e, iconType: f, iconPosition: s = "left", onClick: u } = a, r = e ? /* @__PURE__ */ t(B, { className: "icon", code: e, type: f, size: i }) : null, y = x("xtrButton", "shadowRipple", `${n}Type`, `${i}Size`, !o && "iconOnly", l && "loading", m);
+  return !o && !e ? null : /* @__PURE__ */ N("button", { ref: c, className: y, style: p, onClick: u, disabled: d, children: [
+    n.includes(h.link) && /* @__PURE__ */ t(g, { className: "underline", intermediate: l }),
+    s === "left" && r,
+    o && /* @__PURE__ */ t("span", { className: "label", children: o }),
+    s === "right" && r
+  ] });
+});
+T.displayName = "Button";
+export {
+  T as Button
+};

package/dist/components/base/Button/types.js

@@ -0,0 +1,4 @@
+var a = /* @__PURE__ */ ((r) => (r.primary = "primary", r.primaryDanger = "primaryDanger", r.secondary = "secondary", r.secondaryDanger = "secondaryDanger", r.link = "link", r.linkDanger = "linkDanger", r))(a || {});
+export {
+  a as EButtonTypes
+};

package/dist/components/base/ColorPicker/ColorPicker.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import p from "@uiw/react-color-alpha";
+import d from "@uiw/react-color-shade-slider";
+import C from "@uiw/react-color-wheel";
+import f from "clsx";
+import { forwardRef as x } from "react";
+import './colorPicker.css';/* empty css                 */
+const s = 180, N = x((l, t) => {
+  const { className: h, shade: m = !0, alpha: i = !0, color: o = { h: 0, s: 0, v: 100, a: 1 }, setColor: e } = l, c = f("xtrColorPicker", h);
+  return /* @__PURE__ */ n("div", { ref: t, className: c, children: [
+    /* @__PURE__ */ a(C, { className: "wheel", color: o, width: s, height: s, onChange: (r) => e(r.hsva) }),
+    m && /* @__PURE__ */ a(d, { className: "shade", hsva: o, onChange: ({ v: r }) => e({ ...o, v: r }) }),
+    i && /* @__PURE__ */ a(p, { className: "alpha", hsva: o, onChange: ({ a: r }) => e({ ...o, a: r }) })
+  ] });
+});
+N.displayName = "ColorPicker";
+export {
+  N as ColorPicker
+};

package/dist/components/base/ColorPopper/ColorPopper.js

@@ -0,0 +1,195 @@
+"use client";
+import { jsxs as a, Fragment as ie, jsx as t } from "react/jsx-runtime";
+import { useFloating as ae, autoUpdate as ce, shift as he, flip as de, offset as me, useTransitionStyles as pe, useInteractions as ue, useClick as fe, useDismiss as Ce } from "@floating-ui/react";
+import C from "clsx";
+import { colord as s, getFormat as ge } from "colord";
+import { Icon as ve } from "gliff";
+import { forwardRef as xe, useMemo as w, useState as g, useRef as ye, useEffect as V } from "react";
+import { ColorPicker as He } from "../ColorPicker/ColorPicker.js";
+import { Textfield as be } from "../Textfield/Textfield.js";
+import { useScreenType as Ne } from "../../hooks/useScreen.js";
+import { getColorLabel as $e } from "../../../utils/helper/colorHelper.js";
+import { THEME_SCHEME as Pe } from "../../../utils/constants/theme.js";
+import { mergeRefs as Te } from "../../../utils/function/mergeRefs.js";
+import { Button as M } from "../Button/Button.js";
+import './colorPopper.css';/* empty css                 */
+function O(j, z) {
+  const {
+    className: R,
+    popperClassName: A,
+    input: v = "textfield",
+    size: q = "default",
+    placeholder: D = "Color Picker",
+    colorHeading: m = "Pick color",
+    schemeHeading: I,
+    themeScheme: x,
+    setThemeScheme: U,
+    showReset: W = !0,
+    alpha: _,
+    shade: G,
+    swatch: y,
+    hideWheel: E = !1,
+    color: c,
+    setColor: p
+  } = j, J = Ne(), r = w(() => s(c), []), u = w(() => ge(c), [c]), [H, h] = g(r.toHsv()), [l, d] = g(r.toHex()), [K, Q] = g(m), b = ye(!1), [F, N] = g(!1), { refs: $, floatingStyles: X, context: P } = ae({
+    open: F,
+    onOpenChange: N,
+    middleware: [he({ crossAxis: !0, padding: 18 }), de(), me(({ placement: e }) => e === "bottom" ? 10 : 16)],
+    whileElementsMounted: ce
+  }), { isMounted: Y, styles: Z } = pe(P, {
+    duration: 200,
+    initial: ({ side: e }) => ({
+      opacity: 0,
+      translate: e === "bottom" ? "0px 8px" : "0px -8px"
+    })
+  }), { getReferenceProps: L, getFloatingProps: ee } = ue([fe(P), Ce(P)]), [T, oe, S] = w(() => {
+    const e = s(H), o = e.toHsl(), n = r.toHsl();
+    return [
+      `${Math.round(o.h)} ${Math.round(o.s)}% ${Math.round(o.l)}%`,
+      `${Math.round(n.h)} ${Math.round(n.s)}% ${Math.round(n.l)}%`,
+      e.isLight() ? "black" : "white"
+    ];
+  }, [r, H]), te = l !== r.toHex(), k = v === "button" || v === "buttonLabel", f = (e) => {
+    b.current = !0, u === "rgb" ? p(e.toRgb()) : u === "hex" ? p(e.toHex()) : u === "hsl" ? p(e.toHsl()) : u === "hsv" && p(e.toHsv());
+  }, B = (e) => {
+    d(e);
+    const o = s(e);
+    o.isValid() && (h(o.toHsv()), f(o));
+  }, se = (e) => {
+    const o = s(e);
+    h(e), d(o.toHex()), f(o);
+  }, re = (e) => {
+    const o = s(e);
+    h(o.toHsv()), d(o.toHex()), f(o);
+  }, le = () => {
+    h(r.toHsv()), d(r.toHex()), f(r);
+  };
+  return V(() => {
+    if (!b.current) {
+      const e = s(c);
+      h(e.toHsv()), d(e.toHex());
+    }
+    b.current = !1;
+  }, [c]), V(() => {
+    Q($e(s(l).toHsl()) ?? m);
+  }, [m, l]), /* @__PURE__ */ a(ie, { children: [
+    k ? /* @__PURE__ */ t(
+      M,
+      {
+        className: "xtrColorButton",
+        ref: $.setReference,
+        size: q,
+        icon: "f53f",
+        iconType: "solid",
+        label: v === "buttonLabel" ? l : void 0,
+        style: {
+          "--themeColor": T,
+          "--iconColor": S,
+          color: S
+        },
+        onClick: () => N(!0),
+        ...L()
+      }
+    ) : /* @__PURE__ */ t(
+      be,
+      {
+        className: C("xtrColorInput", R),
+        ref: $.setReference,
+        placeholder: D,
+        icon: "f53f",
+        iconType: "solid",
+        active: F,
+        value: l,
+        onChange: (e) => B(e.target.value),
+        style: {
+          "--colorBrandPrimary": T,
+          "--iconColor": S
+        },
+        onFocus: () => N(!0),
+        ...L()
+      }
+    ),
+    Y && /* @__PURE__ */ a(
+      "div",
+      {
+        ref: Te([z, $.setFloating]),
+        className: C("xtrColorPopper", A),
+        style: { ...X, ...Z, "--colorBrandPrimary": T },
+        ...ee(),
+        children: [
+          (y || !E) && /* @__PURE__ */ a("div", { className: C("header", k && "withInput"), children: [
+            /* @__PURE__ */ a("div", { className: "heading", children: [
+              /* @__PURE__ */ a("div", { children: [
+                /* @__PURE__ */ t("h1", { children: K }),
+                k && /* @__PURE__ */ t(
+                  "input",
+                  {
+                    placeholder: "#Hex",
+                    className: C("popperInput", R),
+                    value: l,
+                    autoFocus: J.isLargest,
+                    onChange: (e) => B(e.target.value)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ t("h1", { children: m })
+            ] }),
+            W && /* @__PURE__ */ t(
+              ve,
+              {
+                code: "f1da",
+                type: "solid",
+                style: {
+                  "--colorBrandPrimary": oe,
+                  visibility: te ? "visible" : "hidden"
+                },
+                onClick: le
+              }
+            )
+          ] }),
+          y && /* @__PURE__ */ t("div", { className: "swatch", children: y.map((e, o) => {
+            const n = s(l).isEqual(e), i = s(e).toHsl(), ne = `${i.h} ${i.s}% ${i.l}%`;
+            return /* @__PURE__ */ t(
+              M,
+              {
+                className: "swatchItem",
+                icon: "f00c",
+                iconType: "solid",
+                size: "mini",
+                style: {
+                  "--themeColor": ne,
+                  color: n ? "white" : "transparent"
+                },
+                onClick: () => re(i)
+              },
+              `ThemeColor-${i.h}${i.s}${i.l}-${o}`
+            );
+          }) }),
+          !E && /* @__PURE__ */ t(He, { className: "colorPicker", alpha: _, shade: G, color: H, setColor: se }),
+          I && /* @__PURE__ */ a("div", { className: "themeScheme", children: [
+            /* @__PURE__ */ t("div", { className: "header", children: /* @__PURE__ */ a("div", { className: "heading", children: [
+              /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t("h1", { children: x }) }),
+              /* @__PURE__ */ t("h1", { children: I })
+            ] }) }),
+            /* @__PURE__ */ t("div", { className: "schemeSelector", children: Pe.map(({ name: e, icon: o }, n) => /* @__PURE__ */ t(
+              M,
+              {
+                icon: o,
+                iconType: "solid",
+                disabled: x === e,
+                type: x === e ? "primary" : "secondary",
+                onClick: () => U?.(e)
+              },
+              `ThemeScheme-${e}-${n}`
+            )) })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+const Ae = xe(O);
+O.displayName = "ColorPopper";
+export {
+  Ae as ColorPopper
+};

package/dist/components/base/DatePicker/DatePicker.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as a } from "react/jsx-runtime";
+import M from "clsx";
+import { Icon as m } from "gliff";
+import e from "react-datetime-picker";
+import './datePicker.css';/* empty css                */
+const u = {
+  date: "dd-MM-yyyy",
+  dateRange: "dd-MM-yyyy",
+  time: "h:mm:ss a",
+  timeRange: "h:mm:ss a",
+  dateTime: "dd-MM-yyyy h:mm:ss a",
+  dateTimeRange: "dd-MM-yyyy h:mm:ss a"
+}, x = {
+  date: e,
+  dateRange: e,
+  time: e,
+  timeRange: e,
+  dateTime: e,
+  dateTimeRange: e
+}, b = (r) => {
+  const {
+    className: c,
+    type: t = "date",
+    format: d,
+    dayPlaceholder: s = "dd",
+    monthPlaceholder: n = "mm",
+    yearPlaceholder: l = "yyyy",
+    hourPlaceholder: i = "hh",
+    minutePlaceholder: y = "mm",
+    secondPlaceholder: h = "ss",
+    placeholder: o = "Select a Date",
+    icon: p = "f784",
+    value: P,
+    onChange: D
+  } = r, f = {
+    className: M("xtrDatePicker", c),
+    calendarIcon: /* @__PURE__ */ a(m, { code: p, type: "regular" }),
+    clearIcon: /* @__PURE__ */ a(m, { code: "e59b", type: "solid" }),
+    format: d ?? u[t],
+    dayPlaceholder: s,
+    monthPlaceholder: n,
+    yearPlaceholder: l,
+    hourPlaceholder: i,
+    minutePlaceholder: y,
+    secondPlaceholder: h,
+    placeholder: o,
+    value: P,
+    onChange: D
+  }, g = x[t];
+  return /* @__PURE__ */ a(g, { "data-testid": o, ...f });
+};
+export {
+  b as DatePicker
+};

package/dist/components/base/DatePicker/types.js

@@ -0,0 +1,4 @@
+var e = /* @__PURE__ */ ((a) => (a.date = "date", a.dateRange = "dateRange", a.time = "time", a.timeRange = "timeRange", a.dateTime = "dateTime", a.dateTimeRange = "dateTimeRange", a))(e || {});
+export {
+  e as EDatePickerTypes
+};

package/dist/components/base/FilePicker/FilePicker.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsxs as c, Fragment as f, jsx as i } from "react/jsx-runtime";
+import C from "clsx";
+import { Icon as x } from "gliff";
+import { createPortal as b } from "react-dom";
+import { useFilePicker as P } from "use-file-picker";
+import { ImageEditor as u } from "../../layout/ImageEditor/ImageEditor.js";
+import { Button as N } from "../Button/Button.js";
+import './filePicker.css';/* empty css                */
+import { getFilePickerIcon as y } from "./getFilePickerIcon.js";
+import { imageExts as E } from "./types.js";
+const v = (F) => {
+  const { className: g, children: n, draggable: d = !1, editable: h = !1, multiple: l = !1, accept: o = "*/*", onChange: t } = F, s = h && !l && (o.includes("image") || E.includes(o?.split?.(",")?.[0]?.replace(".", ""))), { openFilePicker: a, loading: k, plainFiles: r, clear: p } = P({
+    accept: o,
+    multiple: l,
+    onFilesSuccessfullySelected: ({ plainFiles: e }) => {
+      s || t(e);
+    }
+  }), m = C("xtrFilePicker", n && "wrapper", d && "draggable", g);
+  return n ? /* @__PURE__ */ c(f, { children: [
+    /* @__PURE__ */ i("div", { className: m, onClick: a, children: n }),
+    s && r?.[0] && b(/* @__PURE__ */ i(u, { file: r?.[0], clearFile: p, onChange: (e) => t(e.blob ? [e.blob] : []) }), document.body)
+  ] }) : d ? /* @__PURE__ */ c("div", { className: m, onClick: a, children: [
+    /* @__PURE__ */ i(x, { code: "f0ed", set: "duotone", size: 64 }),
+    /* @__PURE__ */ c("h2", { children: [
+      "Drop File",
+      l ? "s" : "",
+      " Here"
+    ] }),
+    /* @__PURE__ */ i("p", { children: "or click here to open file chooser" })
+  ] }) : /* @__PURE__ */ c(f, { children: [
+    /* @__PURE__ */ i(N, { className: m, label: `Choose File${l ? "s" : ""}`, icon: y(o), onClick: a, loading: k }),
+    s && r?.[0] && b(/* @__PURE__ */ i(u, { file: r?.[0], clearFile: p, onChange: (e) => t(e.blob ? [e.blob] : []) }), document.body)
+  ] });
+};
+export {
+  v as FilePicker
+};