welcome-ui 0.0.0-dev.1761316648080 → 0.0.0-dev.1761576812962

package/dist/Text.mjs

@@ -0,0 +1,106 @@
+"use client";
+import { j as p } from "./jsx-runtime-Bqq1Hxg9.mjs";
+import { forwardRef as x } from "./System.mjs";
+import b, { th as d, system as f, css as i } from "@xstyled/styled-components";
+const g = {
+  h0: "h1",
+  h1: "h2",
+  h2: "h3",
+  h3: "h4",
+  h4: "h5",
+  h5: "h6",
+  h6: "h6"
+}, k = (e) => i`
+  /* stylelint-disable-next-line value-no-vendor-prefix */
+  display: -webkit-box;
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-box-orient: vertical;
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-line-clamp: ${e || "none"};
+  line-height: normal;
+  overflow: hidden;
+  word-break: ${e === 1 ? "break-all" : null};
+`, y = b.pBox(({ lines: e, theme: n, variant: t, withDash: l, wordBreak: o }) => {
+  const h = g[t], r = t == null ? void 0 : t.startsWith("h"), s = e && e !== 1 / 0 && t.startsWith("h") && n.fonts.headings.includes("welcome-font");
+  return i`
+    ${d(`texts.${h || t}`)};
+    word-break: ${o};
+
+    /* Start fallback for non-webkit */
+    display: block;
+    ${e && e !== 1 / 0 && k(e)};
+    /* End fallback for non-webkit */
+
+    ${l && r && i`
+      display: flex;
+
+      &:before {
+        content: '';
+        width: 16;
+        height: 4;
+        display: flex;
+        align-self: center;
+        flex-shrink: 0;
+        background-color: primary-40;
+        margin-right: md;
+      }
+    `}
+
+    @media (min-width: lg) {
+      ${d(`texts.${t}`)};
+      ${f}
+    }
+
+    ${s && i`
+      & {
+        line-height: 1.4;
+      }
+    `}
+  `;
+}), w = {
+  h0: "h1",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  lg: "p",
+  md: "p",
+  sm: "p",
+  "subtitle-md": "span",
+  "subtitle-sm": "span",
+  xs: "p"
+}, $ = x(
+  ({
+    as: e,
+    children: n,
+    dataTestId: t,
+    lines: l,
+    variant: o = "md",
+    withDash: h,
+    wordBreak: r = "break-word",
+    ...s
+  }, a) => {
+    const c = e || w[o], m = s.className || "";
+    return /* @__PURE__ */ p.jsx(
+      y,
+      {
+        as: c,
+        "data-testid": t,
+        lines: l,
+        ref: a,
+        variant: o,
+        withDash: h,
+        wordBreak: r,
+        ...s,
+        className: `${m} wui-text`,
+        children: n
+      }
+    );
+  }
+);
+$.displayName = "Text";
+export {
+  $ as Text
+};

package/dist/Textarea.mjs

@@ -0,0 +1,54 @@
+"use client";
+import { j as u } from "./jsx-runtime-Bqq1Hxg9.mjs";
+import { shouldForwardProp as w, forwardRef as g } from "./System.mjs";
+import j, { th as y, css as T } from "@xstyled/styled-components";
+import { d as $ } from "./field-styles-CfVLcVQp.mjs";
+const F = j.textareaBox.withConfig({ shouldForwardProp: w })(
+  ({ size: t, variant: e }) => T`
+    ${$({ size: t, variant: e })};
+    ${y("textareas")};
+    line-height: lg;
+  `
+), R = g(
+  ({
+    autoFocus: t,
+    dataTestId: e,
+    disabled: r,
+    maxLength: a,
+    minRows: o = 5,
+    name: s,
+    onBlur: i,
+    onChange: d,
+    onFocus: m,
+    onKeyDown: x,
+    placeholder: l,
+    size: f = "md",
+    value: p,
+    variant: n,
+    ...h
+  }, c) => /* @__PURE__ */ u.jsx(
+    F,
+    {
+      autoFocus: t,
+      "data-testid": e,
+      disabled: r,
+      maxLength: a,
+      name: s,
+      onBlur: i,
+      onChange: d,
+      onFocus: m,
+      onKeyDown: x,
+      placeholder: l,
+      ref: c,
+      rows: o,
+      size: f,
+      value: p,
+      variant: n,
+      ...h
+    }
+  )
+);
+R.displayName = "Textarea";
+export {
+  R as Textarea
+};

package/dist/TimePicker.mjs

