@indielayer/ui 1.14.5 → 1.15.0

package/lib/components/table/TableCell.vue.js

@@ -1,12 +1,12 @@
-import { defineComponent as d, computed as c, openBlock as m, createElementBlock as u, normalizeStyle as p, unref as n, normalizeClass as f, renderSlot as h } from "vue";
-import { useTheme as g } from "../../composables/useTheme.js";
-const o = {
+import { defineComponent as h, computed as f, openBlock as o, createElementBlock as m, normalizeClass as n, unref as l, normalizeStyle as c, createBlock as g, resolveDynamicComponent as v, mergeProps as y, withCtx as b, createElementVNode as w, renderSlot as p } from "vue";
+import { useTheme as S } from "../../composables/useTheme.js";
+const i = {
   textAlign: [null, "left", "center", "right", "justify"],
   verticalAlign: [null, "baseline", "bottom", "middle", "text-bottom", "text-top", "top"]
-}, v = {
+}, C = {
   textAlign: {
     type: String,
-    validator: (e) => o.textAlign.includes(e)
+    validator: (a) => i.textAlign.includes(a)
   },
   truncate: Boolean,
   dense: Boolean,
@@ -14,28 +14,52 @@ const o = {
   verticalAlign: {
     type: String,
     default: "middle",
-    validator: (e) => o.verticalAlign.includes(e)
-  }
-}, b = {
+    validator: (a) => i.verticalAlign.includes(a)
+  },
+  to: [String, Object],
+  href: String,
+  target: String
+}, k = {
   name: "XTableCell",
-  validators: o
-}, w = /* @__PURE__ */ d({
-  ...b,
-  props: v,
-  setup(e) {
-    const t = e, l = c(() => typeof t.width == "number" ? `${t.width}px` : t.width), { styles: a, classes: i, className: r } = g("TableCell", {}, t);
-    return (s, x) => (m(), u("td", {
-      style: p([n(a), { width: l.value, minWidth: l.value, maxWidth: l.value }]),
-      class: f([
+  validators: i
+}, N = /* @__PURE__ */ h({
+  ...k,
+  props: C,
+  setup(a) {
+    const r = a, t = f(() => typeof r.width == "number" ? `${r.width}px` : r.width), { styles: s, classes: d, className: u } = S("TableCell", {}, r);
+    return (e, A) => e.to || e.href ? (o(), m("td", {
+      key: 0,
+      class: n(["relative", l(u)]),
+      style: c([{ width: t.value, minWidth: t.value, maxWidth: t.value }])
+    }, [
+      (o(), g(v(e.to ? "router-link" : "a"), y(e.href ? { href: e.href } : {}, {
+        target: e.target,
+        to: e.to,
+        style: l(s),
+        class: l(d).wrapper
+      }), {
+        default: b(() => [
+          w("div", {
+            class: n([e.truncate ? "truncate" : ""])
+          }, [
+            p(e.$slots, "default")
+          ], 2)
+        ]),
+        _: 3
+      }, 16, ["target", "to", "style", "class"]))
+    ], 6)) : (o(), m("td", {
+      key: 1,
+      style: c([l(s), { width: t.value, minWidth: t.value, maxWidth: t.value }]),
+      class: n([
         "relative",
-        n(r),
-        n(i).wrapper
+        l(u),
+        l(d).wrapper
       ])
     }, [
-      h(s.$slots, "default")
+      p(e.$slots, "default")
     ], 6));
   }
 });
 export {
-  w as default
+  N as default
 };

package/lib/components/table/TableHeader.vue.js

@@ -1,7 +1,7 @@
-import { defineComponent as g, openBlock as o, createElementBlock as n, normalizeStyle as k, unref as s, normalizeClass as a, createElementVNode as r, renderSlot as v, createBlock as c, createCommentVNode as p, Fragment as m } from "vue";
-import { useTheme as h } from "../../composables/useTheme.js";
-import b from "../tooltip/ToggleTip.vue.js";
-const x = { class: "flex items-center gap-1" }, B = {
+import { defineComponent as g, openBlock as o, createElementBlock as n, normalizeStyle as k, unref as s, normalizeClass as i, createElementVNode as r, renderSlot as c, createBlock as h, createCommentVNode as p, Fragment as m } from "vue";
+import { useTheme as v } from "../../composables/useTheme.js";
+import x from "../tooltip/ToggleTip.vue.js";
+const b = { class: "flex items-center gap-1" }, B = {
   key: 2,
   d: "m3 9l4-4l4 4M7 5v14m14-4l-4 4l-4-4m4 4V5"
 }, d = {
@@ -23,28 +23,28 @@ const x = { class: "flex items-center gap-1" }, B = {
   ...C,
   props: A,
   setup(l) {
-    const u = l, { styles: y, classes: i, className: f } = h("TableHeader", {}, u);
+    const u = l, { styles: y, classes: a, className: f } = v("TableHeader", {}, u);
     return (e, t) => (o(), n("th", {
       style: k(s(y)),
-      class: a([s(f), s(i).th, "group/th"])
+      class: i([s(f), s(a).th, "group/th"])
     }, [
       r("div", {
-        class: a(s(i).header)
+        class: i(s(a).header)
       }, [
-        r("div", x, [
-          v(e.$slots, "default"),
-          e.tooltip ? (o(), c(b, {
+        r("div", b, [
+          c(e.$slots, "default"),
+          e.tooltip ? (o(), h(x, {
             key: 0,
             content: e.tooltip
           }, null, 8, ["content"])) : p("", !0)
         ]),
         e.sortable ? (o(), n("svg", {
           key: 0,
-          class: a(["shrink-0", [
-            s(i).sortIcon,
+          class: i(["shrink-0", [
+            s(a).sortIcon,
             e.textAlign === "right" ? "-mr-4 -translate-x-4" : "-ml-4 translate-x-4",
-            [e.sort && [1, -1].includes(e.sort) ? "" : "invisible group-hover/th:visible"],
-            [e.sort !== -1 && e.sort !== 1 ? "text-secondary-400 dark:text-secondary-500" : "text-primary-700 dark:text-primary-400"]
+            [e.sort && [1, -1].includes(e.sort) ? "" : "group-hover/th:text-secondary-500 dark:group-hover/th:text-secondary-400"],
+            [e.sort !== -1 && e.sort !== 1 ? "text-secondary-400 dark:text-secondary-500" : "text-primary-500 dark:text-primary-400"]
           ]]),
           width: "24",
           height: "24",

package/lib/components/table/theme/TableCell.base.theme.js

@@ -1,8 +1,8 @@
 const i = {
   classes: {
-    wrapper: ({ props: e }) => {
-      const t = ["px-3"];
-      return t.push(e.dense ? "h-9 py-0.5" : "h-11 py-1"), e.textAlign === "left" ? t.push("text-left") : e.textAlign === "center" ? t.push("text-center") : e.textAlign === "right" ? t.push("text-right") : e.textAlign === "justify" && t.push("text-justify"), e.verticalAlign === "baseline" ? t.push("align-baseline") : e.verticalAlign === "bottom" ? t.push("align-bottom") : e.verticalAlign === "middle" ? t.push("align-middle") : e.verticalAlign === "text-bottom" ? t.push("align-text-bottom") : e.verticalAlign === "text-top" ? t.push("align-text-top") : e.verticalAlign === "top" && t.push("align-top"), e.truncate && t.push("truncate"), t;
+    wrapper: ({ props: t }) => {
+      const e = ["px-3"];
+      return e.push(t.dense ? "h-9 py-0.5" : "h-11 py-1"), t.to || t.href ? (e.push("flex items-center"), t.textAlign === "left" ? e.push("justify-start") : t.textAlign === "center" ? e.push("justify-center") : t.textAlign === "right" ? e.push("justify-end") : t.textAlign === "justify" && e.push("justify-center")) : (t.textAlign === "left" ? e.push("text-left") : t.textAlign === "center" ? e.push("text-center") : t.textAlign === "right" ? e.push("text-right") : t.textAlign === "justify" && e.push("text-justify"), t.verticalAlign === "baseline" ? e.push("align-baseline") : t.verticalAlign === "bottom" ? e.push("align-bottom") : t.verticalAlign === "middle" ? e.push("align-middle") : t.verticalAlign === "text-bottom" ? e.push("align-text-bottom") : t.verticalAlign === "text-top" ? e.push("align-text-top") : t.verticalAlign === "top" && e.push("align-top")), t.truncate && e.push("truncate"), e;
     }
   }
 }, l = i;

package/lib/components/tag/Tag.vue.d.ts

@@ -10,6 +10,7 @@ declare const tagProps: {
     outlined: BooleanConstructor;
     filled: BooleanConstructor;
     disabled: BooleanConstructor;
+    to: (ObjectConstructor | StringConstructor)[];
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
@@ -34,6 +35,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     outlined: BooleanConstructor;
     filled: BooleanConstructor;
     disabled: BooleanConstructor;
+    to: (ObjectConstructor | StringConstructor)[];
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
@@ -53,6 +55,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     outlined: BooleanConstructor;
     filled: BooleanConstructor;
     disabled: BooleanConstructor;
+    to: (ObjectConstructor | StringConstructor)[];
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;

package/lib/components/tag/Tag.vue.js

@@ -1,15 +1,15 @@
-import { defineComponent as g, computed as v, openBlock as l, createBlock as b, resolveDynamicComponent as x, normalizeClass as s, unref as r, normalizeStyle as k, withCtx as y, createElementVNode as t, renderSlot as n, createElementBlock as z, createVNode as B, createCommentVNode as C } from "vue";
-import { useColors as h } from "../../composables/useColors.js";
+import { defineComponent as k, computed as l, useAttrs as x, openBlock as n, createBlock as h, resolveDynamicComponent as y, normalizeClass as t, unref as r, normalizeStyle as z, withCtx as B, createElementVNode as s, renderSlot as i, createElementBlock as C, createVNode as S, withModifiers as _, createCommentVNode as w } from "vue";
+import { useColors as N } from "../../composables/useColors.js";
 import { useCommon as d } from "../../composables/useCommon.js";
-import { useTheme as _ } from "../../composables/useTheme.js";
-import { closeIcon as N } from "../../common/icons.js";
-import S from "../icon/Icon.vue.js";
-const $ = { class: "flex items-center gap-2" }, w = { class: "truncate" }, T = {
+import { useTheme as T } from "../../composables/useTheme.js";
+import { closeIcon as $ } from "../../common/icons.js";
+import V from "../icon/Icon.vue.js";
+const E = { class: "flex items-center gap-2" }, I = { class: "truncate" }, j = {
   key: 0,
   class: "absolute right-1.5 top-0 h-full flex items-center"
-}, V = {
+}, A = {
   ...d.props(),
-  ...h.props("secondary"),
+  ...N.props("secondary"),
   tag: {
     type: String,
     default: "span"
@@ -18,54 +18,56 @@ const $ = { class: "flex items-center gap-2" }, w = { class: "truncate" }, T = {
   removable: Boolean,
   outlined: Boolean,
   filled: Boolean,
-  disabled: Boolean
-}, E = {
+  disabled: Boolean,
+  to: [String, Object]
+}, D = {
   name: "XTag",
   validators: {
     ...d.validators()
   }
-}, A = /* @__PURE__ */ g({
-  ...E,
-  props: V,
+}, G = /* @__PURE__ */ k({
+  ...D,
+  props: A,
   emits: ["remove"],
-  setup(i) {
-    const o = i, m = v(() => o.size === "xs" ? "xs" : o.size === "sm" ? "sm" : o.size === "lg" ? "md" : o.size === "xl" ? "lg" : "sm"), { styles: c, classes: u, className: p } = _("Tag", {}, o);
-    return (e, a) => (l(), b(x(e.tag), {
-      class: s([
+  setup(c) {
+    const o = c, m = l(() => o.size === "xs" ? "xs" : o.size === "sm" ? "sm" : o.size === "lg" ? "md" : o.size === "xl" ? "lg" : "sm"), u = x(), p = l(() => u.href ? "a" : o.to ? "router-link" : o.tag), { styles: f, classes: g, className: v } = T("Tag", {}, o);
+    return (e, a) => (n(), h(y(p.value), {
+      to: e.to,
+      class: t([
         "text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border relative",
         [
-          r(p),
-          r(u).wrapper,
+          r(v),
+          r(g).wrapper,
           e.outlined ? "border-[color:var(--x-tag-border)] dark:border-[color:var(--x-tag-dark-border)]" : "!border-transparent bg-[color:var(--x-tag-bg)] dark:bg-[color:var(--x-tag-dark-bg)]",
           e.rounded ? "rounded-full" : "rounded"
         ]
       ]),
-      style: k(r(c))
+      style: z(r(f))
     }, {
-      default: y(() => [
-        t("span", {
-          class: s(["max-w-full", { "pr-4": e.removable }])
+      default: B(() => [
+        s("span", {
+          class: t(["max-w-full", { "pr-4": e.removable }])
         }, [
-          t("div", $, [
-            n(e.$slots, "prefix"),
-            t("div", w, [
-              n(e.$slots, "default")
+          s("div", E, [
+            i(e.$slots, "prefix"),
+            s("div", I, [
+              i(e.$slots, "default")
             ])
           ]),
-          e.removable ? (l(), z("div", T, [
-            B(S, {
+          e.removable ? (n(), C("div", j, [
+            S(V, {
               size: m.value,
-              icon: r(N),
-              class: s(["cursor-pointer transition-colors duration-150", [e.disabled ? "text-secondary-400" : "hover:text-secondary-500"]]),
-              onClick: a[0] || (a[0] = (f) => !e.disabled && e.$emit("remove", f))
+              icon: r($),
+              class: t(["cursor-pointer transition-colors duration-150", [e.disabled ? "text-secondary-400" : "hover:text-secondary-500"]]),
+              onClick: a[0] || (a[0] = _((b) => !e.disabled && e.$emit("remove", b), ["prevent"]))
             }, null, 8, ["size", "icon", "class"])
-          ])) : C("", !0)
+          ])) : w("", !0)
         ], 2)
       ]),
       _: 3
-    }, 8, ["style", "class"]));
+    }, 8, ["to", "style", "class"]));
   }
 });
 export {
-  A as default
+  G as default
 };

package/lib/components/textarea/Textarea.vue.d.ts

@@ -18,6 +18,8 @@ declare const textareaProps: {
     preventEnter: BooleanConstructor;
     block: BooleanConstructor;
     resizable: BooleanConstructor;
+    showCounter: BooleanConstructor;
+    clearable: BooleanConstructor;
     modelValue: {
         readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
         readonly default: undefined;
@@ -54,13 +56,13 @@ declare const textareaProps: {
     };
 };
 export type TextareaProps = ExtractPublicPropTypes<typeof textareaProps>;
-type InternalClasses = 'wrapper' | 'input';
+type InternalClasses = 'wrapper' | 'input' | 'icon';
 type InternalExtraData = {
     errorInternal: Ref<boolean>;
 };
 export interface TextareaTheme extends ThemeComponent<TextareaProps, InternalClasses, InternalExtraData> {
 }
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     dir: {
         type: StringConstructor;
         default: string;
@@ -78,6 +80,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     preventEnter: BooleanConstructor;
     block: BooleanConstructor;
     resizable: BooleanConstructor;
+    showCounter: BooleanConstructor;
+    clearable: BooleanConstructor;
     modelValue: {
         readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
         readonly default: undefined;
@@ -136,6 +140,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     preventEnter: BooleanConstructor;
     block: BooleanConstructor;
     resizable: BooleanConstructor;
+    showCounter: BooleanConstructor;
+    clearable: BooleanConstructor;
     modelValue: {
         readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
         readonly default: undefined;
@@ -185,10 +191,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     hideFooter: boolean;
     rules: unknown[];
     skipFormRegistry: boolean;
+    clearable: boolean;
     dir: string;
+    showCounter: boolean;
     rows: string | number;
     adjustToText: boolean;
     preventEnter: boolean;
     resizable: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    prefix?(_: {}): any;
+    suffix?(_: {}): any;
+}>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/textarea/Textarea.vue.js

@@ -1,17 +1,19 @@
-import { defineComponent as q, useAttrs as R, computed as A, ref as F, watch as H, openBlock as u, createBlock as p, normalizeStyle as K, unref as r, normalizeClass as L, withCtx as O, createElementVNode as $, mergeProps as D, toHandlers as W, withKeys as X, createCommentVNode as G } from "vue";
-import { useResizeObserver as J, useEventListener as M } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
-import { useCSS as Q } from "../../composables/useCSS.js";
-import { useTheme as U } from "../../composables/useTheme.js";
-import { useCommon as f } from "../../composables/useCommon.js";
-import { useColors as Y } from "../../composables/useColors.js";
-import { useInputtable as a } from "../../composables/useInputtable.js";
-import { useInteractive as c } from "../../composables/useInteractive.js";
-import Z from "../label/Label.vue.js";
-import _ from "../inputFooter/InputFooter.vue.js";
-const ee = ["id", "disabled", "max", "maxlength", "min", "dir", "rows", "minlength", "name", "placeholder", "readonly", "value"], re = {
-  ...f.props(),
-  ...c.props(),
-  ...a.props(),
+import { defineComponent as K, useAttrs as O, computed as i, ref as D, watch as W, openBlock as m, createBlock as u, normalizeStyle as X, unref as r, normalizeClass as h, withCtx as G, createElementVNode as b, renderSlot as g, mergeProps as J, toHandlers as M, withKeys as Q, createCommentVNode as v } from "vue";
+import { useResizeObserver as U, useEventListener as Y } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import { useCSS as Z } from "../../composables/useCSS.js";
+import { useTheme as _ } from "../../composables/useTheme.js";
+import { useCommon as y } from "../../composables/useCommon.js";
+import { useColors as ee } from "../../composables/useColors.js";
+import { useInputtable as d } from "../../composables/useInputtable.js";
+import { useInteractive as w } from "../../composables/useInteractive.js";
+import re from "../label/Label.vue.js";
+import oe from "../inputFooter/InputFooter.vue.js";
+import te from "../icon/Icon.vue.js";
+import { closeIcon as ne } from "../../common/icons.js";
+const se = { class: "relative" }, le = ["id", "disabled", "max", "maxlength", "min", "dir", "rows", "minlength", "name", "placeholder", "readonly", "value"], ae = {
+  ...y.props(),
+  ...w.props(),
+  ...d.props(),
   dir: {
     type: String,
     default: "ltr"
@@ -28,88 +30,108 @@ const ee = ["id", "disabled", "max", "maxlength", "min", "dir", "rows", "minleng
   adjustToText: Boolean,
   preventEnter: Boolean,
   block: Boolean,
-  resizable: Boolean
-}, oe = {
+  resizable: Boolean,
+  showCounter: Boolean,
+  clearable: Boolean
+}, ie = {
   name: "XTextarea",
   validators: {
-    ...f.validators()
+    ...y.validators()
   }
-}, ce = /* @__PURE__ */ q({
-  ...oe,
-  props: re,
-  emits: a.emits(),
-  setup(h, { expose: b, emit: g }) {
-    const t = h, y = g, i = R(), v = A(() => Object.keys(i).reduce((e, s) => (s.startsWith("data-") && (e[s] = i[s]), e), {})), o = F(null);
-    J(o, n), typeof window < "u" && M(window, "resize", n), H([() => t.modelValue, () => t.size], () => {
-      setTimeout(n);
+}, ke = /* @__PURE__ */ K({
+  ...ie,
+  props: ae,
+  emits: d.emits(),
+  setup(S, { expose: C, emit: k }) {
+    const o = S, z = k, p = O(), B = i(() => Object.keys(p).reduce((e, n) => (n.startsWith("data-") && (e[n] = p[n]), e), {})), t = D(null);
+    U(t, s), typeof window < "u" && Y(window, "resize", s), W([() => o.modelValue, () => o.size], () => {
+      setTimeout(s);
     });
-    const w = Q("textarea"), S = Y().getPalette("primary"), k = w.get("border", S[400]);
-    function N() {
-      n();
+    const I = Z("textarea"), N = ee().getPalette("primary"), T = I.get("border", N[400]);
+    function V() {
+      s();
     }
-    function T(e) {
-      t.preventEnter && e.preventDefault(), e.stopPropagation();
+    function E(e) {
+      o.preventEnter && e.preventDefault(), e.stopPropagation();
     }
-    function n() {
-      t.adjustToText && o.value && (o.value.style.height = "1px", o.value.style.height = 2 + o.value.scrollHeight + "px");
+    function s() {
+      o.adjustToText && t.value && (t.value.style.height = "1px", t.value.style.height = 2 + t.value.scrollHeight + "px");
     }
-    const { focus: m, blur: z } = c(o), {
+    const { focus: c, blur: $ } = w(t), {
       errorInternal: l,
-      hideFooterInternal: C,
-      isInsideForm: B,
-      inputListeners: E,
-      reset: I,
-      validate: V,
-      setError: x
-    } = a(t, { focus: m, emit: y }), { styles: P, classes: d, className: j } = U("Textarea", {}, t, { errorInternal: l });
-    return b({ focus: m, blur: z, reset: I, validate: V, setError: x }), (e, s) => (u(), p(Z, {
-      style: K(r(P)),
+      hideFooterInternal: x,
+      isInsideForm: P,
+      inputListeners: j,
+      reset: f,
+      validate: q,
+      setError: L
+    } = d(o, { focus: c, emit: z }), R = i(() => {
+      const e = o.modelValue;
+      return e ? String(e).length : 0;
+    }), A = i(() => o.clearable && o.modelValue !== ""), { styles: F, classes: a, className: H } = _("Textarea", {}, o, { errorInternal: l });
+    return C({ focus: c, blur: $, reset: f, validate: q, setError: L }), (e, n) => (m(), u(re, {
+      style: X(r(F)),
       block: e.block,
       disabled: e.disabled,
       required: e.required,
-      "is-inside-form": r(B),
+      "is-inside-form": r(P),
       label: e.label,
-      class: L([
-        r(j),
-        r(d).wrapper
+      class: h([
+        r(H),
+        r(a).wrapper
       ]),
       tooltip: e.tooltip
     }, {
-      default: O(() => [
-        $("textarea", D({
-          id: e.id,
-          ref_key: "elRef",
-          ref: o,
-          class: ["", [
-            r(d).input,
-            r(l) ? "border-error-500 dark:border-error-400 focus:outline-error-500" : "focus:outline-[color:var(--x-textarea-border)]"
-          ]],
-          style: r(k),
-          disabled: e.disabled,
-          max: e.max,
-          maxlength: e.maxlength,
-          min: e.min,
-          dir: e.dir,
-          rows: e.rows,
-          minlength: e.minlength,
-          name: e.name,
-          placeholder: e.placeholder,
-          readonly: e.readonly,
-          value: typeof e.modelValue < "u" ? String(e.modelValue) : ""
-        }, v.value, W(r(E), !0), {
-          onKeydown: X(T, ["enter"]),
-          onInput: N
-        }), null, 16, ee),
-        r(C) ? G("", !0) : (u(), p(_, {
+      default: G(() => [
+        b("div", se, [
+          g(e.$slots, "prefix"),
+          b("textarea", J({
+            id: e.id,
+            ref_key: "elRef",
+            ref: t,
+            class: ["", [
+              r(a).input,
+              r(l) ? "border-error-500 dark:border-error-400 focus:outline-error-500" : "focus:outline-[color:var(--x-textarea-border)]"
+            ]],
+            style: r(T),
+            disabled: e.disabled,
+            max: e.max,
+            maxlength: e.maxlength,
+            min: e.min,
+            dir: e.dir,
+            rows: e.rows,
+            minlength: e.minlength,
+            name: e.name,
+            placeholder: e.placeholder,
+            readonly: e.readonly,
+            value: typeof e.modelValue < "u" ? String(e.modelValue) : ""
+          }, B.value, M(r(j), !0), {
+            onKeydown: Q(E, ["enter"]),
+            onInput: V
+          }), null, 16, le),
+          g(e.$slots, "suffix", {}, () => [
+            A.value ? (m(), u(te, {
+              key: 0,
+              size: e.size,
+              icon: r(ne),
+              class: h(["right-2 cursor-pointer", r(a).icon]),
+              onClick: n[0] || (n[0] = (ue) => r(f)())
+            }, null, 8, ["size", "icon", "class"])) : v("", !0)
+          ])
+        ]),
+        r(x) ? v("", !0) : (m(), u(oe, {
           key: 0,
           error: r(l),
-          helper: e.helper
-        }, null, 8, ["error", "helper"]))
+          helper: e.helper,
+          "character-count": R.value,
+          "max-characters": e.maxlength,
+          "show-counter": e.showCounter
+        }, null, 8, ["error", "helper", "character-count", "max-characters", "show-counter"]))
       ]),
-      _: 1
+      _: 3
     }, 8, ["style", "block", "disabled", "required", "is-inside-form", "label", "class", "tooltip"]));
   }
 });
 export {
-  ce as default
+  ke as default
 };

package/lib/components/textarea/theme/Textarea.base.theme.js

@@ -4,7 +4,8 @@ const a = {
     input: ({ props: s, data: r }) => {
       const e = ["appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border shadow-sm rounded-md"];
       return s.resizable || e.push("resize-none"), !r.errorInternal && !s.disabled && e.push("hover:border-secondary-400 dark:hover:border-secondary-500"), s.size === "xs" ? e.push("px-2 py-1 text-xs") : s.size === "sm" ? e.push("px-2 py-1.5 text-sm") : s.size === "lg" ? e.push("px-4 py-3 text-lg") : s.size === "xl" ? e.push("px-5 py-4 text-xl") : e.push("px-3 py-2"), e.push(s.disabled ? "bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed" : "bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), e;
-    }
+    },
+    icon: "text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0"
   }
 }, t = a;
 export {

package/lib/components/textarea/theme/Textarea.carbon.theme.js

@@ -4,7 +4,8 @@ const a = {
     input: ({ props: r, data: s }) => {
       const e = ["resize-none appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border-b text-sm px-4"];
       return !s.errorInternal && !r.disabled && e.push("hover:border-secondary-400 dark:hover:border-secondary-500"), r.size === "xs" || r.size === "sm" ? e.push("py-1.5") : r.size === "lg" || r.size === "xl" ? e.push("py-3.5") : e.push("py-2.5"), r.disabled ? e.push("bg-secondary-100 dark:bg-secondary-900 text-secondary-300 cursor-not-allowed") : r.readonly ? e.push("bg-white dark:bg-secondary-900 text-secondary-700") : e.push("bg-secondary-50 dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), e;
-    }
+    },
+    icon: "text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0"
   }
 }, n = a;
 export {