welcome-ui 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/AXB53BZF-BxNazDnS.mjs

@@ -0,0 +1,25 @@
+"use client";
+import { u } from "./P4IRICAX-DF0_vmod.mjs";
+import { u as c } from "./VGCJ63VH-fv0YLRh8.mjs";
+import { c as l, _ as p, i as D, a, g as m, f as g, b as v } from "./LVA2YJMS-Dm5ieEMw.mjs";
+var f = "button", d = l(
+  function(r) {
+    var s = r, { store: o } = s, e = p(s, ["store"]);
+    const i = c();
+    o = o || i, D(
+      o,
+      process.env.NODE_ENV !== "production" && "DialogDisclosure must receive a `store` prop or be wrapped in a DialogProvider component."
+    );
+    const n = o.useState("contentElement");
+    return e = a({
+      "aria-haspopup": m(n, "dialog")
+    }, e), e = u(a({ store: o }, e)), e;
+  }
+), P = g(function(r) {
+  const s = d(r);
+  return v(f, s);
+});
+export {
+  P as D,
+  d as u
+};

package/dist/AXB53BZF-KWM2jKTz.js

@@ -0,0 +1 @@
+"use client";"use strict";const c=require("./P4IRICAX-nhgZ26A1.js"),l=require("./VGCJ63VH-BNLwLOaC.js"),e=require("./LVA2YJMS-B2HZjIhJ.js");var D="button",i=e.createHook(function(t){var s=t,{store:o}=s,r=e.__objRest(s,["store"]);const n=l.useDialogProviderContext();o=o||n,e.invariant(o,process.env.NODE_ENV!=="production"&&"DialogDisclosure must receive a `store` prop or be wrapped in a DialogProvider component.");const u=o.useState("contentElement");return r=e.__spreadValues({"aria-haspopup":e.getPopupRole(u,"dialog")},r),r=c.useDisclosure(e.__spreadValues({store:o},r)),r}),p=e.forwardRef2(function(t){const s=i(t);return e.createElement(D,s)});exports.DialogDisclosure=p;exports.useDialogDisclosure=i;

package/dist/Accordion.js

@@ -0,0 +1,75 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),u=require("./index-Cs1IZBks.js"),m=require("./System.js"),e=require("@xstyled/styled-components"),p=require("./P4IRICAX-nhgZ26A1.js"),c=require("./VGCJ63VH-BNLwLOaC.js"),g=e.div`
+  ${e.th("accordions.wrapper")};
+  ${e.system};
+  transition: medium;
+
+  &:hover {
+    border-color: neutral-50;
+  }
+`,r=e.divBox`
+  flex-shrink: 0;
+  ${e.th("accordions.icon")};
+  transform: rotate3d(0);
+  transition: medium;
+  width: 24;
+  height: 24;
+  color: inherit;
+  display: flex;
+  border-radius: 12;
+
+  & *:first-child {
+    margin: auto;
+  }
+`,f=e(p.Disclosure)`
+  ${e.th("accordions.title")};
+  width: 100%;
+  padding: ${e.th("accordions.padding")};
+  background-color: transparent;
+  border: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: xxl;
+
+  &[aria-expanded='true'] {
+    ${r} {
+      transform: rotate3d(0, 0, 1, 90deg);
+    }
+  }
+
+  &:focus,
+  &:hover {
+    cursor: pointer;
+    ${r} {
+      background-color: neutral-30;
+    }
+  }
+
+  &:focus {
+    outline: 0;
+    ${r} {
+      color: inherit;
+    }
+  }
+`,h=e(c.DisclosureContent)`
+  display: grid;
+  grid-template-rows: 0fr;
+  transition-property: grid-template-rows;
+  transition-timing-function: linear;
+  transition-duration: 200ms;
+  animation-duration: 200ms;
+
+  > * {
+    overflow: hidden;
+    padding: 0;
+  }
+
+  &[data-enter] {
+    grid-template-rows: 1fr;
+  }
+`,$=e.div`
+  ${e.th("accordions.content")};
+  padding: ${e.th("accordions.padding")};
+  padding-top: 0;
+  color: neutral-70;
+`,y=m.forwardRef(({children:o,dataTestId:n,icon:d=t.createElement(u.RightIcon,null),store:i,title:a,...s},l)=>t.createElement(g,{"data-testid":n,ref:l,...s},t.createElement(f,{"data-testid":n?`${n}-title`:void 0,store:i},a,t.createElement(r,null,t.cloneElement(d,{size:"sm"}))),t.createElement(h,{"data-testid":n?`${n}-content`:void 0,store:i},t.createElement("div",null,t.createElement($,null,o)))));function w(o){return c.useDisclosureStore({animated:!0,...o})}exports.Accordion=y;exports.useAccordion=w;

