@kubit-ui-web/react-components 2.0.0-beta.47 → 2.0.0-beta.49

package/dist/esm/components/icon/iconHost.js

@@ -1 +1,32 @@
-import{jsx as r}from"react/jsx-runtime";import{forwardRef as o,useContext as s,useState as i,useEffect as t}from"react";import{StylesContext as e}from"../../lib/provider/stylesProvider/stylesProvider.js";import{UtilsContext as c}from"../../lib/provider/utilsProvider/utilsProvider.js";import{isValidHttpUrl as n}from"../../lib/utils/is/isValidHttpUrl.js";import{IconBasic as a}from"./icon.js";const l=o(({fallbackIcon:o,icon:l,...m},f)=>{const p=s(c),d=s(e),b=n(l)?l:`${p?.assets?.baseHost}${d?.icons?.[l]}`,[v,j]=i(b);return t(()=>{if(o){const r=n(o)?o:`${p?.assets?.baseHost}${d?.icons?.[o]}`;(async()=>{try{if(!(await fetch(b,{cache:"no-store"})).ok)throw new Error("Error loading icon");j(b)}catch{j(r)}})()}else j(b)},[b,o,p,d]),/* @__PURE__ */r(a,{...m,ref:f,icon:v})});export{l as Icon,l as IconHost};
+import { UtilsContext } from "../../lib/provider/utilsProvider/utilsProvider.js";
+import { StylesContext } from "../../lib/provider/stylesProvider/stylesProvider.js";
+import { IconBasic } from "./icon.js";
+import { isValidHttpUrl } from "../../lib/utils/is/isValidHttpUrl.js";
+import { forwardRef, useContext, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+const IconHost = forwardRef(({ fallbackIcon: t, icon: n, ...r }, i) => {
+	let a = useContext(UtilsContext), o = useContext(StylesContext), s = isValidHttpUrl(n) ? n : `${a?.assets?.baseHost}${o?.icons?.[n]}`, [c, l] = useState(s);
+	return useEffect(() => {
+		if (t) {
+			let e = isValidHttpUrl(t) ? t : `${a?.assets?.baseHost}${o?.icons?.[t]}`;
+			(async () => {
+				try {
+					if (!(await fetch(s, { cache: "no-store" })).ok) throw Error("Error loading icon");
+					l(s);
+				} catch {
+					l(e);
+				}
+			})();
+		} else l(s);
+	}, [
+		s,
+		t,
+		a,
+		o
+	]), /* @__PURE__ */ jsx(IconBasic, {
+		...r,
+		ref: i,
+		icon: c
+	});
+});
+export { IconHost };

package/dist/esm/components/icon/iconStandAlone.js

@@ -1,2 +1,73 @@
-import{jsx as t}from"react/jsx-runtime";import{forwardRef as i,useState as a}from"react";import{classNames as s}from"../../lib/utils/classNames/classNames.js";import{pickCustomAttributes as e}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";const o=i(({altText:i,className:o,color:r,cssClasses:n,customAttributes:l,emptyAltText:m,height:c,id:u,rotate:d,transitionDuration:h,width:g,...p},b)=>{const[f]=a(""),x=e({...p,...l}),A=n?.dynamic_values({$color:r||"",$height:c||"",$moveAround:d||"",$transitionDuration:h||"",$width:g||""}).object;/* @__PURE__ */
-return t("span",{dangerouslySetInnerHTML:{__html:f},ref:b,"aria-hidden":m,"aria-label":i,className:s(n?.complex,o),"data-testid":"icon",id:u,role:m?"none":"img",style:A,...x})}),r=i(({altText:i,className:a,color:r,complex:n=!1,cssClasses:l,customAttributes:m,height:c,icon:u,id:d,loading:h="lazy",rotate:g,transitionDuration:p,twistAnimationTransformValue:b,width:f,...x},A)=>{const $=!i,w=e({...x,...m});return n?/* @__PURE__ */t(o,{ref:A,altText:i,className:a,color:r,cssClasses:l,customAttributes:m,"data-testid":"icon",emptyAltText:$,height:c,icon:u,id:d,rotate:g,transitionDuration:p,width:f,...x}):/* @__PURE__ */t("span",{ref:A,"aria-hidden":$,"aria-label":i,className:s(l?.svg,a),"data-testid":"icon","data-twist-animation-transform-value":!!b,id:d,role:$?"svg":"img",style:{backgroundColor:r,height:c,maskImage:`url("${u}")`,minHeight:c,minWidth:f,transform:b||`rotate(${g})`,transitionDuration:p,WebkitMaskImage:`url("${u}")`,width:f},...w})});export{r as IconStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { classNames } from "../../lib/utils/classNames/classNames.js";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var IconComplex = forwardRef(({ altText: e, className: n, color: r, cssClasses: i, customAttributes: a, emptyAltText: o, height: s, id: c, rotate: l, transitionDuration: u, width: d, ...f }, p) => {
+	let [m] = useState(""), h = pickCustomAttributes({
+		...f,
+		...a
+	}), g = i?.dynamic_values({
+		$color: r || "",
+		$height: s || "",
+		$moveAround: l || "",
+		$transitionDuration: u || "",
+		$width: d || ""
+	}).object;
+	return /* @__PURE__ */ jsx("span", {
+		dangerouslySetInnerHTML: { __html: m },
+		ref: p,
+		"aria-hidden": o,
+		"aria-label": e,
+		className: classNames(i?.complex, n),
+		"data-testid": "icon",
+		id: c,
+		role: o ? "none" : "img",
+		style: g,
+		...h
+	});
+});
+const IconStandAlone = forwardRef(({ altText: e, className: t, color: r, complex: i = !1, cssClasses: a, customAttributes: o, height: s, icon: c, id: l, loading: u = "lazy", rotate: d, transitionDuration: f, twistAnimationTransformValue: p, width: m, ...h }, g) => {
+	let _ = !e, v = pickCustomAttributes({
+		...h,
+		...o
+	});
+	return i ? /* @__PURE__ */ jsx(IconComplex, {
+		ref: g,
+		altText: e,
+		className: t,
+		color: r,
+		cssClasses: a,
+		customAttributes: o,
+		"data-testid": "icon",
+		emptyAltText: _,
+		height: s,
+		icon: c,
+		id: l,
+		rotate: d,
+		transitionDuration: f,
+		width: m,
+		...h
+	}) : /* @__PURE__ */ jsx("span", {
+		ref: g,
+		"aria-hidden": _,
+		"aria-label": e,
+		className: classNames(a?.svg, t),
+		"data-testid": "icon",
+		"data-twist-animation-transform-value": !!p,
+		id: l,
+		role: _ ? "svg" : "img",
+		style: {
+			backgroundColor: r,
+			height: s,
+			maskImage: `url("${c}")`,
+			minHeight: s,
+			minWidth: m,
+			transform: p || `rotate(${d})`,
+			transitionDuration: f,
+			WebkitMaskImage: `url("${c}")`,
+			width: m
+		},
+		...v
+	});
+});
+export { IconStandAlone };

package/dist/esm/components/image/components/pictureSourceStandAlone.js

@@ -1,2 +1,14 @@
-import{jsx as t}from"react/jsx-runtime";import{pickCustomAttributes as i}from"../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";const r=({mediaSource:r,...e})=>{if(!r)return null;const s=i(e);/* @__PURE__ */
-return t("source",{height:r.height,media:r.media,srcSet:r.src,width:r.width,...s})};export{r as PictureSourceStandAlone};
+import { pickCustomAttributes } from "../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { jsx } from "react/jsx-runtime";
+const PictureSourceStandAlone = ({ mediaSource: e, ...t }) => {
+	if (!e) return null;
+	let n = pickCustomAttributes(t);
+	return /* @__PURE__ */ jsx("source", {
+		height: e.height,
+		media: e.media,
+		srcSet: e.src,
+		width: e.width,
+		...n
+	});
+};
+export { PictureSourceStandAlone };

package/dist/esm/components/image/image2.js

@@ -0,0 +1,13 @@
+import { useGenericComponents } from "../../lib/provider/genericComponentsProvider/genericComponentsProvider.js";
+import { ImageStandAlone } from "./imageStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const Image = forwardRef((e, t) => {
+	let { IMAGE: n } = useGenericComponents();
+	return /* @__PURE__ */ jsx(ImageStandAlone, {
+		...e,
+		ref: t,
+		component: n
+	});
+});
+export { Image };

