welcome-ui 1.0.0-beta.3 → 1.0.0-beta.5

package/dist/Tabs.mjs

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

package/dist/Tag.js

@@ -0,0 +1,78 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),v=require("./Icon.js"),S=require("./index-C1FV1q-F.js"),w=require("./System.js"),q=require("./wrap-children-BLDjJiiy.js"),t=require("@xstyled/styled-components"),d=require("./overflow-ellipsis-C2ESrF8C.js"),h=require("./get-max-width-height-CDLBnp_J.js"),C=(s,e,n)=>t.css`
+  ${t.th(`tags.shape.${s}`)}
+  padding: 0;
+  ${(e||n)&&t.css`
+    width: ${h.getMax(e||"0",n)};
+    height: ${h.getMax(e||"0",n)};
+  `}
+`,g=t.div.withConfig({shouldForwardProp:s=>!["hasClickAction","hasLink","hasRemoveAction"].includes(s)})(({h:s,hasClickAction:e,hasLink:n,hasRemoveAction:r,length:o,size:i,variant:a,w:c})=>t.css`
+    ${t.th("tags.default")};
+    ${t.th(`tags.variants.${a}`)};
+    ${t.th(`tags.sizes.${i}`)}
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: initial; /* avoid cropped font */
+    transition: medium;
+    max-width: 100%;
+    ${d.overflowEllipsis}
+    ${t.system}
+    ${o!==1&&t.css`
+      span,
+      p {
+        ${d.overflowEllipsis}
+      }
+    `}
+    ${o===1&&t.css`
+      justify-content: center;
+      ${C(i,c,s)};
+    `};
+
+    ${(n||e)&&t.css`
+      cursor: pointer;
+      text-decoration: none;
+
+      &:hover,
+      &:focus {
+        ${t.th(`tags.hover.${a}`)};
+      }
+    `};
+
+    ${r&&t.css`
+      padding-right: xl;
+    `}
+
+    > *:not(:last-child) {
+      margin-right: xxs;
+    }
+
+    & > svg {
+      width: ${t.th(`tags.icon.${i}`)};
+      height: ${t.th(`tags.icon.${i}`)};
+    }
+
+    > *:not(:only-child) {
+      ${v.StyledIcon}:last-child {
+        opacity: 1;
+        transition: opacity ${t.th.transition("medium")};
+        cursor: pointer;
+
+        &:hover {
+          opacity: 0.7;
+        }
+      }
+    }
+  `),b=t.divBox(({size:s})=>t.css`
+    position: absolute;
+    ${t.th(`tags.sizes.${s}`)};
+    top: 0;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `),E=t.buttonBox`
+  all: unset;
+  display: flex;
+`,u=w.forwardRef(({as:s,children:e,dataTestId:n,href:r,onClick:o,onRemove:i,size:a="md",to:c,variant:p="default",...$},y)=>{const m=q.wrapChildren(e),f=!!(e||e===0)&&["number","string"].includes(typeof e)?e.toString().length:void 0,x=!!r||!!c;return l.createElement(g,{as:s,"data-testid":n,hasClickAction:!!o,hasLink:x,hasRemoveAction:!!i,href:r,length:f,onClick:o,ref:y,size:a,to:c,variant:p,...$},m,!!i&&l.createElement(b,{size:a},l.createElement(E,{onClick:i,title:"Remove",type:"button"},l.createElement(S.CrossIcon,{size:"xs",title:"Remove"}))))});u.displayName="Tag";const T=g;exports.StyledTag=T;exports.Tag=u;