welcome-ui 0.32.2 → 1.0.0-beta.10

package/dist/index-C_r0bVmL.js

@@ -0,0 +1,56 @@
+"use client";"use strict";const b=require("react"),A=require("./System.js"),u=require("@xstyled/styled-components"),j=require("./field-styles-D_gf6ypV.js"),t=require("./LVA2YJMS-B2HZjIhJ.js"),J=require("./KUU7WJ55-DN8gk6_R.js"),B=require("./YV4JVR4I-DIthYWMj.js");var W=b.createContext(!1),Y=t.createStoreContext(),Z=Y.useContext,L="input";function E(r,i){i?r.indeterminate=!0:r.indeterminate&&(r.indeterminate=!1)}function D(r,i){return r==="input"&&(!i||i==="checkbox")}function F(r){return Array.isArray(r)?r.toString():r}var H=t.createHook(function(i){var a=i,{store:o,name:s,value:c,checked:f,defaultChecked:g}=a,n=t.__objRest(a,["store","name","value","checked","defaultChecked"]);const m=Z();o=o||m;const[v,h]=b.useState(g??!1),k=B.useStoreState(o,e=>{if(f!==void 0)return f;if((e==null?void 0:e.value)===void 0)return v;if(c!=null){if(Array.isArray(e.value)){const p=F(c);return e.value.includes(p)}return e.value===c}return Array.isArray(e.value)?!1:typeof e.value=="boolean"?e.value:!1}),y=b.useRef(null),q=t.useTagName(y,L),d=D(q,n.type),w=k?k==="mixed":void 0,C=k==="mixed"?!1:k,T=t.disabledFromProps(n),[U,V]=t.useForceUpdate();b.useEffect(()=>{const e=y.current;e&&(E(e,w),!d&&(e.checked=C,s!==void 0&&(e.name=s),c!==void 0&&(e.value=`${c}`)))},[U,w,d,C,s,c]);const $=n.onChange,P=t.useEvent(e=>{if(T){e.stopPropagation(),e.preventDefault();return}if(E(e.currentTarget,w),d||(e.currentTarget.checked=!e.currentTarget.checked,V()),$==null||$(e),e.defaultPrevented)return;const p=e.currentTarget.checked;h(p),o==null||o.setValue(l=>{if(c==null)return p;const x=F(c);return Array.isArray(l)?p?l.includes(x)?l:[...l,x]:l.filter(N=>N!==x):l===x?!1:x})}),_=n.onClick,M=t.useEvent(e=>{_==null||_(e),!e.defaultPrevented&&(d||P(e))});return n=t.useWrapElement(n,e=>t.jsxRuntimeExports.jsx(W.Provider,{value:C,children:e}),[C]),n=t.__spreadProps(t.__spreadValues({role:d?void 0:"checkbox",type:d?"checkbox":void 0,"aria-checked":k},n),{ref:t.useMergeRefs(y,n.ref),onChange:P,onClick:M}),n=J.useCommand(t.__spreadValues({clickOnEnter:!d},n)),t.removeUndefinedValues(t.__spreadValues({name:d?s:void 0,value:d?c:void 0,checked:C},n))}),S=t.forwardRef2(function(i){const a=H(i);return t.createElement(L,a)});const I=u(S).withConfig({shouldForwardProp:A.shouldForwardProp})(({indeterminate:r,order:i="-1",size:a,theme:o,variant:s})=>u.css`
+    ${j.defaultFieldStyles({size:a,variant:s})};
+    ${u.th("checkboxes.default")}
+    position: relative;
+    padding: 0;
+    order: ${i};
+    cursor: pointer;
+    transition: medium;
+    overflow: hidden;
+    ${u.system};
+
+    &[aria-checked='true'] {
+      &:not([disabled]) {
+        ${u.th("checkboxes.checked")};
+      }
+
+      &:not([indeterminate]) {
+        &::after {
+          content: url(${`'data:image/svg+xml; utf8, <svg viewBox="0 0 10 8" xmlns="http://www.w3.org/2000/svg"><path fill="${o.defaultFields.checkableField.checked.color}" d="M7.96171 0.596898C8.24912 0.27893 8.74024 0.25262 9.06024 0.537743C9.37208 0.815607 9.40671 1.28712 9.14514 1.60662L9.11975 1.63611L3.90331 7.40311C3.75365 7.5687 3.54304 7.66003 3.32401 7.66003C3.15017 7.66003 2.98077 7.60235 2.84241 7.49383L2.80848 7.46564L0.943652 5.82577C0.620151 5.54147 0.590221 5.04928 0.877091 4.72749C1.15398 4.41772 1.62383 4.38076 1.94536 4.6368L1.97506 4.66166L3.26156 5.79276L7.96171 0.596898Z" /></svg>'`});
+          position: absolute;
+          top: -2;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          width: 10;
+          margin: auto;
+          text-align: center;
+        }
+      }
+    }
+
+    ${r&&u.css`
+      &:not([disabled]) {
+        ${u.th("checkboxes.checked")};
+      }
+
+      /* stylelint-disable string-no-newline */
+      &::after {
+        content: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 10 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.3973 1.76919C0.953776 1.81988 0.634816 2.04775 0.685235 2.49156C0.732149 2.90436 1.08212 3.03624 1.48789 3.03624L8.6029 2.23086C9.04669 2.18017 9.36538 1.9523 9.31469 1.50849C9.26427 1.06468 8.86389 0.917163 8.41956 0.969201C4.90971 1.38026 4.90828 1.36792 1.3973 1.76919Z' fill='${o.defaultFields.checkableField.checked.color}'/%3E%3C/svg%3E");
+        position: absolute;
+        top: -3.5;
+        right: 0;
+        bottom: 0;
+        left: 2;
+        margin: auto;
+      }
+    `}
+
+    &[disabled] {
+      ${u.th("checkboxes.disabled")}
+
+      &::after {
+        opacity: ${o.defaultFields.checkableField.disabled.opacity};
+      }
+    }
+  `),R=A.forwardRef(({checked:r=!1,Component:i=I,dataTestId:a,disabled:o,indeterminate:s=!1,name:c,onChange:f,size:g,...n},m)=>{const v=h=>{h.target.checked=!h.target.checked,f&&f(h)};return b.createElement(i,{checked:r,"data-testid":a,disabled:o,id:c,indeterminate:s,name:c,onChange:v,ref:m,size:g,...n})});R.displayName="Checkbox";exports.Checkbox=S;exports.Checkbox$1=R;