package/dist/esm/components/image/imageStandAlone.js

@@ -1,8 +1,40 @@
-import{jsxs as t,jsx as i}from"react/jsx-runtime";/* empty css         */import{forwardRef as r}from"react";import{DEVICE_BREAKPOINTS as e}from"../../lib/types/breakpoints/breakpoints.js";import{pickCustomAttributes as o}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{PictureSourceStandAlone as a}from"./components/pictureSourceStandAlone.js";import{getFallbackRatio as s}from"./utils/getFallbackRatio.js";const c=r(({alt:r,borderRadius:c,caption:m,height:l,images:d,loading:n="lazy",objectFit:p,onLoad:u,ratio:b,title:f,width:g,...h},j)=>{const S={"--border-radius":c,"--fallback-ratio":b&&s(b)+"%","--object-fit":p,"--ratio":b},k=o(h);/* @__PURE__ */
-return t("figure",{ref:j,"data-testid":"image",...k,children:[
-/* @__PURE__ */t("picture",{className:"kbt-picture",style:S,children:[
-/* @__PURE__ */i(a,{mediaSource:d[e.LARGE_DESKTOP]}),
-/* @__PURE__ */i(a,{mediaSource:d[e.DESKTOP]}),
-/* @__PURE__ */i(a,{mediaSource:d[e.TABLET]}),
-/* @__PURE__ */i(a,{mediaSource:d[e.MOBILE]}),
-/* @__PURE__ */i("img",{alt:r,height:l,loading:n,src:d.DEFAULT.src,title:f,width:g,onLoad:u})]}),m&&/* @__PURE__ */i("figcaption",{children:m})]})});export{c as ImageStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+/* empty css      */
+import { DEVICE_BREAKPOINTS } from "../../lib/types/breakpoints/breakpoints.js";
+import { PictureSourceStandAlone } from "./components/pictureSourceStandAlone.js";
+import { getFallbackRatio } from "./utils/getFallbackRatio.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const ImageStandAlone = forwardRef(({ alt: e, borderRadius: t, caption: n, height: r, images: i, loading: a = "lazy", objectFit: o, onLoad: s, ratio: c, title: l, width: u, ...d }, f) => {
+	let p = {
+		"--border-radius": t,
+		"--fallback-ratio": c && getFallbackRatio(c) + "%",
+		"--object-fit": o,
+		"--ratio": c
+	}, m = pickCustomAttributes(d);
+	return /* @__PURE__ */ jsxs("figure", {
+		ref: f,
+		"data-testid": "image",
+		...m,
+		children: [/* @__PURE__ */ jsxs("picture", {
+			className: "kbt-picture",
+			style: p,
+			children: [
+				/* @__PURE__ */ jsx(PictureSourceStandAlone, { mediaSource: i[DEVICE_BREAKPOINTS.LARGE_DESKTOP] }),
+				/* @__PURE__ */ jsx(PictureSourceStandAlone, { mediaSource: i[DEVICE_BREAKPOINTS.DESKTOP] }),
+				/* @__PURE__ */ jsx(PictureSourceStandAlone, { mediaSource: i[DEVICE_BREAKPOINTS.TABLET] }),
+				/* @__PURE__ */ jsx(PictureSourceStandAlone, { mediaSource: i[DEVICE_BREAKPOINTS.MOBILE] }),
+				/* @__PURE__ */ jsx("img", {
+					alt: e,
+					height: r,
+					loading: a,
+					src: i.DEFAULT.src,
+					title: l,
+					width: u,
+					onLoad: s
+				})
+			]
+		}), n && /* @__PURE__ */ jsx("figcaption", { children: n })]
+	});
+});
+export { ImageStandAlone };

