welcome-ui 9.0.0-alpha.0 → 9.0.0-alpha.2

package/README.md

@@ -2,7 +2,7 @@
 
 ![Welcome UI Logo](https://github.com/user-attachments/assets/e7df47fd-e6c8-462a-ac09-d052d67555bc)
 
-Welcome to the _Welcome UI library_ created by [Welcome to the jungle](https://www.welcometothejungle.com), a customizable design system with react • typescript • styled-components • styled-system and ariakit.
+Welcome to the _Welcome UI library_ created by [Welcome to the jungle](https://www.welcometothejungle.com), a customizable design system with react, typescript, tailwindcss and ariakit.
 
 Here you'll find all the core components you need to create a delightful webapp.
 
@@ -10,59 +10,19 @@ Here you'll find all the core components you need to create a delightful webapp.
 
 ---
 
-[![License](https://img.shields.io/npm/l/welcome-ui.svg)](https://github.com/WTTJ/welcome-ui/tree/main/LICENSE) ![Code formating](https://img.shields.io/badge/code%20formating-prettier-blue.svg) ![Code style](https://img.shields.io/badge/code%20style-styled--components-ff69b4.svg) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-mediumspringgreen.svg)](https://github.com/WTTJ/welcome-ui/tree/main/CONTRIBUTING.mdx) [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
-
----
-
 ## Installation
 
 1 - Install the `welcome-ui` package and **peer dependencies** listed below:
 
 ```bash
-yarn add welcome-ui @xstyled/styled-components@^3.7.3 react@^18.0.0 styled-components@^5.3.9
+yarn add welcome-ui react@^18.0.0
 ```
 
 ## Import library & Theme
 
 Getting started
 
-```js
-import React from 'react'
-import { createTheme } from 'welcome-ui/theme'
-import { WuiProvider } from 'welcome-ui/WuiProvider'
-import { Button } from 'welcome-ui/Button'
-
-// Add theme options (if you want)
-const options = {
-  defaultFontFamily: 'Helvetica',
-  headingFontFamily: 'Georgia',
-  colors: {
-    primary: {
-      50: '#124C80',
-    },
-    green: {
-      50: '#32CD32',
-    },
-  },
-}
-
-// Create your theme
-const theme = createTheme(options)
-export default function Root() {
-  return (
-    // Wrap your components with <WuiProvider /> with your theme
-    <WuiProvider
-      theme={theme}
-      // Will inject a CSS reset with normalizer
-      hasGlobalStyle
-      // Will show the focus ring on keyboard navigation only
-      shouldHideFocusRingOnClick
-    >
-      <Button>Welcome!</Button>
-    </WuiProvider>
-  )
-}
-```
+TODO
 
 ## Develop on local
 

package/dist/{4CMBR7SL-DXQR7a9T.js → 4CMBR7SL-Dhp8uJop.js}

@@ -1,6 +1,6 @@
 "use client";
-import { t as Q, c as k, s as R, i as X, f as U, b as h, d as Z } from "./YV4JVR4I-BN6SUVuh.js";
-import { J as S, I as C, M as p, K as L, N as ee, O as te, L as ne } from "./LVA2YJMS-C6Bdr5Em.js";
+import { t as Q, c as z, s as R, i as X, f as U, b as h, a as Z } from "./YV4JVR4I-CVFstk2K.js";
+import { y as S, x as C, S as p, z as L, s as ee, o as te, B as ne } from "./LVA2YJMS-NUHCRwFZ.js";
 function re(t) {
   var i;
   const e = t.find((a) => !!a.element), o = [...t].reverse().find((a) => !!a.element);
@@ -26,10 +26,10 @@ function se(t = {}) {
   ), s = new Map(o.map((r) => [r.id, r])), a = {
     items: o,
     renderedItems: S(e == null ? void 0 : e.renderedItems, [])
-  }, d = ie(t.store), u = k(
+  }, d = ie(t.store), u = z(
     { items: o, renderedItems: a.renderedItems },
     d
-  ), n = k(a, t.store), b = (r) => {
+  ), n = z(a, t.store), b = (r) => {
     const l = ee(r, (c) => c.element);
     u.setState("renderedItems", l), n.setState("renderedItems", l);
   };
@@ -42,13 +42,13 @@ function se(t = {}) {
     });
     if (typeof IntersectionObserver != "function")
       return () => cancelAnimationFrame(c);
-    const g = () => {
+    const x = () => {
       if (l) {
         l = !1;
         return;
       }
       cancelAnimationFrame(c), c = requestAnimationFrame(() => b(r.renderedItems));
-    }, F = re(r.renderedItems), f = new IntersectionObserver(g, { root: F });
+    }, F = re(r.renderedItems), f = new IntersectionObserver(x, { root: F });
     for (const m of r.renderedItems)
       m.element && f.observe(m.element);
     return () => {
@@ -56,24 +56,24 @@ function se(t = {}) {
     };
   }));
   const E = (r, l, c = !1) => {
-    let g;
+    let x;
     return l((f) => {
-      const m = f.findIndex(({ id: x }) => x === r.id), w = f.slice();
+      const m = f.findIndex(({ id: g }) => g === r.id), w = f.slice();
       if (m !== -1) {
-        g = f[m];
-        const x = L(L({}, g), r);
-        w[m] = x, s.set(r.id, x);
+        x = f[m];
+        const g = L(L({}, x), r);
+        w[m] = g, s.set(r.id, g);
       } else
         w.push(r), s.set(r.id, r);
       return w;
     }), () => {
       l((f) => {
-        if (!g)
-          return c && s.delete(r.id), f.filter(({ id: x }) => x !== r.id);
-        const m = f.findIndex(({ id: x }) => x === r.id);
+        if (!x)
+          return c && s.delete(r.id), f.filter(({ id: g }) => g !== r.id);
+        const m = f.findIndex(({ id: g }) => g === r.id);
         if (m === -1) return f;
         const w = f.slice();
-        return w[m] = g, s.set(r.id, g), w;
+        return w[m] = x, s.set(r.id, x), w;
       });
     };
   }, P = (r) => E(
@@ -95,7 +95,7 @@ function se(t = {}) {
       let l = s.get(r);
       if (!l) {
         const { items: c } = u.getState();
-        l = c.find((g) => g.id === r), l && s.set(r, l);
+        l = c.find((x) => x.id === r), l && s.set(r, l);
       }
       return l || null;
     },
@@ -133,7 +133,7 @@ function ce(t, i, e = !1) {
     ...t.slice(0, o)
   ];
 }
-function J(t) {
+function Y(t) {
   const i = [];
   for (const e of t) {
     const o = i.find((s) => {
@@ -144,7 +144,7 @@ function J(t) {
   }
   return i;
 }
-function K(t) {
+function j(t) {
   let i = 0;
   for (const { length: e } of t)
     e > i && (i = e);
@@ -158,7 +158,7 @@ function ue(t) {
   };
 }
 function fe(t, i, e) {
-  const o = K(t);
+  const o = j(t);
   for (const s of t)
     for (let a = 0; a < o; a += 1) {
       const d = s[a];
@@ -170,7 +170,7 @@ function fe(t, i, e) {
   return t;
 }
 function me(t) {
-  const i = J(t), e = K(i), o = [];
+  const i = Y(t), e = j(i), o = [];
   for (let s = 0; s < e; s += 1)
     for (const a of i) {
       const d = a[s];
@@ -219,7 +219,7 @@ function Se(t = {}) {
     focusLoop: S(t.focusLoop, e == null ? void 0 : e.focusLoop, !1),
     focusWrap: S(t.focusWrap, e == null ? void 0 : e.focusWrap, !1),
     focusShift: S(t.focusShift, e == null ? void 0 : e.focusShift, !1)
-  }), d = k(a, o, t.store);
+  }), d = z(a, o, t.store);
   R(
     d,
     () => Z(d, ["renderedItems", "activeId"], (n) => {
@@ -234,28 +234,28 @@ function Se(t = {}) {
     const r = d.getState(), {
       skip: l = 0,
       activeId: c = r.activeId,
-      focusShift: g = r.focusShift,
+      focusShift: x = r.focusShift,
       focusLoop: F = r.focusLoop,
       focusWrap: f = r.focusWrap,
       includesBaseElement: m = r.includesBaseElement,
       renderedItems: w = r.renderedItems,
-      rtl: x = r.rtl
-    } = b, y = n === "up" || n === "down", z = n === "next" || n === "down", Y = z ? x && !y : !x || y, j = g && !l;
+      rtl: g = r.rtl
+    } = b, y = n === "up" || n === "down", O = n === "next" || n === "down", H = O ? g && !y : !g || y, J = x && !l;
     let v = y ? le(
-      fe(J(w), c, j)
+      fe(Y(w), c, J)
     ) : w;
-    if (v = Y ? $(v) : v, v = y ? me(v) : v, c == null)
+    if (v = H ? $(v) : v, v = y ? me(v) : v, c == null)
       return (E = _(v)) == null ? void 0 : E.id;
     const M = v.find((I) => I.id === c);
     if (!M)
       return (P = _(v)) == null ? void 0 : P.id;
-    const D = v.some((I) => I.rowId), H = v.indexOf(M), N = v.slice(H + 1), O = G(N, M.rowId);
+    const D = v.some((I) => I.rowId), K = v.indexOf(M), N = v.slice(K + 1), W = G(N, M.rowId);
     if (l) {
-      const I = de(O, c), B = I.slice(l)[0] || // If we can't find an item, just return the last one.
+      const I = de(W, c), B = I.slice(l)[0] || // If we can't find an item, just return the last one.
       I[I.length - 1];
       return B == null ? void 0 : B.id;
     }
-    const T = F && (y ? F !== "horizontal" : F !== "vertical"), V = D && f && (y ? f !== "horizontal" : f !== "vertical"), A = z ? (!D || y) && T && m : y ? m : !1;
+    const T = F && (y ? F !== "horizontal" : F !== "vertical"), V = D && f && (y ? f !== "horizontal" : f !== "vertical"), A = O ? (!D || y) && T && m : y ? m : !1;
     if (T) {
       const I = V && !A ? v : G(v, M.rowId), B = ce(I, c, A), q = _(B, c);
       return q == null ? void 0 : q.id;
@@ -268,13 +268,13 @@ function Se(t = {}) {
         // the row. So moving next from the last item will focus on the
         // composite container. On grid composites, horizontal navigation never
         // focuses on the composite container, only vertical.
-        A ? O : N,
+        A ? W : N,
         c
       );
       return A ? (I == null ? void 0 : I.id) || null : I == null ? void 0 : I.id;
     }
-    const W = _(O, c);
-    return !W && A ? null : W == null ? void 0 : W.id;
+    const k = _(W, c);
+    return !k && A ? null : k == null ? void 0 : k.id;
   };
   return C(L(L({}, o), d), {
     setBaseElement: (n) => d.setState("baseElement", n),
@@ -296,7 +296,7 @@ function Se(t = {}) {
     up: (n) => (n !== void 0 && typeof n == "number" && (n = { skip: n }), u("up", n))
   });
 }
-function ge(t, i, e) {
+function xe(t, i, e) {
   return t = oe(t, i, e), h(t, e, "activeId", "setActiveId"), h(t, e, "includesBaseElement"), h(t, e, "virtualFocus"), h(t, e, "orientation"), h(t, e, "rtl"), h(t, e, "focusLoop"), h(t, e, "focusWrap"), h(t, e, "focusShift"), t;
 }
 export {
@@ -304,5 +304,5 @@ export {
   Se as c,
   le as f,
   $ as r,
-  ge as u
+  xe as u
 };

package/dist/{ASMQKSDT-GE79MhKX.js → ASMQKSDT-SH1qSiMi.js}

@@ -1,10 +1,10 @@
 "use client";
-import { t as w, f as D, c as G, a as H, _ as O, k as V, m as W, F as $, u as P, v as q, b as z, j as B, d as v, G as I } from "./LVA2YJMS-C6Bdr5Em.js";
+import { v as M, l as $, c as w, n as G, _ as H, N as O, G as V, $ as W, b as P, D as q, e as z, f as B, g as v, r as I } from "./LVA2YJMS-NUHCRwFZ.js";
 import { createContext as J, useState as K, useRef as L, useEffect as Q } from "react";
-import { u as X } from "./KUU7WJ55-CRa_letc.js";
-import { u as Y } from "./YV4JVR4I-BN6SUVuh.js";
+import { u as X } from "./KUU7WJ55-CsIy9XMu.js";
+import { d as Y } from "./YV4JVR4I-CVFstk2K.js";
 import { jsx as Z } from "react/jsx-runtime";
-var ee = J(!1), re = w(), te = re.useContext, A = "input";
+var ee = J(!1), re = M(), te = re.useContext, A = "input";
 function y(t, a) {
   a ? t.indeterminate = !0 : t.indeterminate && (t.indeterminate = !1);
 }
@@ -14,7 +14,7 @@ function ne(t, a) {
 function _(t) {
   return Array.isArray(t) ? t.toString() : t;
 }
-var oe = G(
+var oe = w(
   function(a) {
     var f = a, {
       store: i,
@@ -22,7 +22,7 @@ var oe = G(
       value: n,
       checked: p,
       defaultChecked: C
-    } = f, r = O(f, [
+    } = f, r = H(f, [
       "store",
       "name",
       "value",
@@ -31,7 +31,7 @@ var oe = G(
     ]);
     const T = te();
     i = i || T;
-    const [E, S] = K(C ?? !1), u = Y(i, (e) => {
+    const [E, N] = K(C ?? !1), s = Y(i, (e) => {
       if (p !== void 0) return p;
       if ((e == null ? void 0 : e.value) === void 0) return E;
       if (n != null) {
@@ -42,11 +42,11 @@ var oe = G(
         return e.value === n;
       }
       return Array.isArray(e.value) ? !1 : typeof e.value == "boolean" ? e.value : !1;
-    }), k = L(null), N = V(k, A), o = ne(N, r.type), m = u ? u === "mixed" : void 0, s = u === "mixed" ? !1 : u, R = W(r), [U, j] = $();
+    }), k = L(null), S = O(k, A), o = ne(S, r.type), m = s ? s === "mixed" : void 0, u = s === "mixed" ? !1 : s, R = V(r), [U, j] = W();
     Q(() => {
       const e = k.current;
-      e && (y(e, m), !o && (e.checked = s, h !== void 0 && (e.name = h), n !== void 0 && (e.value = `${n}`)));
-    }, [U, m, o, s, h, n]);
+      e && (y(e, m), !o && (e.checked = u, h !== void 0 && (e.name = h), n !== void 0 && (e.value = `${n}`)));
+    }, [U, m, o, u, h, n]);
     const x = r.onChange, b = P((e) => {
       if (R) {
         e.stopPropagation(), e.preventDefault();
@@ -54,35 +54,35 @@ var oe = G(
       }
       if (y(e.currentTarget, m), o || (e.currentTarget.checked = !e.currentTarget.checked, j()), x == null || x(e), e.defaultPrevented) return;
       const d = e.currentTarget.checked;
-      S(d), i == null || i.setValue((c) => {
+      N(d), i == null || i.setValue((c) => {
         if (n == null) return d;
         const l = _(n);
-        return Array.isArray(c) ? d ? c.includes(l) ? c : [...c, l] : c.filter((M) => M !== l) : c === l ? !1 : l;
+        return Array.isArray(c) ? d ? c.includes(l) ? c : [...c, l] : c.filter((F) => F !== l) : c === l ? !1 : l;
       });
-    }), g = r.onClick, F = P((e) => {
+    }), g = r.onClick, D = P((e) => {
       g == null || g(e), !e.defaultPrevented && (o || b(e));
     });
     return r = q(
       r,
-      (e) => /* @__PURE__ */ Z(ee.Provider, { value: s, children: e }),
-      [s]
+      (e) => /* @__PURE__ */ Z(ee.Provider, { value: u, children: e }),
+      [u]
     ), r = z(v({
       role: o ? void 0 : "checkbox",
       type: o ? "checkbox" : void 0,
-      "aria-checked": u
+      "aria-checked": s
     }, r), {
       ref: B(k, r.ref),
       onChange: b,
-      onClick: F
+      onClick: D
     }), r = X(v({ clickOnEnter: !o }, r)), I(v({
       name: o ? h : void 0,
       value: o ? n : void 0,
-      checked: s
+      checked: u
     }, r));
   }
-), de = D(function(a) {
+), de = $(function(a) {
   const f = oe(a);
-  return H(A, f);
+  return G(A, f);
 });
 export {
   de as C

package/dist/{AXB53BZF-ClCOTGI-.js → AXB53BZF-BHeessqV.js}

@@ -1,7 +1,7 @@
 "use client";
-import { u } from "./P4IRICAX-CvgWqpy0.js";
-import { a as c } from "./VGCJ63VH-Bdd6jzVW.js";
-import { f as l, c as p, a as D, _ as m, i as g, d as a, g as v } from "./LVA2YJMS-C6Bdr5Em.js";
+import { u } from "./P4IRICAX-7kH4HzWI.js";
+import { b as c } from "./VGCJ63VH-CVhs4PYt.js";
+import { l, c as p, n as D, _ as m, i as g, g as a, I as v } from "./LVA2YJMS-NUHCRwFZ.js";
 var d = "button", f = p(
   function(r) {
     var s = r, { store: o } = s, e = m(s, ["store"]);

package/dist/Accordion.js

@@ -1,13 +1,13 @@
 "use client";
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { D as d } from "./P4IRICAX-CvgWqpy0.js";
-import { d as a } from "./VGCJ63VH-Bdd6jzVW.js";
-import { e as k } from "./VGCJ63VH-Bdd6jzVW.js";
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { D as d } from "./P4IRICAX-7kH4HzWI.js";
+import { D as a } from "./VGCJ63VH-CVhs4PYt.js";
+import { u as k } from "./VGCJ63VH-CVhs4PYt.js";
 import { forwardRef as _ } from "react";
-import "./Icon-CvQNL_iy.js";
-import { R as u } from "./index-BYbxYLuX.js";
+import "./Icon-BisRi8B3.js";
+import { R as u } from "./index-Dcq5gh3E.js";
 import { Text as f } from "./Text.js";
-import { c as h } from "./classNames-qiokGROM.js";
+import { c as h } from "./index-PAaZGbyz.js";
 const p = "_root_173le_2", v = "_icon_173le_11", x = "_disclosure_173le_23", N = {
   root: p,
   icon: v,
@@ -15,13 +15,13 @@ const p = "_root_173le_2", v = "_icon_173le_11", x = "_disclosure_173le_23", N =
   "disclosure-content": "_disclosure-content_173le_48",
   "content-child": "_content-child_173le_63"
 }, s = h(N), z = _(
-  ({ children: t, className: r, dataTestId: c, store: e, title: n, ...l }, m) => /* @__PURE__ */ i("div", { className: s("root", r), ref: m, ...l, children: [
-    /* @__PURE__ */ i(
+  ({ children: e, className: r, dataTestId: c, store: i, title: n, ...l }, m) => /* @__PURE__ */ t("div", { className: s("root", r), ref: m, ...l, children: [
+    /* @__PURE__ */ t(
       d,
       {
         className: s("disclosure"),
         "data-testid": c ? `${c}-title` : void 0,
-        store: e,
+        store: i,
         children: [
           /* @__PURE__ */ o(f, { variant: "h5", children: n }),
           /* @__PURE__ */ o("div", { className: s("icon"), children: /* @__PURE__ */ o(u, { size: "sm" }) })
@@ -33,8 +33,8 @@ const p = "_root_173le_2", v = "_icon_173le_11", x = "_disclosure_173le_23", N =
       {
         className: s("disclosure-content"),
         "data-testid": c ? `${c}-content` : void 0,
-        store: e,
-        children: /* @__PURE__ */ o("div", { className: s("content-child"), children: t })
+        store: i,
+        children: /* @__PURE__ */ o("div", { className: s("content-child"), children: e })
       }
     )
   ] })

package/dist/Alert.js

@@ -5,7 +5,7 @@ import { Button as y } from "./Button.js";
 import { CloseButton as I } from "./CloseButton.js";
 import { Text as b } from "./Text.js";
 import { VariantIcon as S } from "./VariantIcon.js";
-import { c as T } from "./classNames-qiokGROM.js";
+import { c as T } from "./index-PAaZGbyz.js";
 const V = "_root_1c0qe_2", $ = "_icon_1c0qe_55", E = "_content_1c0qe_58", R = "_title_1c0qe_88", O = {
   root: V,
   "size-sm": "_size-sm_1c0qe_16",

package/dist/AspectRatio.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as i } from "react/jsx-runtime";
-import { c as e } from "./classNames-qiokGROM.js";
+import { c as e } from "./index-PAaZGbyz.js";
 import { f as _ } from "./forwardRefWithAs-8eP3ZN15.js";
+import "react";
 const c = "_root_1s56r_2", m = {
   root: c,
   "ratio-square": "_ratio-square_1s56r_8",

package/dist/Avatar.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as i } from "react";
-import { c as _ } from "./classNames-qiokGROM.js";
+import { c as _ } from "./index-PAaZGbyz.js";
 const l = "_root_zm5un_2", u = {
   root: l,
   "size-sm": "_size-sm_zm5un_24",