welcome-ui 0.32.1 → 1.0.0-beta.1

package/dist/WuiProvider.mjs

@@ -0,0 +1,459 @@
+"use client";
+import a, { useState as b, useEffect as d } from "react";
+import { css as i, createGlobalStyle as p, th as m, ThemeProvider as f } from "@xstyled/styled-components";
+function g(e, o, n) {
+  return n ? o.map((t) => `url('${e}.${t}') format('${t}-variations')`).join(", ") : o.map((t) => `url('${e}.${t}') format('${t}')`).join(", ");
+}
+function h({
+  name: e,
+  variation: {
+    display: o = "swap",
+    extensions: n = ["woff2", "woff"],
+    isVariable: t,
+    style: r,
+    unicodeRange: s,
+    url: l,
+    weight: c
+  }
+}) {
+  return i`
+    @font-face {
+      font-family: ${e};
+      src: ${g(l, n, t)};
+      font-display: ${o};
+      ${c && i`
+        font-weight: ${c};
+      `}
+      ${r && i`
+        font-style: ${r};
+      `}
+      ${s && i`
+        unicode-range: ${s};
+      `}
+    }
+  `;
+}
+const y = () => ({ theme: e }) => !e || !e.fontFaces ? null : Object.entries(e.fontFaces).map(
+  ([o, n]) => n.map((t) => h({ name: o, variation: t }))
+), w = i`
+  html,
+  body,
+  div,
+  span,
+  applet,
+  object,
+  iframe,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  blockquote,
+  pre,
+  a,
+  abbr,
+  acronym,
+  address,
+  big,
+  cite,
+  code,
+  del,
+  dfn,
+  em,
+  img,
+  ins,
+  kbd,
+  q,
+  s,
+  samp,
+  small,
+  strike,
+  strong,
+  sub,
+  sup,
+  tt,
+  var,
+  b,
+  u,
+  i,
+  center,
+  dl,
+  dt,
+  dd,
+  ol,
+  ul,
+  li,
+  fieldset,
+  form,
+  label,
+  legend,
+  table,
+  caption,
+  tbody,
+  tfoot,
+  thead,
+  tr,
+  th,
+  td,
+  article,
+  aside,
+  canvas,
+  details,
+  embed,
+  figure,
+  figcaption,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  output,
+  ruby,
+  section,
+  summary,
+  time,
+  mark,
+  audio,
+  video {
+    min-width: 0;
+    min-height: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+  }
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  section {
+    display: block;
+  }
+  ol,
+  ul {
+    list-style: none;
+  }
+  blockquote,
+  q {
+    quotes: none;
+  }
+  blockquote::before,
+  blockquote::after,
+  q::before,
+  q::after {
+    content: '';
+    content: none;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  a {
+    text-decoration: none;
+  }
+  img {
+    overflow: hidden;
+  }
+  input {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+  }
+  input::-webkit-search-cancel-button {
+    display: none;
+  }
+  :focus {
+    outline: none !important; /* important for firefox */
+  }
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  html {
+    height: 100%;
+  }
+  body {
+    min-height: 100%;
+    padding-top: 1px;
+    margin-top: -1px;
+  }
+`, x = i`
+  html {
+    line-height: 1.15;
+    -webkit-text-size-adjust: 100%;
+  }
+
+  body {
+    margin: 0;
+  }
+
+  main {
+    display: block;
+  }
+
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+
+  hr {
+    box-sizing: content-box;
+    height: 0;
+    overflow: visible;
+  }
+
+  pre {
+    font-family: monospace, monospace;
+    font-size: 1em;
+  }
+
+  a {
+    background-color: transparent;
+  }
+
+  abbr[title] {
+    border-bottom: none;
+    text-decoration: underline;
+    text-decoration: underline dotted;
+  }
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace;
+    font-size: 1em;
+  }
+
+  small {
+    font-size: 80%;
+  }
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  img {
+    border-style: none;
+  }
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit;
+    font-size: 100%;
+    line-height: 1.15;
+    margin: 0;
+  }
+
+  button,
+  input {
+    overflow: visible;
+  }
+
+  button,
+  select {
+    text-transform: none;
+  }
+
+  button,
+  [type='button'],
+  [type='reset'],
+  [type='submit'] {
+    -webkit-appearance: button;
+  }
+
+  button::-moz-focus-inner,
+  [type='button']::-moz-focus-inner,
+  [type='reset']::-moz-focus-inner,
+  [type='submit']::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+
+  button:-moz-focusring,
+  [type='button']:-moz-focusring,
+  [type='reset']:-moz-focusring,
+  [type='submit']:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+
+  legend {
+    box-sizing: border-box;
+    color: inherit;
+    display: table;
+    max-width: 100%;
+    padding: 0;
+    white-space: normal;
+  }
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  textarea {
+    overflow: auto;
+  }
+
+  [type='checkbox'],
+  [type='radio'] {
+    box-sizing: border-box;
+    padding: 0;
+  }
+
+  [type='number']::-webkit-inner-spin-button,
+  [type='number']::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  [type='search'] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+  }
+
+  [type='search']::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit;
+  }
+
+  details {
+    display: block;
+  }
+
+  summary {
+    display: list-item;
+  }
+
+  template {
+    display: none;
+  }
+
+  [hidden] {
+    display: none;
+  }
+`, k = i`
+  * {
+    &,
+    &::before,
+    &::after {
+      box-sizing: border-box;
+    }
+  }
+`;
+function v() {
+  return i`
+    body,
+    button,
+    input,
+    select,
+    textarea {
+      /* stylelint-disable-next-line */
+      font-family: texts;
+      -webkit-font-smoothing: antialiased;
+      line-height: html;
+      letter-spacing: html;
+    }
+  `;
+}
+const z = p(
+  ({ useReset: e }) => i`
+    ${x};
+    ${y()};
+    ${v()};
+    ${e ? w : k};
+
+    html {
+      color: neutral-60;
+    }
+
+    ::selection {
+      ${m("selection")};
+    }
+
+    /* for firefox */
+    &[type='search'] {
+      appearance: none;
+    }
+
+    /* to remove x on macos */
+    input[type='search']::-webkit-search-decoration,
+    input[type='search']::-webkit-search-cancel-button,
+    input[type='search']::-webkit-search-results-button,
+    input[type='search']::-webkit-search-results-decoration {
+      appearance: none;
+    }
+
+    /* Fix to toast notification when useReset prop is add to WUI provider */
+    .Toaster__message-wrapper {
+      min-height: 'auto';
+    }
+  `
+), u = "data-wui-hidefocusrings", $ = p(
+  () => i`
+    [${u}] *:focus {
+      outline: none;
+    }
+  `
+), F = ({
+  children: e,
+  reactRootId: o
+}) => {
+  const [n, t] = b(!1);
+  return d(() => {
+    const r = n ? "keydown" : "mousemove", s = () => t((c) => !c);
+    window.addEventListener(r, s);
+    const l = document.getElementById(o);
+    return l && (n ? l.setAttribute(u, "true") : l.removeAttribute(u)), () => {
+      window.removeEventListener(r, s);
+    };
+  }, [n, o]), /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement($, null), e);
+}, E = ({
+  children: e,
+  hasGlobalStyle: o = !0,
+  reactRootId: n = "root",
+  shouldHideFocusRingOnClick: t = !0,
+  theme: r,
+  useReset: s
+}) => /* @__PURE__ */ a.createElement(f, { theme: r }, /* @__PURE__ */ a.createElement(a.Fragment, null, o && /* @__PURE__ */ a.createElement(z, { useReset: s }), t ? /* @__PURE__ */ a.createElement(F, { reactRootId: n }, e) : e));
+E.displayName = "WuiProvider";
+export {
+  E as WuiProvider
+};