package/dist/esm/components/image/utils/getFallbackRatio.js

@@ -1 +1,2 @@
-const o=o=>100*o;export{o as getFallbackRatio};
+const getFallbackRatio = (e) => e * 100;
+export { getFallbackRatio };

package/dist/esm/components/input/input.js

@@ -1,2 +1,35 @@
-import{jsx as e}from"react/jsx-runtime";import{forwardRef as t,useId as a,useRef as r,useCallback as s,useImperativeHandle as o,useState as l}from"react";import{useClassName as n}from"../../lib/hooks/useClassName/useClassName.js";import{InputStandAlone as i}from"./inputStandAlone.js";import{getState as u}from"./utils/state.js";const d=t(({additionalClasses:t,id:d,variant:c,...m},p)=>{const f=n({additionalClassNames:t,component:"INPUT",variant:c}),b=`input-${a().replace(/:/g,"")}`,C=d||b,j=`${C}-label`,N=r(null),v=r(null),B=s(e=>{if(e){const t=e.querySelector("input");v.current=t}N.current=e},[]);o(p,()=>N.current,[]);const[I,x]=l(!1),S=s(()=>x(!0),[]),$=s(()=>x(!1),[]),g=Boolean(m.defaultValue??m.value),h=u({disabled:m.disabled,error:m.error,filled:g,focused:I});/* @__PURE__ */
-return e(i,{ref:B,cssClasses:f,"data-state":h,"data-testid":"input-container",filled:g,focused:I,inputBaseId:C,labelId:j,onBlur:$,onFocus:S,...m})});export{d as Input};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { InputStandAlone } from "./inputStandAlone.js";
+import { getState } from "./utils/state.js";
+import { forwardRef, useCallback, useId, useImperativeHandle, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+const Input = forwardRef(({ additionalClasses: t, id: n, variant: r, ...i }, a) => {
+	let o = useClassName({
+		additionalClassNames: t,
+		component: "INPUT",
+		variant: r
+	}), s = `input-${useId().replace(/:/g, "")}`, c = n || s, l = `${c}-label`, u = useRef(null), d = useRef(null), f = useCallback((e) => {
+		e && (d.current = e.querySelector("input")), u.current = e;
+	}, []);
+	useImperativeHandle(a, () => u.current, []);
+	let [p, m] = useState(!1), h = useCallback(() => m(!0), []), g = useCallback(() => m(!1), []), _ = !!(i.defaultValue ?? i.value), v = getState({
+		disabled: i.disabled,
+		error: i.error,
+		filled: _,
+		focused: p
+	});
+	return /* @__PURE__ */ jsx(InputStandAlone, {
+		ref: f,
+		cssClasses: o,
+		"data-state": v,
+		"data-testid": "input-container",
+		filled: _,
+		focused: p,
+		inputBaseId: c,
+		labelId: l,
+		onBlur: g,
+		onFocus: h,
+		...i
+	});
+});
+export { Input };

package/dist/esm/components/input/inputStandAlone.js

@@ -1,3 +1,45 @@
-import{jsxs as i,jsx as r}from"react/jsx-runtime";import{forwardRef as t}from"react";import{pickCustomAttributes as a}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{InputBase as e}from"../inputBase/inputBase.js";import{InputDecoration as o}from"../inputDecoration/inputDecoration.js";const s=t(({cssClasses:t,disabled:s,error:n,filled:d,focused:l,inputBaseId:c,labelId:u,leftDecoration:p,required:f,rightDecoration:m,...v},b)=>{const C=a(v);/* @__PURE__ */
-return i("div",{ref:b,className:t?.input,...C,children:[!(!p||!p?.variant&&!t?.left_decoration)&&/* @__PURE__ */r(o,{disabled:s,error:n,...p,additionalClasses:p?.variant?void 0:t?.left_decoration,variant:p?.variant}),
-/* @__PURE__ */r("div",{...C,className:t?.inputandlabelcontainer,children:!!t?.input&&/* @__PURE__ */r(e,{disabled:s,error:n,filled:d,focused:l,required:f,...v,additionalClasses:t?.input_base})}),!(!m||!m?.variant&&!t?.right_decoration)&&/* @__PURE__ */r(o,{disabled:s,error:n,filled:d,focused:l,...m,additionalClasses:m?.variant?void 0:t?.right_decoration,variant:m?.variant})]})});export{s as InputStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { InputBase } from "../inputBase/inputBase.js";
+import { InputDecoration } from "../inputDecoration/inputDecoration.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const InputStandAlone = forwardRef(({ cssClasses: e, disabled: t, error: n, filled: r, focused: i, inputBaseId: a, labelId: o, leftDecoration: s, required: c, rightDecoration: l, ...u }, d) => {
+	let f = pickCustomAttributes(u);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: d,
+		className: e?.input,
+		...f,
+		children: [
+			!!(s && (s?.variant || e?.left_decoration)) && /* @__PURE__ */ jsx(InputDecoration, {
+				disabled: t,
+				error: n,
+				...s,
+				additionalClasses: s?.variant ? void 0 : e?.left_decoration,
+				variant: s?.variant
+			}),
+			/* @__PURE__ */ jsx("div", {
+				...f,
+				className: e?.inputandlabelcontainer,
+				children: !!e?.input && /* @__PURE__ */ jsx(InputBase, {
+					disabled: t,
+					error: n,
+					filled: r,
+					focused: i,
+					required: c,
+					...u,
+					additionalClasses: e?.input_base
+				})
+			}),
+			!!(l && (l?.variant || e?.right_decoration)) && /* @__PURE__ */ jsx(InputDecoration, {
+				disabled: t,
+				error: n,
+				filled: r,
+				focused: i,
+				...l,
+				additionalClasses: l?.variant ? void 0 : e?.right_decoration,
+				variant: l?.variant
+			})
+		]
+	});
+});
+export { InputStandAlone };