package/dist/index-CiYwvMF0.js

@@ -0,0 +1,8 @@
+"use client";"use strict";const e=require("react"),o=require("./Icon.js"),I=require("./System.js"),r=require("@xstyled/styled-components"),$=15,k=15,g='<path fill="currentColor" d="m55.542 9.07 41.48 66.67a6.395 6.395 0 0 1 .32 6.225 6.482 6.482 0 0 1-5.123 3.604L9.256 94.957A6.502 6.502 0 0 1 3.12 92.15a6.41 6.41 0 0 1-.33-6.703L44.27 9.39v-.001c1.12-2.053 3.193-3.318 5.544-3.385a6.475 6.475 0 0 1 5.728 3.067Zm-3.217 61.689a3.726 3.726 0 0 0-.493-.601c-1.495-1.497-4.173-1.497-5.655 0a4.016 4.016 0 0 0-1.173 2.833c0 1.042.428 2.085 1.173 2.833A3.992 3.992 0 0 0 49.004 77a4.015 4.015 0 0 0 2.828-1.176 4.414 4.414 0 0 0 .867-1.31c.092-.24.173-.494.226-.748a5.24 5.24 0 0 0 .067-.775c0-.268-.028-.535-.067-.789a4.985 4.985 0 0 0-.226-.748 4.443 4.443 0 0 0-.374-.695ZM45 37.009v20.257a4.005 4.005 0 0 0 4 4.009c2.21 0 4-1.796 4-4.01V37.01c0-2.215-1.79-4.01-4-4.01-2.209 0-4 1.795-4 4.01Z"/>',w={width:$,height:k,block:g},a=t=>e.createElement(o.Icon,{alt:"Alert",content:w,...t}),C=15,E=15,Z='<path fill="currentColor" fill-rule="evenodd" d="M74.68 21.64a6.51 6.51 0 0 1 9.155-.492 6.453 6.453 0 0 1 .707 8.907l-.211.246-43.47 48.058a6.495 6.495 0 0 1-4.828 2.141c-1.449 0-2.86-.48-4.013-1.385l-.283-.235-15.54-13.665a6.455 6.455 0 0 1-.555-9.153 6.512 6.512 0 0 1 8.902-.756l.248.208 10.72 9.425L74.68 21.641Z" clip-rule="evenodd"/>',b={width:C,height:E,block:Z},i=t=>e.createElement(o.Icon,{alt:"Check",content:b,...t}),p=15,A=15,M='<path fill="currentColor" d="M83.95 12.62C74.807 4.513 62.657.85 49.731 2.317 23.412 5.297 2 29.005 2 55.167c0 12.738 4.992 24.178 14.054 32.214C23.876 94.32 33.9 98 44.73 98c1.824 0 3.674-.105 5.536-.315C76.587 94.703 98 70.995 98 44.833c0-12.737-4.99-24.177-14.05-32.213ZM56.492 66.181c2.219-.25 4.228 1.293 4.48 3.432.254 2.139-1.341 4.07-3.562 4.314-.439.048-.878.073-1.314.073-2.838 0-5.599-1.003-7.737-2.84-2.467-2.121-3.882-5.163-3.882-8.347V49.825l-3.97.436c-2.224.244-4.23-1.293-4.482-3.432-.253-2.139 1.342-4.07 3.565-4.314l8.477-.93a4.142 4.142 0 0 1 3.155.963 3.842 3.842 0 0 1 1.352 2.91v17.355a3.29 3.29 0 0 0 1.177 2.529 3.582 3.582 0 0 0 2.74.84Zm-12.33-35.895a4.548 4.548 0 0 1-.365-1.742 4.52 4.52 0 0 1 1.391-3.222c1.092-1.053 2.725-1.533 4.264-1.235.298.052.593.143.877.26.283.104.567.247.81.416.27.17.514.351.728.559a4.51 4.51 0 0 1 1.377 3.223c0 .298-.027.597-.095.883a3.677 3.677 0 0 1-.27.858 3.699 3.699 0 0 1-.43.78c-.175.246-.366.48-.582.688a4.43 4.43 0 0 1-.729.572 5.21 5.21 0 0 1-.81.416 5.177 5.177 0 0 1-.877.26c-.31.051-.62.09-.93.09a4.846 4.846 0 0 1-3.928-2.027 5.523 5.523 0 0 1-.432-.78Z"/>',L={width:p,height:A,block:M},s=t=>e.createElement(o.Icon,{alt:"Information",content:L,...t}),V=15,q=15,v='<path fill="currentColor" fill-rule="evenodd" d="M80.086 40.154a2.402 2.402 0 0 0-2.25-1.02l-24.929 2.81V6.365a2.37 2.37 0 0 0-1.812-2.294 2.4 2.4 0 0 0-2.692 1.183L19.781 58.402a2.345 2.345 0 0 0 .133 2.443 2.4 2.4 0 0 0 2.25 1.021l24.928-2.81v35.578a2.37 2.37 0 0 0 1.813 2.296c.194.047.388.07.58.07.869 0 1.69-.468 2.111-1.253l28.624-53.15a2.348 2.348 0 0 0-.134-2.443Z" clip-rule="evenodd"/>',y={width:V,height:q,block:v},h=t=>e.createElement(o.Icon,{alt:"Promote",content:y,...t}),S=15,x=15,P='<path fill="currentColor" fill-rule="evenodd" d="M5.863 49.971c-3.518 3.745-3.835 8.974-.723 11.924L41.114 96c3.378 3.203 9.445 2.476 13.264-1.589L95.137 51.03c3.518-3.745 3.835-8.974.723-11.924L59.886 5c-3.378-3.203-9.445-2.476-13.264 1.589L5.862 49.97ZM53.325 64.76c.145.214.267.454.373.695.093.24.174.494.227.748.039.254.067.522.067.789 0 .254-.028.52-.067.775a5 5 0 0 1-.226.748c-.107.24-.228.481-.374.695a3.822 3.822 0 0 1-.493.615A4.015 4.015 0 0 1 50.004 71a3.991 3.991 0 0 1-2.827-1.176 4.062 4.062 0 0 1-1.173-2.833c0-1.056.428-2.098 1.173-2.833 1.481-1.497 4.16-1.497 5.655 0 .185.173.345.387.493.601ZM46 31.009a4.005 4.005 0 0 1 4-4.01c2.21 0 4 1.796 4 4.01v20.257a4.005 4.005 0 0 1-4 4.009c-2.209 0-4-1.796-4-4.01V31.01Z" clip-rule="evenodd"/>',R={width:S,height:x,block:P},u=t=>e.createElement(o.Icon,{alt:"SquareAlert",content:R,...t}),B=r.divBox(({variant:t})=>r.css`
+    display: inline-flex;
+    ${r.th(`variantIcon.${t}`)}
+    flex-shrink: 0;
+    align-self: center;
+
+    ${r.system};
+  `),d=I.forwardRef(({icon:t,size:n="md",variant:c,...f},m)=>{const l=e.useMemo(()=>{if(t===null)return null;if(t)return t;if(c==="default")return e.createElement(h,{size:n});if(c==="success")return e.createElement(i,{size:n});if(c==="info")return e.createElement(s,{size:n});if(c==="warning")return e.createElement(a,{size:n});if(c==="danger")return e.createElement(u,{size:n})},[n,t,c]);return l?e.createElement(B,{ref:m,variant:c,...f},l):null});d.displayName="VariantIcon";exports.AlertIcon=a;exports.CheckIcon=i;exports.InformationIcon=s;exports.PromoteIcon=h;exports.SquareAlertIcon=u;exports.VariantIcon=d;