@@ -0,0 +1,89 @@
+"use client";
+import { j as l } from "./jsx-runtime-Bqq1Hxg9.mjs";
+import { useState as T, useEffect as x } from "react";
+import { f as M, g as Y, D as w, a as I, c as L, b as O } from "./CustomPopper-DavRfSDP.mjs";
+import { forwardRef as U } from "./System.mjs";
+import W from "@xstyled/styled-components";
+const _ = W.div`
+  position: relative;
+  ${M}
+`, $ = U(
+  ({
+    autoFocus: h,
+    dataTestId: j,
+    dateFormat: k = "HH:mm",
+    disabled: y,
+    icon: a,
+    iconPlacement: c = "left",
+    onBlur: m,
+    onChange: t,
+    onFocus: p,
+    placeholder: D,
+    popperProps: S,
+    size: d = "md",
+    timeIntervals: f = 15,
+    transparent: E,
+    value: r = w,
+    ...n
+  }, F) => {
+    const i = (e) => Y(e, f), P = D || n.placeholderText, [R, u] = T(h && "time" || null), [g, o] = T(i(r));
+    x(() => {
+      t && t(i(r));
+    }, []), x(() => {
+      var s;
+      const e = i(r);
+      ((s = new Date(r)) == null ? void 0 : s.getTime()) - (e == null ? void 0 : e.getTime()) !== 0 && t && t(e), o(e);
+    }, [r]);
+    const A = (e) => {
+      u("time"), p && p(e);
+    }, N = (e) => {
+      u(null), m && m(e);
+    }, b = (e) => {
+      e.preventDefault(), o(null), t && t();
+    }, H = (e) => {
+      if (!e) return;
+      const s = i(e);
+      e.setFullYear(s.getFullYear(), s.getMonth(), s.getDate()), o(e), t && t(new Date(e));
+    };
+    return /* @__PURE__ */ l.jsx(_, { children: /* @__PURE__ */ l.jsx(
+      I,
+      {
+        calendarClassName: "time-picker-popper",
+        customInput: /* @__PURE__ */ l.jsx(
+          O,
+          {
+            className: "time-picker",
+            "data-testid": j,
+            focused: R,
+            handleBlur: N,
+            handleFocus: A,
+            icon: a,
+            iconPlacement: c,
+            onReset: b,
+            ref: F,
+            size: d
+          }
+        ),
+        dateFormat: k,
+        disabled: y,
+        iconPlacement: !!a && c,
+        onChange: H,
+        placeholderText: P,
+        popperContainer: L,
+        popperProps: S,
+        selected: g,
+        showTimeSelect: !0,
+        showTimeSelectOnly: !0,
+        size: d,
+        timeIntervals: f,
+        transparent: E,
+        ...n,
+        isClearable: !1
+      }
+    ) });
+  }
+);
+$.displayName = "TimePicker";
+export {
+  $ as TimePicker
+};

package/dist/Toast.mjs