package/dist/Accordion.mjs

@@ -0,0 +1,91 @@
+"use client";
+import t, { cloneElement as m } from "react";
+import { R as u } from "./index-ColyClKR.mjs";
+import { forwardRef as p } from "./System.mjs";
+import r, { th as o, system as f } from "@xstyled/styled-components";
+import { D as g } from "./P4IRICAX-DF0_vmod.mjs";
+import { d as h, e as $ } from "./VGCJ63VH-fv0YLRh8.mjs";
+const w = r.div`
+  ${o("accordions.wrapper")};
+  ${f};
+  transition: medium;
+
+  &:hover {
+    border-color: neutral-50;
+  }
+`, n = r.divBox`
+  flex-shrink: 0;
+  ${o("accordions.icon")};
+  transform: rotate3d(0);
+  transition: medium;
+  width: 24;
+  height: 24;
+  color: inherit;
+  display: flex;
+  border-radius: 12;
+
+  & *:first-child {
+    margin: auto;
+  }
+`, x = r(g)`
+  ${o("accordions.title")};
+  width: 100%;
+  padding: ${o("accordions.padding")};
+  background-color: transparent;
+  border: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: xxl;
+
+  &[aria-expanded='true'] {
+    ${n} {
+      transform: rotate3d(0, 0, 1, 90deg);
+    }
+  }
+
+  &:focus,
+  &:hover {
+    cursor: pointer;
+    ${n} {
+      background-color: neutral-30;
+    }
+  }
+
+  &:focus {
+    outline: 0;
+    ${n} {
+      color: inherit;
+    }
+  }
+`, E = r(h)`
+  display: grid;
+  grid-template-rows: 0fr;
+  transition-property: grid-template-rows;
+  transition-timing-function: linear;
+  transition-duration: 200ms;
+  animation-duration: 200ms;
+
+  > * {
+    overflow: hidden;
+    padding: 0;
+  }
+
+  &[data-enter] {
+    grid-template-rows: 1fr;
+  }
+`, v = r.div`
+  ${o("accordions.content")};
+  padding: ${o("accordions.padding")};
+  padding-top: 0;
+  color: neutral-70;
+`, k = p(
+  ({ children: i, dataTestId: e, icon: c = /* @__PURE__ */ t.createElement(u, null), store: a, title: d, ...s }, l) => /* @__PURE__ */ t.createElement(w, { "data-testid": e, ref: l, ...s }, /* @__PURE__ */ t.createElement(x, { "data-testid": e ? `${e}-title` : void 0, store: a }, d, /* @__PURE__ */ t.createElement(n, null, m(c, { size: "sm" }))), /* @__PURE__ */ t.createElement(E, { "data-testid": e ? `${e}-content` : void 0, store: a }, /* @__PURE__ */ t.createElement("div", null, /* @__PURE__ */ t.createElement(v, null, i))))
+);
+function A(i) {
+  return $({ animated: !0, ...i });
+}
+export {
+  k as Accordion,
+  A as useAccordion
+};

package/dist/Alert.js