package/dist/index.js

@@ -0,0 +1,18 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("@xstyled/styled-components"),b=require("./Test.js"),p=require("./WuiProvider.js"),f=e=>{const{colors:t}=e;return{default:{backgroundColor:t["primary-50"]}}};function m(e,t){if(typeof e!="object"||e===null)return t;if(typeof t!="object"||t===null)return e;const o={...e};for(const l in t)t.hasOwnProperty(l)&&(o[l]=m(o[l],t[l]));return o}const x={"beige-10":"#FBF9F7","beige-20":"#F6F3EF","beige-30":"#EAE4DE","beige-40":"#D2CBC3","beige-50":"#A7A096","beige-60":"#605B55","beige-70":"#4D4944","beige-80":"#33302D","beige-90":"#1E1C1A","blue-10":"#E0F5FF","blue-20":"#BBEAFF","blue-30":"#9BDEF7","blue-40":"#55C3E9","blue-50":"#27A5D0","blue-60":"#057AA3","blue-70":"#025A79","blue-80":"#013C50","blue-90":"#00202B","green-10":"#EAFFD4","green-20":"#D6F6B4","green-30":"#BADE94","green-40":"#9FC873","green-50":"#83AD57","green-60":"#5A8034","green-70":"#40611F","green-80":"#2A4210","green-90":"#142603","neutral-10":"#FFFFFF","neutral-20":"#F3F3F3","neutral-30":"#DEDEDE","neutral-40":"#BDBDBD","neutral-50":"#989898","neutral-60":"#585858","neutral-70":"#444444","neutral-80":"#212121","neutral-90":"#000000","orange-10":"#FFEBCE","orange-20":"#FFD495","orange-30":"#FFBB59","orange-40":"#FF9F14","orange-50":"#DB860A","orange-60":"#A6670A","orange-70":"#824F06","orange-80":"#573607","orange-90":"#382303","pink-10":"#FFEAF5","pink-20":"#FFD5EB","pink-30":"#FEB7DC","pink-40":"#F696C8","pink-50":"#E468A8","pink-60":"#C24887","pink-70":"#972962","pink-80":"#6D1142","pink-90":"#3C0725","red-10":"#FBDEDC","red-20":"#FCC7C3","red-30":"#FDB3AE","red-40":"#FF9490","red-50":"#FF6165","red-60":"#E1003A","red-70":"#A80029","red-80":"#75001A","red-90":"#450101","red-orange-10":"#FFDED0","red-orange-20":"#FFC9B2","red-orange-30":"#FFB595","red-orange-40":"#FF9868","red-orange-50":"#E67B49","red-orange-60":"#C45927","red-orange-70":"#9F4217","red-orange-80":"#6D2605","red-orange-90":"#451701","teal-10":"#D5FFFA","teal-20":"#AAF4EB","teal-30":"#6DE1D2","teal-40":"#00C7AE","teal-50":"#01AA95","teal-60":"#008070","teal-70":"#00544A","teal-80":"#003D35","teal-90":"#00211D","violet-10":"#F2F2FF","violet-20":"#E0E0FF","violet-30":"#C9C9FF","violet-40":"#ACACFF","violet-50":"#9080F0","violet-60":"#7958D6","violet-70":"#593CAC","violet-80":"#422A86","violet-90":"#1F0E51","yellow-10":"#FFF8D9","yellow-20":"#FFF1B2","yellow-30":"#FFE166","yellow-40":"#FFCD00","yellow-50":"#E5B800","yellow-60":"#B69200","yellow-70":"#846A01","yellow-80":"#604D00","yellow-90":"#423500"},h=e=>({...e,"primary-10":e["yellow-10"],"primary-20":e["yellow-20"],"primary-30":e["yellow-30"],"primary-40":e["yellow-40"],"primary-50":e["yellow-50"],"primary-60":e["yellow-60"],"primary-70":e["yellow-70"],"primary-80":e["yellow-80"],"primary-90":e["yellow-90"],"secondary-blue":e["blue-40"],"secondary-green":e["green-30"],"secondary-orange":e["red-orange-40"],"secondary-pink":e["pink-40"],"secondary-teal":e["teal-40"],"secondary-violet":e["violet-40"],overlay:"rgba(0, 0, 0, 0.55)"}),g=h(x),w=Object.keys(g).reduce((e,t)=>{if(t.startsWith("secondary-")||t==="overlay")return e;const o=100-Number(t.slice(-2)),l=t.slice(0,t.length-2);return{...e,[t]:g[`${l}${o}`]}},{}),A={...g,...h(w)},E={colors:A},y=e=>({"welcome-font":[{url:`${e.fontsUrl}/welcome-font-regular`,weight:"400"},{url:`${e.fontsUrl}/welcome-font-medium`,weight:"500"},{url:`${e.fontsUrl}/welcome-font-bold`,weight:"600"},{url:`${e.fontsUrl}/welcome-font-regular-italic`,style:"italic",weight:"400"},{url:`${e.fontsUrl}/welcome-font-medium-italic`,style:"italic",weight:"500"},{url:`${e.fontsUrl}/welcome-font-bold-italic`,style:"italic",weight:"600"}],"welcome-icon-font":[{url:`${e.fontsUrl}/icon-font/__ICON_FONT_HASH__/welcome-icon-font`,display:"block"}],"work-sans":[{url:`${e.fontsUrl}/work-sans-variable`,isVariable:!0,stretch:"75% 125%",weight:"100 1000"}]}),D=(e,t)=>{const{toEm:o,toRem:l}=t,n=l;return{h0:n(65),h1:n(45),h2:n(36),h3:n(26),h4:n(20),h5:n(16),h6:n(14),lg:n(18),md:n(16),sm:n(14),"subtitle-md":n(13),"subtitle-sm":n(11),xs:n(12)}},T=({defaultLineHeight:e,toRem:t})=>({html:e,h0:t(72),h1:t(48),h2:t(40),h3:t(32),h4:t(24),h5:t(18),h6:t(16),lg:t(24),md:t(18),sm:t(18),xs:t(14),"subtitle-md":e,"subtitle-sm":e}),B={regular:400,medium:500,bold:600},v=({defaultLetterSpacing:e,toRem:t})=>({html:e,h0:t(-1.7),h1:t(-1.2),h2:t(-1),h3:t(-.9),h4:t(-.6),h5:t(-.5),h6:t(-.5),lg:e,md:e,sm:e,xs:t(-.2),"subtitle-md":t(-.2),"subtitle-sm":t(-.2)}),k=e=>{const{fontWeights:t}=e;return{h0:t.bold,h1:t.bold,h2:t.bold,h3:t.bold,h4:t.bold,h5:t.bold,h6:t.bold,lg:t.regular,md:t.regular,sm:t.regular,"subtitle-md":t.bold,"subtitle-sm":t.medium,xs:t.regular}},C=e=>{const{fonts:t}=e;return{h0:t.headings,h1:t.headings,h2:t.headings,h3:t.headings,h4:t.headings,h5:t.headings,h6:t.headings,"subtitle-md":t.headings,"subtitle-sm":t.headings}},_=()=>({"subtitle-md":"uppercase","subtitle-sm":"uppercase"}),$=e=>{const{colors:t}=e;return{h0:t["neutral-90"],h1:t["neutral-90"],h2:t["neutral-90"],h3:t["neutral-90"],h4:t["neutral-90"],h5:t["neutral-90"],h6:t["neutral-90"]}},S=e=>{const{fontSizes:t,letterSpacings:o,lineHeights:l,textsFontColors:n,textsFontFamily:u,textsFontWeights:F,textsTextTransform:d}=e;return Object.keys(t).reduce((s,r)=>({...s,[r]:{color:n[r],fontFamily:u[r]||void 0,fontWeight:F[r],fontSize:t[r],lineHeight:l[r]||l.lg,letterSpacing:o[r]||void 0,textTransform:d[r]||void 0}}),{})},U=(e,t,o)=>({texts:[e,"sans-serif"].join(", "),headings:[t,"sans-serif"].join(", "),icons:o}),a={primary:"ease",secondary:"linear",tertiary:"cubic-bezier(0.41, 0.094, 0.54, 0.07)"},W={slow:`500ms ${a.tertiary}`,medium:`300ms ${a.primary}`,fast:`100ms ${a.secondary}`},N=({colors:e})=>({default:c.css`
+      background-image: linear-gradient(
+        0deg,
+        ${e["primary-40"]},
+        ${e["primary-40"]} 100%
+      );
+      background-repeat: no-repeat;
+      background-size: 100% 50%;
+      background-position-y: calc(200% - 2px);
+      transition:
+        background-position-y 250ms,
+        background-size 250ms,
+        color 250ms;
+    `,hover:c.css`
+      opacity: 1;
+      background-position-y: 100%;
+      background-size: 100% 100%;
+    `}),O=e=>({none:"0",sm:e.toRem(2),md:e.toRem(4),lg:e.toRem(8),xl:e.toRem(16),xxl:e.toRem(24),full:"100%"}),L={sm:"1px",md:"2px",lg:"3px"},I={xs:0,sm:480,md:736,lg:980,xl:1280,xxl:1440,"3xl":1620,"4xl":1920},z={sm:"1px 2px 4px 0 rgba(0,0,0,0.05)",md:"3px 4px 10px 0 rgba(0,0,0,0.07)"},H=e=>({xxs:e.toRem(2),xs:e.toRem(4),sm:e.toRem(8),md:e.toRem(12),lg:e.toRem(16),xl:e.toRem(24),xxl:e.toRem(32),"3xl":e.toRem(48),"4xl":e.toRem(64),"5xl":e.toRem(96),"6xl":e.toRem(128),"7xl":e.toRem(192)}),P=e=>({backgroundColor:e.colors["primary-40"],color:e.colors["neutral-90"]}),M=({colors:e})=>{function t(o=e["primary-40"]){return{boxShadow:`0 0 0 2px ${o}`}}return t},R="work-sans",q=16,G="-0.019rem",Y=1.15,V="https://cdn.welcome-ui.com/fonts",Z="welcome-font",J="welcome-icon-font",K=(e={})=>{const{defaultFontFamily:t=R,defaultFontSize:o=q,defaultLetterSpacing:l=G,defaultLineHeight:n=Y,fontsUrl:u=V,headingFontFamily:F=Z,iconFontFamily:d=J,...s}=e;let r={};return r.transformers={...c.rpxTransformers},r.toEm=i=>`${i/o}em`,r.toRem=i=>`${i/o}rem`,r.toPx=i=>`${i*o}px`,r.colors=g,r.fontsUrl=u,r.fontFaces=y(r),r.fontSizes=D("rem",r),r.defaultLineHeight=n,r.defaultLetterSpacing=l,r.lineHeights=T(r),r.fontWeights=B,r.letterSpacings=v(r),r.fonts=U(t,F,d),r.borderWidths=L,r.screens=I,r.space=H(r),r.inset=r.space,r.radii=O(r),r.transitions=W,r.timingFunction=a,r.shadows=z,r=m(r,s),r.selection=P(r),r.underline=N(r),r.focus=M(r),r.textsFontWeights=k(r),r.textsFontFamily=C(r),r.textsFontColors=$(r),r.textsTextTransform=_(),r.texts=S(r),r.test=f(r),r.states=c.defaultTheme.states,r=m(r,s),r};exports.Test=b.Test;exports.WuiProvider=p.WuiProvider;exports.createTheme=K;exports.darkTheme=E;