package/dist/esm/components/input/types/state.js

@@ -1 +1,10 @@
-const E={DISABLED_EMPTY:"DISABLED_EMPTY",DISABLED_FILLED:"DISABLED_FILLED",EMPTY:"EMPTY",ERROR_EMPTY:"ERROR_EMPTY",ERROR_FILLED:"ERROR_FILLED",FILLED:"FILLED",FOCUS:"FOCUS"};export{E as InputState};
+const InputState = {
+	DISABLED_EMPTY: "DISABLED_EMPTY",
+	DISABLED_FILLED: "DISABLED_FILLED",
+	EMPTY: "EMPTY",
+	ERROR_EMPTY: "ERROR_EMPTY",
+	ERROR_FILLED: "ERROR_FILLED",
+	FILLED: "FILLED",
+	FOCUS: "FOCUS"
+};
+export { InputState };

package/dist/esm/components/input/utils/state.js

@@ -1 +1,3 @@
-import{InputState as E}from"../types/state.js";const L=({disabled:L,error:e,filled:D,focused:o})=>L&&D?E.DISABLED_FILLED:L?E.DISABLED_EMPTY:e&&D?E.ERROR_FILLED:e?E.ERROR_EMPTY:o?E.FOCUS:D?E.FILLED:E.EMPTY;export{L as getState};
+import { InputState } from "../types/state.js";
+const getState = ({ disabled: e, error: t, filled: n, focused: r }) => e && n ? InputState.DISABLED_FILLED : e ? InputState.DISABLED_EMPTY : t && n ? InputState.ERROR_FILLED : t ? InputState.ERROR_EMPTY : r ? InputState.FOCUS : n ? InputState.FILLED : InputState.EMPTY;
+export { getState };

package/dist/esm/components/inputBase/inputBase.js

