welcome-ui 8.4.0 → 9.0.0-alpha.1

package/dist/types/utils/use-screens.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/utils/useForkRef.d.ts

@@ -0,0 +1,14 @@
+import { Ref } from 'react';
+/**
+ * Merges multiple refs into a single ref callback.
+ */
+export declare function mergeRefs<T>(...refs: Array<Ref<T> | undefined>): (element: T) => void;
+/**
+ * Sets the given ref to the provided element.
+ */
+export declare function setRef<T>(ref?: Ref<T>, element?: T): void;
+/**
+ * Forks two refs into a single ref.
+ * @returns A tuple containing the current ref and the merged refs function. The current ref should be used to access the DOM element, while the merged refs function should be passed to the component.
+ */
+export declare function useForkRef<T>(refA?: Ref<T>, refB?: Ref<T>): [React.MutableRefObject<null | T>, (instance: T) => void];

package/dist/use-viewport-CgrficYB.js

@@ -0,0 +1,17 @@
+"use client";
+import { useEffect as n, useLayoutEffect as o, useState as d } from "react";
+const r = typeof window > "u" ? n : o;
+function w() {
+  const [t, e] = d({ height: void 0, width: void 0 });
+  return r(() => {
+    e({ height: window.innerHeight, width: window.innerWidth });
+    function i() {
+      e({ height: window.innerHeight, width: window.innerWidth });
+    }
+    return window.addEventListener("resize", i), () => window.removeEventListener("resize", i);
+  }, []), t;
+}
+export {
+  r as a,
+  w as u
+};

package/dist/utils-BNMgUIHQ.js

@@ -0,0 +1,117 @@
+"use client";
+import { g as J } from "./index-PAaZGbyz.js";
+const Y = {
+  "custom-header": "_custom-header_191j7_2",
+  "date-picker": "_date-picker_191j7_9",
+  "time-picker": "_time-picker_191j7_12",
+  "date-time-picker": "_date-time-picker_191j7_15"
+};
+var u, m;
+function H() {
+  if (m) return u;
+  m = 1;
+  var o = 1 / 0, i = 9007199254740991, a = 17976931348623157e292, f = NaN, p = "[object Function]", _ = "[object GeneratorFunction]", I = "[object Symbol]", h = /^\s+|\s+$/g, M = /^[-+]0x[0-9a-f]+$/i, T = /^0b[01]+$/i, j = /^0o[0-7]+$/i, D = /^(?:0|[1-9]\d*)$/, N = parseInt, d = Object.prototype, b = d.toString, A = Math.ceil, E = Math.max;
+  function F(e, r, t, n) {
+    for (var G = -1, l = E(A((r - e) / (t || 1)), 0), g = Array(l); l--; )
+      g[++G] = e, e += t;
+    return g;
+  }
+  function k(e) {
+    return function(r, t, n) {
+      return n && typeof n != "number" && S(r, t, n) && (t = n = void 0), r = s(r), t === void 0 ? (t = r, r = 0) : t = s(t), n = n === void 0 ? r < t ? 1 : -1 : s(n), F(r, t, n);
+    };
+  }
+  function O(e, r) {
+    return r = r ?? i, !!r && (typeof e == "number" || D.test(e)) && e > -1 && e % 1 == 0 && e < r;
+  }
+  function S(e, r, t) {
+    if (!c(t))
+      return !1;
+    var n = typeof r;
+    return (n == "number" ? R(t) && O(r, t.length) : n == "string" && r in t) ? x(t[r], e) : !1;
+  }
+  function x(e, r) {
+    return e === r || e !== e && r !== r;
+  }
+  function R(e) {
+    return e != null && L(e.length) && !w(e);
+  }
+  function w(e) {
+    var r = c(e) ? b.call(e) : "";
+    return r == p || r == _;
+  }
+  function L(e) {
+    return typeof e == "number" && e > -1 && e % 1 == 0 && e <= i;
+  }
+  function c(e) {
+    var r = typeof e;
+    return !!e && (r == "object" || r == "function");
+  }
+  function $(e) {
+    return !!e && typeof e == "object";
+  }
+  function q(e) {
+    return typeof e == "symbol" || $(e) && b.call(e) == I;
+  }
+  function s(e) {
+    if (!e)
+      return e === 0 ? e : 0;
+    if (e = B(e), e === o || e === -1 / 0) {
+      var r = e < 0 ? -1 : 1;
+      return r * a;
+    }
+    return e === e ? e : 0;
+  }
+  function B(e) {
+    if (typeof e == "number")
+      return e;
+    if (q(e))
+      return f;
+    if (c(e)) {
+      var r = typeof e.valueOf == "function" ? e.valueOf() : e;
+      e = c(r) ? r + "" : r;
+    }
+    if (typeof e != "string")
+      return e === 0 ? e : +e;
+    e = e.replace(h, "");
+    var t = T.test(e);
+    return t || j.test(e) ? N(e.slice(2), t ? 2 : 8) : M.test(e) ? f : +e;
+  }
+  var C = k();
+  return u = C, u;
+}
+var P = H();
+const U = /* @__PURE__ */ J(P), y = [
+  { label: "January", value: 0 },
+  { label: "February", value: 1 },
+  { label: "March", value: 2 },
+  { label: "April", value: 3 },
+  { label: "May", value: 4 },
+  { label: "June", value: 5 },
+  { label: "July", value: 6 },
+  { label: "August", value: 7 },
+  { label: "September", value: 8 },
+  { label: "October", value: 9 },
+  { label: "November", value: 10 },
+  { label: "December", value: 11 }
+], z = /* @__PURE__ */ new Date(), K = (o, i = 15) => {
+  if (!o)
+    return null;
+  let a = new Date(o);
+  isNaN(a.getTime()) && (a = /* @__PURE__ */ new Date());
+  const f = Math.ceil(a.getMinutes() / i) * i;
+  return new Date(a.setMinutes(f, 0, 0));
+}, Q = (o) => o ? y.map(({ value: i }) => ({
+  label: o.localize.month(i),
+  value: i
+})) : y, V = (o, i) => U(o, i + 1).map((a) => ({
+  label: a.toString(),
+  value: a
+})).reverse();
+export {
+  z as D,
+  V as a,
+  K as b,
+  Q as g,
+  Y as s
+};

