welcome-ui 8.3.0 → 9.0.0-alpha.0

package/dist/Tabs.mjs

@@ -1,537 +0,0 @@
-"use client";
-import { j as $ } from "./jsx-runtime-B7I4PJ0H.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-DOT1mNnX.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-C-kJ1lkr.mjs";
-import { c as _e, b as Re, u as Le, a as Ne } from "./ITI7HKP4-C89kOQb8.mjs";
-import { e as Be, f as je } from "./VGCJ63VH-C0UPBY-5.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-DPC8mMuG.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-0w9Y7Ytc.mjs";
-import { P as Ge, a as Ue } from "./MTZPJQMC-TybFZCho.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

@@ -1,137 +0,0 @@
-"use client";
-import { j as d } from "./jsx-runtime-B7I4PJ0H.mjs";
-import { StyledIcon as j } from "./Icon.mjs";
-import { C } from "./index-BaLGEKs7.mjs";
-import { forwardRef as w } from "./System.mjs";
-import { w as S } from "./wrap-children-CzmhoRzd.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
-};