@@ -1,2 +1,28 @@
-import{jsx as a}from"react/jsx-runtime";import{forwardRef as s,useId as t}from"react";import{useClassName as e}from"../../lib/hooks/useClassName/useClassName.js";import{InputBaseStandAlone as r}from"./inputBaseStandAlone.js";import{getState as i}from"./utils/state.js";const o=s(({additionalClasses:s,error:o,filled:d,focused:l,id:n,variant:m,...u},c)=>{const p=e({additionalClassNames:s,component:"INPUT_BASE",variant:m}),f=`inputbase-${t().replace(/:/g,"")}`,b=n??f,C=i({disabled:u.disabled,error:o,filled:d,focused:l});/* @__PURE__ */
-return a(r,{ref:c,...u,"aria-invalid":o,cssClasses:p,"data-state":C,"data-testid":"input-base","data-truncate":u.truncate,id:b})});export{o as InputBase};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { InputBaseStandAlone } from "./inputBaseStandAlone.js";
+import { getState } from "./utils/state.js";
+import { forwardRef, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+const InputBase = forwardRef(({ additionalClasses: e, error: t, filled: n, focused: r, id: i, variant: a, ...o }, s) => {
+	let c = useClassName({
+		additionalClassNames: e,
+		component: "INPUT_BASE",
+		variant: a
+	}), l = `inputbase-${useId().replace(/:/g, "")}`, u = i ?? l, d = getState({
+		disabled: o.disabled,
+		error: t,
+		filled: n,
+		focused: r
+	});
+	return /* @__PURE__ */ jsx(InputBaseStandAlone, {
+		ref: s,
+		...o,
+		"aria-invalid": t,
+		cssClasses: c,
+		"data-state": d,
+		"data-testid": "input-base",
+		"data-truncate": o.truncate,
+		id: u
+	});
+});
+export { InputBase };

package/dist/esm/components/inputBase/inputBaseStandAlone.js

@@ -1,2 +1,13 @@
-import{jsx as t}from"react/jsx-runtime";import{forwardRef as s}from"react";import{pickCustomAttributes as r}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";const e=s(({cssClasses:s,truncate:e,...i},o)=>{const m=r(i);/* @__PURE__ */
-return t("input",{ref:o,className:s?.input_base,...i,...m})});export{e as InputBaseStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const InputBaseStandAlone = forwardRef(({ cssClasses: e, truncate: t, ...n }, r) => {
+	let i = pickCustomAttributes(n);
+	return /* @__PURE__ */ jsx("input", {
+		ref: r,
+		className: e?.input_base,
+		...n,
+		...i
+	});
+});
+export { InputBaseStandAlone };

package/dist/esm/components/inputBase/types/state.js

@@ -1 +1,10 @@
-const E={DISABLED_EMPTY:"DISABLED_EMPTY",DISABLED_FILLED:"DISABLED_FILLED",EMPTY:"EMPTY",ERROR_EMPTY:"ERROR_EMPTY",ERROR_FILLED:"ERROR_FILLED",FILLED:"FILLED",FOCUS:"FOCUS"};export{E as InputBaseState};
+const InputBaseState = {
+	DISABLED_EMPTY: "DISABLED_EMPTY",
+	DISABLED_FILLED: "DISABLED_FILLED",
+	EMPTY: "EMPTY",
+	ERROR_EMPTY: "ERROR_EMPTY",
+	ERROR_FILLED: "ERROR_FILLED",
+	FILLED: "FILLED",
+	FOCUS: "FOCUS"
+};
+export { InputBaseState };

package/dist/esm/components/inputBase/utils/state.js

@@ -1 +1,3 @@
-import{InputBaseState as E}from"../types/state.js";const L=({disabled:L,error:e,filled:D,focused:o})=>L&&D?E.DISABLED_FILLED:L?E.DISABLED_EMPTY:e&&D?E.ERROR_FILLED:e?E.ERROR_EMPTY:o?E.FOCUS:D?E.FILLED:E.EMPTY;export{L as getState};
+import { InputBaseState } from "../types/state.js";
+const getState = ({ disabled: e, error: t, filled: n, focused: r }) => e && n ? InputBaseState.DISABLED_FILLED : e ? InputBaseState.DISABLED_EMPTY : t && n ? InputBaseState.ERROR_FILLED : t ? InputBaseState.ERROR_EMPTY : r ? InputBaseState.FOCUS : n ? InputBaseState.FILLED : InputBaseState.EMPTY;
+export { getState };

package/dist/esm/components/inputDecoration/inputDecoration.js

@@ -1,2 +1,25 @@
-import{jsx as s}from"react/jsx-runtime";import{forwardRef as t}from"react";import{useClassName as a}from"../../lib/hooks/useClassName/useClassName.js";import{InputDecorationStandAlone as e}from"./inputDecorationStandAlone.js";import{getState as o}from"./utils/state.js";const r=t(({additionalClasses:t,variant:r,...i},d)=>{const l=a({additionalClassNames:t,component:"INPUT_DECORATION",variant:r}),n=o({disabled:i.disabled,error:i.error,filled:i.filled,focused:i.focused});/* @__PURE__ */
-return s(e,{ref:d,cssClasses:l,"data-state":n,"data-testid":"input-decoration",...i})});export{r as InputDecoration};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { InputDecorationStandAlone } from "./inputDecorationStandAlone.js";
+import { getState } from "./utils/state.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const InputDecoration = forwardRef(({ additionalClasses: e, variant: t, ...n }, r) => {
+	let i = useClassName({
+		additionalClassNames: e,
+		component: "INPUT_DECORATION",
+		variant: t
+	}), a = getState({
+		disabled: n.disabled,
+		error: n.error,
+		filled: n.filled,
+		focused: n.focused
+	});
+	return /* @__PURE__ */ jsx(InputDecorationStandAlone, {
+		ref: r,
+		cssClasses: i,
+		"data-state": a,
+		"data-testid": "input-decoration",
+		...n
+	});
+});
+export { InputDecoration };

package/dist/esm/components/inputDecoration/inputDecorationStandAlone.js

