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

package/dist/Shape.js

@@ -0,0 +1,23 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),d=require("./System.js"),s=require("@xstyled/styled-components"),r=require("./get-max-width-height-CDLBnp_J.js"),l=require("./Box.js"),h=(t,e,i)=>s.css`
+  width: ${r.getMax(t,e)};
+  height: ${r.getMax(t,e)};
+  border-radius: ${i==="circle"&&"50%"};
+`,u=s(l.Box)(({h:t,shape:e,w:i})=>s.css`
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      object-fit: cover;
+      overflow: hidden;
+      width: 100%;
+      height: 100%;
+    }
+
+    ${s.system};
+
+    /* we must override shapeStyles (let this line under ${s.system}) */
+    ${e&&h(i,t,e)}
+  `),o=d.forwardRef(({children:t,dataTestId:e,shape:i,...c},n)=>a.createElement(u,{"data-testid":e,ref:n,shape:i,...c},t));o.displayName="Shape";exports.Shape=o;

package/dist/Shape.mjs

@@ -0,0 +1,37 @@
+"use client";
+import l from "react";
+import { forwardRef as m } from "./System.mjs";
+import n, { css as s, system as o } from "@xstyled/styled-components";
+import { g as r } from "./get-max-width-height-DoUro2T7.mjs";
+import { Box as c } from "./Box.mjs";
+const f = (t, e, i) => s`
+  width: ${r(t, e)};
+  height: ${r(t, e)};
+  border-radius: ${i === "circle" && "50%"};
+`, p = n(c)(
+  ({ h: t, shape: e, w: i }) => s`
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      object-fit: cover;
+      overflow: hidden;
+      width: 100%;
+      height: 100%;
+    }
+
+    ${o};
+
+    /* we must override shapeStyles (let this line under ${o}) */
+    ${e && f(i, t, e)}
+  `
+), h = m(
+  ({ children: t, dataTestId: e, shape: i, ...a }, d) => /* @__PURE__ */ l.createElement(p, { "data-testid": e, ref: d, shape: i, ...a }, t)
+);
+h.displayName = "Shape";
+export {
+  h as Shape
+};

package/dist/Slider.js

