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

package/dist/Tabs.mjs

@@ -0,0 +1,537 @@
+"use client";
+import { j as $ } from "./jsx-runtime-Bqq1Hxg9.mjs";
+import { forwardRef as W } from "./System.mjs";
+import z, { th as S, system as he, css as k } from "@xstyled/styled-components";
+import { C as ne, a as re, d as Q, u as ge, e as Te } from "./P2CTZE2T-1n7Xlf8m.mjs";
+import { t as ae, z as Pe, A as D, B as j, C as A, P as Z, d as g, g as p, G as ee, v as Ce, f as K, c as G, h as U, _ as X, i as Y, w as ie, l as $e, b as F, D as ce, a9 as ye, e as we, m as Ee } from "./LVA2YJMS-B8X1PCyC.mjs";
+import { c as _e, b as Re, u as Le, a as Ne } from "./ITI7HKP4-DKM_MiJK.mjs";
+import { e as Be, f as je } from "./VGCJ63VH-C4H4_vtu.mjs";
+import { m as Ae, o as te, c as Oe, s as O, d as E, g as ke, a as le, b as oe, u as V } from "./YV4JVR4I-BLeUul5N.mjs";
+import { createContext as de, useMemo as De, useCallback as ue, useRef as M, useEffect as se, useState as q, Children as Ve, Fragment as ze, cloneElement as Fe } from "react";
+import { u as Me } from "./use-fork-ref-CUZErtAC.mjs";
+import { u as He } from "./use-isomorphic-layout-effect-Izr-e2pi.mjs";
+import { u as We } from "./use-viewport-CWpjoHXy.mjs";
+import { u as Ke } from "./VEVQD5MH-BSxDdMFG.mjs";
+import { P as Ge, a as Ue } from "./MTZPJQMC-DdjKPI9r.mjs";
+var Xe = ae(
+  [Ue, re],
+  [Ge, ne]
+), Ye = Xe.useContext;
+de(!1);
+de(null);
+function qe(t = {}) {
+  var s = t, {
+    composite: o,
+    combobox: e
+  } = s, n = Pe(s, [
+    "composite",
+    "combobox"
+  ]);
+  const r = [
+    "items",
+    "renderedItems",
+    "moves",
+    "orientation",
+    "virtualFocus",
+    "includesBaseElement",
+    "baseElement",
+    "focusLoop",
+    "focusShift",
+    "focusWrap"
+  ], m = Ae(
+    n.store,
+    te(o, r),
+    te(e, r)
+  ), c = m == null ? void 0 : m.getState(), d = _e(D(A({}, n), {
+    store: m,
+    // We need to explicitly set the default value of `includesBaseElement` to
+    // `false` since we don't want the composite store to default it to `true`
+    // when the activeId state is null, which could be the case when rendering
+    // combobox with tab.
+    includesBaseElement: j(
+      n.includesBaseElement,
+      c == null ? void 0 : c.includesBaseElement,
+      !1
+    ),
+    orientation: j(
+      n.orientation,
+      c == null ? void 0 : c.orientation,
+      "horizontal"
+    ),
+    focusLoop: j(n.focusLoop, c == null ? void 0 : c.focusLoop, !0)
+  })), a = Re(), T = D(A({}, d.getState()), {
+    selectedId: j(
+      n.selectedId,
+      c == null ? void 0 : c.selectedId,
+      n.defaultSelectedId
+    ),
+    selectOnMove: j(
+      n.selectOnMove,
+      c == null ? void 0 : c.selectOnMove,
+      !0
+    )
+  }), i = Oe(T, d, m);
+  O(
+    i,
+    () => E(i, ["moves"], () => {
+      const { activeId: u, selectOnMove: f } = i.getState();
+      if (!f || !u) return;
+      const I = d.item(u);
+      I && (I.dimmed || I.disabled || i.setState("selectedId", I.id));
+    })
+  );
+  let v = !0;
+  O(
+    i,
+    () => ke(i, ["selectedId"], (u, f) => {
+      if (!v) {
+        v = !0;
+        return;
+      }
+      o && u.selectedId === f.selectedId || i.setState("activeId", u.selectedId);
+    })
+  ), O(
+    i,
+    () => E(i, ["selectedId", "renderedItems"], (u) => {
+      if (u.selectedId !== void 0) return;
+      const { activeId: f, renderedItems: I } = i.getState(), x = d.item(f);
+      if (x && !x.disabled && !x.dimmed)
+        i.setState("selectedId", x.id);
+      else {
+        const y = I.find(
+          (P) => !P.disabled && !P.dimmed
+        );
+        i.setState("selectedId", y == null ? void 0 : y.id);
+      }
+    })
+  ), O(
+    i,
+    () => E(i, ["renderedItems"], (u) => {
+      const f = u.renderedItems;
+      if (f.length)
+        return E(a, ["renderedItems"], (I) => {
+          const x = I.renderedItems;
+          x.some((P) => !P.tabId) && x.forEach((P, R) => {
+            if (P.tabId) return;
+            const N = f[R];
+            N && a.renderItem(D(A({}, P), { tabId: N.id }));
+          });
+        });
+    })
+  );
+  let h = null;
+  return O(i, () => {
+    const u = () => {
+      h = i.getState().selectedId;
+    }, f = () => {
+      v = !1, i.setState("selectedId", h);
+    };
+    if (o && "setSelectElement" in o)
+      return Z(
+        E(o, ["value"], u),
+        E(o, ["mounted"], f)
+      );
+    if (e)
+      return Z(
+        E(e, ["selectedValue"], u),
+        E(e, ["mounted"], f)
+      );
+  }), D(A(A({}, d), i), {
+    panels: a,
+    setSelectedId: (u) => i.setState("selectedId", u),
+    select: (u) => {
+      i.setState("selectedId", u), d.move(u);
+    }
+  });
+}
+function Je(t, s, o) {
+  ee(s, [o.composite, o.combobox]), t = Le(t, s, o), oe(t, o, "selectedId", "setSelectedId"), oe(t, o, "selectOnMove");
+  const [e, n] = le(() => t.panels, {});
+  return ee(n, [t, n]), Object.assign(
+    De(() => g(p({}, t), { panels: e }), [t, e]),
+    { composite: o.composite, combobox: o.combobox }
+  );
+}
+function Qe(t = {}) {
+  const s = Ke(), o = Ye() || s;
+  t = g(p({}, t), {
+    composite: t.composite !== void 0 ? t.composite : o,
+    combobox: t.combobox !== void 0 ? t.combobox : s
+  });
+  const [e, n] = le(qe, t);
+  return Je(e, n, t);
+}
+var J = ae(
+  [re],
+  [ne]
+), Ze = J.useScopedContext, me = J.useProviderContext, be = J.ScopedContextProvider, et = "button", tt = G(function(s) {
+  var o = s, {
+    store: e,
+    getItem: n
+  } = o, r = X(o, [
+    "store",
+    "getItem"
+  ]), m;
+  const c = Ze();
+  e = e || c, Y(
+    e,
+    process.env.NODE_ENV !== "production" && "Tab must be wrapped in a TabList component."
+  );
+  const d = ie(), a = r.id || d, T = $e(r), i = ue(
+    (b) => {
+      const _ = g(p({}, b), { dimmed: T });
+      return n ? n(_) : _;
+    },
+    [T, n]
+  ), v = r.onClick, h = F((b) => {
+    v == null || v(b), !b.defaultPrevented && (e == null || e.setSelectedId(a));
+  }), u = e.panels.useState(
+    (b) => {
+      var _;
+      return (_ = b.items.find((l) => l.tabId === a)) == null ? void 0 : _.id;
+    }
+  ), f = d ? r.shouldRegisterItem : !1, I = e.useState((b) => !!a && b.activeId === a), x = e.useState((b) => !!a && b.selectedId === a), y = e.useState((b) => !!e.item(b.activeId)), P = I || x && !y, R = x || ((m = r.accessibleWhenDisabled) != null ? m : !0);
+  if (V(
+    e.combobox || e.composite,
+    "virtualFocus"
+  ) && (r = g(p({}, r), {
+    tabIndex: -1
+  })), r = g(p({
+    id: a,
+    role: "tab",
+    "aria-selected": x,
+    "aria-controls": u || void 0
+  }, r), {
+    onClick: h
+  }), e.composite) {
+    const b = {
+      id: a,
+      accessibleWhenDisabled: R,
+      store: e.composite,
+      shouldRegisterItem: P && f,
+      rowId: r.rowId,
+      render: r.render
+    };
+    r = g(p({}, r), {
+      render: /* @__PURE__ */ $.jsx(
+        Q,
+        g(p({}, b), {
+          render: e.combobox && e.composite !== e.combobox ? /* @__PURE__ */ $.jsx(Q, g(p({}, b), { store: e.combobox })) : b.render
+        })
+      )
+    });
+  }
+  return r = ge(g(p({
+    store: e
+  }, r), {
+    accessibleWhenDisabled: R,
+    getItem: i,
+    shouldRegisterItem: f
+  })), r;
+}), ot = Ce(
+  K(function(s) {
+    const o = tt(s);
+    return U(et, o);
+  })
+), st = "div", nt = G(
+  function(s) {
+    var o = s, { store: e } = o, n = X(o, ["store"]);
+    const r = me();
+    e = e || r, Y(
+      e,
+      process.env.NODE_ENV !== "production" && "TabList must receive a `store` prop or be wrapped in a TabProvider component."
+    );
+    const m = e.useState(
+      (c) => c.orientation === "both" ? void 0 : c.orientation
+    );
+    return n = ce(
+      n,
+      (c) => /* @__PURE__ */ $.jsx(be, { value: e, children: c }),
+      [e]
+    ), e.composite && (n = p({
+      focusable: !1
+    }, n)), n = p({
+      role: "tablist",
+      "aria-orientation": m
+    }, n), n = Ne(p({ store: e }, n)), n;
+  }
+), rt = K(function(s) {
+  const o = nt(s);
+  return U(st, o);
+}), at = "div", it = G(
+  function(s) {
+    var o = s, {
+      store: e,
+      unmountOnHide: n,
+      tabId: r,
+      getItem: m,
+      scrollRestoration: c,
+      scrollElement: d
+    } = o, a = X(o, [
+      "store",
+      "unmountOnHide",
+      "tabId",
+      "getItem",
+      "scrollRestoration",
+      "scrollElement"
+    ]);
+    const T = me();
+    e = e || T, Y(
+      e,
+      process.env.NODE_ENV !== "production" && "TabPanel must receive a `store` prop or be wrapped in a TabProvider component."
+    );
+    const i = M(null), v = ie(a.id), h = V(
+      e.panels,
+      () => {
+        var l;
+        return r || ((l = e == null ? void 0 : e.panels.item(v)) == null ? void 0 : l.tabId);
+      }
+    ), u = V(
+      e,
+      (l) => !!h && l.selectedId === h
+    ), f = Be({ open: u }), I = V(f, "mounted"), x = M(
+      /* @__PURE__ */ new Map()
+    ), y = F(() => {
+      const l = i.current;
+      return l ? d ? typeof d == "function" ? d(l) : "current" in d ? d.current : d : l : null;
+    });
+    se(() => {
+      var l, w;
+      if (!c || !I) return;
+      const C = y();
+      if (!C) return;
+      if (c === "reset") {
+        C.scroll(0, 0);
+        return;
+      }
+      if (!h) return;
+      const L = x.current.get(h);
+      C.scroll((l = L == null ? void 0 : L.x) != null ? l : 0, (w = L == null ? void 0 : L.y) != null ? w : 0);
+      const B = () => {
+        x.current.set(h, {
+          x: C.scrollLeft,
+          y: C.scrollTop
+        });
+      };
+      return C.addEventListener("scroll", B), () => {
+        C.removeEventListener("scroll", B);
+      };
+    }, [c, I, h, y, e]);
+    const [P, R] = q(!1);
+    se(() => {
+      const l = i.current;
+      if (!l) return;
+      const w = ye(l);
+      R(!!w.length);
+    }, []);
+    const N = ue(
+      (l) => {
+        const w = g(p({}, l), { id: v || l.id, tabId: r });
+        return m ? m(w) : w;
+      },
+      [v, r, m]
+    ), b = a.onKeyDown, _ = F((l) => {
+      if (b == null || b(l), l.defaultPrevented || !(e != null && e.composite)) return;
+      const C = {
+        ArrowLeft: e.previous,
+        ArrowRight: e.next,
+        Home: e.first,
+        End: e.last
+      }[l.key];
+      if (!C) return;
+      const { selectedId: L } = e.getState(), B = C({ activeId: L });
+      B && (l.preventDefault(), e.move(B));
+    });
+    return a = ce(
+      a,
+      (l) => /* @__PURE__ */ $.jsx(be, { value: e, children: l }),
+      [e]
+    ), a = g(p({
+      id: v,
+      role: "tabpanel",
+      "aria-labelledby": h || void 0
+    }, a), {
+      children: n && !I ? null : a.children,
+      ref: we(i, a.ref),
+      onKeyDown: _
+    }), a = Ee(p({
+      // If the tab panel is rendered as part of another composite widget such
+      // as combobox, it should not be focusable.
+      focusable: !e.composite && !P
+    }, a)), a = je(p({ store: f }, a)), a = Te(g(p({ store: e.panels }, a), { getItem: N })), a;
+  }
+), ct = K(function(s) {
+  const o = it(s);
+  return U(at, o);
+});
+const lt = z(rt)(
+  ({ size: t }) => k`
+    position: relative;
+    width: 100%;
+    overflow-x: auto;
+    display: flex;
+    border: 0;
+    gap: xl;
+
+    &[aria-orientation='vertical'] {
+      flex-direction: column;
+      ${S("tabs.tabsBorder.vertical")};
+    }
+
+    ${S("tabs.tabsBorder.horizontal")};
+
+    ${fe} {
+      ${S(`tabs.item.size.${t}`)}
+    }
+    ${he};
+  `
+), fe = z.button`
+  border: 0;
+  background: none;
+  ${S("tabs.item.default")};
+  display: flex;
+  align-items: center;
+  flex: none;
+  padding: md 0;
+  transition: medium;
+  text-transform: none;
+  cursor: pointer;
+  gap: sm;
+
+  &:focus {
+    outline: none !important; /* important for firefox */
+
+    &:not([aria-selected='true']) {
+      ${S("tabs.item.focus")};
+    }
+  }
+
+  &[aria-selected='true'] {
+    ${S("tabs.item.active")};
+  }
+
+  &[aria-disabled='true'] {
+    ${S("tabs.item.disabled")};
+    cursor: auto;
+  }
+
+  &:hover:not([aria-selected='true']):not([aria-disabled='true']) {
+    ${S("tabs.item.focus")};
+  }
+
+  & > svg,
+  img {
+    ${S("tabs.icon")};
+  }
+
+  & > span {
+    ${S("tabs.badge")};
+  }
+`, dt = z(ct)(
+  ({ orientation: t }) => k`
+    ${t === "vertical" ? S("tabs.panel.vertical") : S("tabs.panel.horizontal")};
+  `
+), ut = ({ offset: t = 0, size: s = 0 }) => k`
+  ${S("tabs.activeBar.horizontal")};
+  left: 0;
+  bottom: 0;
+  width: ${s}px;
+  transform: translateX(${t}px);
+`, mt = ({ offset: t = 0, size: s = 0 }) => k`
+  ${S("tabs.activeBar.vertical")};
+  right: 0;
+  top: 0;
+  height: ${s}px;
+  transform: translateY(${t}px);
+`, bt = z.span(
+  ({ orientation: t, ...s }) => k`
+    position: absolute;
+    ${t === "vertical" ? mt(s) : ut(s)}
+    will-change: width, transform;
+    transition: medium;
+    transition-property: transform, width;
+  `
+);
+function H(t) {
+  var s = Ve.toArray(t);
+  return s.reduce(function(o, e) {
+    return e.type === ze ? o.concat(H(e.props.children)) : (o.push(e), o);
+  }, []);
+}
+const pe = (t) => {
+  if (!t || typeof window > "u") return 1;
+  const s = Number(window.getComputedStyle(t).scale);
+  return isNaN(s) ? pe(t.parentElement) : s;
+};
+function ft(t, s, o) {
+  const [e, n] = q({}), { height: r, width: m } = We();
+  return He(() => {
+    const c = t.current;
+    if (!c || !s) return;
+    const d = c.getBoundingClientRect(), a = s.getBoundingClientRect(), T = pe(c);
+    if (o === "vertical") {
+      const i = a.top - d.top, v = a.height;
+      n({
+        offset: i,
+        orientation: o,
+        size: v
+      });
+    } else {
+      const i = (a.left - d.left + c.scrollLeft) / T, v = a.width / T;
+      n({
+        offset: isNaN(i) ? 0 : i,
+        orientation: o,
+        size: isNaN(v) ? 0 : v
+      });
+    }
+  }, [t, s, m, r, o]), e;
+}
+const ve = ({ activeTab: t, listRef: s, orientation: o }) => {
+  const e = ft(s, t, o);
+  return /* @__PURE__ */ $.jsx(bt, { ...e });
+};
+ve.displayName = "ActiveBar";
+const pt = H.default || H;
+function vt(t, s) {
+  const [o, e] = q(null);
+  return [pt(s).map((r) => r.props.id === t ? Fe(r, { ref: e }) : r), o];
+}
+const Ie = W(
+  ({ children: t, size: s = "md", store: o, ...e }, n) => {
+    const r = M(), m = Me(n, r), { orientation: c, selectedId: d } = o.useState(), [a, T] = vt(d, t);
+    return /* @__PURE__ */ $.jsxs(lt, { orientation: c, ref: m, size: s, store: o, ...e, children: [
+      a,
+      a.length > 1 && /* @__PURE__ */ $.jsx(ve, { activeTab: T, listRef: r, orientation: c })
+    ] });
+  }
+);
+Ie.displayName = "TabList";
+const xe = W(
+  ({ children: t, store: s, tabId: o, ...e }, n) => {
+    const r = s.useState("orientation");
+    return /* @__PURE__ */ $.jsx(dt, { orientation: r, ref: n, store: s, tabId: o, ...e, children: t });
+  }
+);
+xe.displayName = "TabPanel";
+const Se = W(
+  ({ as: t, children: s, id: o, store: e, ...n }, r) => /* @__PURE__ */ $.jsx(
+    ot,
+    {
+      id: o,
+      render: (m) => /* @__PURE__ */ $.jsx(fe, { as: t, ...m, ref: r }),
+      store: e,
+      ...n,
+      children: s
+    }
+  )
+);
+Se.displayName = "Tab";
+const Lt = Object.assign(Se, { List: Ie, Panel: xe });
+function Nt(t) {
+  return Qe(t);
+}
+export {
+  Lt as Tab,
+  Se as TabComponent,
+  Nt as useTab
+};

