welcome-ui 0.0.0-dev.1754498763060 → 0.0.0-dev.1756565601132

package/dist/TailwindButton.js

@@ -1,57 +1,214 @@
 "use client";
-import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
-const b = {
-  transitionDuration: "--duration-medium"
-}, p = {
+import { jsx as p } from "react/jsx-runtime";
+import { B as m } from "./X5NMLKT6-BVi8qtcZ.js";
+const k = "_wuiButtonBaseClass_1sgdw_1", f = "_wuiButtonDynamicClass_1sgdw_23", a = {
+  wuiButtonBaseClass: k,
+  wuiButtonDynamicClass: f
+}, z = {
+  cursor: "pointer"
+}, s = {
   circle: {
-    borderRadius: "50%"
+    aspectRatio: "1",
+    borderRadius: "100%",
+    paddingInline: "0",
+    paddingInlineHasIcon: "0"
   },
-  square: {
+  "circle-lg": {
+    fontSize: "--font-size-button-icon-lg"
+  },
+  "circle-md": {
+    fontSize: "--font-size-button-icon-md"
+  },
+  "circle-sm": {
+    fontSize: "--font-size-button-icon-sm"
+  },
+  "circle-xs": {
+    fontSize: "--font-size-button-icon-xs"
+  },
+  default: {
     borderRadius: "--radius-md"
+  },
+  square: {
+    aspectRatio: "1",
+    borderRadius: "--radius-md",
+    paddingInline: "0",
+    paddingInlineHasIcon: "0"
+  },
+  "square-lg": {
+    fontSize: "--font-size-button-icon-lg"
+  },
+  "square-md": {
+    fontSize: "--font-size-button-icon-md"
+  },
+  "square-sm": {
+    fontSize: "--font-size-button-icon-sm"
+  },
+  "square-xs": {
+    fontSize: "--font-size-button-icon-xs"
   }
-}, m = {
+}, h = {
+  lg: {
+    fontSize: "--font-size-text-sm",
+    height: "--height-button-lg",
+    paddingInline: "--spacing-xl",
+    paddingInlineHasIcon: "--spacing-lg"
+  },
   md: {
-    fontSize: "--text-sm",
-    paddingX: "--spacing-lg",
-    paddingY: "--spacing-md"
+    fontSize: "--font-size-text-sm",
+    height: "--height-button-md",
+    paddingInline: "--spacing-xl",
+    paddingInlineHasIcon: "--spacing-md"
+  },
+  sm: {
+    fontSize: "--font-size-text-xs",
+    height: "--height-button-sm",
+    paddingInline: "--spacing-sm",
+    paddingInlineHasIcon: "--spacing-md"
+  },
+  xs: {
+    fontSize: "--font-size-text-xs",
+    height: "--height-button-xs",
+    paddingInline: "--spacing-sm",
+    paddingInlineHasIcon: "--spacing-sm"
   }
-}, g = {
+}, H = {
   disabled: {
-    backgroundColor: "--color-beige-40",
-    borderColor: "--color-beige-40"
+    backgroundColorDisabled: "--color-beige-40",
+    borderColorDisabled: "--color-beige-40",
+    colorDisabled: "--color-beige-70",
+    cursor: "not-allowed",
+    outlineColorFocus: "--color-beige-10"
   },
   ghost: {
-    backgroundColor: "--color-transparent"
+    backgroundColorActive: "color-mix(in oklab, var(--color-neutral-90) 40%, transparent)",
+    backgroundColorHover: "color-mix(in oklab, var(--color-neutral-90) 10%, transparent)",
+    borderColor: "transparent",
+    borderColorActive: "transparent",
+    borderColorHover: "transparent",
+    outlineColorFocus: "color-mix(in oklab, var(--color-neutral-90) 10%, transparent)"
+  },
+  "ghost-ai": {
+    backgroundColorActive: "--color-violet-30",
+    backgroundColorHover: "--color-violet-10",
+    borderColor: "transparent",
+    borderColorActive: "--color-violet-30",
+    borderColorHover: "--color-violet-10",
+    color: "--color-violet-70",
+    outlineColorFocus: "--color-violet-50"
+  },
+  "ghost-danger": {
+    backgroundColorActive: "--color-red-20",
+    backgroundColorHover: "--color-red-10",
+    borderColor: "transparent",
+    borderColorActive: "--color-red-20",
+    borderColorHover: "--color-red-10",
+    color: "--color-red-80",
+    outlineColorFocus: "--color-red-40"
   },
   primary: {
-    backgroundColor: "--color-primary-40"
+    backgroundColor: "--color-brand-40",
+    backgroundColorActive: "--color-brand-10",
+    backgroundColorHover: "--color-brand-30",
+    borderColor: "--color-brand-40",
+    borderColorActive: "--color-brand-10",
+    borderColorHover: "--color-brand-30",
+    outlineColorFocus: "--color-brand-20"
+  },
+  "primary-ai": {
+    backgroundColor: "--color-violet-70",
+    backgroundColorActive: "--color-violet-40",
+    backgroundColorHover: "--color-violet-60",
+    borderColor: "--color-violet-70",
+    borderColorActive: "--color-violet-40",
+    borderColorHover: "--color-violet-60",
+    color: "--color-neutral-10",
+    outlineColorFocus: "--color-violet-50"
+  },
+  "primary-danger": {
+    backgroundColor: "--color-red-70",
+    backgroundColorActive: "--color-red-50",
+    backgroundColorHover: "--color-red-60",
+    borderColor: "--color-red-70",
+    borderColorActive: "--color-red-50",
+    borderColorHover: "--color-red-60",
+    color: "--color-neutral-10",
+    outlineColorFocus: "--color-red-40"
   },
   secondary: {
-    backgroundColor: "--color-neutral-90"
+    backgroundColor: "--color-neutral-90",
+    backgroundColorActive: "--color-neutral-50",
+    backgroundColorHover: "--color-neutral-70",
+    borderColor: "--color-neutral-90",
+    borderColorActive: "--color-neutral-50",
+    borderColorHover: "--color-neutral-70",
+    color: "--color-neutral-10",
+    outlineColorFocus: "--color-neutral-40"
   },
   tertiary: {
-    backgroundColor: "--color-neutral-10"
+    backgroundColor: "--color-neutral-10",
+    backgroundColorActive: "color-mix(in oklab, var(--color-neutral-90) 40%, transparent)",
+    backgroundColorHover: "color-mix(in oklab, var(--color-neutral-90) 10%, transparent)",
+    borderColor: "--color-neutral-90",
+    outlineColorFocus: "--color-neutral-40"
+  },
+  "tertiary-ai": {
+    backgroundColor: "--color-neutral-10",
+    backgroundColorActive: "--color-violet-30",
+    backgroundColorHover: "--color-violet-10",
+    borderColor: "--color-violet-70",
+    color: "--color-violet-70",
+    outlineColorFocus: "--color-violet-50"
+  },
+  "tertiary-danger": {
+    backgroundColor: "--color-neutral-10",
+    backgroundColorActive: "--color-red-20",
+    backgroundColorHover: "--color-red-10",
+    borderColor: "--color-red-80",
+    color: "--color-red-80",
+    outlineColorFocus: "--color-red-40"
   }
-}, e = (s) => Object.entries(s).reduce(
-  (o, [t, r]) => {
-    const a = r.startsWith("--") ? `var(${r})` : r, n = `--${t}: ${a};`;
-    return o[t] = n, o;
+}, r = (e) => e ? Object.entries(e).reduce(
+  (l, [t, o]) => {
+    const n = o.startsWith("--") ? `var(${o})` : o;
+    return l[`--${t}`] = n, l;
   },
   {}
-), y = u(
-  ({ children: s, className: o, shape: t = "square", size: r = "md", style: a, variant: n = "primary" }, i) => {
-    const d = `relative inline-flex items-center justify-center text-center cursor-pointer transition-all bg-color(--backgroundColor) border-color(--borderColor) px-(--paddingX) py(--paddingY) border-radius(--borderRadius) ${o}`, c = {
-      ...e(b),
-      ...e(g[n]),
-      ...e(m[r]),
-      ...e(p[t]),
-      ...a
-    };
-    return /* @__PURE__ */ l("button", { className: d, ref: i, style: { ...c }, type: "button", children: s || "Test button tailwind" });
-  }
-);
-y.displayName = "TailwindButton";
+) : {}, x = ({
+  accessibleWhenDisabled: e = !0,
+  children: l,
+  className: t = "",
+  disabled: o = !1,
+  ref: c,
+  shape: n = "default",
+  size: i = "md",
+  style: d,
+  variant: u = "primary",
+  ...b
+}) => {
+  const g = `${a.wuiButtonBaseClass} ${a.wuiButtonDynamicClass} ${t}`, C = o && "disabled" || u, v = {
+    ...r(z),
+    ...r(H[C]),
+    ...r(h[i]),
+    ...r(s[n]),
+    ...r(s[`${n}-${i}`]),
+    // compouned shapes with sizes
+    ...d
+  };
+  return /* @__PURE__ */ p(
+    m,
+    {
+      ...b,
+      accessibleWhenDisabled: e,
+      className: g,
+      disabled: o,
+      ref: c,
+      style: v,
+      type: "button",
+      children: l
+    }
+  );
+};
+x.displayName = "TailwindButton";
 export {
-  y as Button
+  x as Button
 };

package/dist/TailwindButtonFullCss.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as f } from "react/jsx-runtime";
+import { B as v } from "./X5NMLKT6-BVi8qtcZ.js";
+import { c as p } from "./classNames-DrXE3gSg.js";
+const d = "_root_1fsw4_1", m = "_shape_1fsw4_59", w = {
+  root: d,
+  "pseudo-hover": "_pseudo-hover_1fsw4_54",
+  shape: m,
+  "shape-default": "_shape-default_1fsw4_62",
+  "shape-circle": "_shape-circle_1fsw4_65",
+  "shape-square": "_shape-square_1fsw4_68",
+  "size-lg": "_size-lg_1fsw4_71",
+  "size-md": "_size-md_1fsw4_71",
+  "size-sm": "_size-sm_1fsw4_71",
+  "size-xs": "_size-xs_1fsw4_71",
+  "variant-disabled": "_variant-disabled_1fsw4_114",
+  "variant-ghost": "_variant-ghost_1fsw4_121",
+  "variant-ghost-ai": "_variant-ghost-ai_1fsw4_129",
+  "variant-ghost-danger": "_variant-ghost-danger_1fsw4_138",
+  "variant-primary": "_variant-primary_1fsw4_147",
+  "variant-primary-ai": "_variant-primary-ai_1fsw4_156",
+  "variant-primary-danger": "_variant-primary-danger_1fsw4_166",
+  "variant-secondary": "_variant-secondary_1fsw4_176",
+  "variant-tertiary": "_variant-tertiary_1fsw4_186",
+  "variant-tertiary-ai": "_variant-tertiary-ai_1fsw4_193",
+  "variant-tertiary-danger": "_variant-tertiary-danger_1fsw4_201"
+}, c = p(w), l = ({
+  accessibleWhenDisabled: _ = !0,
+  children: i,
+  className: e = "",
+  disabled: a = !1,
+  ref: n,
+  shape: r = "default",
+  size: s = "md",
+  variant: t = "primary",
+  ...o
+}) => /* @__PURE__ */ f(
+  v,
+  {
+    ...o,
+    accessibleWhenDisabled: _,
+    className: c(
+      "root",
+      t && `variant-${a && "disabled" || t}`,
+      r && `shape-${r}`,
+      s && `size-${s}`,
+      e
+    ),
+    disabled: a,
+    ref: n,
+    type: "button",
+    children: i
+  }
+);
+l.displayName = "ButtonFullCss";
+export {
+  l as ButtonFullCss
+};

package/dist/TailwindButtonNoTailwind.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as h } from "react/jsx-runtime";
+import { B as p } from "./X5NMLKT6-BVi8qtcZ.js";
+import { c as j } from "./classNames-DrXE3gSg.js";
+const v = "_root_hjc2k_5", k = "_spin_hjc2k_1", m = "_ping_hjc2k_1", y = "_pulse_hjc2k_1", g = "_bounce_hjc2k_1", l = {
+  root: v,
+  "size-lg": "_size-lg_hjc2k_55",
+  "size-md": "_size-md_hjc2k_58",
+  "size-sm": "_size-sm_hjc2k_61",
+  "size-xs": "_size-xs_hjc2k_64",
+  "shape-circle": "_shape-circle_hjc2k_84",
+  "shape-square": "_shape-square_hjc2k_89",
+  "variant-primary": "_variant-primary_hjc2k_134",
+  "variant-ghost": "_variant-ghost_hjc2k_153",
+  "variant-ghost-ai": "_variant-ghost-ai_hjc2k_169",
+  "variant-ghost-danger": "_variant-ghost-danger_hjc2k_186",
+  "variant-primary-ai": "_variant-primary-ai_hjc2k_203",
+  "variant-primary-danger": "_variant-primary-danger_hjc2k_221",
+  "variant-secondary": "_variant-secondary_hjc2k_239",
+  "variant-tertiary": "_variant-tertiary_hjc2k_257",
+  "variant-tertiary-ai": "_variant-tertiary-ai_hjc2k_274",
+  "variant-tertiary-danger": "_variant-tertiary-danger_hjc2k_292",
+  spin: k,
+  ping: m,
+  pulse: y,
+  bounce: g
+}, u = j(l), d = ({
+  accessibleWhenDisabled: a = !0,
+  children: r,
+  className: t = "",
+  disabled: i = !1,
+  ref: _,
+  shape: s = "default",
+  size: n = "md",
+  variant: e = "primary",
+  ...c
+}) => {
+  const o = t.split(" ");
+  return /* @__PURE__ */ h(
+    p,
+    {
+      ...c,
+      accessibleWhenDisabled: a,
+      className: u("root", `variant-${e}`, `shape-${s}`, `size-${n}`, ...o),
+      disabled: i,
+      ref: _,
+      type: "button",
+      children: r
+    }
+  );
+};
+d.displayName = "ButtonNoTailwind";
+export {
+  d as ButtonNoTailwind
+};