@@ -1,2 +1,22 @@
-import{jsx as o}from"react/jsx-runtime";import{forwardRef as t}from"react";import{ElementOrIcon as r}from"../../lib/components/elementOrIcon/elementOrIcon.js";import{pickCustomAttributes as e}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{processIconProp as s}from"../../lib/utils/process/processCommonProp.js";const i=t(({cssClasses:t,decoration:i,disabled:n,...c},m)=>{const l=s(i);if(!l?.icon)return null;const p=e(c);/* @__PURE__ */
-return o("div",{ref:m,className:t?.input_decoration,style:{pointerEvents:l.onClick?"auto":"none"},...p,children:/* @__PURE__ */o(r,{className:t?.decoration,...l,onClick:l.onClick})})});export{i as InputDecorationStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { processIconProp } from "../../lib/utils/process/processCommonProp.js";
+import { ElementOrIcon } from "../../lib/components/elementOrIcon/elementOrIcon.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const InputDecorationStandAlone = forwardRef(({ cssClasses: e, decoration: t, disabled: n, ...r }, i) => {
+	let a = processIconProp(t);
+	if (!a?.icon) return null;
+	let o = pickCustomAttributes(r);
+	return /* @__PURE__ */ jsx("div", {
+		ref: i,
+		className: e?.input_decoration,
+		style: { pointerEvents: a.onClick ? "auto" : "none" },
+		...o,
+		children: /* @__PURE__ */ jsx(ElementOrIcon, {
+			className: e?.decoration,
+			...a,
+			onClick: a.onClick
+		})
+	});
+});
+export { InputDecorationStandAlone };

package/dist/esm/components/inputDecoration/types/state.js

@@ -1 +1,10 @@
-const E={DISABLED_EMPTY:"DISABLED_EMPTY",DISABLED_FILLED:"DISABLED_FILLED",EMPTY:"EMPTY",ERROR_EMPTY:"ERROR_EMPTY",ERROR_FILLED:"ERROR_FILLED",FILLED:"FILLED",FOCUS:"FOCUS"};export{E as InputDecorationState};
+const InputDecorationState = {
+	DISABLED_EMPTY: "DISABLED_EMPTY",
+	DISABLED_FILLED: "DISABLED_FILLED",
+	EMPTY: "EMPTY",
+	ERROR_EMPTY: "ERROR_EMPTY",
+	ERROR_FILLED: "ERROR_FILLED",
+	FILLED: "FILLED",
+	FOCUS: "FOCUS"
+};
+export { InputDecorationState };

package/dist/esm/components/inputDecoration/utils/state.js

@@ -1 +1,3 @@
-import{InputDecorationState as E}from"../types/state.js";const L=({disabled:L,error:e,filled:D,focused:o})=>L&&D?E.DISABLED_FILLED:L?E.DISABLED_EMPTY:e&&D?E.ERROR_FILLED:e?E.ERROR_EMPTY:o?E.FOCUS:D?E.FILLED:E.EMPTY;export{L as getState};
+import { InputDecorationState } from "../types/state.js";
+const getState = ({ disabled: e, error: t, filled: n, focused: r }) => e && n ? InputDecorationState.DISABLED_FILLED : e ? InputDecorationState.DISABLED_EMPTY : t && n ? InputDecorationState.ERROR_FILLED : t ? InputDecorationState.ERROR_EMPTY : r ? InputDecorationState.FOCUS : n ? InputDecorationState.FILLED : InputDecorationState.EMPTY;
+export { getState };

package/dist/esm/components/inputSignature/hook/useDraw.js

