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

package/dist/Button.js

@@ -0,0 +1,78 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),m=require("./Loader.js"),l=require("./System.js"),u=require("./Box.js"),t=require("@xstyled/styled-components"),y=require("./X5NMLKT6-BzhcQu_I.js"),p=require("./hide-focus-rings-root-DGU4Klq5.js"),g=(e,s="square")=>t.css`
+  width: ${t.th(`buttons.sizes.${e}.height`)};
+  padding: 0;
+  ${s==="circle"&&t.css`
+    border-radius: ${t.th(`buttons.sizes.${e}.height`)};
+  `};
+`,d=t(y.Button).withConfig({shouldForwardProp:l.shouldForwardProp})(({danger:e,disabled:s,shape:r,size:n="md",variant:o="primary"})=>t.css`
+    ${t.th(`buttons.${o}`)};
+    ${e&&t.css`
+      ${t.th(`buttons.danger.${o}`)};
+    `}
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: auto;
+    ${t.th(`buttons.sizes.${n}`)};
+    text-decoration: none;
+    text-align: center;
+    white-space: nowrap;
+    cursor: pointer;
+    outline: none !important; /* important for firefox */
+    border-width: sm;
+    border-style: solid;
+    appearance: none;
+    overflow: hidden;
+    transition: medium;
+    ${r&&g(n,r)};
+    ${t.system};
+
+    & > svg.wui-icon,
+    & > i.wui-icon-font {
+      font-weight: initial;
+
+      &:only-child {
+        width: ${t.th(`buttons.icon.only.${n}`)};
+        height: ${t.th(`buttons.icon.only.${n}`)};
+        font-size: ${t.th(`buttons.icon.only.${n}`)};
+      }
+      &:not(:only-child) {
+        width: ${t.th(`buttons.icon.default.${n}`)};
+        height: ${t.th(`buttons.icon.default.${n}`)};
+        font-size: ${t.th(`buttons.icon.default.${n}`)};
+      }
+    }
+
+    & > *:not(:only-child):not(:last-child) {
+      margin-right: sm;
+    }
+
+    ${!s&&t.css`
+      [${p.hideFocusRingsDataAttribute}] &:focus {
+        box-shadow: none;
+      }
+      &:focus {
+        ${t.th(`buttons.focus.${o}`)};
+        ${e&&t.css`
+          ${t.th(`buttons.focus.danger.${o}`)};
+        `}
+      }
+      &:hover {
+        ${t.th(`buttons.hover.${o}`)};
+        ${e&&t.css`
+          ${t.th(`buttons.hover.danger.${o}`)};
+        `}
+      }
+      &:active {
+        ${t.th(`buttons.active.${o}`)};
+        ${e&&t.css`
+          ${t.th(`buttons.active.danger.${o}`)};
+        `}
+      }
+    `};
+
+    &[disabled] {
+      cursor: not-allowed;
+    }
+  `),h=l.forwardRef(({children:e,danger:s,dataTestId:r,disabled:n,isLoading:o,size:a="md",variant:$="primary",...b},f)=>{const c=n||o;return i.createElement(d,{danger:s,"data-loading":o,"data-testid":r,disabled:c,ref:f,size:a,variant:c?"disabled":$,...b},o&&i.createElement("div",null,i.createElement(u.Box,{alignItems:"center",bottom:0,display:"flex",justifyContent:"center",left:0,m:0,position:"absolute",right:0,top:0},i.createElement(m.Loader,{size:"xs"})),i.createElement(u.Box,{opacity:"0"},e)),!o&&e)});h.displayName="Button";const w=d;exports.Button=h;exports.StyledButton=w;

package/dist/Button.mjs

