welcome-ui 9.0.10 → 10.0.0-alpha.10

package/dist/DatePicker.js

@@ -1,106 +1,105 @@
 "use client";
-import { jsxs as U, jsx as o } from "react/jsx-runtime";
-import { useState as $, useMemo as F, useEffect as j, forwardRef as _, useRef as G } from "react";
-import { D as J, C as P } from "./CustomPopper-vwbOQq72.js";
-import { Button as L } from "./Button.js";
-import "./Icon-BisRi8B3.js";
-import { L as Q } from "./index-CWVOLBDY.js";
-import { R as V } from "./index-Dcq5gh3E.js";
-import { Select as M } from "./Select.js";
-import { c as w } from "./index-PAaZGbyz.js";
-import { g as W, a as X, s as K, b as Z, D as q } from "./utils-BNMgUIHQ.js";
+import './DatePicker.css';
+import { jsxs as q, jsx as l } from "react/jsx-runtime";
+import { useState as $, useMemo as k, useEffect as j, forwardRef as G, useRef as J } from "react";
+import { D as Q, C as V } from "./CustomPopper-C1wIDHbM.js";
+import { Button as F } from "./Button.js";
+import { Icon as M } from "./Icon.js";
+import { Select as w } from "./Select.js";
+import { c as P } from "./index-PAaZGbyz.js";
+import { g as W, a as X, s as v, b as Z, D as K } from "./utils-BD597oo6.js";
 import { InputText as Y } from "./InputText.js";