@@ -0,0 +1,37 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),v=require("./CloseButton.js"),x=require("./Button.js"),f=require("./System.js"),u=require("./Box.js"),t=require("@xstyled/styled-components"),I=require("./Text.js"),T=require("./VariantIcon.js"),m=t.divBox`
+  flex: 1;
+`,y=t(T.VariantIcon)`
+  position: absolute;
+  align-self: flex-start;
+`,R=t.divBox(({icon:r,isFullWidth:o,size:s,variant:a})=>t.css`
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    max-width: ${o?"100%":"max-content"};
+    ${t.th("alerts.default")};
+    ${t.th(`alerts.${a}`)};
+    ${t.th(`alerts.sizes.${s}`)};
+    ${t.system};
+
+    ${r!==null&&s==="sm"&&t.css`
+      ${m} {
+        margin-left: calc(${t.th("icons.sm")} + ${t.th("space.md")});
+      }
+    `}
+
+    ${r!==null&&s==="md"&&t.css`
+      ${m} {
+        margin-left: calc(${t.th("icons.md")} + ${t.th("space.lg")});
+      }
+
+      ${y} {
+        margin-top: -3;
+      }
+    `}
+  `),V=t(I.Text)(({variant:r})=>t.css`
+    font-weight: medium;
+    ${t.th("alerts.title.default")};
+    ${t.th(`alerts.title.sizes.${r}`)};
+    ${t.system};
+  `),g=({children:r,dataTestId:o,variant:s})=>e.createElement(V,{"data-testid":o,variant:s},r),j=f.forwardRef(({children:r,cta:o,dataTestId:s,handleClose:a,icon:c,isFullWidth:w,size:l="sm",variant:i="default",...b},h)=>{const q=s?`${s}-close-button`:void 0,A=i==="beige"?"default":i,C=e.Children.toArray(r).map(n=>n.type===g?e.cloneElement(n,{variant:l}):n),p=n=>{var $;if(n){if(n.type===B)return e.cloneElement(n,{size:l});if(n.type===E)return e.cloneElement(n,{size:l});if(($=n.props)!=null&&$.children)return e.cloneElement(n,{...n.props,children:e.Children.map(n.props.children,S=>p(S))})}return n},d=e.isValidElement(o)?p(o):o;return e.createElement(R,{"data-testid":s,icon:c,isFullWidth:w,ref:h,size:l,variant:i,...b},!!a&&e.createElement(v.CloseButton,{dataTestId:q,onClick:a,position:"absolute",right:"sm",size:"xs",top:"sm"}),c!==null&&e.createElement(y,{icon:c,size:l,variant:A}),e.createElement(m,null,e.createElement(u.Box,{alignItems:"flex-start",display:"flex",flexDirection:"column",gap:"md",justifyContent:"space-between"},e.createElement(u.Box,{flex:1},C),!!d&&e.createElement(u.Box,{alignItems:"center",display:"flex",gap:"sm"},d))))}),B=f.forwardRef((r,o)=>e.createElement(x.Button,{flexShrink:0,ref:o,w:"fit-content",...r,variant:"secondary"})),E=f.forwardRef((r,o)=>e.createElement(x.Button,{flexShrink:0,ref:o,w:"fit-content",...r,variant:"tertiary"})),k=Object.assign(j,{Title:g,Button:B,SecondaryButton:E});exports.Alert=k;

package/dist/Alert.mjs