@@ -0,0 +1,190 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),Y=require("./Text.js"),P=require("./InputText.js"),Z=require("./System.js"),p=require("./Box.js"),F=require("./Hint.js"),n=require("@xstyled/styled-components"),H=n.css`
+  appearance: none;
+  cursor: pointer;
+  height: 20;
+  width: 20;
+  transform: scale(1);
+  transition:
+    background-color ${n.th.transition("medium")},
+    border-color ${n.th.transition("medium")},
+    transform 100ms ease-in-out;
+`,O=n.css`
+  ${n.th("sliders.focused")};
+  transform: scale(1.2);
+`,ee=n.css`
+  position: absolute;
+  width: 100%;
+  height: ${n.th("space.xs")};
+`,le=n.input(({borderSelectorColor:l,disabled:c})=>n.css`
+    ${n.th("sliders.default")};
+    appearance: none;
+    cursor: pointer;
+    background-repeat: no-repeat;
+    border-radius: 0;
+    margin: auto 0;
+    width: 100%;
+    height: ${n.th("space.xs")};
+
+    &::-webkit-slider-thumb {
+      ${n.th("sliders.selector")};
+      ${H};
+      border-color: ${l||"transparent"};
+    }
+
+    &::-moz-range-thumb {
+      ${n.th("sliders.selector")};
+      ${H};
+      border-color: ${l||"transparent"};
+    }
+
+    &:active,
+    &:focus-visible {
+      outline: none;
+
+      &::-webkit-slider-thumb {
+        ${O};
+      }
+
+      &::-moz-range-thumb {
+        ${O};
+      }
+    }
+
+    ${c&&n.css`
+      ${n.th("sliders.disabled")}
+      cursor: not-allowed;
+
+      &::-webkit-slider-thumb {
+        ${n.th("sliders.selector.disabled")};
+        cursor: not-allowed;
+      }
+
+      &::-moz-range-thumb {
+        ${n.th("sliders.selector.disabled")};
+        cursor: not-allowed;
+      }
+
+      &:active {
+        &::-webkit-slider-thumb {
+          ${n.th("sliders.focused.disabled")};
+        }
+
+        &::-moz-range-thumb {
+          ${n.th("sliders.focused.disabled")};
+        }
+      }
+    `};
+  `),Q=n.input(({borderSelectorColor:l,disabled:c})=>n.css`
+    ${n.th("sliders.rangeInput")}
+    appearance: none;
+    pointer-events: none;
+    position: absolute;
+    height: 0;
+    width: 100%;
+    outline: none;
+    z-index: 1;
+    top: ${n.th("space.xxs")};
+
+    &::-webkit-slider-thumb {
+      ${n.th("sliders.selector")};
+      ${H};
+
+      border-color: ${l||"transparent"};
+      top: ${n.th("space.sm")};
+      pointer-events: all;
+      position: relative;
+    }
+
+    &::-moz-range-thumb {
+      ${n.th("sliders.selector")};
+      ${H};
+
+      border-color: ${l||"transparent"};
+      top: ${n.th("space.sm")};
+      pointer-events: all;
+      position: relative;
+    }
+
+    &:active,
+    &:focus-visible {
+      &::-webkit-slider-thumb {
+        ${O};
+      }
+
+      &::-moz-range-thumb {
+        ${O};
+      }
+    }
+
+    ${c&&n.css`
+      &::-webkit-slider-thumb {
+        ${n.th("sliders.selector.disabled")};
+        cursor: not-allowed;
+      }
+
+      &::-moz-range-thumb {
+        ${n.th("sliders.selector.disabled")};
+        cursor: not-allowed;
+      }
+
+      &:active {
+        &::-webkit-slider-thumb {
+          ${n.th("sliders.focused.disabled")};
+        }
+
+        &::-moz-range-thumb {
+          ${n.th("sliders.focused.disabled")};
+        }
+      }
+    `};
+  `),ae=n(p.Box)(()=>n.css`
+    ${ee};
+    background-color: beige-40;
+  `),ie=n(p.Box)(({disabled:l})=>n.css`
+    ${ee};
+    background-color: primary-40;
+
+    ${l&&n.css`
+      ${n.th("sliders.disabled")}
+      cursor: not-allowed;
+    `};
+  `),te=n(p.Box)(()=>n.css`
+    position: absolute;
+
+    :before {
+      content: '';
+      position: absolute;
+      background-color: neutral-30;
+      height: 6;
+      width: 1;
+      transform: translate(-50%);
+    }
+  `),ne=n(F.Hint)(()=>n.css`
+    position: absolute;
+    color: neutral-50;
+    top: 0;
+    transform: translate(-50%);
+    white-space: nowrap;
+  `),W=n.outputBox(({isVisible:l})=>n.css`
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity 150ms ease-in-out,
+      visibility 150ms ease-in-out,
+      transform 150ms ease-in-out;
+    position: absolute;
+    text-align: center;
+    transform: translate(-50%, calc(-100% + -${n.th("space.xs")}));
+
+    ${l&&n.css`
+      opacity: 100;
+      visibility: visible;
+      transform: translate(-50%, calc(-100% + -${n.th("space.sm")}));
+    `}
+  `),j=n(p.Box)(()=>n.css`
+    ${n.th("sliders.output.tooltip")};
+    flex: 1 1 auto;
+    margin: auto;
+    min-width: ${n.th("space.xxs")};
+    padding: ${n.th("space.xs")} ${n.th("space.sm")};
+  `),X=20,z=({min:l,step:c,toCompare:$,value:E})=>{let s=Math.min(E,$-1*c);return s=Math.max(s,l),A(s,c)},N=({max:l,step:c,toCompare:$,value:E})=>{let s=Math.max(E,$+1*c);return s=Math.min(s,l),A(s,c)},ce=Z.forwardRef(({borderSelectorColor:l="neutral-10",disabled:c,hint:$,label:E,max:s,min:a,onChange:g,step:i=1,tooltip:y,type:b,value:h,values:C,...L},U)=>{const[u,M]=e.useState(a),[f,B]=e.useState(s),[I,w]=e.useState(s),[x,v]=e.useState(s),D=e.useRef(null),q=e.useRef(null),k=e.useRef(null),R=e.useRef(null),T=e.useRef(null),[S,o]=e.useState(!1),[d,_]=e.useState(!1),se=t=>{const r=z({value:parseInt(t.target.value,10),toCompare:f,step:i,min:a});w(r),M(r),t.target.value=r.toString()},oe=t=>{const r=N({value:parseInt(t.target.value,10),toCompare:u,step:i,max:s});v(r),B(r),t.target.value=r.toString()},J=(t,r)=>{if(t.preventDefault(),r==="min"){let m=u;t.key==="ArrowRight"&&(m=z({value:m+i,toCompare:f,step:i,min:a})),t.key==="ArrowLeft"&&(m=z({value:m-i,toCompare:f,step:i,min:a})),w(m),M(m),g({min:m,max:f})}if(r==="max"){let m=f;t.key==="ArrowRight"&&(m=N({value:m+i,toCompare:u,step:i,max:s})),t.key==="ArrowLeft"&&(m=N({value:m-i,toCompare:u,step:i,max:s})),v(m),B(m),g({min:u,max:m})}},V=e.useCallback(t=>{const r=Math.round((t-a)/(s-a)*100);return r<0?0:r>100?100:r},[a,s]);return e.useEffect(()=>{if(q.current){const t=V(u),r=V(parseInt(q.current.value,10));k.current&&(k.current.style.left=`${t}%`,k.current.style.width=`${r-t}%`)}},[u,V]),e.useEffect(()=>{if(D.current){const t=V(parseInt(D.current.value,10)),r=V(f);if(k.current&&(k.current.style.width=`${r-t}%`),R.current){const m=V(u)/100;R.current.style.left=`calc(${m*100}% + ${(.5-m)*X}px)`}if(T.current){const m=V(f)/100;T.current.style.left=`calc(${m*100}% + ${(.5-m)*X}px)`}}},[u,f,V]),e.useEffect(()=>{if(h){if(!isNaN(h.min)&&h.min!==u){const t=z({value:h.min||a,toCompare:f,step:i,min:a});M(t),w(t)}if(!isNaN(h.max)&&h.max!==f){const t=N({value:h.max||s,toCompare:u,step:i,max:s});B(t),v(t)}}},[h]),e.createElement(p.Box,{position:"relative",ref:U,w:"100%"},E&&e.createElement(Y.Text,{as:"label",variant:"sm"},E),e.createElement(p.Box,{alignItems:"center",display:"flex",gap:"sm"},(b==="inline"||b==="fields")&&(b==="fields"?e.createElement(P.InputText,{disabled:c,max:f,min:a,onBlur:()=>{const t=z({value:I,toCompare:f,step:i,min:a});w(t),M(t),g({min:t,max:f})},onChange:t=>{let r=parseInt(t.target.value,10);isNaN(r)&&(r=0),w(r)},onKeyDown:t=>{if(t.key==="Enter"){const r=z({value:I,toCompare:f,step:i,min:a});w(r),M(r),g({min:r,max:f})}},size:"sm",type:"number",value:I.toString(),w:72}):e.createElement(p.Box,null,a)),e.createElement(p.Box,{flexGrow:"1",position:"relative"},y&&e.createElement(e.Fragment,null,e.createElement(W,{isVisible:S,ref:R},e.createElement(j,null,u)),e.createElement(W,{isVisible:d,ref:T},e.createElement(j,null,f))),e.createElement(p.Box,{h:20,pb:"sm",position:"relative",pt:"sm",w:"100%"},e.createElement(Q,{...L,borderSelectorColor:l,disabled:c,max:s,min:a,onChange:se,onKeyDown:t=>J(t,"min"),onMouseDown:()=>{y&&S===!1&&o(!0)},onMouseUp:()=>{g({min:u,max:f}),y&&o(!1)},ref:D,step:i,type:"range",value:u}),e.createElement(Q,{...L,borderSelectorColor:l,disabled:c,max:s,min:a,onChange:oe,onKeyDown:t=>J(t,"max"),onMouseDown:()=>{y&&d===!1&&_(!0)},onMouseUp:()=>{g({min:u,max:f}),y&&_(!1)},ref:q,step:i,type:"range",value:f}),e.createElement(ae,null),e.createElement(ie,{disabled:c,ref:k})),C&&e.createElement(p.Box,{h:24,ml:10,mr:10,position:"relative"},C.reduce((t,r)=>t.includes(r)?t:[...t,r],[]).filter(t=>t>=a&&t<=s).map((t,r)=>e.createElement(te,{key:`${t}-${r}`,left:`${V(t)}%`},e.createElement(ne,null,t))))),(b==="inline"||b==="fields")&&(b==="fields"?e.createElement(P.InputText,{disabled:c,max:s,min:u+1,onBlur:()=>{const t=N({value:x,toCompare:u,step:i,max:s});v(t),B(t),g({min:u,max:t})},onChange:t=>{let r=parseInt(t.target.value,10);isNaN(r)&&(r=0),v(r)},onKeyDown:t=>{if(t.key==="Enter"){const r=N({value:x,toCompare:u,step:i,max:s});v(r),B(r),g({min:u,max:r})}},size:"sm",type:"number",value:x.toString(),w:72}):e.createElement(p.Box,null,s))),$&&e.createElement(F.Hint,{color:"neutral-50",mt:0},$))}),re=20,A=(l,c)=>Math.round(l/c)*c,K=(l,c,$,E)=>(l=A(l,E),l<c?c:l>$?$:l),G=Z.forwardRef(({borderSelectorColor:l="neutral-10",disabled:c,hint:$,label:E,max:s,min:a,onChange:g,step:i=1,tooltip:y,type:b,value:h,values:C,...L},U)=>{const u=e.useRef(null),M=e.useRef(null),[f,B]=e.useState(!1),[I,w]=e.useState(K(h,a,s,i)),[x,v]=e.useState(K(h,a,s,i)),D=o=>{o=A(o,i),v(o)},q=o=>{o.preventDefault();let d=x;o.key==="ArrowRight"&&(d=K(d+i,a,s,i)),o.key==="ArrowLeft"&&(d=K(d-i,a,s,i)),v(d),w(d),g(d)},k=o=>{let d=parseInt(o.target.value,10);isNaN(d)&&(d=0),w(d)},R=()=>{const o=K(I,a,s,i);w(o),v(o),g(o)},T=o=>{o.key==="Enter"&&R()},S=e.useCallback(o=>Math.round((o-a)/(s-a)*100),[a,s]);return e.useEffect(()=>{if(u.current&&(u.current.style.backgroundSize=`${S(x)}% 100%`),M.current){const o=S(x)/100;M.current.style.left=`calc(${o*100}% + ${(.5-o)*re}px)`}},[x,S]),e.useEffect(()=>{!isNaN(h)&&h!==x&&h&&(D(h),w(h))},[h]),e.createElement(p.Box,{display:"flex",flexDirection:"column",position:"relative",ref:U},E&&e.createElement(Y.Text,{as:"label",variant:"sm"},E),e.createElement(p.Box,{alignItems:"center",display:"flex",gap:"sm"},(b==="inline"||b==="left-field")&&(b==="left-field"?e.createElement(P.InputText,{disabled:c,max:s,min:a,onBlur:R,onChange:k,onKeyDown:T,size:"sm",type:"number",value:I.toString(),w:72}):e.createElement(p.Box,null,a)),e.createElement(p.Box,{display:"flex",flexDirection:"column",flexGrow:"1",h:20,position:"relative"},e.createElement(le,{borderSelectorColor:l,disabled:c,list:"tickmarks",max:s,min:a,onChange:o=>{const d=parseInt(o.target.value,10);D(d),w(d)},onKeyDown:q,onMouseDown:()=>{y&&f===!1&&B(!0)},onMouseUp:()=>{g(x),y&&B(!1)},ref:u,step:i,type:"range",value:x,...L}),y&&e.createElement(W,{isVisible:f,ref:M},e.createElement(j,null,x)),C&&e.createElement(p.Box,{h:24,ml:10,mr:10,mt:5,position:"relative"},C.reduce((o,d)=>o.includes(d)?o:[...o,d],[]).filter(o=>o>=a&&o<=s).map((o,d)=>e.createElement(te,{key:`${o}-${d}`,left:`${S(o)}%`},e.createElement(ne,null,o))))),(b==="inline"||b==="right-field")&&(b==="right-field"?e.createElement(P.InputText,{disabled:c,max:s,min:a,onBlur:R,onChange:k,onKeyDown:T,size:"sm",type:"number",value:I.toString(),w:72}):e.createElement(p.Box,null,s))),$&&e.createElement(F.Hint,{color:"neutral-50",mt:0},$))});G.displayName="Slider";const ue=Object.assign(G,{Range:ce});exports.Slider=ue;exports.SliderComponent=G;exports.ensureMinMax=K;exports.round=A;exports.thumbWidth=re;