package/dist/utils.css

@@ -0,0 +1 @@
+@layer components{._custom-header_191j7_2{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-lg);text-align:left}._date-picker_191j7_9{text-align:left}._time-picker_191j7_12{text-align:center}._date-time-picker_191j7_15{position:relative;display:inline-flex;flex-wrap:nowrap}._date-time-picker_191j7_15 div:first-child{margin-right:-1px}._date-time-picker_191j7_15 ._date-picker_191j7_9{border-top-right-radius:0;border-bottom-right-radius:0}._date-time-picker_191j7_15 ._time-picker_191j7_12{border-top-left-radius:0;border-bottom-left-radius:0}}

package/dist/utils.js

@@ -0,0 +1,19 @@
+"use client";
+import { b as f } from "./index-PAaZGbyz.js";
+import { c as d } from "./index-PAaZGbyz.js";
+import { f as C } from "./forwardRefWithAs-8eP3ZN15.js";
+import { useState as p, useCallback as a } from "react";
+function n(e, o) {
+  const [t, s] = p();
+  return [a(() => {
+    let r;
+    typeof e == "number" || typeof e == "string" ? r = e.toString() : e.current instanceof HTMLInputElement ? r = e.current.value : e.current instanceof HTMLElement && (r = e.current.textContent);
+    const i = f(r);
+    s(i), o && setTimeout(s, o);
+  }, [e, o]), t];
+}
+export {
+  d as classNames,
+  C as forwardRefWithAs,
+  n as useCopyText
+};

package/package.json