-const g = w(K), h = ({
-  changeMonth: b,
-  changeYear: R,
+const g = P(v), B = ({
+  changeMonth: x,
+  changeYear: N,
   date: f,
-  decreaseMonth: I,
+  decreaseMonth: T,
   decreaseYear: z,
-  endYear: m,
-  increaseMonth: N,
+  endYear: c,
+  increaseMonth: I,
   increaseYear: y,
   isMonthYearPicker: t,
   locale: D,
-  startYear: u
+  startYear: a
 }) => {
-  const [a, T] = $(null), [l, E] = $(null), i = F(() => W(D), [D]), r = F(() => X(u, m), [u, m]), c = (t || a === i[0].label) && l === u, A = (t || a === i[i.length - 1].label) && l === m;
+  const [u, R] = $(null), [i, E] = $(null), o = k(() => W(D), [D]), r = k(() => X(a, c), [a, c]), m = (t || u === o[0].label) && i === a, H = (t || u === o[o.length - 1].label) && i === c;
   return j(() => {
-    const x = new Date(f), p = i[x.getMonth()].label, H = x.getFullYear();
-    T(p), E(H);
-  }, [f, i]), /* @__PURE__ */ U("div", { className: g("custom-header"), children: [
-    /* @__PURE__ */ o(
-      L,
+    const b = new Date(f), d = o[b.getMonth()].label, A = b.getFullYear();
+    R(d), E(A);
+  }, [f, o]), /* @__PURE__ */ q("div", { className: g("custom-header"), children: [
+    /* @__PURE__ */ l(
+      F,
       {
-        disabled: c,
-        onClick: t ? z : I,
-        shape: "square",
-        size: "xs",
+        disabled: m,
+        onClick: t ? z : T,
+        size: "sm",
         title: `Previous ${t ? "year" : "month"}`,
         variant: "tertiary",
-        children: /* @__PURE__ */ o(Q, { size: "xs" })
+        children: /* @__PURE__ */ l(M, { name: "angle-left-b", size: "xs" })
       }
     ),
-    !t && /* @__PURE__ */ o(
-      M,
+    !t && /* @__PURE__ */ l(
+      w,
       {
         id: "month",
         name: "month",
-        onChange: b,
-        options: i,
-        size: "sm",
-        value: a
+        onChange: x,
+        options: o,
+        size: "md",
+        value: u
       }
     ),
-    /* @__PURE__ */ o(M, { id: "year", name: "year", onChange: R, options: r, size: "sm", value: l }),
-    /* @__PURE__ */ o(
-      L,
+    /* @__PURE__ */ l(w, { id: "year", name: "year", onChange: N, options: r, size: "md", value: i }),
+    /* @__PURE__ */ l(
+      F,
       {
-        disabled: A,
-        onClick: t ? y : N,
-        shape: "square",
-        size: "xs",
+        disabled: H,
+        onClick: t ? y : I,
+        size: "sm",
         title: `Next ${t ? "year" : "month"}`,
         variant: "tertiary",
-        children: /* @__PURE__ */ o(V, { size: "xs" })
+        children: /* @__PURE__ */ l(M, { name: "angle-right-b", size: "xs" })
       }
     )
   ] });
-}, C = w(K), pt = _(
+};
+B.displayName = "DateTimePicker.CustomHeader";
+const h = P(v), C = G(
   ({
-    autoFocus: b,
-    className: R,
+    autoFocus: x,
+    className: N,
     dateFormat: f = "dd/MM/yyyy",
-    disabled: I,
-    endYear: z = q.getFullYear(),
-    icon: m,
-    iconPlacement: N = "left",
+    disabled: T,
+    endYear: z = K.getFullYear(),
+    icon: c,
+    iconPlacement: I = "left",
     locale: y,
     onChange: t,
     placeholder: D,
-    preventVirtualKeyboard: u = !1,
-    showMonthYearPicker: a,
-    size: T = "md",
-    startYear: l = 1900,
+    preventVirtualKeyboard: a = !1,
+    showMonthYearPicker: u,
+    size: R = "md",
+    startYear: i = 1900,
     transparent: E,
-    useWeekdaysShort: i = !0,
-    value: r = q,
-    ...c
-  }, A) => {
-    const x = c == null ? void 0 : c.timeIntervals, p = (e) => Z(e, x), [H, n] = $(p(r)), k = G(), S = A || k;
+    useWeekdaysShort: o = !0,
+    value: r = K,
+    ...m
+  }, H) => {
+    const b = m == null ? void 0 : m.timeIntervals, d = (e) => Z(e, b), [A, n] = $(d(r)), L = J(), S = H || L;
     j(() => {
-      t == null || t(p(r));
+      t == null || t(d(r));
     }, []), j(() => {
-      var d;
-      const e = p(r), s = typeof r == "object" ? r == null ? void 0 : r.toISOString() : r;
-      ((d = new Date(Date.parse(s))) == null ? void 0 : d.getTime()) - (e == null ? void 0 : e.getTime()) !== 0 && (t == null || t(e)), n(e);
+      var p;
+      const e = d(r), s = typeof r == "object" ? r == null ? void 0 : r.toISOString() : r;
+      ((p = new Date(Date.parse(s))) == null ? void 0 : p.getTime()) - (e == null ? void 0 : e.getTime()) !== 0 && (t == null || t(e)), n(e);
     }, [r]);
-    const v = (e) => {
+    const O = (e) => {
       var s;
       ["Enter", "Escape"].includes(e.key) && ((s = S.current) == null || s.blur());
-    }, B = (e) => {
+    }, U = (e) => {
       var s;
       e.preventDefault(), (s = S.current) == null || s.blur(), n(null), t == null || t(null);
-    }, O = (e) => {
+    }, _ = (e) => {
       if (!e) {
         n(null), t == null || t(null);
         return;
@@ -110,60 +109,61 @@ const g = w(K), h = ({
         n(null), t == null || t(null);
         return;
       }
-      const d = p(s);
-      s.setHours(d.getHours(), d.getMinutes()), n(s), t == null || t(new Date(s));
+      const p = d(s);
+      s.setHours(p.getHours(), p.getMinutes()), n(s), t == null || t(new Date(s));
     };
     return (
       // type issue in react-datepicker (https://github.com/Hacker0x01/react-datepicker/issues/5391)
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
-      /* @__PURE__ */ o(
-        J,
+      /* @__PURE__ */ l(
+        Q,
         {
           autoComplete: "off",
           calendarClassName: "date-picker-popper",
-          customInput: /* @__PURE__ */ o(
+          customInput: /* @__PURE__ */ l(
             Y,
             {
-              autoFocus: b,
-              className: C("date-picker", R),
-              "data-testid": c["data-testid"],
-              disabled: I,
-              icon: m,
-              iconPlacement: N,
-              inputMode: u ? "none" : "text",
+              autoFocus: x,
+              className: h("date-picker", N),
+              "data-testid": m["data-testid"],
+              disabled: T,
+              icon: c,
+              iconPlacement: I,
+              inputMode: a ? "none" : "text",
               isClearable: !0,
-              onReset: B,
+              onReset: U,
               placeholder: D,
               ref: S,
-              size: T,
+              size: R,
               transparent: E
             }
           ),
           dateFormat: f,
           locale: y,
-          onChange: O,
-          onKeyDown: v,
-          popperContainer: P,
-          renderCustomHeader: (e) => /* @__PURE__ */ o(
-            h,
+          onChange: _,
+          onKeyDown: O,
+          popperContainer: V,
+          renderCustomHeader: (e) => /* @__PURE__ */ l(
+            B,
             {
               endYear: z,
-              isMonthYearPicker: a,
+              isMonthYearPicker: u,
               locale: y,
-              startYear: l,
+              startYear: i,
               ...e
             }
           ),
-          selected: H,
-          showMonthYearPicker: a,
-          useWeekdaysShort: i,
-          ...c
+          selected: A,
+          showMonthYearPicker: u,
+          useWeekdaysShort: o,
+          ...m
         }
       )
     );
   }
 );
+C.displayName = "DatePicker";
 export {
-  pt as DatePicker
+  C as DatePicker
 };

package/dist/DateTimePicker.js

@@ -1,52 +1,53 @@
 "use client";
 import { jsx as A } from "react/jsx-runtime";
-import { forwardRef as E, useState as x, useRef as P, useEffect as o, Children as H, cloneElement as I } from "react";
-import { b as N, D as b, s as j } from "./utils-BNMgUIHQ.js";
+import { forwardRef as E, useState as P, useRef as x, useEffect as a, Children as N, cloneElement as H } from "react";
+import { b as I, D as b, s as j } from "./utils-BD597oo6.js";
 import { c as F } from "./index-PAaZGbyz.js";
-const L = F(j), q = E(
+const L = F(j), M = E(
   ({
-    children: a,
+    children: o,
     disabled: d,
     locale: p,
     onChange: s,
     size: D = "md",
-    transparent: n,
+    transparent: k,
     value: r = b,
     ...l
-  }, k) => {
-    const u = l == null ? void 0 : l.timeIntervals, c = (t) => N(t, u), [R, i] = x(c(r)), T = P(), y = k || T, m = (t) => {
+  }, n) => {
+    const u = l == null ? void 0 : l.timeIntervals, i = (t) => I(t, u), [T, c] = P(i(r)), y = x(), R = n || y, m = (t) => {
       if (!t) {
-        i(null), s == null || s(null);
+        c(null), s == null || s(null);
         return;
       }
       const e = Array.isArray(t) ? t[0] : t;
       if (!e) {
-        i(null), s == null || s(null);
+        c(null), s == null || s(null);
         return;
       }
-      const f = c(e);
-      e.setHours(f.getHours(), f.getMinutes()), i(e), s == null || s(new Date(e));
+      const f = i(e);
+      e.setHours(f.getHours(), f.getMinutes()), c(e), s == null || s(new Date(e));
     };
-    return o(() => {
-      m(c(r));
-    }, []), o(() => {
+    return a(() => {
+      m(i(r));
+    }, []), a(() => {
       var e;
-      const t = c(r);
-      ((e = new Date(r)) == null ? void 0 : e.getTime()) - (t == null ? void 0 : t.getTime()) !== 0 && m(t), i(t);
-    }, [r]), /* @__PURE__ */ A("div", { className: L("date-time-picker"), children: H.map(a, (t, e) => I(t, {
+      const t = i(r);
+      ((e = new Date(r)) == null ? void 0 : e.getTime()) - (t == null ? void 0 : t.getTime()) !== 0 && m(t), c(t);
+    }, [r]), /* @__PURE__ */ A("div", { className: L("date-time-picker"), children: N.map(o, (t, e) => H(t, {
       disabled: d,
-      inputRef: e === 0 ? y : null,
+      inputRef: e === 0 ? R : null,
       // give ref only to the DatePicker
       key: e,
       locale: p,
       onChange: m,
       size: D,
       timeIntervals: u,
-      transparent: n,
-      value: R
+      transparent: k,
+      value: T
     })) });
   }
 );
+M.displayName = "DateTimePicker";
 export {
-  q as DateTimePicker
+  M as DateTimePicker
 };

package/dist/Drawer.css

@@ -1 +1 @@
-@layer components{._asset-drawer_2lawg_3{overflow:hidden;border-top-left-radius:var(--radius-2xl);border-top-right-radius:var(--radius-2xl)}._asset-drawer_2lawg_3[class*=root]{height:calc(100% - 3rem)}._content-wrapper_2lawg_13{height:100%;margin-top:var(--spacing-xl);overflow-y:auto;width:100%}@media screen and (min-width: 736px){._content-wrapper_2lawg_13{margin-top:var(--spacing-3xl)}}._content-max-width_2lawg_24{flex:1;margin:0 auto;width:100%;max-width:var(--asset-drawer-content-max-width, 51.25rem)}._content_2lawg_13{--asset-drawer-content-padding: 0 var(--spacing-md) var(--spacing-xl);padding:var(--asset-drawer-content-padding)}@media screen and (min-width: 736px){._content_2lawg_13{--asset-drawer-content-padding: 0 var(--spacing-xl) var(--spacing-3xl)}}._asset-drawer-header_2lawg_39{display:flex;flex-direction:column;gap:var(--spacing-xl);justify-content:space-between;background-color:var(--color-neutral-10);margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-md);position:sticky;top:0;z-index:1}@media screen and (min-width: 736px){._asset-drawer-header_2lawg_39{align-items:center;flex-direction:row}}._back-button_2lawg_57{align-items:center;display:flex;gap:var(--spacing-md)}@media screen and (min-width: 736px){._back-button_2lawg_57{gap:var(--spacing-xl)}}._title_2lawg_67{display:flex;flex-direction:column;gap:var(--spacing-xxs)}._icon-block_2lawg_72{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--radius-md);background-color:var(--color-beige-20);transition:background-color var(--duration-medium);--icon-block-size: var(--spacing-3xl);width:var(--icon-block-size);height:var(--icon-block-size)}._icon-block_2lawg_72._size-md_2lawg_84{--icon-block-size: var(--spacing-3xl)}._icon-block_2lawg_72._size-sm_2lawg_87{--icon-block-size: var(--spacing-xxl)}}@layer components{._root_11f0r_3{background-color:var(--color-neutral-10);border:var(--border-width-sm) solid var(--color-neutral-30);z-index:999;position:fixed;display:flex;flex-direction:column;overflow:auto;opacity:0;transition:var(--duration-medium);max-width:100%;--drawer-left: 0;--drawer-right: 0;--drawer-top: 0;--drawer-bottom: 0;--drawer-height: 100%;--drawer-width: 100%;--drawer-transform: translateY(0, 0);left:var(--drawer-left);right:var(--drawer-right);top:var(--drawer-top);bottom:var(--drawer-bottom);width:var(--drawer-width);height:var(--drawer-height);transform:var(--drawer-transform)}._root_11f0r_3._placement-bottom_11f0r_30{--drawer-top: auto;--drawer-transform: translateY(100%)}._root_11f0r_3._placement-left_11f0r_34{--drawer-right: auto;--drawer-transform: translateX(-100%)}._root_11f0r_3._placement-right_11f0r_38{--drawer-left: auto;--drawer-transform: translateX(100%)}._root_11f0r_3._placement-top_11f0r_42{--drawer-bottom: auto;--drawer-transform: translateY(-100%)}._root_11f0r_3._placement-top_11f0r_42._size-sm_11f0r_46,._root_11f0r_3._placement-bottom_11f0r_30._size-sm_11f0r_46{--drawer-height: 25rem}._root_11f0r_3._placement-top_11f0r_42._size-md_11f0r_49,._root_11f0r_3._placement-bottom_11f0r_30._size-md_11f0r_49{--drawer-height: 34.375rem}._root_11f0r_3._placement-top_11f0r_42._size-lg_11f0r_52,._root_11f0r_3._placement-bottom_11f0r_30._size-lg_11f0r_52{--drawer-height: 42.5rem}._root_11f0r_3._placement-left_11f0r_34._size-sm_11f0r_46,._root_11f0r_3._placement-right_11f0r_38._size-sm_11f0r_46{--drawer-width: 25rem}._root_11f0r_3._placement-left_11f0r_34._size-md_11f0r_49,._root_11f0r_3._placement-right_11f0r_38._size-md_11f0r_49{--drawer-width: 34.375rem}._root_11f0r_3._placement-left_11f0r_34._size-lg_11f0r_52,._root_11f0r_3._placement-right_11f0r_38._size-lg_11f0r_52{--drawer-width: 42.5rem}._root_11f0r_3[data-enter]{opacity:1;--drawer-transform: translateX(0, 0)}._backdrop_11f0r_68{background-color:var(--color-overlay);z-index:999;position:fixed;top:0;right:0;left:0;bottom:0;opacity:0;transition:opacity .15s ease-in-out}._backdrop_11f0r_68._drawer-hide-on-interact-outside_11f0r_79{cursor:pointer}._backdrop_11f0r_68[data-enter]{opacity:1}._content_11f0r_85{flex:1;padding:var(--spacing-xl)}@media screen and (min-width: 736px){._content_11f0r_85{overflow-y:auto}}._footer_11f0r_94{bottom:0;position:sticky;z-index:1;width:100%;background-color:var(--color-neutral-0);padding:var(--spacing-xl)}@media screen and (min-width: 736px){._footer_11f0r_94{bottom:auto;position:static}}._title_11f0r_108{display:flex;align-items:center;justify-content:space-between;position:sticky;z-index:1;top:0;width:100%;background-color:var(--color-neutral-10);margin:0;padding:var(--spacing-xl) var(--spacing-5xl) var(--spacing-xl) var(--spacing-xl)}._drawer-close_11f0r_120{position:absolute;right:var(--spacing-lg);top:var(--spacing-lg);z-index:10}}
+@layer components{._asset-drawer_1mhgf_3{overflow:hidden;border-top-left-radius:var(--border-radius-2xl);border-top-right-radius:var(--border-radius-2xl)}._asset-drawer_1mhgf_3[class*=root]{height:calc(100% - 3rem)}._content-wrapper_1mhgf_13{height:100%;margin-top:var(--border-radius-2xl);overflow-y:auto;width:100%}@media screen and (min-width: 736px){._content-wrapper_1mhgf_13{margin-top:var(--size-icon-2xl)}}._content-max-width_1mhgf_24{flex:1;margin:0 auto;width:100%;max-width:var(--assetDrawerContentMaxWidth, 51.25rem)}._content_1mhgf_13{--assetDrawerContentPadding: 0 var(--border-radius-lg) var(--border-radius-2xl);padding:var(--assetDrawerContentPadding)}@media screen and (min-width: 736px){._content_1mhgf_13{--assetDrawerContentPadding: 0 var(--border-radius-2xl) var(--size-icon-2xl)}}._asset-drawer-header_1mhgf_39{display:flex;flex-direction:column;gap:var(--border-radius-2xl);justify-content:space-between;background-color:var(--color-background-neutral-inverse-fixed);margin-bottom:var(--border-radius-2xl);padding-bottom:var(--border-radius-lg);position:sticky;top:0;z-index:1}@media screen and (min-width: 736px){._asset-drawer-header_1mhgf_39{align-items:center;flex-direction:row}}._back-button_1mhgf_57{align-items:center;display:flex;gap:var(--border-radius-lg)}@media screen and (min-width: 736px){._back-button_1mhgf_57{gap:var(--border-radius-2xl)}}._title_1mhgf_67{display:flex;flex-direction:column;gap:var(--border-radius-xs)}._icon-block_1mhgf_72{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--border-radius-sm);background-color:var(--color-background-warm-primary);transition:background-color var(--duration-medium);--iconBlockSize: var(--size-icon-2xl);width:var(--iconBlockSize);height:var(--iconBlockSize)}._icon-block_1mhgf_72._size-md_1mhgf_84{--iconBlockSize: var(--size-icon-2xl)}._icon-block_1mhgf_72._size-sm_1mhgf_87{--iconBlockSize: var(--size-icon-xl)}}@layer components{._root_iksk1_3{background-color:var(--color-background-neutral-inverse-fixed);border:var(--border-width-xs) solid var(--color-background-neutral-subtlest);z-index:999;position:fixed;display:flex;flex-direction:column;overflow:auto;opacity:0;transition:var(--duration-medium);max-width:100%;--drawerLeft: 0;--drawerRight: 0;--drawerTop: 0;--drawerBottom: 0;--drawerHeight: 100%;--drawerWidth: 100%;--drawerTransform: translateY(0, 0);left:var(--drawerLeft);right:var(--drawerRight);top:var(--drawerTop);bottom:var(--drawerBottom);width:var(--drawerWidth);height:var(--drawerHeight);transform:var(--drawerTransform)}._root_iksk1_3._placement-bottom_iksk1_30{--drawerTop: auto;--drawerTransform: translateY(100%)}._root_iksk1_3._placement-left_iksk1_34{--drawerRight: auto;--drawerTransform: translateX(-100%)}._root_iksk1_3._placement-right_iksk1_38{--drawerLeft: auto;--drawerTransform: translateX(100%)}._root_iksk1_3._placement-top_iksk1_42{--drawerBottom: auto;--drawerTransform: translateY(-100%)}._root_iksk1_3._placement-top_iksk1_42._size-sm_iksk1_46,._root_iksk1_3._placement-bottom_iksk1_30._size-sm_iksk1_46{--drawerHeight: 25rem}._root_iksk1_3._placement-top_iksk1_42._size-md_iksk1_49,._root_iksk1_3._placement-bottom_iksk1_30._size-md_iksk1_49{--drawerHeight: 34.375rem}._root_iksk1_3._placement-top_iksk1_42._size-lg_iksk1_52,._root_iksk1_3._placement-bottom_iksk1_30._size-lg_iksk1_52{--drawerHeight: 42.5rem}._root_iksk1_3._placement-left_iksk1_34._size-sm_iksk1_46,._root_iksk1_3._placement-right_iksk1_38._size-sm_iksk1_46{--drawerWidth: 25rem}._root_iksk1_3._placement-left_iksk1_34._size-md_iksk1_49,._root_iksk1_3._placement-right_iksk1_38._size-md_iksk1_49{--drawerWidth: 34.375rem}._root_iksk1_3._placement-left_iksk1_34._size-lg_iksk1_52,._root_iksk1_3._placement-right_iksk1_38._size-lg_iksk1_52{--drawerWidth: 42.5rem}._root_iksk1_3[data-enter]{opacity:1;--drawerTransform: translateX(0, 0)}._backdrop_iksk1_68{background-color:var(--color-overlay-strong);z-index:999;position:fixed;top:0;right:0;left:0;bottom:0;opacity:0;transition:opacity .15s ease-in-out}._backdrop_iksk1_68._drawer-hide-on-interact-outside_iksk1_79{cursor:pointer}._backdrop_iksk1_68[data-enter]{opacity:1}._content_iksk1_85{flex:1;padding:var(--border-radius-2xl)}@media screen and (min-width: 736px){._content_iksk1_85{overflow-y:auto}}._footer_iksk1_94{bottom:0;position:sticky;z-index:1;width:100%;background-color:var(--color-background-warm-strong);padding:var(--border-radius-2xl)}@media screen and (min-width: 736px){._footer_iksk1_94{bottom:auto;position:static}}._title_iksk1_108{display:flex;align-items:center;justify-content:space-between;position:sticky;z-index:1;top:0;width:100%;background-color:var(--color-background-neutral-inverse-fixed);margin:0;padding:var(--border-radius-2xl) var(--spacing-96) var(--border-radius-2xl) var(--border-radius-2xl)}._drawer-close_iksk1_120{position:absolute;right:var(--border-radius-xl);top:var(--border-radius-xl);z-index:10}}