@@ -0,0 +1,120 @@
+"use client";
+import r, { Children as E, cloneElement as i } from "react";
+import { CloseButton as D } from "./CloseButton.mjs";
+import { Button as B } from "./Button.mjs";
+import { forwardRef as d } from "./System.mjs";
+import { Box as p } from "./Box.mjs";
+import c, { css as m, th as l, system as w } from "@xstyled/styled-components";
+import { Text as R } from "./Text.mjs";
+import { VariantIcon as O } from "./VariantIcon.mjs";
+const $ = c.divBox`
+  flex: 1;
+`, A = c(O)`
+  position: absolute;
+  align-self: flex-start;
+`, q = c.divBox(({ icon: e, isFullWidth: n, size: o, variant: s }) => m`
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    max-width: ${n ? "100%" : "max-content"};
+    ${l("alerts.default")};
+    ${l(`alerts.${s}`)};
+    ${l(`alerts.sizes.${o}`)};
+    ${w};
+
+    ${e !== null && o === "sm" && m`
+      ${$} {
+        margin-left: calc(${l("icons.sm")} + ${l("space.md")});
+      }
+    `}
+
+    ${e !== null && o === "md" && m`
+      ${$} {
+        margin-left: calc(${l("icons.md")} + ${l("space.lg")});
+      }
+
+      ${A} {
+        margin-top: -3;
+      }
+    `}
+  `), F = c(R)(({ variant: e }) => m`
+    font-weight: medium;
+    ${l("alerts.title.default")};
+    ${l(`alerts.title.sizes.${e}`)};
+    ${w};
+  `), b = ({ children: e, dataTestId: n, variant: o }) => /* @__PURE__ */ r.createElement(F, { "data-testid": n, variant: o }, e), G = d(
+  ({
+    children: e,
+    cta: n,
+    dataTestId: o,
+    handleClose: s,
+    icon: f,
+    isFullWidth: I,
+    size: a = "sm",
+    variant: u = "default",
+    ...S
+  }, _) => {
+    const k = o ? `${o}-close-button` : void 0, T = u === "beige" ? "default" : u, V = E.toArray(e).map((t) => t.type === b ? i(t, { variant: a }) : t), x = (t) => {
+      var y;
+      if (t) {
+        if (t.type === v) return i(t, { size: a });
+        if (t.type === C) return i(t, { size: a });
+        if ((y = t.props) != null && y.children)
+          return i(t, {
+            ...t.props,
+            children: E.map(
+              t.props.children,
+              (j) => x(j)
+            )
+          });
+      }
+      return t;
+    }, g = r.isValidElement(n) ? x(n) : n;
+    return /* @__PURE__ */ r.createElement(
+      q,
+      {
+        "data-testid": o,
+        icon: f,
+        isFullWidth: I,
+        ref: _,
+        size: a,
+        variant: u,
+        ...S
+      },
+      !!s && /* @__PURE__ */ r.createElement(
+        D,
+        {
+          dataTestId: k,
+          onClick: s,
+          position: "absolute",
+          right: "sm",
+          size: "xs",
+          top: "sm"
+        }
+      ),
+      f !== null && /* @__PURE__ */ r.createElement(A, { icon: f, size: a, variant: T }),
+      /* @__PURE__ */ r.createElement($, null, /* @__PURE__ */ r.createElement(
+        p,
+        {
+          alignItems: "flex-start",
+          display: "flex",
+          flexDirection: "column",
+          gap: "md",
+          justifyContent: "space-between"
+        },
+        /* @__PURE__ */ r.createElement(p, { flex: 1 }, V),
+        !!g && /* @__PURE__ */ r.createElement(p, { alignItems: "center", display: "flex", gap: "sm" }, g)
+      ))
+    );
+  }
+), v = d((e, n) => /* @__PURE__ */ r.createElement(B, { flexShrink: 0, ref: n, w: "fit-content", ...e, variant: "secondary" })), C = d(
+  (e, n) => /* @__PURE__ */ r.createElement(B, { flexShrink: 0, ref: n, w: "fit-content", ...e, variant: "tertiary" })
+), U = Object.assign(G, {
+  Title: b,
+  Button: v,
+  SecondaryButton: C
+});
+export {
+  U as Alert
+};

package/dist/AspectRatio.js

@@ -0,0 +1,29 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),r=require("./System.js"),t=require("@xstyled/styled-components"),n=t.divBox(({ratio:e})=>t.css`
+    position: relative;
+
+    & > * {
+      overflow: hidden;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    & > img,
+    & > video {
+      object-fit: cover;
+    }
+
+    &:before {
+      height: 0;
+      content: '';
+      display: block;
+      padding-bottom: ${1/e*100}%;
+    }
+  `),o=r.forwardRef(({ratio:e=4/3,...i},s)=>c.createElement(n,{ratio:e,ref:s,...i}));o.displayName="AspectRatio";exports.AspectRatio=o;

package/dist/AspectRatio.mjs