@@ -0,0 +1,270 @@
+"use client";
+import { j as d } from "./jsx-runtime-Bqq1Hxg9.mjs";
+import x, { th as f, css as T, ThemeContext as R, ThemeProvider as z } from "@xstyled/styled-components";
+import { useEffect as C, useCallback as I, useState as O, useMemo as H, cloneElement as L, useContext as W } from "react";
+import { r as Y } from "./index-Dct42YPA.mjs";
+import { Box as $ } from "./Box.mjs";
+import { CloseButton as M } from "./CloseButton.mjs";
+import { forwardRef as D } from "./System.mjs";
+import { Alert as B } from "./Alert.mjs";
+import { Button as _ } from "./Button.mjs";
+var U = (t) => typeof t == "function", A = (t, e) => U(t) ? t(e) : t, q = /* @__PURE__ */ (() => {
+  let t = 0;
+  return () => (++t).toString();
+})(), F = 20, k = /* @__PURE__ */ new Map(), J = 1e3, E = (t) => {
+  if (k.has(t)) return;
+  let e = setTimeout(() => {
+    k.delete(t), h({ type: 4, toastId: t });
+  }, J);
+  k.set(t, e);
+}, K = (t) => {
+  let e = k.get(t);
+  e && clearTimeout(e);
+}, S = (t, e) => {
+  switch (e.type) {
+    case 0:
+      return { ...t, toasts: [e.toast, ...t.toasts].slice(0, F) };
+    case 1:
+      return e.toast.id && K(e.toast.id), { ...t, toasts: t.toasts.map((o) => o.id === e.toast.id ? { ...o, ...e.toast } : o) };
+    case 2:
+      let { toast: s } = e;
+      return t.toasts.find((o) => o.id === s.id) ? S(t, { type: 1, toast: s }) : S(t, { type: 0, toast: s });
+    case 3:
+      let { toastId: i } = e;
+      return i ? E(i) : t.toasts.forEach((o) => {
+        E(o.id);
+      }), { ...t, toasts: t.toasts.map((o) => o.id === i || i === void 0 ? { ...o, visible: !1 } : o) };
+    case 4:
+      return e.toastId === void 0 ? { ...t, toasts: [] } : { ...t, toasts: t.toasts.filter((o) => o.id !== e.toastId) };
+    case 5:
+      return { ...t, pausedAt: e.time };
+    case 6:
+      let r = e.time - (t.pausedAt || 0);
+      return { ...t, pausedAt: void 0, toasts: t.toasts.map((o) => ({ ...o, pauseDuration: o.pauseDuration + r })) };
+  }
+}, w = [], j = { toasts: [], pausedAt: void 0 }, h = (t) => {
+  j = S(j, t), w.forEach((e) => {
+    e(j);
+  });
+}, Q = { blank: 4e3, error: 4e3, success: 2e3, loading: 1 / 0, custom: 4e3 }, V = (t = {}) => {
+  let [e, s] = O(j);
+  C(() => (w.push(s), () => {
+    let r = w.indexOf(s);
+    r > -1 && w.splice(r, 1);
+  }), [e]);
+  let i = e.toasts.map((r) => {
+    var o, n;
+    return { ...t, ...t[r.type], ...r, duration: r.duration || ((o = t[r.type]) == null ? void 0 : o.duration) || (t == null ? void 0 : t.duration) || Q[r.type], style: { ...t.style, ...(n = t[r.type]) == null ? void 0 : n.style, ...r.style } };
+  });
+  return { ...e, toasts: i };
+}, X = (t, e = "blank", s) => ({ createdAt: Date.now(), visible: !0, type: e, ariaProps: { role: "status", "aria-live": "polite" }, message: t, pauseDuration: 0, ...s, id: (s == null ? void 0 : s.id) || q() }), b = (t) => (e, s) => {
+  let i = X(e, t, s);
+  return h({ type: 2, toast: i }), i.id;
+}, u = (t, e) => b("blank")(t, e);
+u.error = b("error");
+u.success = b("success");
+u.loading = b("loading");
+u.custom = b("custom");
+u.dismiss = (t) => {
+  h({ type: 3, toastId: t });
+};
+u.remove = (t) => h({ type: 4, toastId: t });
+u.promise = (t, e, s) => {
+  let i = u.loading(e.loading, { ...s, ...s == null ? void 0 : s.loading });
+  return t.then((r) => (u.success(A(e.success, r), { id: i, ...s, ...s == null ? void 0 : s.success }), r)).catch((r) => {
+    u.error(A(e.error, r), { id: i, ...s, ...s == null ? void 0 : s.error });
+  }), t;
+};
+var Z = (t, e) => {
+  h({ type: 1, toast: { id: t, height: e } });
+}, tt = () => {
+  h({ type: 5, time: Date.now() });
+}, et = (t) => {
+  let { toasts: e, pausedAt: s } = V(t);
+  C(() => {
+    if (s) return;
+    let o = Date.now(), n = e.map((a) => {
+      if (a.duration === 1 / 0) return;
+      let c = (a.duration || 0) + a.pauseDuration - (o - a.createdAt);
+      if (c < 0) {
+        a.visible && u.dismiss(a.id);
+        return;
+      }
+      return setTimeout(() => u.dismiss(a.id), c);
+    });
+    return () => {
+      n.forEach((a) => a && clearTimeout(a));
+    };
+  }, [e, s]);
+  let i = I(() => {
+    s && h({ type: 6, time: Date.now() });
+  }, [s]), r = I((o, n) => {
+    let { reverseOrder: a = !1, gutter: c = 8, defaultPosition: p } = n || {}, m = e.filter((l) => (l.position || p) === (o.position || p) && l.height), g = m.findIndex((l) => l.id === o.id), v = m.filter((l, y) => y < g && l.visible).length;
+    return m.filter((l) => l.visible).slice(...a ? [v + 1] : [0, v]).reduce((l, y) => l + (y.height || 0) + c, 0);
+  }, [e]);
+  return { toasts: e, handlers: { updateHeight: Z, startPause: tt, endPause: i, calculateOffset: r } };
+}, P = u;
+function st(t = !1) {
+  const [e, s] = O(!1);
+  return C(() => {
+    s(!0);
+  }, []), H(() => t ? (i) => i : e ? (i, r, o) => Y.createPortal(i, r || document.body, o) : () => null, [t, e]);
+}
+const ot = x($)(
+  ({ isBottom: t }) => T`
+    ${f("toasts.default")}
+    ${t ? f("toasts.bottom") : f("toasts.top")}
+
+    position: fixed;
+    z-index: 9999;
+    transition: all 400ms ease-out;
+  `
+), rt = x(B)(
+  () => T`
+    position: relative;
+    padding: lg;
+    ${f("toasts.growls.default")};
+
+    div:first-of-type {
+      align-self: baseline;
+    }
+
+    button {
+      flex-shrink: 0;
+    }
+  `
+), it = x($)(
+  () => T`
+    display: flex;
+    align-items: center;
+    padding-bottom: xs;
+    ${f("toasts.growls.title")};
+
+    & > *:first-child {
+      flex-shrink: 0;
+    }
+  `
+), at = x(B)`
+  display: flex;
+  align-items: center;
+  padding: sm md;
+  ${f("toasts.snackbar.default")};
+
+  > div {
+    align-self: center !important;
+  }
+`, nt = x.divBox(
+  ({ variant: t }) => T`
+    ${f("toasts.snackbar.separator.default")};
+    ${f(`toasts.snackbar.separator.${t}`)};
+    padding-left: sm;
+  `
+), N = D(
+  ({ children: t, dataTestId: e, hasCloseButton: s = !0, icon: i, onClose: r, variant: o = "default" }, n) => {
+    const a = e ? `${e}-close-button` : void 0;
+    return /* @__PURE__ */ d.jsxs(
+      rt,
+      {
+        "data-testid": e,
+        hasCloseButton: s,
+        icon: i,
+        ref: n,
+        variant: o,
+        children: [
+          s ? /* @__PURE__ */ d.jsx(
+            M,
+            {
+              dataTestId: a,
+              onClick: r,
+              position: "absolute",
+              right: "sm",
+              top: "sm"
+            }
+          ) : null,
+          /* @__PURE__ */ d.jsx($, { pr: "xl", children: t })
+        ]
+      }
+    );
+  }
+);
+N.displayName = "Growl";
+const G = D(
+  ({ children: t, cta: e, hasCloseButton: s = !0, icon: i, onClose: r, variant: o = "default", ...n }, a) => /* @__PURE__ */ d.jsx(at, { icon: i, ref: a, variant: o, ...n, children: /* @__PURE__ */ d.jsxs($, { alignItems: "center", display: "flex", gap: "sm", children: [
+    t,
+    e ? /* @__PURE__ */ d.jsx(nt, { variant: o, children: e }) : null,
+    s ? /* @__PURE__ */ d.jsx(M, { onClick: r, size: "xs" }) : null
+  ] }) })
+), lt = D((t, e) => /* @__PURE__ */ d.jsx(_, { flexShrink: 0, ref: e, size: "xs", variant: "ghost", ...t }));
+G.displayName = "Snackbar";
+const dt = {
+  "bottom-center": { bottom: 0, left: "50%" },
+  "bottom-left": { bottom: 0, left: 0 },
+  "bottom-right": { bottom: 0, right: 0 },
+  "top-center": { left: "50%", top: 0 },
+  "top-left": { left: 0, top: 0 },
+  "top-right": { right: 0, top: 0 }
+}, ut = ({
+  calculateOffset: t,
+  toast: e,
+  updateHeight: s
+}) => {
+  var m, g, v;
+  if (typeof e.message == "string")
+    return console.warn("You must pass a React component or a HTML element."), null;
+  const i = t(e, { gutter: 0, reverseOrder: !1 }), r = (l) => {
+    if (l && typeof e.height != "number") {
+      const y = l.getBoundingClientRect().height;
+      s(e.id, y);
+    }
+  }, o = (m = e.position) == null ? void 0 : m.includes("center"), n = (g = e.position) == null ? void 0 : g.includes("top"), a = (v = e.position) == null ? void 0 : v.includes("bottom"), c = () => {
+    e.onClose && e.onClose(), P.dismiss(e.id);
+  }, p = {
+    opacity: e.visible ? 1 : 0,
+    transform: `translate(${o ? "-50%" : "0"}, ${i * (n ? 1 : -1)}px)`,
+    ...dt[e.position]
+  };
+  return /* @__PURE__ */ d.jsx(
+    ot,
+    {
+      isBottom: a,
+      opacity: p.opacity,
+      ref: r,
+      style: p,
+      transform: p.transform,
+      ...e.ariaProps,
+      children: L(e.message, { onClose: c })
+    }
+  );
+}, kt = ({ pauseOnHover: t = !0 }) => {
+  const e = W(R), s = st(), { handlers: i, toasts: r } = et(), { calculateOffset: o, endPause: n, startPause: a, updateHeight: c } = i, p = t ? a : void 0, m = t ? n : void 0;
+  return /* @__PURE__ */ d.jsx(z, { theme: e, children: r.length > 0 && s(
+    /* @__PURE__ */ d.jsx("div", { "data-wui-persistent": !0, onMouseEnter: p, onMouseLeave: m, children: r.map((g) => /* @__PURE__ */ d.jsx(
+      ut,
+      {
+        calculateOffset: o,
+        toast: g,
+        updateHeight: c
+      },
+      g.id
+    )) })
+  ) });
+}, ct = ({ children: t, ...e }) => /* @__PURE__ */ d.jsx(it, { ...e, children: t }), wt = (t, e) => {
+  var o, n;
+  const r = {
+    duration: 7e3,
+    position: (typeof t == "string" ? void 0 : ((o = t == null ? void 0 : t.type) == null ? void 0 : o.displayName) || ((n = t == null ? void 0 : t.type) == null ? void 0 : n.name)) === "Growl" ? "top-right" : "bottom-center",
+    ...e
+  };
+  return P(t, r);
+}, jt = (t) => {
+  P.remove(t);
+}, Tt = (t) => {
+  P.dismiss(t);
+}, $t = { Growl: N, Snackbar: G, SnackbarAction: lt, Title: ct };
+export {
+  kt as Notifications,
+  $t as Toast,
+  Tt as dismiss,
+  jt as remove,
+  wt as toast
+};