@@ -1,26 +1,25 @@
 {
   "name": "welcome-ui",
-  "version": "8.4.0",
+  "version": "9.0.0-alpha.1",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "files": [
     "dist"
   ],
+  "type": "module",
   "exports": {
     "./fonts/*": "./dist/fonts/*",
     "./theme": {
       "types": "./dist/types/theme/index.d.ts",
-      "import": "./dist/theme.mjs",
-      "require": "./dist/theme.mjs"
+      "import": "./dist/theme.js"
     },
     "./utils": {
       "types": "./dist/types/utils/index.d.ts",
-      "import": "./dist/utils.mjs",
-      "require": "./dist/utils.mjs"
+      "import": "./dist/utils.js"
     },
+    "./*.css": "./dist/*.css",
     "./*": {
       "types": "./dist/types/components/*/index.d.ts",
-      "import": "./dist/*.mjs",
-      "require": "./dist/*.mjs"
+      "import": "./dist/*.js"
     },
     "./*.d.ts": {
       "types": "./*.d.ts"
@@ -29,6 +28,8 @@
   "scripts": {
     "start": "vite build --watch",
     "build": "vite build",
+    "build:tokens": "style-dictionary build --config=style-dictionary.json --verbose",
+    "theme:generate": "yarn build:tokens && tsx src/theme/generate-theme.ts && yarn run -W prettier --write 'src/theme/theme.css'",
     "test": "vitest"
   },
   "repository": {
@@ -54,7 +55,7 @@
   },
   "dependencies": {
     "@ariakit/react": "0.4.15",
-    "@emotion/is-prop-valid": "^1.3.1",
+    "@emotion/is-prop-valid": "^1.4.0",
     "@juggle/resize-observer": "^3.4.0",
     "copy-to-clipboard": "^3.3.3",
     "date-fns": "^4.1.0",
@@ -65,34 +66,38 @@
     "lottie-light-react": "^2.4.0",
     "match-sorter": "^8.0.0",
     "react-datepicker": "^8.4.0",
-    "react-dropzone": "^14.3.5",
+    "react-dropzone": "^14.3.8",
     "react-flatten-children": "^1.0.0",
-    "react-hot-toast": "^2.4.1"
+    "react-hot-toast": "^2.6.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/lodash.capitalize": "^4.2.9",
     "@types/lodash.debounce": "^4.0.6",
+    "@types/lodash.merge": "^4.6.9",
     "@types/lodash.range": "^3.2.9",
     "@types/ramda": "^0.30.2",
     "@types/react-datepicker": "^7.0.0",
     "jsdom": "^26.0.0",
-    "ramda": "^0.30.1",
+    "lodash.merge": "^4.6.2",
+    "ramda": "^0.31.3",
     "release-it": "^18.1.2",
     "rollup": "^4.39.0",
     "rollup-preserve-directives": "^1.1.3",
+    "style-dictionary": "^5.0.4",
+    "tsx": "^4.20.6",
     "vite": "^6.3.5",
-    "vite-plugin-dts": "^4.5.3",
-    "vite-plugin-static-copy": "^2.3.0",
+    "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.1.4"
   },
   "peerDependencies": {
     "@xstyled/styled-components": "^4.0.0",
-    "react": "^18.3.1",
-    "styled-components": "^6.1.15"
+    "react": "^18.3.1 || ^19.0.0",
+    "styled-components": "^6.1.15",
+    "tailwindcss": "^4.1.11"
   },
   "homepage": "https://welcome-ui.com"
 }

package/dist/AXB53BZF-BU4qmiUA.mjs

@@ -1,25 +0,0 @@
-"use client";
-import { u } from "./P4IRICAX-Dg8AjwYu.mjs";
-import { a as c } from "./VGCJ63VH-C4H4_vtu.mjs";
-import { f as l, c as p, h as D, _ as m, i as g, g as a, s as v } from "./LVA2YJMS-B8X1PCyC.mjs";
-var f = "button", d = p(
-  function(r) {
-    var s = r, { store: o } = s, e = m(s, ["store"]);
-    const i = c();
-    o = o || i, g(
-      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": v(n, "dialog")
-    }, e), e = u(a({ store: o }, e)), e;
-  }
-), P = l(function(r) {
-  const s = d(r);
-  return D(f, s);
-});
-export {
-  P as D,
-  d as u
-};

package/dist/Accordion.mjs

@@ -1,98 +0,0 @@
-"use client";
-import { j as o } from "./jsx-runtime-Bqq1Hxg9.mjs";
-import { cloneElement as m } from "react";
-import "./Icon.mjs";
-import { R as p } from "./index-DtWZjMb5.mjs";
-import { forwardRef as u } from "./System.mjs";
-import t, { th as i } from "@xstyled/styled-components";
-import { D as f } from "./P4IRICAX-Dg8AjwYu.mjs";
-import { d as g, e as h } from "./VGCJ63VH-C4H4_vtu.mjs";
-const x = t.divBox`
-  ${i("accordions.wrapper")};
-  transition: medium;
-
-  &:hover {
-    border-color: neutral-50;
-  }
-`, n = t.divBox`
-  flex-shrink: 0;
-  ${i("accordions.icon")};
-  transform: rotate3d(0);
-  transition: medium;
-  width: 32;
-  height: 32;
-  color: inherit;
-  display: flex;
-  border-radius: 16;
-
-  & *:first-child {
-    margin: auto;
-  }
-`, $ = t(f)`
-  ${i("accordions.title")};
-  width: 100%;
-  padding: ${i("accordions.padding")};
-  background-color: transparent;
-  border: 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: lg;
-
-  &[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;
-    }
-  }
-`, j = t(g)`
-  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 = t.div`
-  ${i("accordions.content")};
-  padding: ${i("accordions.padding")};
-  padding-top: 0;
-  color: neutral-70;
-`, B = u(
-  ({ children: e, dataTestId: r, icon: d = /* @__PURE__ */ o.jsx(p, {}), store: s, title: c, ...a }, l) => /* @__PURE__ */ o.jsxs(x, { "data-testid": r, ref: l, ...a, children: [
-    /* @__PURE__ */ o.jsxs($, { "data-testid": r ? `${r}-title` : void 0, store: s, children: [
-      c,
-      /* @__PURE__ */ o.jsx(n, { children: m(d, { size: "sm" }) })
-    ] }),
-    /* @__PURE__ */ o.jsx(j, { "data-testid": r ? `${r}-content` : void 0, store: s, children: /* @__PURE__ */ o.jsx("div", { children: /* @__PURE__ */ o.jsx(v, { children: e }) }) })
-  ] })
-);
-function E(e) {
-  return h({ animated: !0, ...e });
-}
-export {
-  B as Accordion,
-  E as useAccordion
-};

package/dist/Alert.mjs

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

package/dist/AspectRatio.mjs

@@ -1,41 +0,0 @@
-"use client";
-import { j as i } from "./jsx-runtime-Bqq1Hxg9.mjs";
-import { forwardRef as s } from "./System.mjs";
-import r, { css as n } from "@xstyled/styled-components";
-const p = r.divBox(
-  ({ ratio: t }) => n`
-    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}%;
-    }
-  `
-), c = s(
-  ({ ratio: t = 4 / 3, ...o }, e) => /* @__PURE__ */ i.jsx(p, { ratio: t, ref: e, ...o })
-);
-c.displayName = "AspectRatio";
-export {
-  c as AspectRatio
-};

package/dist/Avatar.mjs

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