@@ -0,0 +1,136 @@
+"use client";
+import r from "react";
+import { Loader as h } from "./Loader.mjs";
+import { shouldForwardProp as b, forwardRef as p } from "./System.mjs";
+import { Box as d } from "./Box.mjs";
+import y, { css as i, th as t, system as w } from "@xstyled/styled-components";
+import { B as g } from "./X5NMLKT6-DGZEtYXj.mjs";
+import { h as x } from "./hide-focus-rings-root-BNyva1yb.mjs";
+const B = (e, s = "square") => i`
+  width: ${t(`buttons.sizes.${e}.height`)};
+  padding: 0;
+  ${s === "circle" && i`
+    border-radius: ${t(`buttons.sizes.${e}.height`)};
+  `};
+`, a = y(g).withConfig({ shouldForwardProp: b })(
+  ({ danger: e, disabled: s, shape: l, size: n = "md", variant: o = "primary" }) => i`
+    ${t(`buttons.${o}`)};
+    ${e && i`
+      ${t(`buttons.danger.${o}`)};
+    `}
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: auto;
+    ${t(`buttons.sizes.${n}`)};
+    text-decoration: none;
+    text-align: center;
+    white-space: nowrap;
+    cursor: pointer;
+    outline: none !important; /* important for firefox */
+    border-width: sm;
+    border-style: solid;
+    appearance: none;
+    overflow: hidden;
+    transition: medium;
+    ${l && B(n, l)};
+    ${w};
+
+    & > svg.wui-icon,
+    & > i.wui-icon-font {
+      font-weight: initial;
+
+      &:only-child {
+        width: ${t(`buttons.icon.only.${n}`)};
+        height: ${t(`buttons.icon.only.${n}`)};
+        font-size: ${t(`buttons.icon.only.${n}`)};
+      }
+      &:not(:only-child) {
+        width: ${t(`buttons.icon.default.${n}`)};
+        height: ${t(`buttons.icon.default.${n}`)};
+        font-size: ${t(`buttons.icon.default.${n}`)};
+      }
+    }
+
+    & > *:not(:only-child):not(:last-child) {
+      margin-right: sm;
+    }
+
+    ${!s && i`
+      [${x}] &:focus {
+        box-shadow: none;
+      }
+      &:focus {
+        ${t(`buttons.focus.${o}`)};
+        ${e && i`
+          ${t(`buttons.focus.danger.${o}`)};
+        `}
+      }
+      &:hover {
+        ${t(`buttons.hover.${o}`)};
+        ${e && i`
+          ${t(`buttons.hover.danger.${o}`)};
+        `}
+      }
+      &:active {
+        ${t(`buttons.active.${o}`)};
+        ${e && i`
+          ${t(`buttons.active.danger.${o}`)};
+        `}
+      }
+    `};
+
+    &[disabled] {
+      cursor: not-allowed;
+    }
+  `
+), E = p(
+  ({
+    children: e,
+    danger: s,
+    dataTestId: l,
+    disabled: n,
+    isLoading: o,
+    size: c = "md",
+    variant: $ = "primary",
+    ...m
+  }, f) => {
+    const u = n || o;
+    return /* @__PURE__ */ r.createElement(
+      a,
+      {
+        danger: s,
+        "data-loading": o,
+        "data-testid": l,
+        disabled: u,
+        ref: f,
+        size: c,
+        variant: u ? "disabled" : $,
+        ...m
+      },
+      o && /* @__PURE__ */ r.createElement("div", null, /* @__PURE__ */ r.createElement(
+        d,
+        {
+          alignItems: "center",
+          bottom: 0,
+          display: "flex",
+          justifyContent: "center",
+          left: 0,
+          m: 0,
+          position: "absolute",
+          right: 0,
+          top: 0
+        },
+        /* @__PURE__ */ r.createElement(h, { size: "xs" })
+      ), /* @__PURE__ */ r.createElement(d, { opacity: "0" }, e)),
+      !o && e
+    );
+  }
+);
+E.displayName = "Button";
+const S = a;
+export {
+  E as Button,
+  S as StyledButton
+};

package/dist/ButtonGroup.js

@@ -0,0 +1,32 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),u=require("./System.js"),e=require("@xstyled/styled-components"),c=e.div`
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-top: -3px;
+
+  > * {
+    margin-top: 3px;
+
+    &:not(:only-child) {
+      &:not(:last-child) {
+        border-right-color: rgba(255, 255, 255, 0.4);
+      }
+
+      &:first-child {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      &:last-child {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      &:not(:last-child):not(:first-child) {
+        border-radius: 0;
+      }
+    }
+  }
+
+  ${e.system};
+`,b=u.forwardRef(({children:o,dataTestId:i,disabled:s,size:n,variant:a},l)=>{function d(p){return t.Children.toArray(p).filter(Boolean).map(r=>t.cloneElement(r,{...r.props,disabled:s||r.props.disabled,size:n||r.props.size,variant:a||r.props.variant}))}return t.createElement(c,{"data-testid":i,ref:l},d(o))});exports.ButtonGroup=b;

package/dist/ButtonGroup.mjs

@@ -0,0 +1,51 @@
+"use client";
+import d, { Children as p, cloneElement as u } from "react";
+import { forwardRef as f } from "./System.mjs";
+import m, { system as b } from "@xstyled/styled-components";
+const c = m.div`
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-top: -3px;
+
+  > * {
+    margin-top: 3px;
+
+    &:not(:only-child) {
+      &:not(:last-child) {
+        border-right-color: rgba(255, 255, 255, 0.4);
+      }
+
+      &:first-child {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      &:last-child {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      &:not(:last-child):not(:first-child) {
+        border-radius: 0;
+      }
+    }
+  }
+
+  ${b};
+`, y = f(
+  ({ children: t, dataTestId: o, disabled: e, size: i, variant: a }, s) => {
+    function l(n) {
+      return p.toArray(n).filter(Boolean).map((r) => u(r, {
+        ...r.props,
+        disabled: e || r.props.disabled,
+        size: i || r.props.size,
+        variant: a || r.props.variant
+      }));
+    }
+    return /* @__PURE__ */ d.createElement(c, { "data-testid": o, ref: s }, l(t));
+  }
+);
+export {
+  y as ButtonGroup
+};

package/dist/Card.js