@@ -1 +1,50 @@
-import{useRef as e,useEffect as t}from"react";const r=r=>{const n=e(null),u=e(),c=e(!1),o=e(!1),i=e({color:"black",lineWidth:2}),s=e(null),l=e=>{let t,r;if("touchstart"===e.type&&n.current){const{touches:u}=e,{clientX:c,clientY:o}=u[0],{left:i,top:s}=n.current.getBoundingClientRect();t=c-i,r=o-s}else t=e.offsetX,r=e.offsetY;s.current=u.current.getImageData(0,0,n.current?.width,n.current?.height),u.current.beginPath(),u.current.moveTo(t,r),c.current=!0},a=e=>{if(!c.current)return;let t,r;if(e.preventDefault(),"touchmove"===e.type&&n.current){const{touches:u}=e,{clientX:c,clientY:o}=u[0],{left:i,top:s}=n.current.getBoundingClientRect();t=c-i,r=o-s}else t=e.offsetX,r=e.offsetY;u.current.lineTo(t,r),u.current.stroke()},d=()=>{const e=u.current.getImageData(0,0,n.current?.width,n.current?.height);if(u.current.closePath(),c.current=!1,s.current&&!function(e,t){if(e.width!==t.width||e.height!==t.height)return!1;for(let r=0;r<e.data.length;r++)if(e.data[r]!==t.data[r])return!1;return!0}(e,s.current)){const e=n.current?.toDataURL();r?.(e),o.current=!0}};return t(()=>{if(null===n.current)return;const e=n.current;return u.current=e?.getContext("2d",{willReadFrequently:!0}),u.current?(u.current.strokeStyle=i.current.color,u.current.lineWidth=i.current.lineWidth,u.current.lineCap="round",u.current.lineJoin="round",e?.addEventListener("mousedown",l),e?.addEventListener("mousemove",a),e?.addEventListener("mouseup",d),e?.addEventListener("mouseleave",d),e?.addEventListener("touchstart",l),e?.addEventListener("touchmove",a,{passive:!1}),e?.addEventListener("touchend",d),()=>{e?.removeEventListener("mousedown",l),e?.removeEventListener("mousemove",a),e?.removeEventListener("mouseup",d),e?.removeEventListener("mouseleave",d),e?.removeEventListener("touchstart",l),e?.removeEventListener("touchmove",a),e?.removeEventListener("touchend",d)}):void 0},[]),{canvasRef:n,filled:o.current,resetCanvas:()=>{n.current&&(o.current=!1,u.current.clearRect(0,0,n.current.width,n.current.height))},setSignatureStyles:e=>{e&&(i.current.color=e.color,i.current.lineWidth=e.lineWidth)}}};export{r as useDraw};
+import { useEffect, useRef } from "react";
+function isImageDataEqual(e, t) {
+	if (e.width !== t.width || e.height !== t.height) return !1;
+	for (let n = 0; n < e.data.length; n++) if (e.data[n] !== t.data[n]) return !1;
+	return !0;
+}
+const useDraw = (r) => {
+	let i = useRef(null), a = useRef(), o = useRef(!1), s = useRef(!1), c = useRef({
+		color: "black",
+		lineWidth: 2
+	}), l = useRef(null), u = () => {
+		i.current && (s.current = !1, a.current.clearRect(0, 0, i.current.width, i.current.height));
+	}, d = (e) => {
+		e && (c.current.color = e.color, c.current.lineWidth = e.lineWidth);
+	}, f = (e) => {
+		let t, n;
+		if (e.type === "touchstart" && i.current) {
+			let { touches: r } = e, { clientX: a, clientY: o } = r[0], { left: s, top: c } = i.current.getBoundingClientRect();
+			t = a - s, n = o - c;
+		} else t = e.offsetX, n = e.offsetY;
+		l.current = a.current.getImageData(0, 0, i.current?.width, i.current?.height), a.current.beginPath(), a.current.moveTo(t, n), o.current = !0;
+	}, p = (e) => {
+		if (!o.current) return;
+		let t, n;
+		if (e.preventDefault(), e.type === "touchmove" && i.current) {
+			let { touches: r } = e, { clientX: a, clientY: o } = r[0], { left: s, top: c } = i.current.getBoundingClientRect();
+			t = a - s, n = o - c;
+		} else t = e.offsetX, n = e.offsetY;
+		a.current.lineTo(t, n), a.current.stroke();
+	}, m = () => {
+		let e = a.current.getImageData(0, 0, i.current?.width, i.current?.height);
+		if (a.current.closePath(), o.current = !1, l.current && !isImageDataEqual(e, l.current)) {
+			let e = i.current?.toDataURL();
+			r?.(e), s.current = !0;
+		}
+	};
+	return useEffect(() => {
+		if (i.current === null) return;
+		let e = i.current;
+		if (a.current = e?.getContext("2d", { willReadFrequently: !0 }), a.current) return a.current.strokeStyle = c.current.color, a.current.lineWidth = c.current.lineWidth, a.current.lineCap = "round", a.current.lineJoin = "round", e?.addEventListener("mousedown", f), e?.addEventListener("mousemove", p), e?.addEventListener("mouseup", m), e?.addEventListener("mouseleave", m), e?.addEventListener("touchstart", f), e?.addEventListener("touchmove", p, { passive: !1 }), e?.addEventListener("touchend", m), () => {
+			e?.removeEventListener("mousedown", f), e?.removeEventListener("mousemove", p), e?.removeEventListener("mouseup", m), e?.removeEventListener("mouseleave", m), e?.removeEventListener("touchstart", f), e?.removeEventListener("touchmove", p), e?.removeEventListener("touchend", m);
+		};
+	}, []), {
+		canvasRef: i,
+		filled: s.current,
+		resetCanvas: u,
+		setSignatureStyles: d
+	};
+};
+export { useDraw };

package/dist/esm/components/inputSignature/inputSignatureControlled.js

@@ -1 +1,20 @@
-import{jsx as s}from"react/jsx-runtime";import{forwardRef as t}from"react";import{useClassName as a}from"../../lib/hooks/useClassName/useClassName.js";import{InputSignatureStandAlone as e}from"./inputSignatureStandAlone.js";const r=t(({additionalClasses:t,setSignatureStyles:r,signatureStyle:o={color:"#000000",lineWidth:2},variant:i,...n},l)=>{const m=a({additionalClassNames:t,component:"INPUT_SIGNATURE",variant:i});return r?.(o),/* @__PURE__ */s(e,{ref:l,cssClasses:m,...n})});export{r as InputSignatureControlled};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { InputSignatureStandAlone } from "./inputSignatureStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const InputSignatureControlled = forwardRef(({ additionalClasses: e, setSignatureStyles: t, signatureStyle: n = {
+	color: "#000000",
+	lineWidth: 2
+}, variant: r, ...i }, a) => {
+	let o = useClassName({
+		additionalClassNames: e,
+		component: "INPUT_SIGNATURE",
+		variant: r
+	});
+	return t?.(n), /* @__PURE__ */ jsx(InputSignatureStandAlone, {
+		ref: a,
+		cssClasses: o,
+		...i
+	});
+});
+export { InputSignatureControlled };

package/dist/esm/components/inputSignature/inputSignatureStandAlone.js