package/dist/Toggle.mjs

@@ -0,0 +1,97 @@
+"use client";
+import { j as s } from "./jsx-runtime-Bqq1Hxg9.mjs";
+import { C as f, a as $ } from "./index-D10ydFFH.mjs";
+import { shouldForwardProp as g, forwardRef as c } from "./System.mjs";
+import r, { th as t, system as h, css as i } from "@xstyled/styled-components";
+const u = r(f).withConfig({ shouldForwardProp: g })(
+  ({ order: e = "-1", size: o }) => i`
+    ${t("toggles.item.default")};
+    ${t(`toggles.item.sizes.${o}`)};
+    position: relative;
+    display: block;
+    appearance: none;
+    outline: none !important; /* important for firefox */
+    cursor: pointer;
+    transition: medium;
+    order: ${e};
+
+    &::after {
+      ${t("toggles.after.default")};
+      ${t(`toggles.after.sizes.${o}`)};
+      content: '';
+      top: 0;
+      bottom: 0;
+      left: 2;
+      position: absolute;
+      margin: auto;
+      transition: medium;
+      z-index: 1;
+    }
+
+    &:disabled {
+      ${t("toggles.item.disabled")};
+      cursor: not-allowed;
+
+      &::after {
+        ${t("toggles.after.disabled")};
+      }
+    }
+
+    &:checked {
+      &::after {
+        /* border + left padding + right padding */
+        transform: translateX(calc(${t(`toggles.item.sizes.${o}.width`)} - 100% - 0.3rem));
+      }
+
+      &:not(:disabled) {
+        ${t("toggles.item.checked")};
+
+        &::after {
+          ${t("toggles.after.checked")};
+        }
+      }
+    }
+
+    ${h};
+  `
+), x = r.divBox`
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  flex-shrink: 0;
+`, b = r.divBox.withConfig({ shouldForwardProp: g })(
+  ({ checked: e, size: o }) => i`
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    height: ${t(`toggles.item.sizes.${o}.height`)};
+    bottom: 0;
+
+    > svg,
+    i {
+      ${t(`toggles.icon.sizes.${o}`)}
+    }
+
+    ${e && i`
+      left: ${t(`toggles.icon.position.${o}.left`)};
+      color: neutral-90;
+    `}
+
+    ${!e && i`
+      right: ${t(`toggles.icon.position.${o}.right`)};
+    `}
+  `
+), w = c(
+  ({ checked: e, checkedIcon: o, onClick: l, size: n = "xs", uncheckedIcon: a, ...d }, p) => {
+    const m = o && a;
+    return /* @__PURE__ */ s.jsxs(x, { onClick: l, children: [
+      m ? /* @__PURE__ */ s.jsx(b, { checked: e, onClick: l, size: n, children: e ? o : a }) : null,
+      /* @__PURE__ */ s.jsx($, { ...d, checked: e, Component: u, ref: p, size: n })
+    ] });
+  }
+);
+w.displayName = "Toggle";
+export {
+  w as Toggle
+};