package/dist/Tag.mjs

@@ -0,0 +1,137 @@
+"use client";
+import { j as d } from "./jsx-runtime-Bqq1Hxg9.mjs";
+import { StyledIcon as j } from "./Icon.mjs";
+import { C } from "./index-KxL21VJb.mjs";
+import { forwardRef as w } from "./System.mjs";
+import { w as S } from "./wrap-children-CRHMWYug.mjs";
+import p, { th as o, system as b, css as n } from "@xstyled/styled-components";
+import { g } from "./get-max-width-height-DoUro2T7.mjs";
+import { o as h } from "./overflow-ellipsis-DGV5Kgt-.mjs";
+const I = (i, t, e) => n`
+  ${o(`tags.shape.${i}`)}
+  padding: 0;
+  ${(t || e) && n`
+    width: ${g(t || "0", e)};
+    height: ${g(t || "0", e)};
+  `}
+`, m = p.div.withConfig({
+  shouldForwardProp: (i) => !["hasClickAction", "hasLink", "hasRemoveAction"].includes(i)
+})(
+  ({ h: i, hasClickAction: t, hasLink: e, hasRemoveAction: r, length: a, size: s, variant: c, w: l }) => n`
+    ${o("tags.default")};
+    ${o(`tags.variants.${c}`)};
+    ${o(`tags.sizes.${s}`)}
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: initial; /* avoid cropped font */
+    transition: medium;
+    max-width: 100%;
+    ${h}
+    ${b}
+    ${a !== 1 && n`
+      span,
+      p {
+        ${h}
+      }
+    `}
+    ${a === 1 && !r && n`
+      justify-content: center;
+      ${I(s, l, i)};
+    `};
+
+    ${(e || t) && n`
+      cursor: pointer;
+      text-decoration: none;
+
+      &:hover,
+      &:focus {
+        ${o(`tags.hover.${c}`)};
+      }
+    `};
+
+    ${r && n`
+      padding-right: xl;
+    `}
+
+    > *:not(:last-child) {
+      margin-right: xxs;
+    }
+
+    & > svg {
+      width: ${o(`tags.icon.${s}`)};
+      height: ${o(`tags.icon.${s}`)};
+    }
+
+    > *:not(:only-child) {
+      ${/* sc-selector */
+  j}:last-child {
+        opacity: 1;
+        transition: opacity ${o.transition("medium")};
+        cursor: pointer;
+
+        &:hover {
+          opacity: 0.7;
+        }
+      }
+    }
+  `
+), k = p.divBox(
+  ({ size: i }) => n`
+    position: absolute;
+    ${o(`tags.sizes.${i}`)};
+    top: 0;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `
+), A = p.buttonBox`
+  all: unset;
+  display: flex;
+`, T = w(
+  ({
+    as: i,
+    children: t,
+    dataTestId: e,
+    href: r,
+    onClick: a,
+    onRemove: s,
+    size: c = "md",
+    to: l,
+    variant: $ = "default",
+    ...f
+  }, u) => {
+    const x = S(t), y = !!(t || t === 0) && ["number", "string"].includes(typeof t) ? t.toString().length : void 0, v = !!r || !!l;
+    return /* @__PURE__ */ d.jsxs(
+      m,
+      {
+        as: i,
+        "data-testid": e,
+        hasClickAction: !!a,
+        hasLink: v,
+        hasRemoveAction: !!s,
+        href: r,
+        length: y,
+        onClick: a,
+        ref: u,
+        size: c,
+        to: l,
+        variant: $,
+        ...f,
+        children: [
+          x,
+          !!s && /* @__PURE__ */ d.jsx(k, { size: c, children: /* @__PURE__ */ d.jsx(A, { onClick: s, title: "Remove", type: "button", children: /* @__PURE__ */ d.jsx(C, { size: "xs", title: "Remove" }) }) })
+        ]
+      }
+    );
+  }
+);
+T.displayName = "Tag";
+const q = m;
+export {
+  q as StyledTag,
+  T as Tag
+};