package/dist/TailwindButtonProposal.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { B as d } from "./X5NMLKT6-BVi8qtcZ.js";
+import { c as m } from "./classNames-DrXE3gSg.js";
+const n = "_root_1urpz_1", z = {
+  root: n,
+  "pseudo-hover": "_pseudo-hover_1urpz_53",
+  "--disabled": "_--disabled_1urpz_58",
+  "--ghost": "_--ghost_1urpz_73",
+  "--ghost-ai": "_--ghost-ai_1urpz_84",
+  "--ghost-danger": "_--ghost-danger_1urpz_95",
+  "--primary": "_--primary_1urpz_106",
+  "--primary-ai": "_--primary-ai_1urpz_117",
+  "--primary-danger": "_--primary-danger_1urpz_128",
+  "--secondary": "_--secondary_1urpz_139",
+  "--tertiary": "_--tertiary_1urpz_150",
+  "--tertiary-ai": "_--tertiary-ai_1urpz_161",
+  "--tertiary-danger": "_--tertiary-danger_1urpz_172",
+  "--lg": "_--lg_1urpz_183",
+  "--square": "_--square_1urpz_189",
+  "--circle": "_--circle_1urpz_189",
+  "--md": "_--md_1urpz_193",
+  "--sm": "_--sm_1urpz_203",
+  "--xs": "_--xs_1urpz_213",
+  "--default": "_--default_1urpz_230"
+}, c = m(z), y = ({
+  accessibleWhenDisabled: o = !0,
+  children: e,
+  className: p = "",
+  disabled: r = !1,
+  ref: s,
+  shape: _ = "default",
+  size: t = "md",
+  variant: a = "primary",
+  ...u
+}) => /* @__PURE__ */ i(
+  d,
+  {
+    ...u,
+    accessibleWhenDisabled: o,
+    className: c(
+      "root",
+      a && `--${r && "disabled" || a}`,
+      _ && `--${_}`,
+      t && `--${t}`,
+      p
+    ),
+    disabled: r,
+    ref: s,
+    type: "button",
+    children: e
+  }
+);
+y.displayName = "ButtonProposal";
+export {
+  y as ButtonProposal
+};

package/dist/classNames-DrXE3gSg.js

@@ -0,0 +1,22 @@
+"use client";
+function f(r) {
+  return function(...s) {
+    const n = /* @__PURE__ */ new Set();
+    function o(...c) {
+      for (const e of c)
+        if (e) {
+          if (typeof e == "string")
+            n.add(r[e] || e);
+          else if (Array.isArray(e))
+            o(...e);
+          else if (typeof e == "object")
+            for (const t in e)
+              Object.prototype.hasOwnProperty.call(e, t) && e[t] && n.add(r[t] || t);
+        }
+    }
+    return o(...s), Array.from(n).join(" ");
+  };
+}
+export {
+  f as c
+};