@@ -0,0 +1,41 @@
+"use client";
+import i from "react";
+import { forwardRef as r } from "./System.mjs";
+import s, { css as a } from "@xstyled/styled-components";
+const c = s.divBox(
+  ({ ratio: t }) => a`
+    position: relative;
+
+    & > * {
+      overflow: hidden;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    & > img,
+    & > video {
+      object-fit: cover;
+    }
+
+    &:before {
+      height: 0;
+      content: '';
+      display: block;
+      padding-bottom: ${1 / t * 100}%;
+    }
+  `
+), n = r(
+  ({ ratio: t = 4 / 3, ...e }, o) => /* @__PURE__ */ i.createElement(c, { ratio: t, ref: o, ...e })
+);
+n.displayName = "AspectRatio";
+export {
+  n as AspectRatio
+};

package/dist/Avatar.js

@@ -0,0 +1,5 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),s=require("@xstyled/styled-components"),y=require("./System.js"),x=require("./Box.js"),S=require("./Shape.js"),b=require("./Text.js");function q(o,e=""){const t=Object.keys(o).filter(r=>r.startsWith("secondary-")),n=e.length%t.length;return t[n]}function A(o=""){const[e,t]=o.split(" ");return e&&t?`${e.charAt(0).toUpperCase()}${t.charAt(0).toUpperCase()}`:e.substring(0,2).toUpperCase()}const C=s(S.Shape)`
+  flex-shrink: 0;
+`,$=s(b.Text)`
+  ${s.th("avatars.text")};
+`,h=a.memo(y.forwardRef(({color:o,fontSize:e,getInitials:t=A,h:n,name:r,shape:m="circle",size:g="md",src:c,w:i,...d},p)=>{const l=s.useTheme(),f=o||q(l.colors,r),u=l.avatars.sizes[g],v=e||`calc(${i?l.toRem(i):u} / 2.5)`;return a.createElement(C,{"aria-label":r,backgroundColor:f,h:n||u,ref:p,role:"img",shape:m,w:i||u,...d},c&&a.createElement("img",{alt:r,src:c}),!c&&a.createElement(x.Box,null,a.createElement($,{fontSize:v,m:0},t(r))))}));h.displayName="Avatar";exports.Avatar=h;

package/dist/Avatar.mjs

@@ -0,0 +1,56 @@
+"use client";
+import a, { memo as x } from "react";
+import m, { th as v, useTheme as y } from "@xstyled/styled-components";
+import { forwardRef as C } from "./System.mjs";
+import { Box as $ } from "./Box.mjs";
+import { Shape as b } from "./Shape.mjs";
+import { Text as A } from "./Text.mjs";
+function z(o, t = "") {
+  const e = Object.keys(o).filter((r) => r.startsWith("secondary-")), s = t.length % e.length;
+  return e[s];
+}
+function E(o = "") {
+  const [t, e] = o.split(" ");
+  return t && e ? `${t.charAt(0).toUpperCase()}${e.charAt(0).toUpperCase()}` : t.substring(0, 2).toUpperCase();
+}
+const S = m(b)`
+  flex-shrink: 0;
+`, T = m(A)`
+  ${v("avatars.text")};
+`, _ = x(
+  C(
+    ({
+      color: o,
+      fontSize: t,
+      getInitials: e = E,
+      h: s,
+      name: r,
+      shape: f = "circle",
+      size: p = "md",
+      src: n,
+      w: l,
+      ...u
+    }, h) => {
+      const i = y(), d = o || z(i.colors, r), c = i.avatars.sizes[p], g = t || `calc(${l ? i.toRem(l) : c} / 2.5)`;
+      return /* @__PURE__ */ a.createElement(
+        S,
+        {
+          "aria-label": r,
+          backgroundColor: d,
+          h: s || c,
+          ref: h,
+          role: "img",
+          shape: f,
+          w: l || c,
+          ...u
+        },
+        n && /* @__PURE__ */ a.createElement("img", { alt: r, src: n }),
+        !n && /* @__PURE__ */ a.createElement($, null, /* @__PURE__ */ a.createElement(T, { fontSize: g, m: 0 }, e(r)))
+      );
+    }
+  )
+);
+_.displayName = "Avatar";
+export {
+  _ as Avatar
+};