@@ -0,0 +1,17 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),c=require("./System.js"),e=require("@xstyled/styled-components"),d=require("./Shape.js"),a=e(d.Shape)`
+  ${e.th("cards.cover")};
+
+  ${e.system};
+`,i=({src:t,...r})=>o.createElement(a,{...r},o.createElement("img",{src:t})),u=e.divBox`
+  overflow: 'hidden';
+  border-radius: md;
+  ${e.th("cards.default")};
+  background-size: cover;
+  background-position: center;
+
+  ${e.system};
+`,m=e.divBox`
+  padding: lg;
+
+  ${e.system};
+`,n=c.forwardRef(({children:t,...r},s)=>o.createElement(u,{ref:s,...r},t)),l=Object.assign(n,{Body:m,Cover:i});exports.Card=l;exports.CardComponent=n;

package/dist/Card.mjs

@@ -0,0 +1,29 @@
+"use client";
+import r from "react";
+import { forwardRef as c } from "./System.mjs";
+import t, { th as n, system as d } from "@xstyled/styled-components";
+import { Shape as s } from "./Shape.mjs";
+const i = t(s)`
+  ${n("cards.cover")};
+
+  ${d};
+`, m = ({ src: e, ...o }) => /* @__PURE__ */ r.createElement(i, { ...o }, /* @__PURE__ */ r.createElement("img", { src: e })), f = t.divBox`
+  overflow: 'hidden';
+  border-radius: md;
+  ${n("cards.default")};
+  background-size: cover;
+  background-position: center;
+
+  ${d};
+`, l = t.divBox`
+  padding: lg;
+
+  ${d};
+`, p = c(({ children: e, ...o }, a) => /* @__PURE__ */ r.createElement(f, { ref: a, ...o }, e)), C = Object.assign(p, {
+  Body: l,
+  Cover: m
+});
+export {
+  C as Card,
+  p as CardComponent
+};

package/dist/Checkbox.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react");require("./System.js");const e=require("./index-C_r0bVmL.js");exports.Checkbox=e.Checkbox$1;

package/dist/Checkbox.mjs

@@ -0,0 +1,6 @@
+import "react";
+import "./System.mjs";
+import { a as t } from "./index-DCOLdphy.mjs";
+export {
+  t as Checkbox
+};

package/dist/ClearButton.js

@@ -0,0 +1,14 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),a=require("./index-Cs1IZBks.js"),i=require("./System.js"),t=require("@xstyled/styled-components"),c=require("./Button.js"),u=t.keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`,l=t.css`
+  ${u}
+`,n=t(c.Button)`
+  pointer-events: auto;
+  animation: ${t.th("transitions.medium")};
+  animation-name: ${l};
+`,m=i.forwardRef(({size:o="xs",...r},s)=>e.createElement(n,{ref:s,shape:"circle",size:o,title:"Clear",variant:"ghost",...r},e.createElement(a.CrossIcon,{size:"xxs"}))),d=n;exports.ClearButton=m;exports.StyledClearButton=d;

package/dist/ClearButton.mjs

@@ -0,0 +1,26 @@
+"use client";
+import t from "react";
+import { C as n } from "./index-ColyClKR.mjs";
+import { forwardRef as s } from "./System.mjs";
+import i, { keyframes as m, css as c, th as l } from "@xstyled/styled-components";
+import { Button as f } from "./Button.mjs";
+const p = m`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`, u = c`
+  ${p}
+`, e = i(f)`
+  pointer-events: auto;
+  animation: ${l("transitions.medium")};
+  animation-name: ${u};
+`, _ = s(
+  ({ size: o = "xs", ...a }, r) => /* @__PURE__ */ t.createElement(e, { ref: r, shape: "circle", size: o, title: "Clear", variant: "ghost", ...a }, /* @__PURE__ */ t.createElement(n, { size: "xxs" }))
+), $ = e;
+export {
+  _ as ClearButton,
+  $ as StyledClearButton
+};

package/dist/CloseButton.js

@@ -0,0 +1,6 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),n=require("./index-Cs1IZBks.js"),r=require("./System.js"),e=require("@xstyled/styled-components"),c=require("./Button.js"),i=e(c.Button)`
+  & > svg:only-child {
+    width: ${e.th("space.md")};
+    height: ${e.th("space.md")};
+  }
+`,l=r.forwardRef((s,o)=>t.createElement(i,{ref:o,shape:"circle",size:"sm",title:"Close",variant:"ghost",...s},t.createElement(n.CrossIcon,{size:"lg"})));exports.CloseButton=l;

package/dist/CloseButton.mjs

@@ -0,0 +1,15 @@
+"use client";
+import t from "react";
+import { C as s } from "./index-ColyClKR.mjs";
+import { forwardRef as m } from "./System.mjs";
+import i, { th as e } from "@xstyled/styled-components";
+import { Button as l } from "./Button.mjs";
+const a = i(l)`
+  & > svg:only-child {
+    width: ${e("space.md")};
+    height: ${e("space.md")};
+  }
+`, h = m((o, r) => /* @__PURE__ */ t.createElement(a, { ref: r, shape: "circle", size: "sm", title: "Close", variant: "ghost", ...o }, /* @__PURE__ */ t.createElement(s, { size: "lg" })));
+export {
+  h as CloseButton
+};