package/dist/index-Cjf3wLkx.mjs

@@ -0,0 +1,272 @@
+"use client";
+import e from "react";
+import { forwardRef as d } from "./System.mjs";
+import a, { css as m, th as n, system as y, useTheme as p } from "@xstyled/styled-components";
+import { Box as i } from "./Box.mjs";
+import { CloseButton as $ } from "./CloseButton.mjs";
+import { D } from "./SYRFVSLH-DXZgEwus.mjs";
+import { Text as f } from "./Text.mjs";
+import { Icon as k } from "./Icon.mjs";
+import { Button as v } from "./Button.mjs";
+import { D as B, u as C } from "./JC64G2H7-HxATiU-t.mjs";
+import { D as I } from "./AXB53BZF-DCqNWRx3.mjs";
+const S = 15, T = 15, _ = '<path fill="currentColor" fill-rule="evenodd" d="M84.496 42.08 26.17 48.79l19.538-21.976a4.112 4.112 0 0 0-.307-5.768 4.02 4.02 0 0 0-5.715.31L13.03 51.338c-.027.03-.044.066-.07.098-.089.105-.166.219-.244.333-.07.105-.144.209-.205.32-.066.119-.116.243-.17.368-.05.118-.104.234-.142.357-.043.129-.067.261-.095.395-.029.129-.058.256-.073.388-.015.128-.014.26-.016.393-.003.104-.02.206-.014.31.003.04.015.078.019.118.003.037-.003.073.001.111.011.108.045.207.065.312.022.115.04.229.07.34.043.157.104.304.165.453.037.088.067.18.109.265.082.166.182.318.285.47.043.06.075.125.12.184.156.208.331.4.524.572l26.658 23.848a4.02 4.02 0 0 0 5.71-.349 4.114 4.114 0 0 0-.345-5.767L25.518 57.088l59.895-6.89c2.219-.256 3.814-2.28 3.56-4.52-.252-2.242-2.253-3.859-4.477-3.597Z" clip-rule="evenodd"/>', j = {
+  width: S,
+  height: T,
+  block: _
+}, F = (t) => /* @__PURE__ */ e.createElement(k, { alt: "ArrowLeft", content: j, ...t }), L = (t) => {
+  switch (t) {
+    case "top":
+      return {
+        top: "0 !important",
+        right: 0,
+        left: 0,
+        transform: "translateY(-100%)"
+      };
+    case "right":
+      return {
+        top: "0 !important",
+        right: 0,
+        bottom: 0,
+        transform: "translateX(100%)"
+      };
+    case "bottom":
+      return {
+        right: 0,
+        bottom: 0,
+        left: 0,
+        transform: "translateY(100%)"
+      };
+    case "left":
+      return {
+        top: "0 !important",
+        bottom: 0,
+        left: 0,
+        transform: "translateX(-100%)"
+      };
+  }
+}, u = ["sm", "md", "lg"], O = (t, r) => {
+  switch (r) {
+    case "top":
+    case "bottom":
+      return u.includes(t) ? n(`drawers.sizes.vertical.${t}`) : {
+        height: t
+      };
+    case "right":
+    case "left":
+      return u.includes(t) ? n(`drawers.sizes.horizontal.${t}`) : {
+        width: t
+      };
+  }
+}, R = a.divBox(
+  ({ placement: t, size: r }) => m`
+    ${n("cards.default")};
+    ${n("drawers.default")};
+    ${L(t)}
+    ${O(r, t)}
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    opacity: 0;
+    transition: medium;
+    max-width: 100%;
+
+    &[data-enter] {
+      opacity: 1;
+      transform: translate(0, 0);
+    }
+  `
+), g = a.div.withConfig({
+  shouldForwardProp: (t) => !["hideOnInteractOutside"].includes(t)
+})(
+  ({ hideOnInteractOutside: t }) => m`
+    ${n("drawers.backdrop")};
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    opacity: 0;
+    transition: opacity 150ms ease-in-out;
+    ${y};
+
+    ${t && m`
+      cursor: pointer;
+    `}
+
+    &[data-enter] {
+      opacity: 1;
+    }
+  `
+), A = a.divBox`
+  ${n("drawers.title")};
+`, Y = a.divBox`
+  ${n("drawers.content")};
+`, P = a($)`
+  ${n("drawers.closeButton")};
+`, X = a.divBox`
+  ${n("drawers.footer")};
+`, h = ({ zIndex: t = "2", ...r }) => {
+  const o = p();
+  return /* @__PURE__ */ e.createElement(i, { h: "0" }, /* @__PURE__ */ e.createElement(
+    D,
+    {
+      render: /* @__PURE__ */ e.createElement(
+        P,
+        {
+          left: `calc(100% - ${o.space.lg} - ${o.buttons.sizes.sm.height})`,
+          mt: "lg",
+          position: "sticky",
+          top: "0",
+          zIndex: t,
+          ...r
+        }
+      )
+    }
+  ));
+}, Z = d((t, r) => /* @__PURE__ */ e.createElement(Y, { flex: "1", overflowY: { md: "auto" }, ref: r, ...t })), z = d((t, r) => /* @__PURE__ */ e.createElement(
+  X,
+  {
+    bottom: { xs: 0, md: "auto" },
+    position: { xs: "sticky", md: "static" },
+    ref: r,
+    w: "100%",
+    ...t
+  }
+)), H = ({ children: t, zIndex: r = "1", ...o }) => /* @__PURE__ */ e.createElement(
+  A,
+  {
+    alignItems: "center",
+    display: "flex",
+    justifyContent: "space-between",
+    position: { xs: "sticky", md: "static" },
+    top: { xs: 0, md: "auto" },
+    w: "100%",
+    zIndex: r,
+    ...o
+  },
+  /* @__PURE__ */ e.createElement(f, { m: "0", variant: "h3", w: "100%" }, t)
+), M = a.divBox`
+  overflow-y: scroll;
+  flex: 1;
+  margin: 0 auto;
+  width: 100%;
+`, q = a.divBox(
+  ({ size: t }) => m`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    height: 48;
+    width: 48;
+    border-radius: md;
+    background-color: beige-20;
+    transition: background-color ${n("transitions.medium")};
+
+    ${t === "sm" && m`
+      height: 32;
+      width: 32;
+    `}
+  `
+), G = d(
+  ({ children: t, maxWidth: r = 820, store: o, ...s }, l) => {
+    const c = p();
+    return /* @__PURE__ */ e.createElement(
+      U,
+      {
+        ...s,
+        autoFocusOnShow: !1,
+        h: { _: "100%", md: "calc(100% - 3rem)" },
+        hideOnInteractOutside: !0,
+        placement: "bottom",
+        ref: l,
+        store: o,
+        style: {
+          borderTopLeftRadius: c.radii.xxl,
+          borderTopRightRadius: c.radii.xxl
+        },
+        withBackdrop: !0,
+        withCloseButton: !0
+      },
+      /* @__PURE__ */ e.createElement(M, { maxWidth: r }, /* @__PURE__ */ e.createElement(i, { p: { _: "xl md", md: "3xl xl" } }, t))
+    );
+  }
+), J = ({
+  action: t,
+  icon: r,
+  onBackButtonClick: o,
+  subtitle: s,
+  title: l
+}) => /* @__PURE__ */ e.createElement(
+  i,
+  {
+    alignItems: { md: "center" },
+    backgroundColor: "neutral-10",
+    display: "flex",
+    flexDirection: { _: "column", md: "row" },
+    gap: "xl",
+    justifyContent: "space-between",
+    mb: "xl",
+    mt: "-md",
+    position: "sticky",
+    py: "md",
+    top: 0,
+    zIndex: 1
+  },
+  /* @__PURE__ */ e.createElement(i, { alignItems: "center", display: "flex", gap: { _: "md", md: "xl" } }, !!o && /* @__PURE__ */ e.createElement(v, { onClick: o, shape: "circle", size: "lg", variant: "ghost" }, /* @__PURE__ */ e.createElement(F, null)), !!r && /* @__PURE__ */ e.createElement(K, { icon: r }), /* @__PURE__ */ e.createElement(i, { display: "flex", flexDirection: "column", gap: "xxs" }, /* @__PURE__ */ e.createElement(f, { pr: "xl", variant: "h3" }, l), s)),
+  t && /* @__PURE__ */ e.createElement(i, { alignItems: "center", display: "flex", flexShrink: 0, gap: "md" }, t)
+), K = ({ icon: t, size: r = "md" }) => /* @__PURE__ */ e.createElement(q, { size: r }, /* @__PURE__ */ e.createElement(t, { color: "neutral-90", size: r })), N = d(
+  ({
+    children: t,
+    hideOnInteractOutside: r = !0,
+    placement: o = "right",
+    size: s = "lg",
+    store: l,
+    withBackdrop: c = !1,
+    withCloseButton: w = !0,
+    ...E
+  }, b) => /* @__PURE__ */ e.createElement(
+    B,
+    {
+      backdrop: c ? /* @__PURE__ */ e.createElement(g, { hideOnInteractOutside: r }) : !1,
+      hideOnInteractOutside: r,
+      modal: c,
+      ref: b,
+      render: /* @__PURE__ */ e.createElement(R, { placement: o, size: s }),
+      store: l,
+      ...E
+    },
+    /* @__PURE__ */ e.createElement(e.Fragment, null, w && /* @__PURE__ */ e.createElement(h, null), t)
+  )
+);
+function ct(t = {}) {
+  return C({ animated: !0, ...t });
+}
+const Q = ({
+  hideOnInteractOutside: t = !0,
+  ...r
+}) => /* @__PURE__ */ e.createElement(g, { hideOnInteractOutside: t, ...r }), x = d(({ as: t, store: r, ...o }, s) => /* @__PURE__ */ e.createElement(
+  I,
+  {
+    ref: s,
+    render: t ? (l) => /* @__PURE__ */ e.createElement(t, { ...l }) : void 0,
+    store: r,
+    ...o
+  }
+)), U = Object.assign(N, {
+  Trigger: x,
+  Backdrop: Q,
+  Close: h,
+  Title: H,
+  Content: Z,
+  Footer: z
+}), mt = Object.assign(G, { Trigger: x, Header: J });
+export {
+  F as A,
+  Q as D,
+  x as T,
+  U as a,
+  mt as b,
+  ct as u
+};