iryx-ui 0.24.0 → 0.25.0

package/dist/components/Textarea.vue_vue_type_script_setup_true_lang.js

@@ -1,19 +1,34 @@
 import { useIryxUiConfig as e } from "../config.js";
 import { useFormField as t } from "../composables/form.js";
-import { textareaTheme as n } from "../theme/input.js";
-import { computed as r, createElementBlock as i, defineComponent as a, mergeModels as o, nextTick as s, normalizeClass as c, onMounted as l, openBlock as u, ref as d, unref as f, useModel as p, vModelText as m, watch as h, withDirectives as g } from "vue";
+import { textareaCountTheme as n, textareaTheme as r } from "../theme/input.js";
+import { defaultCountLabel as i, useCharacterCount as a } from "../composables/character-count.js";
+import { computed as o, createElementBlock as s, createElementVNode as c, defineComponent as l, mergeModels as u, mergeProps as d, nextTick as f, normalizeClass as p, onMounted as m, openBlock as h, ref as g, toDisplayString as _, unref as v, useModel as y, vModelText as b, watch as x, withDirectives as S } from "vue";
 //#region src/components/Textarea.vue?vue&type=script&setup=true&lang.ts
-var _ = [
+var C = [
 	"id",
 	"rows",
+	"maxlength",
 	"placeholder",
 	"disabled",
 	"required",
 	"aria-invalid",
 	"aria-describedby"
-], v = /*@__PURE__*/ a({
+], w = {
+	class: "sr-only",
+	"aria-live": "polite"
+}, T = [
+	"id",
+	"rows",
+	"maxlength",
+	"placeholder",
+	"disabled",
+	"required",
+	"aria-invalid",
+	"aria-describedby"
+], E = /*@__PURE__*/ l({
+	inheritAttrs: !1,
 	__name: "Textarea",
-	props: /*@__PURE__*/ o({
+	props: /*@__PURE__*/ u({
 		size: {},
 		rows: {},
 		autosize: { type: [Boolean, Object] },
@@ -24,6 +39,12 @@ var _ = [
 			type: Boolean,
 			default: void 0
 		},
+		maxlength: {},
+		showCount: { type: Boolean },
+		countLabel: {
+			type: Function,
+			default: i
+		},
 		id: {},
 		unstyled: {
 			type: Boolean,
@@ -40,51 +61,78 @@ var _ = [
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(a, { expose: o }) {
-		let v = a, y = p(a, "modelValue"), b = t(), x = r(() => v.id ?? b?.id.value);
-		b && v.id && (b.id.value = v.id);
-		let S = r(() => v.invalid ?? b?.invalid.value ?? !1), C = e(), w = r(() => v.unstyled ?? C.unstyled), T = r(() => w.value ? v.class : n({
-			size: v.size,
-			invalid: S.value,
-			autosize: !!v.autosize,
-			class: v.class
-		})), E = d();
-		o({ textarea: E });
-		let D = r(() => typeof v.autosize == "object" ? v.autosize : {});
-		function O(e) {
+	setup(i, { expose: l }) {
+		let u = i, E = y(i, "modelValue"), D = t(), O = o(() => u.id ?? D?.id.value);
+		D && u.id && (D.id.value = u.id);
+		let k = o(() => u.invalid ?? D?.invalid.value ?? !1), A = e(), j = o(() => u.unstyled ?? A.unstyled), M = o(() => j.value ? u.class : r({
+			size: u.size,
+			invalid: k.value,
+			autosize: !!u.autosize,
+			class: u.showCount ? void 0 : u.class
+		})), { remaining: N, nearLimit: P, text: F } = a(() => E.value, () => u.maxlength), I = o(() => n({ nearLimit: P.value })), L = o(() => j.value ? u.class : I.value.root({ class: u.class })), R = o(() => j.value ? void 0 : I.value.count()), z = g();
+		l({ textarea: z });
+		let B = o(() => typeof u.autosize == "object" ? u.autosize : {});
+		function V(e) {
 			return Number.parseFloat(e) || 0;
 		}
-		function k() {
-			let e = E.value;
-			if (!e || !v.autosize) return;
+		function H() {
+			let e = z.value;
+			if (!e || !u.autosize) return;
 			e.style.height = "auto";
-			let t = window.getComputedStyle(e), n = O(t.lineHeight), r = O(t.paddingTop) + O(t.paddingBottom), i = O(t.borderTopWidth) + O(t.borderBottomWidth), a = e.scrollHeight;
+			let t = window.getComputedStyle(e), n = V(t.lineHeight), r = V(t.paddingTop) + V(t.paddingBottom), i = V(t.borderTopWidth) + V(t.borderBottomWidth), a = e.scrollHeight;
 			if (n) {
-				let { min: e, max: t } = D.value;
+				let { min: e, max: t } = B.value;
 				e != null && (a = Math.max(a, e * n + r)), t != null && (a = Math.min(a, t * n + r));
 			}
-			e.style.height = `${a + i}px`, e.style.overflowY = D.value.max != null && e.scrollHeight > a ? "auto" : "hidden";
+			e.style.height = `${a + i}px`, e.style.overflowY = B.value.max != null && e.scrollHeight > a ? "auto" : "hidden";
 		}
-		return l(() => {
-			v.autosize && s(k);
-		}), h(() => [
-			y.value,
-			v.autosize,
-			v.size
-		], () => void s(k)), (e, t) => g((u(), i("textarea", {
-			id: x.value,
+		return m(() => {
+			u.autosize && f(H);
+		}), x(() => [
+			E.value,
+			u.autosize,
+			u.size
+		], () => void f(H)), (e, t) => u.showCount ? (h(), s("div", {
+			key: 0,
+			class: p(L.value)
+		}, [
+			S(c("textarea", d({
+				id: O.value,
+				ref_key: "el",
+				ref: z
+			}, e.$attrs, {
+				"onUpdate:modelValue": t[0] ||= (e) => E.value = e,
+				rows: u.autosize ? B.value.min : u.rows,
+				maxlength: u.maxlength,
+				placeholder: u.placeholder,
+				disabled: u.disabled,
+				required: u.required,
+				"aria-invalid": k.value || void 0,
+				"aria-describedby": v(D)?.describedBy.value,
+				class: M.value
+			}), null, 16, C), [[b, E.value]]),
+			c("span", {
+				"aria-hidden": "true",
+				class: p(R.value)
+			}, _(v(F)), 3),
+			c("span", w, _(v(P) ? u.countLabel(v(N)) : ""), 1)
+		], 2)) : S((h(), s("textarea", d({
+			key: 1,
+			id: O.value,
 			ref_key: "el",
-			ref: E,
-			"onUpdate:modelValue": t[0] ||= (e) => y.value = e,
-			rows: v.autosize ? D.value.min : v.rows,
-			placeholder: v.placeholder,
-			disabled: v.disabled,
-			required: v.required,
-			"aria-invalid": S.value || void 0,
-			"aria-describedby": f(b)?.describedBy.value,
-			class: c(T.value)
-		}, null, 10, _)), [[m, y.value]]);
+			ref: z
+		}, e.$attrs, {
+			"onUpdate:modelValue": t[1] ||= (e) => E.value = e,
+			rows: u.autosize ? B.value.min : u.rows,
+			maxlength: u.maxlength,
+			placeholder: u.placeholder,
+			disabled: u.disabled,
+			required: u.required,
+			"aria-invalid": k.value || void 0,
+			"aria-describedby": v(D)?.describedBy.value,
+			class: M.value
+		}), null, 16, T)), [[b, E.value]]);
 	}
 });
 //#endregion
-export { v as default };
+export { E as default };

package/dist/components/Toaster.vue_vue_type_script_setup_true_lang.js

@@ -3,10 +3,10 @@ import t from "./Icon.js";
 import { useToast as n, useToastState as r } from "../composables/toast.js";
 import { toastTheme as i } from "../theme/toast.js";
 import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, openBlock as h, renderList as g, toDisplayString as _, unref as v, withCtx as y } from "vue";
-import { Alert02Icon as b, AlertCircleIcon as x, Cancel01Icon as S, CheckmarkCircle02Icon as C, InformationCircleIcon as w } from "@hugeicons/core-free-icons";
-import { ToastAction as T, ToastClose as E, ToastDescription as D, ToastPortal as O, ToastProvider as k, ToastRoot as A, ToastTitle as j, ToastViewport as M } from "reka-ui";
+import { Alert02Icon as b, AlertCircleIcon as x, Cancel01Icon as S, CheckmarkCircle02Icon as C, InformationCircleIcon as w, Loading03Icon as T } from "@hugeicons/core-free-icons";
+import { ToastAction as E, ToastClose as D, ToastDescription as O, ToastPortal as k, ToastProvider as A, ToastRoot as j, ToastTitle as M, ToastViewport as N } from "reka-ui";
 //#region src/components/Toaster.vue?vue&type=script&setup=true&lang.ts
-var N = /*@__PURE__*/ p({
+var P = /*@__PURE__*/ p({
 	__name: "Toaster",
 	props: {
 		position: {},
@@ -25,68 +25,69 @@ var N = /*@__PURE__*/ p({
 		ui: {}
 	},
 	setup(p) {
-		let N = p, P = r(), { dismiss: F } = n(), I = {
+		let P = p, F = r(), { dismiss: I } = n(), L = {
 			success: C,
 			warning: b,
 			danger: x,
-			info: w
+			info: w,
+			loading: T
 		};
-		function L(e) {
-			return e.variant && e.variant !== "neutral" ? I[e.variant] : void 0;
-		}
 		function R(e) {
-			let t = e.duration ?? N.duration;
+			return e.variant && e.variant !== "neutral" ? L[e.variant] : void 0;
+		}
+		function z(e) {
+			let t = e.duration ?? P.duration;
 			return t === 0 ? Infinity : t;
 		}
-		let z = e(), B = o(() => N.unstyled ?? z.unstyled);
-		function V(e) {
+		let B = e(), V = o(() => P.unstyled ?? B.unstyled);
+		function H(e) {
 			return i({
 				variant: e.variant,
-				position: N.position,
+				position: P.position,
 				withTitle: !!e.title
 			});
 		}
-		let H = o(() => {
-			let e = i({ position: N.position });
-			return B.value ? [N.ui?.viewport, N.class] : e.viewport({ class: [N.ui?.viewport, N.class] });
+		let U = o(() => {
+			let e = i({ position: P.position });
+			return V.value ? [P.ui?.viewport, P.class] : e.viewport({ class: [P.ui?.viewport, P.class] });
 		});
-		function U(e, t) {
-			let n = N.ui?.[t];
-			return B.value ? n : V(e)[t]({ class: n });
+		function W(e, t) {
+			let n = P.ui?.[t];
+			return V.value ? n : H(e)[t]({ class: n });
 		}
-		function W(e) {
-			e.action?.onClick(), F(e.id);
+		function G(e) {
+			e.action?.onClick(), I(e.id);
 		}
-		return (e, n) => (h(), s(v(k), null, {
-			default: y(() => [(h(!0), l(a, null, g(v(P), (e) => (h(), s(v(A), {
+		return (e, n) => (h(), s(v(A), null, {
+			default: y(() => [(h(!0), l(a, null, g(v(F), (e) => (h(), s(v(j), {
 				key: e.id,
-				duration: R(e),
-				class: m(U(e, "root")),
-				"onUpdate:open": (t) => !t && v(F)(e.id)
+				duration: z(e),
+				class: m(W(e, "root")),
+				"onUpdate:open": (t) => !t && v(I)(e.id)
 			}, {
 				default: y(() => [
-					L(e) ? (h(), l("div", {
+					R(e) ? (h(), l("div", {
 						key: 0,
-						class: m(U(e, "icon"))
-					}, [f(t, { icon: L(e) }, null, 8, ["icon"])], 2)) : c("", !0),
-					u("div", { class: m(U(e, "content")) }, [e.title ? (h(), s(v(j), {
+						class: m(W(e, "icon"))
+					}, [f(t, { icon: R(e) }, null, 8, ["icon"])], 2)) : c("", !0),
+					u("div", { class: m(W(e, "content")) }, [e.title ? (h(), s(v(M), {
 						key: 0,
-						class: m(U(e, "title"))
+						class: m(W(e, "title"))
 					}, {
 						default: y(() => [d(_(e.title), 1)]),
 						_: 2
-					}, 1032, ["class"])) : c("", !0), e.description ? (h(), s(v(D), {
+					}, 1032, ["class"])) : c("", !0), e.description ? (h(), s(v(O), {
 						key: 1,
-						class: m(U(e, "description"))
+						class: m(W(e, "description"))
 					}, {
 						default: y(() => [d(_(e.description), 1)]),
 						_: 2
 					}, 1032, ["class"])) : c("", !0)], 2),
-					e.action ? (h(), s(v(T), {
+					e.action ? (h(), s(v(E), {
 						key: 1,
 						"alt-text": e.action.label,
-						class: m(U(e, "action")),
-						onClick: (t) => W(e)
+						class: m(W(e, "action")),
+						onClick: (t) => G(e)
 					}, {
 						default: y(() => [d(_(e.action.label), 1)]),
 						_: 2
@@ -95,9 +96,9 @@ var N = /*@__PURE__*/ p({
 						"class",
 						"onClick"
 					])) : c("", !0),
-					f(v(E), {
-						"aria-label": N.closeLabel,
-						class: m(U(e, "close"))
+					f(v(D), {
+						"aria-label": P.closeLabel,
+						class: m(W(e, "close"))
 					}, {
 						default: y(() => [f(t, { icon: v(S) }, null, 8, ["icon"])]),
 						_: 1
@@ -108,8 +109,8 @@ var N = /*@__PURE__*/ p({
 				"duration",
 				"class",
 				"onUpdate:open"
-			]))), 128)), f(v(O), null, {
-				default: y(() => [f(v(M), { class: m(H.value) }, null, 8, ["class"])]),
+			]))), 128)), f(v(k), null, {
+				default: y(() => [f(v(N), { class: m(U.value) }, null, 8, ["class"])]),
 				_: 1
 			})]),
 			_: 1
@@ -117,4 +118,4 @@ var N = /*@__PURE__*/ p({
 	}
 });
 //#endregion
-export { N as default };
+export { P as default };

package/dist/components/index.js

@@ -9,78 +9,78 @@ import s from "./AspectRatio.js";
 import c from "./Button.js";
 import l from "./AuthProviders.js";
 import u from "./Avatar.js";
-import d from "./AvatarGroup.js";
-import f from "./Badge.js";
-import p from "./Banner.js";
-import m from "./ChartLegend.js";
-import h from "./BarChart.js";
-import g from "./Breadcrumb.js";
-import _ from "./ButtonGroup.js";
-import v from "./Calendar.js";
-import y from "./Card.js";
-import b from "./Carousel.js";
-import x from "./Checkbox.js";
-import S from "./Code.js";
-import C from "./Collapsible.js";
-import w from "./ColorPicker.js";
-import T from "./Combobox.js";
-import E from "./Kbd.js";
-import D from "./CommandPalette.js";
-import O from "./Dialog.js";
-import k from "./ConfirmDialog.js";
-import A from "./Popover.js";
-import j from "./ConfirmPopover.js";
-import M from "./Container.js";
-import N from "./ContextMenu.js";
-import P from "./DateField.js";
-import F from "./DatePicker.js";
-import I from "./DateRangePicker.js";
-import L from "./DescriptionList.js";
-import R from "./DonutChart.js";
-import z from "./DropdownMenu.js";
-import B from "./Editable.js";
-import V from "./EmptyState.js";
-import H from "./FileUpload.js";
-import U from "./Form.js";
-import W from "./Label.js";
-import G from "./FormField.js";
-import K from "./HoverCard.js";
-import q from "./Input.js";
-import J from "./LineChart.js";
-import Y from "./Menubar.js";
-import X from "./NavigationMenu.js";
-import Z from "./NumberInput.js";
-import Q from "./PageHeader.js";
-import $ from "./Pagination.js";
-import ee from "./PasswordInput.js";
-import te from "./PinInput.js";
-import ne from "./Progress.js";
-import re from "./RadioGroup.js";
-import ie from "./Rating.js";
-import ae from "./ScrollArea.js";
-import oe from "./ScrollFade.js";
-import se from "./Select.js";
-import ce from "./Separator.js";
-import le from "./Sidebar.js";
-import ue from "./SignaturePad.js";
-import de from "./Skeleton.js";
-import fe from "./Slider.js";
-import pe from "./Sparkline.js";
-import me from "./Splitter.js";
-import he from "./Stat.js";
-import ge from "./Stepper.js";
-import _e from "./Switch.js";
-import ve from "./Table.js";
-import ye from "./Tabs.js";
-import be from "./TagsInput.js";
-import xe from "./Textarea.js";
-import Se from "./TimeField.js";
-import Ce from "./Timeline.js";
-import we from "./Toaster.js";
-import Te from "./Toggle.js";
-import Ee from "./ToggleGroup.js";
-import De from "./Toolbar.js";
-import Oe from "./Tooltip.js";
+import d from "./Tooltip.js";
+import f from "./AvatarGroup.js";
+import p from "./Badge.js";
+import m from "./Banner.js";
+import h from "./ChartLegend.js";
+import g from "./BarChart.js";
+import _ from "./DropdownMenu.js";
+import v from "./Breadcrumb.js";
+import y from "./ButtonGroup.js";
+import b from "./Calendar.js";
+import x from "./Card.js";
+import S from "./Carousel.js";
+import C from "./Checkbox.js";
+import w from "./Code.js";
+import T from "./Collapsible.js";
+import E from "./ColorPicker.js";
+import D from "./Combobox.js";
+import O from "./Kbd.js";
+import k from "./CommandPalette.js";
+import A from "./Dialog.js";
+import j from "./ConfirmDialog.js";
+import M from "./Popover.js";
+import N from "./ConfirmPopover.js";
+import P from "./Container.js";
+import F from "./ContextMenu.js";
+import I from "./DateField.js";
+import L from "./DatePicker.js";
+import R from "./DateRangePicker.js";
+import z from "./DescriptionList.js";
+import B from "./DonutChart.js";
+import V from "./Editable.js";
+import H from "./EmptyState.js";
+import U from "./Progress.js";
+import W from "./FileUpload.js";
+import G from "./Form.js";
+import K from "./Label.js";
+import q from "./FormField.js";
+import J from "./HoverCard.js";
+import Y from "./Input.js";
+import X from "./LineChart.js";
+import Z from "./Menubar.js";
+import Q from "./NavigationMenu.js";
+import $ from "./NumberInput.js";
+import ee from "./PageHeader.js";
+import te from "./Pagination.js";
+import ne from "./PasswordInput.js";
+import re from "./PinInput.js";
+import ie from "./RadioGroup.js";
+import ae from "./Rating.js";
+import oe from "./ScrollArea.js";
+import se from "./ScrollFade.js";
+import ce from "./Select.js";
+import le from "./Separator.js";
+import ue from "./Sidebar.js";
+import de from "./SignaturePad.js";
+import fe from "./Skeleton.js";
+import pe from "./Slider.js";
+import me from "./Sparkline.js";
+import he from "./Splitter.js";
+import ge from "./Stat.js";
+import _e from "./Stepper.js";
+import ve from "./Switch.js";
+import ye from "./Table.js";
+import be from "./Tabs.js";
+import xe from "./TagsInput.js";
+import Se from "./Textarea.js";
+import Ce from "./TimeField.js";
+import we from "./Timeline.js";
+import Te from "./Toaster.js";
+import Ee from "./Toggle.js";
+import De from "./ToggleGroup.js";
+import Oe from "./Toolbar.js";
 import ke from "./Tree.js";
 //#region src/components/index.ts
 var Ae = /* @__PURE__ */ e({
@@ -91,81 +91,81 @@ var Ae = /* @__PURE__ */ e({
 	AspectRatio: () => s,
 	AuthProviders: () => l,
 	Avatar: () => u,
-	AvatarGroup: () => d,
-	Badge: () => f,
-	Banner: () => p,
-	BarChart: () => h,
-	Breadcrumb: () => g,
+	AvatarGroup: () => f,
+	Badge: () => p,
+	Banner: () => m,
+	BarChart: () => g,
+	Breadcrumb: () => v,
 	Button: () => c,
-	ButtonGroup: () => _,
-	Calendar: () => v,
-	Card: () => y,
-	Carousel: () => b,
-	ChartLegend: () => m,
-	Checkbox: () => x,
-	Code: () => S,
-	Collapsible: () => C,
-	ColorPicker: () => w,
-	Combobox: () => T,
-	CommandPalette: () => D,
-	ConfirmDialog: () => k,
-	ConfirmPopover: () => j,
-	Container: () => M,
-	ContextMenu: () => N,
-	DateField: () => P,
-	DatePicker: () => F,
-	DateRangePicker: () => I,
-	DescriptionList: () => L,
-	Dialog: () => O,
-	DonutChart: () => R,
+	ButtonGroup: () => y,
+	Calendar: () => b,
+	Card: () => x,
+	Carousel: () => S,
+	ChartLegend: () => h,
+	Checkbox: () => C,
+	Code: () => w,
+	Collapsible: () => T,
+	ColorPicker: () => E,
+	Combobox: () => D,
+	CommandPalette: () => k,
+	ConfirmDialog: () => j,
+	ConfirmPopover: () => N,
+	Container: () => P,
+	ContextMenu: () => F,
+	DateField: () => I,
+	DatePicker: () => L,
+	DateRangePicker: () => R,
+	DescriptionList: () => z,
+	Dialog: () => A,
+	DonutChart: () => B,
 	Drawer: () => a,
-	DropdownMenu: () => z,
-	Editable: () => B,
-	EmptyState: () => V,
-	FileUpload: () => H,
-	Form: () => U,
-	FormField: () => G,
-	HoverCard: () => K,
+	DropdownMenu: () => _,
+	Editable: () => V,
+	EmptyState: () => H,
+	FileUpload: () => W,
+	Form: () => G,
+	FormField: () => q,
+	HoverCard: () => J,
 	Icon: () => t,
-	Input: () => q,
-	Kbd: () => E,
-	Label: () => W,
-	LineChart: () => J,
-	Menubar: () => Y,
-	NavigationMenu: () => X,
-	NumberInput: () => Z,
-	PageHeader: () => Q,
-	Pagination: () => $,
-	PasswordInput: () => ee,
-	PinInput: () => te,
-	Popover: () => A,
-	Progress: () => ne,
-	RadioGroup: () => re,
-	Rating: () => ie,
-	ScrollArea: () => ae,
-	ScrollFade: () => oe,
-	Select: () => se,
-	Separator: () => ce,
-	Sidebar: () => le,
-	SignaturePad: () => ue,
-	Skeleton: () => de,
-	Slider: () => fe,
-	Sparkline: () => pe,
-	Splitter: () => me,
-	Stat: () => he,
-	Stepper: () => ge,
-	Switch: () => _e,
-	Table: () => ve,
-	Tabs: () => ye,
-	TagsInput: () => be,
-	Textarea: () => xe,
-	TimeField: () => Se,
-	Timeline: () => Ce,
-	Toaster: () => we,
-	Toggle: () => Te,
-	ToggleGroup: () => Ee,
-	Toolbar: () => De,
-	Tooltip: () => Oe,
+	Input: () => Y,
+	Kbd: () => O,
+	Label: () => K,
+	LineChart: () => X,
+	Menubar: () => Z,
+	NavigationMenu: () => Q,
+	NumberInput: () => $,
+	PageHeader: () => ee,
+	Pagination: () => te,
+	PasswordInput: () => ne,
+	PinInput: () => re,
+	Popover: () => M,
+	Progress: () => U,
+	RadioGroup: () => ie,
+	Rating: () => ae,
+	ScrollArea: () => oe,
+	ScrollFade: () => se,
+	Select: () => ce,
+	Separator: () => le,
+	Sidebar: () => ue,
+	SignaturePad: () => de,
+	Skeleton: () => fe,
+	Slider: () => pe,
+	Sparkline: () => me,
+	Splitter: () => he,
+	Stat: () => ge,
+	Stepper: () => _e,
+	Switch: () => ve,
+	Table: () => ye,
+	Tabs: () => be,
+	TagsInput: () => xe,
+	Textarea: () => Se,
+	TimeField: () => Ce,
+	Timeline: () => we,
+	Toaster: () => Te,
+	Toggle: () => Ee,
+	ToggleGroup: () => De,
+	Toolbar: () => Oe,
+	Tooltip: () => d,
 	Tree: () => ke
 });
 //#endregion

package/dist/composables/character-count.d.ts

@@ -0,0 +1,6 @@
+export declare function defaultCountLabel(remaining: number): string;
+export declare function useCharacterCount(value: () => string | number | null | undefined, max: () => number | undefined): {
+    remaining: import("vue").ComputedRef<number | undefined>;
+    nearLimit: import("vue").ComputedRef<boolean>;
+    text: import("vue").ComputedRef<string>;
+};

package/dist/composables/character-count.js

@@ -0,0 +1,18 @@
+import { computed as e } from "vue";
+//#region src/composables/character-count.ts
+function t(e) {
+	return `${e} ${e === 1 ? "character" : "characters"} left`;
+}
+function n(t, n) {
+	let r = e(() => String(t() ?? "").length), i = e(() => {
+		let e = n();
+		return e == null ? void 0 : e - r.value;
+	});
+	return {
+		remaining: i,
+		nearLimit: e(() => i.value != null && i.value <= Math.ceil(n() * .1)),
+		text: e(() => n() == null ? `${r.value}` : `${r.value}/${n()}`)
+	};
+}
+//#endregion
+export { t as defaultCountLabel, n as useCharacterCount };