@@ -1,3 +1,36 @@
-import{jsxs as t,jsx as s}from"react/jsx-runtime";import{forwardRef as e}from"react";import{Text as r}from"../text/text.js";import{STATES as a}from"../../lib/types/states/states.js";import{pickCustomAttributes as o}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{processTextProp as i}from"../../lib/utils/process/processCommonProp.js";const n=e(({canvasRef:e,cssClasses:n,errorText:c,onBlurContainer:l,onClickContainer:m,placeholder:p,state:d,...u},f)=>{const C=d===a.DEFAULT||d===a.ERROR||d===a.DISABLED,b=d===a.ERROR&&c?c:p,x={"data-state":d},R=u["data-testid"]||"input-signature",v=o(u),h=o(x);/* @__PURE__ */
-return t("div",{ref:f,className:n?.input_signature,"data-testid":R,role:"button",tabIndex:-1,onBlur:l,onClick:m,onKeyDown:m,...h,...v,children:[
-/* @__PURE__ */s("canvas",{ref:e,className:n?.canvas,"data-testid":`${R}-canvas`,...h}),C&&/* @__PURE__ */s("div",{className:n?.placeholdercontainer,...h,children:/* @__PURE__ */s(r,{additionalClasses:{text:n?.placeholdertext},customAttributes:x,...i(b)})})]})});export{n as InputSignatureStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { Text } from "../text/text2.js";
+import { processTextProp } from "../../lib/utils/process/processCommonProp.js";
+import { STATES } from "../../lib/types/states/states.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const InputSignatureStandAlone = forwardRef(({ canvasRef: e, cssClasses: t, errorText: n, onBlurContainer: r, onClickContainer: i, placeholder: a, state: o, ...s }, c) => {
+	let l = o === STATES.DEFAULT || o === STATES.ERROR || o === STATES.DISABLED, u = o === STATES.ERROR && n ? n : a, d = { "data-state": o }, f = s["data-testid"] || "input-signature", p = pickCustomAttributes(s), m = pickCustomAttributes(d);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: c,
+		className: t?.input_signature,
+		"data-testid": f,
+		role: "button",
+		tabIndex: -1,
+		onBlur: r,
+		onClick: i,
+		onKeyDown: i,
+		...m,
+		...p,
+		children: [/* @__PURE__ */ jsx("canvas", {
+			ref: e,
+			className: t?.canvas,
+			"data-testid": `${f}-canvas`,
+			...m
+		}), l && /* @__PURE__ */ jsx("div", {
+			className: t?.placeholdercontainer,
+			...m,
+			children: /* @__PURE__ */ jsx(Text, {
+				additionalClasses: { text: t?.placeholdertext },
+				customAttributes: d,
+				...processTextProp(u)
+			})
+		})]
+	});
+});
+export { InputSignatureStandAlone };

package/dist/esm/components/inputSignature/inputSignatureUncontrolled.js

@@ -1 +1,34 @@
-import{jsx as t}from"react/jsx-runtime";import{forwardRef as r,useRef as e,useState as n,useImperativeHandle as o}from"react";import{useDraw as a}from"./hook/useDraw.js";import{InputSignatureControlled as i}from"./inputSignatureControlled.js";import{getInputSignatureState as s}from"./utils/getInputSignatureState.js";const u=r(({disabled:r,error:u,onChange:l,...g},p)=>{const c=e(null),{canvasRef:f,filled:m,resetCanvas:S,setSignatureStyles:d}=a(l),[C,j]=n(!1),v=s({active:C,disabled:r,error:u,filled:m});return o(p,()=>({get InputSignature(){return c.current},get reset(){return S}})),/* @__PURE__ */t(i,{ref:c,canvasRef:f,setSignatureStyles:d,onBlurContainer:()=>{j(!1)},onClickContainer:t=>{r||(t.stopPropagation(),j(!0),t.currentTarget.focus())},...g,state:v})});export{u as InputSignature,u as InputSignatureUnControlled};
+import { InputSignatureControlled } from "./inputSignatureControlled.js";
+import { useDraw } from "./hook/useDraw.js";
+import { getInputSignatureState } from "./utils/getInputSignatureState.js";
+import { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+const InputSignatureUnControlled = forwardRef(({ disabled: t, error: n, onChange: r, ...i }, a) => {
+	let o = useRef(null), { canvasRef: s, filled: c, resetCanvas: l, setSignatureStyles: u } = useDraw(r), [d, f] = useState(!1), p = getInputSignatureState({
+		active: d,
+		disabled: t,
+		error: n,
+		filled: c
+	});
+	return useImperativeHandle(a, () => ({
+		get InputSignature() {
+			return o.current;
+		},
+		get reset() {
+			return l;
+		}
+	})), /* @__PURE__ */ jsx(InputSignatureControlled, {
+		ref: o,
+		canvasRef: s,
+		setSignatureStyles: u,
+		onBlurContainer: () => {
+			f(!1);
+		},
+		onClickContainer: (e) => {
+			t || (e.stopPropagation(), f(!0), e.currentTarget.focus());
+		},
+		...i,
+		state: p
+	});
+});
+export { InputSignatureUnControlled };

package/dist/esm/components/inputSignature/utils/getInputSignatureState.js

@@ -1 +1,3 @@
-import{STATES as t}from"../../../lib/types/states/states.js";const e=({active:e,disabled:s,error:r,filled:i})=>s?t.DISABLED:r?t.ERROR:e?t.ACTIVE:i?t.FILLED:t.DEFAULT;export{e as getInputSignatureState};
+import { STATES } from "../../../lib/types/states/states.js";
+const getInputSignatureState = ({ active: e, disabled: t, error: n, filled: r }) => t ? STATES.DISABLED : n ? STATES.ERROR : e ? STATES.ACTIVE : r ? STATES.FILLED : STATES.DEFAULT;
+export { getInputSignatureState };