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

package/dist/esm/components/tableRow/tableRowStandAlone.js

@@ -1,2 +1,24 @@
-import{jsx as o}from"react/jsx-runtime";import{forwardRef as t}from"react";import{pickCustomAttributes as e}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{CustomComponent as n}from"../../lib/components/customComponent/customComponent.js";const r=t(({active:t,children:r,component:s="tr",cssClasses:a,hoverable:i=!0,id:c,onClick:m,onKeyDown:l,onMouseEnter:u,onMouseLeave:p,...b},d)=>{const C=e(b);/* @__PURE__ */
-return o(n,{ref:d,className:a?.table_row,component:s,"data-active":t,"data-hoverable":i,"data-table-row":!0,"data-testid":"table-row",id:c,onClick:m,onKeyDown:l,onMouseEnter:u,onMouseLeave:p,...C,children:r})});export{r as TableRowStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { CustomComponent } from "../../lib/components/customComponent/customComponent.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const TableRowStandAlone = forwardRef(({ active: e, children: t, component: n = "tr", cssClasses: r, hoverable: i = !0, id: a, onClick: o, onKeyDown: s, onMouseEnter: c, onMouseLeave: l, ...u }, d) => {
+	let f = pickCustomAttributes(u);
+	return /* @__PURE__ */ jsx(CustomComponent, {
+		ref: d,
+		className: r?.table_row,
+		component: n,
+		"data-active": e,
+		"data-hoverable": i,
+		"data-table-row": !0,
+		"data-testid": "table-row",
+		id: a,
+		onClick: o,
+		onKeyDown: s,
+		onMouseEnter: c,
+		onMouseLeave: l,
+		...f,
+		children: t
+	});
+});
+export { TableRowStandAlone };

package/dist/esm/components/tabs/hooks/useTabs/useTabs.js

@@ -1 +1,44 @@
-import{useState as e,useMemo as o,useEffect as t}from"react";import{useActiveBreakpoints as s}from"../../../../lib/hooks/useMediaDevice/useActiveBreakpoints.js";import{useRoveFocus as i}from"../../../../lib/hooks/useRoveFocus/useRoveFocus.js";import{keyLeftMove as r}from"../../utils/keyMove/keLeftMove.js";import{keyRightMove as n}from"../../utils/keyMove/keyRightMove.js";const c=({numTabsInView:c,selectedTab:l,tabsLength:u})=>{const{device:v,isMobile:a}=s(),[k,m]=e(0),M=o(()=>({keyDownMove:0,keyLeftMove:a?r(k,c):-1,keyRightMove:a?n(u,k,c):1,keyTabMove:null,keyUpMove:0,size:u}),[v,k,c]),[f,p,y]=i(M);return t(()=>{if(y.current&&a){const e=y?.current?.clientWidth/c*k;y.current.style.transform=`translate(-${e}px)`}p(k)},[k,v]),t(()=>{var e;e=l??0,m(o=>{let t=o;return e>=o&&e<o+c||(t=e-c+1,t=t<0?0:t),t})},[l]),{focus:f,handleClickIcon:e=>{m(e?k+1:k-1)},handleClickTab:e=>{p(e)},listEl:y,position:k}};export{c as useTabs};
+import { useRoveFocus } from "../../../../lib/hooks/useRoveFocus/useRoveFocus.js";
+import { useActiveBreakpoints } from "../../../../lib/hooks/useMediaDevice/useActiveBreakpoints.js";
+import { keyLeftMove } from "../../utils/keyMove/keLeftMove.js";
+import { keyRightMove } from "../../utils/keyMove/keyRightMove.js";
+import { useEffect, useMemo, useState } from "react";
+const useTabs = ({ numTabsInView: r, selectedTab: i, tabsLength: a }) => {
+	let { device: o, isMobile: s } = useActiveBreakpoints(), [c, l] = useState(0), [u, d, f] = useRoveFocus(useMemo(() => ({
+		keyDownMove: 0,
+		keyLeftMove: s ? keyLeftMove(c, r) : -1,
+		keyRightMove: s ? keyRightMove(a, c, r) : 1,
+		keyTabMove: null,
+		keyUpMove: 0,
+		size: a
+	}), [
+		o,
+		c,
+		r
+	]));
+	useEffect(() => {
+		if (f.current && s) {
+			let e = f?.current?.clientWidth / r * c;
+			f.current.style.transform = `translate(-${e}px)`;
+		}
+		d(c);
+	}, [c, o]);
+	let p = (e) => l((t) => {
+		let n = t;
+		return e >= t && e < t + r || (n = e - r + 1, n = n < 0 ? 0 : n), n;
+	});
+	return useEffect(() => {
+		p(i ?? 0);
+	}, [i]), {
+		focus: u,
+		handleClickIcon: (e) => {
+			l(e ? c + 1 : c - 1);
+		},
+		handleClickTab: (e) => {
+			d(e);
+		},
+		listEl: f,
+		position: c
+	};
+};
+export { useTabs };

package/dist/esm/components/tabs/tabsControlled.js

@@ -1,2 +1,20 @@
-import{jsx as e}from"react/jsx-runtime";import{forwardRef as s}from"react";import{useClassName as a}from"../../lib/hooks/useClassName/useClassName.js";import{useMediaDevice as o}from"../../lib/hooks/useMediaDevice/useMediaDevice.js";import{TabsStandAlone as t}from"./tabsStandAlone.js";const i=s(({additionalClasses:s,variant:i,...r},m)=>{const l=a({additionalClassNames:s,component:"TABS",variant:i}),n=o();/* @__PURE__ */
-return e(t,{...r,ref:m,cssClasses:l,device:n,selectedTab:r.defaultSelectedTab})});export{i as TabsControlled};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { useMediaDevice } from "../../lib/hooks/useMediaDevice/useMediaDevice.js";
+import { TabsStandAlone } from "./tabsStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const TabsControlled = forwardRef(({ additionalClasses: e, variant: t, ...n }, r) => {
+	let i = useClassName({
+		additionalClassNames: e,
+		component: "TABS",
+		variant: t
+	}), a = useMediaDevice();
+	return /* @__PURE__ */ jsx(TabsStandAlone, {
+		...n,
+		ref: r,
+		cssClasses: i,
+		device: a,
+		selectedTab: n.defaultSelectedTab
+	});
+});
+export { TabsControlled };

package/dist/esm/components/tabs/tabsStandAlone.js

@@ -1,5 +1,127 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{forwardRef as a,useId as s}from"react";import{Text as i}from"../text/text.js";import{ElementOrIcon as o}from"../../lib/components/elementOrIcon/elementOrIcon.js";import{ItemRove as n}from"../../lib/components/itemRove/itemRove.js";import{useActiveBreakpoints as l}from"../../lib/hooks/useMediaDevice/useActiveBreakpoints.js";import{STATES as r}from"../../lib/types/states/states.js";import{classNames as c}from"../../lib/utils/classNames/classNames.js";import{pickCustomAttributes as b}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{processTextProp as d}from"../../lib/utils/process/processCommonProp.js";import{useTabs as m}from"./hooks/useTabs/useTabs.js";const u=a(({allowFocusTabPanel:a=!0,autoWidth:u=!1,content:p,cssClasses:h,device:$,hideLabelForSingleTab:f,leftControlAriaLabel:C,leftIcon:v,maxTabsInView:N=3,onSelectTab:T,rightControlAriaLabel:g,rightIcon:I,selectedTab:j,tabs:k,unMountContent:x=!0,...S},y)=>{const{isMobile:A}=l(),E=`tabs-${s().replace(/:/g,"")}`,L=`${E}-tab-list`,w=`${E}-tab-panel`,D=k?.length??0,F=Math.min(D,N),{focus:M,handleClickIcon:O,handleClickTab:P,listEl:R,position:V}=m({numTabsInView:F,selectedTab:j,tabsLength:D}),W=0===V,B=V>=D-F,U=S["data-testid"]||"tabs",q=b(S),z=t=>{const a="left"===t,s=a?W:B;return D>F?/* @__PURE__ */e("button",{"aria-label":a?C:g,className:h?.arrowiconcontainer,"data-position":a?"left":"right","data-testid":`${U}-icon-${t}`,disabled:s,tabIndex:0,type:"button",onClick:()=>{s||O(!a)},children:/* @__PURE__ */e(o,{className:h?.icon,customAttributes:{"data-disabled":s},"data-position":a?"left":"right",...a?v:I})}):null};/* @__PURE__ */
-return t("div",{ref:y,className:h?.tabs,"data-testid":U,...q,children:[
-/* @__PURE__ */t("div",{className:h?.container,children:[z("left"),
-/* @__PURE__ */e("div",{ref:R,className:h?.tabbuttonscontainer,id:L,role:"tablist",children:k?.map((t,a)=>{const s=j===a,o=s?r.SELECTED:r.UNSELECTED,l=a>=V&&a<V+F,m={"data-state":o};/* @__PURE__ */
-return e("div",{className:h?.tabcontainer,"data-testid":`${U}-tab-${a}`,...b(m),style:{minWidth:A?`calc(100% / ${F})`:"auto",width:u?"auto":`calc(100% / ${D})`},children:D>1?/* @__PURE__ */e(n,{ariaDisabled:A&&!l||t.disabled,ariaSelected:s,asElement:"button",checkIsFirstTime:!0,classNames:c(h?.tabbutton,{[`${h?.firsttabbutton}`]:0===a,[`${h?.lasttabbutton}`]:a===D-1}),customAttributes:m,disabled:A&&!l||t.disabled,focus:M===a,id:`${E}-tab-${a}`,index:a,preventScrollOnFocus:!0,role:"tab",type:"button",onSelectItem:()=>{T?.(a),P(a)},children:/* @__PURE__ */e(i,{additionalClasses:{text:h?.label},component:"span",customAttributes:m,"data-hidden":!!f,...d(t)})}):/* @__PURE__ */e("div",{className:c(h?.onetabcontainer,{[`${h?.tabbutton}`]:!!f}),id:`${E}-tab-${a}`,role:"tab",children:/* @__PURE__ */e(i,{additionalClasses:{text:h?.label},"data-hidden":!!f,...d(t),children:d(t).children})})},`${U}-tab-${a.toString()}`)})}),z("right")]}),(()=>{const t={role:"tabpanel",tabIndex:a?0:-1};return x?null!=j&&/* @__PURE__ */e("div",{"aria-labelledby":`${E}-tab-${j}`,className:h?.contentcontainer,...t,children:p?.[j]}):p?.map((a,s)=>/* @__PURE__ */e("div",{"aria-labelledby":`${E}-tab-${s}`,className:h?.contentcontainer,id:`${w}-${s}`,style:{display:j===s?"block":"none"},...t,children:a},`${E}-${s.toString()}-tab`))})()]})});export{u as TabsStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { classNames } from "../../lib/utils/classNames/classNames.js";
+import { Text } from "../text/text2.js";
+import { processTextProp } from "../../lib/utils/process/processCommonProp.js";
+import { ElementOrIcon } from "../../lib/components/elementOrIcon/elementOrIcon.js";
+import { STATES } from "../../lib/types/states/states.js";
+import { useActiveBreakpoints } from "../../lib/hooks/useMediaDevice/useActiveBreakpoints.js";
+import { ItemRove } from "../../lib/components/itemRove/itemRove.js";
+import { useTabs } from "./hooks/useTabs/useTabs.js";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MAX_TABS_IN_VIEW = 3;
+const TabsStandAlone = forwardRef(({ allowFocusTabPanel: s = !0, autoWidth: u = !1, content: d, cssClasses: f, device: p, hideLabelForSingleTab: m, leftControlAriaLabel: h, leftIcon: g, maxTabsInView: _ = MAX_TABS_IN_VIEW, onSelectTab: v, rightControlAriaLabel: y, rightIcon: b, selectedTab: x, tabs: S, unMountContent: C = !0, ...w }, T) => {
+	let { isMobile: E } = useActiveBreakpoints(), D = `tabs-${useId().replace(/:/g, "")}`, O = `${D}-tab-list`, k = `${D}-tab-panel`, A = S?.length ?? 0, j = Math.min(A, _), { focus: M, handleClickIcon: N, handleClickTab: P, listEl: F, position: I } = useTabs({
+		numTabsInView: j,
+		selectedTab: x,
+		tabsLength: A
+	}), L = I === 0, R = I >= A - j, z = w["data-testid"] || "tabs", B = pickCustomAttributes(w), V = (e) => {
+		let t = e === "left", n = t ? L : R, r = () => {
+			n || N(!t);
+		};
+		return A > j ? /* @__PURE__ */ jsx("button", {
+			"aria-label": t ? h : y,
+			className: f?.arrowiconcontainer,
+			"data-position": t ? "left" : "right",
+			"data-testid": `${z}-icon-${e}`,
+			disabled: n,
+			tabIndex: 0,
+			type: "button",
+			onClick: r,
+			children: /* @__PURE__ */ jsx(ElementOrIcon, {
+				className: f?.icon,
+				customAttributes: { "data-disabled": n },
+				"data-position": t ? "left" : "right",
+				...t ? g : b
+			})
+		}) : null;
+	}, H = () => {
+		let e = {
+			role: "tabpanel",
+			tabIndex: s ? 0 : -1
+		};
+		return C ? x != null && /* @__PURE__ */ jsx("div", {
+			"aria-labelledby": `${D}-tab-${x}`,
+			className: f?.contentcontainer,
+			...e,
+			children: d?.[x]
+		}) : d?.map((t, n) => /* @__PURE__ */ jsx("div", {
+			"aria-labelledby": `${D}-tab-${n}`,
+			className: f?.contentcontainer,
+			id: `${k}-${n}`,
+			style: { display: x === n ? "block" : "none" },
+			...e,
+			children: t
+		}, `${D}-${n.toString()}-tab`));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: T,
+		className: f?.tabs,
+		"data-testid": z,
+		...B,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: f?.container,
+			children: [
+				V("left"),
+				/* @__PURE__ */ jsx("div", {
+					ref: F,
+					className: f?.tabbuttonscontainer,
+					id: O,
+					role: "tablist",
+					children: S?.map((i, a) => {
+						let o = x === a, s = o ? STATES.SELECTED : STATES.UNSELECTED, c = a >= I && a < I + j, l = { "data-state": s };
+						return /* @__PURE__ */ jsx("div", {
+							className: f?.tabcontainer,
+							"data-testid": `${z}-tab-${a}`,
+							...pickCustomAttributes(l),
+							style: {
+								minWidth: E ? `calc(100% / ${j})` : "auto",
+								width: u ? "auto" : `calc(100% / ${A})`
+							},
+							children: A > 1 ? /* @__PURE__ */ jsx(ItemRove, {
+								ariaDisabled: E && !c || i.disabled,
+								ariaSelected: o,
+								asElement: "button",
+								checkIsFirstTime: !0,
+								classNames: classNames(f?.tabbutton, {
+									[`${f?.firsttabbutton}`]: a === 0,
+									[`${f?.lasttabbutton}`]: a === A - 1
+								}),
+								customAttributes: l,
+								disabled: E && !c || i.disabled,
+								focus: M === a,
+								id: `${D}-tab-${a}`,
+								index: a,
+								preventScrollOnFocus: !0,
+								role: "tab",
+								type: "button",
+								onSelectItem: () => {
+									v?.(a), P(a);
+								},
+								children: /* @__PURE__ */ jsx(Text, {
+									additionalClasses: { text: f?.label },
+									component: "span",
+									customAttributes: l,
+									"data-hidden": !!m,
+									...processTextProp(i)
+								})
+							}) : /* @__PURE__ */ jsx("div", {
+								className: classNames(f?.onetabcontainer, { [`${f?.tabbutton}`]: !!m }),
+								id: `${D}-tab-${a}`,
+								role: "tab",
+								children: /* @__PURE__ */ jsx(Text, {
+									additionalClasses: { text: f?.label },
+									"data-hidden": !!m,
+									...processTextProp(i),
+									children: processTextProp(i).children
+								})
+							})
+						}, `${z}-tab-${a.toString()}`);
+					})
+				}),
+				V("right")
+			]
+		}), H()]
+	});
+});
+export { TabsStandAlone };

package/dist/esm/components/tabs/tabsUnControlled.js

@@ -1,2 +1,15 @@
-import{jsx as e}from"react/jsx-runtime";import{forwardRef as t,useState as o}from"react";import{TabsControlled as r}from"./tabsControlled.js";const a=t(function({defaultSelectedTab:t=0,onSelectTab:a,...c},n){const[l,f]=o(t);/* @__PURE__ */
-return e(r,{...c,ref:n,defaultSelectedTab:l,onSelectTab:e=>{f(e),a?.(e)}})});export{a as Tabs,a as TabsUnControlled};
+import { TabsControlled } from "./tabsControlled.js";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+const TabsUnControlled = forwardRef(function({ defaultSelectedTab: t = 0, onSelectTab: n, ...r }, i) {
+	let [a, o] = useState(t), s = (e) => {
+		o(e), n?.(e);
+	};
+	return /* @__PURE__ */ jsx(TabsControlled, {
+		...r,
+		ref: i,
+		defaultSelectedTab: a,
+		onSelectTab: s
+	});
+});
+export { TabsUnControlled };

package/dist/esm/components/tabs/utils/keyMove/keLeftMove.js

@@ -1 +1,2 @@
-const o=(o,t)=>c=>c-1<0||c-1<o?o-1+t:c-1;export{o as keyLeftMove};
+const keyLeftMove = (e, t) => (n) => n - 1 < 0 || n - 1 < e ? e - 1 + t : n - 1;
+export { keyLeftMove };

package/dist/esm/components/tabs/utils/keyMove/keyRightMove.js

@@ -1 +1,2 @@
-const o=(o,t,c)=>e=>e+1>=o||e+1===t+c?t:e+1;export{o as keyRightMove};
+const keyRightMove = (e, t, n) => (r) => r + 1 >= e || r + 1 === t + n ? t : r + 1;
+export { keyRightMove };

package/dist/esm/components/tag/tag.js

@@ -1,2 +1,17 @@
-import{jsx as s}from"react/jsx-runtime";import{forwardRef as a}from"react";import{useClassName as o}from"../../lib/hooks/useClassName/useClassName.js";import{TagStandAlone as t}from"./tagStandAlone.js";const r=a(({additionalClasses:a,variant:r,...e},m)=>{const i=o({additionalClassNames:a,component:"TAG",variant:r});/* @__PURE__ */
-return s(t,{...e,ref:m,cssClasses:i})});export{r as Tag};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { TagStandAlone } from "./tagStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const Tag = forwardRef(({ additionalClasses: e, variant: t, ...n }, r) => {
+	let i = useClassName({
+		additionalClassNames: e,
+		component: "TAG",
+		variant: t
+	});
+	return /* @__PURE__ */ jsx(TagStandAlone, {
+		...n,
+		ref: r,
+		cssClasses: i
+	});
+});
+export { Tag };

package/dist/esm/components/tag/tagStandAlone.js

@@ -1,4 +1,26 @@
-import{jsx as t,jsxs as o,Fragment as s}from"react/jsx-runtime";import{forwardRef as e}from"react";import{Text as m}from"../text/text.js";import{CustomComponent as r}from"../../lib/components/customComponent/customComponent.js";import{ElementOrIcon as n}from"../../lib/components/elementOrIcon/elementOrIcon.js";import{pickCustomAttributes as i}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{processIconProp as c,processTextProp as p}from"../../lib/utils/process/processCommonProp.js";const l=e(({component:e="div",cssClasses:l,icon:a,label:u,...b},f)=>{const d=i(b);/* @__PURE__ */
-return t(r,{ref:f,className:l?.tag,component:e,"data-testid":"tag",...d,children:/* @__PURE__ */o(s,{children:[
-/* @__PURE__ */t(n,{className:l?.icon,...c(a)}),
-/* @__PURE__ */t(m,{additionalClasses:{text:l?.label},component:"span",...p(u)})]})})});export{l as TagStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { CustomComponent } from "../../lib/components/customComponent/customComponent.js";
+import { Text } from "../text/text2.js";
+import { processIconProp, processTextProp } from "../../lib/utils/process/processCommonProp.js";
+import { ElementOrIcon } from "../../lib/components/elementOrIcon/elementOrIcon.js";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+const TagStandAlone = forwardRef(({ component: e = "div", cssClasses: t, icon: n, label: r, ...i }, a) => {
+	let o = pickCustomAttributes(i);
+	return /* @__PURE__ */ jsx(CustomComponent, {
+		ref: a,
+		className: t?.tag,
+		component: e,
+		"data-testid": "tag",
+		...o,
+		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ElementOrIcon, {
+			className: t?.icon,
+			...processIconProp(n)
+		}), /* @__PURE__ */ jsx(Text, {
+			additionalClasses: { text: t?.label },
+			component: "span",
+			...processTextProp(r)
+		})] })
+	});
+});
+export { TagStandAlone };

package/dist/esm/components/text/text2.js

@@ -0,0 +1,18 @@
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { TextStandAlone } from "./textStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const Text = forwardRef(({ additionalClasses: e, children: t, variant: n, ...r }, i) => {
+	let a = useClassName({
+		additionalClassNames: e,
+		component: "TEXT",
+		variant: n
+	});
+	return t ? /* @__PURE__ */ jsx(TextStandAlone, {
+		...r,
+		ref: i,
+		cssClasses: a,
+		children: t
+	}) : null;
+});
+export { Text };

package/dist/esm/components/text/textStandAlone.js

@@ -1,2 +1,41 @@
-import{jsx as t}from"react/jsx-runtime";/* empty css        */import{forwardRef as r}from"react";import{classNames as e}from"../../lib/utils/classNames/classNames.js";import{pickCustomAttributes as o}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{CustomComponent as s}from"../../lib/components/customComponent/customComponent.js";const i=r(({align:r,children:i,color:a,component:c,cssClasses:l,cursor:m,customAttributes:n,decoration:d,disabled:p,display:u,draggable:x,filter:b,htmlFor:f,id:g,maxTruncatedLines:k,onClick:j,role:C,target:h,textSizeAdjust:A,textWrap:w,transform:W,truncate:y,weight:N,wordBreak:z,wordWrap:B,...F},S)=>{const T=o({...F,...n}),D=e("kbt-text",l?.text,{"kbt-text--disabled":p??!1},{"kbt-text--truncate":y||!!k});/* @__PURE__ */
-return t(s,{ref:S,className:D,component:c,"data-testid":"text",draggable:x,htmlFor:f,id:g,role:C,style:{color:a,cursor:m,display:u,filter:b,fontWeight:N,textAlign:r,textDecoration:d,textSizeAdjust:A,textTransform:W,textWrap:w,wordBreak:z,wordWrap:B},target:h,onClick:j,...T,children:i})});export{i as TextStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { CustomComponent } from "../../lib/components/customComponent/customComponent.js";
+/* empty css     */
+import { classNames } from "../../lib/utils/classNames/classNames.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const TextStandAlone = forwardRef(({ align: e, children: t, color: n, component: r, cssClasses: i, cursor: a, customAttributes: o, decoration: s, disabled: c, display: l, draggable: u, filter: d, htmlFor: f, id: p, maxTruncatedLines: m, onClick: h, role: g, target: _, textSizeAdjust: v, textWrap: y, transform: b, truncate: x, weight: S, wordBreak: C, wordWrap: w, ...T }, E) => {
+	let D = pickCustomAttributes({
+		...T,
+		...o
+	}), O = classNames("kbt-text", i?.text, { "kbt-text--disabled": c ?? !1 }, { "kbt-text--truncate": x || !!m }), k = {
+		color: n,
+		cursor: a,
+		display: l,
+		filter: d,
+		fontWeight: S,
+		textAlign: e,
+		textDecoration: s,
+		textSizeAdjust: v,
+		textTransform: b,
+		textWrap: y,
+		wordBreak: C,
+		wordWrap: w
+	};
+	return /* @__PURE__ */ jsx(CustomComponent, {
+		ref: E,
+		className: O,
+		component: r,
+		"data-testid": "text",
+		draggable: u,
+		htmlFor: f,
+		id: p,
+		role: g,
+		style: k,
+		target: _,
+		onClick: h,
+		...D,
+		children: t
+	});
+});
+export { TextStandAlone };

package/dist/esm/components/textArea/components/errorStandAlone.js

@@ -1,3 +1,23 @@
-import{jsx as r,jsxs as e,Fragment as t}from"react/jsx-runtime";import{Text as s}from"../../text/text.js";import{ElementOrIcon as o}from"../../../lib/components/elementOrIcon/elementOrIcon.js";import{STATES as i}from"../../../lib/types/states/states.js";import{processTextProp as m}from"../../../lib/utils/process/processCommonProp.js";const c=({cssClasses:c,customAttributtes:n,errorAriaLiveType:a,errorIcon:l,errorMessage:p,id:d,state:u})=>/* @__PURE__ */r("div",{"aria-live":a,className:c?.errorcontainer,id:d,...n,children:!!m(p).children&&u===i.ERROR&&/* @__PURE__ */e(t,{children:[
-/* @__PURE__ */r(o,{className:c?.erroricon,customAttributes:n,...l}),
-/* @__PURE__ */r(s,{additionalClasses:{text:c?.errormessage},component:"p",customAttributes:n,...m(p),children:m(p).children})]})});export{c as ErrorStandAlone};
+import { Text } from "../../text/text2.js";
+import { processTextProp } from "../../../lib/utils/process/processCommonProp.js";
+import { ElementOrIcon } from "../../../lib/components/elementOrIcon/elementOrIcon.js";
+import { STATES } from "../../../lib/types/states/states.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const ErrorStandAlone = ({ cssClasses: e, customAttributtes: t, errorAriaLiveType: n, errorIcon: r, errorMessage: i, id: a, state: o }) => /* @__PURE__ */ jsx("div", {
+	"aria-live": n,
+	className: e?.errorcontainer,
+	id: a,
+	...t,
+	children: !!processTextProp(i).children && o === STATES.ERROR && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ElementOrIcon, {
+		className: e?.erroricon,
+		customAttributes: t,
+		...r
+	}), /* @__PURE__ */ jsx(Text, {
+		additionalClasses: { text: e?.errormessage },
+		component: "p",
+		customAttributes: t,
+		...processTextProp(i),
+		children: processTextProp(i).children
+	})] })
+});
+export { ErrorStandAlone };

package/dist/esm/components/textArea/components/helpMessageStandAlone.js

@@ -1 +1,11 @@
-import{jsx as s}from"react/jsx-runtime";import{Text as t}from"../../text/text.js";import{processTextProp as e}from"../../../lib/utils/process/processCommonProp.js";const o=({cssClasses:o,customAttributtes:m,helpMessage:r,id:i})=>/* @__PURE__ */s(t,{additionalClasses:{text:o?.helpmessage},component:"small",customAttributes:m,id:i,...e(r)});export{o as HelpMessageStandAlone};
+import { Text } from "../../text/text2.js";
+import { processTextProp } from "../../../lib/utils/process/processCommonProp.js";
+import { jsx } from "react/jsx-runtime";
+const HelpMessageStandAlone = ({ cssClasses: e, customAttributtes: t, helpMessage: n, id: r }) => /* @__PURE__ */ jsx(Text, {
+	additionalClasses: { text: e?.helpmessage },
+	component: "small",
+	customAttributes: t,
+	id: r,
+	...processTextProp(n)
+});
+export { HelpMessageStandAlone };

package/dist/esm/components/textArea/components/textCount/textCount.js

@@ -1,2 +1,18 @@
-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{TextCountStandAlone as o}from"./textCountStandAlone.js";const r=t(({additionalClasses:t,variant:r,...e},m)=>{const n=a({additionalClassNames:t,component:"TEXT_COUNT",variant:r});/* @__PURE__ */
-return s(o,{...e,ref:m,cssClasses:n})});export{r as TextCount};
+import { useClassName } from "../../../../lib/hooks/useClassName/useClassName.js";
+import { TextCountStandAlone } from "./textCountStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var TEXT_COUNT = "TEXT_COUNT";
+const TextCount = forwardRef(({ additionalClasses: e, variant: t, ...n }, r) => {
+	let i = useClassName({
+		additionalClassNames: e,
+		component: TEXT_COUNT,
+		variant: t
+	});
+	return /* @__PURE__ */ jsx(TextCountStandAlone, {
+		...n,
+		ref: r,
+		cssClasses: i
+	});
+});
+export { TextCount };

package/dist/esm/components/textArea/components/textCount/textCountStandAlone.js

@@ -1,5 +1,40 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{forwardRef as r}from"react";import{Text as i}from"../../../text/text.js";import{ScreenReaderOnly as o}from"../../../../lib/components/screen-reader-only/screenReaderOnly.js";import{pickCustomAttributes as a}from"../../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";const n=r(({cssClasses:r,currentCharacters:n,id:s,leftColor:l,leftWeight:c,marginTop:m,maxLength:d,rightColor:p,rightWeight:h,screenReaderText:x,textVariant:u,...f},g)=>{const C=a(f);/* @__PURE__ */
-return t("div",{ref:g,"aria-live":(()=>{if(0===n||n>=d)return"polite"})(),className:r?.text_count,"data-testid":"text-count",style:{marginTop:m},...C,children:[
-/* @__PURE__ */e(o,{children:x},n),
-/* @__PURE__ */e(i,{additionalClasses:{text:r?.letftext},"aria-hidden":!0,color:l,component:"span",variant:u,weight:c,children:n}),
-/* @__PURE__ */e(i,{additionalClasses:{text:r?.righttext},"aria-hidden":!0,color:p,component:"span",variant:u,weight:h,children:` / ${d}`})]})});export{n as TextCountStandAlone};
+import { pickCustomAttributes } from "../../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { Text } from "../../../text/text2.js";
+import { ScreenReaderOnly } from "../../../../lib/components/screen-reader-only/screenReaderOnly.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const TextCountStandAlone = forwardRef(({ cssClasses: e, currentCharacters: t, id: n, leftColor: r, leftWeight: i, marginTop: a, maxLength: o, rightColor: s, rightWeight: c, screenReaderText: l, textVariant: u, ...d }, f) => {
+	let p = () => {
+		if (t === 0 || t >= o) return "polite";
+	}, m = pickCustomAttributes(d);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: f,
+		"aria-live": p(),
+		className: e?.text_count,
+		"data-testid": "text-count",
+		style: { marginTop: a },
+		...m,
+		children: [
+			/* @__PURE__ */ jsx(ScreenReaderOnly, { children: l }, t),
+			/* @__PURE__ */ jsx(Text, {
+				additionalClasses: { text: e?.letftext },
+				"aria-hidden": !0,
+				color: r,
+				component: "span",
+				variant: u,
+				weight: i,
+				children: t
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				additionalClasses: { text: e?.righttext },
+				"aria-hidden": !0,
+				color: s,
+				component: "span",
+				variant: u,
+				weight: c,
+				children: ` / ${o}`
+			})
+		]
+	});
+});
+export { TextCountStandAlone };

package/dist/esm/components/textArea/components/titleStandAlone.js

@@ -1 +1,15 @@
-import{jsx as t}from"react/jsx-runtime";import{Text as s}from"../../text/text.js";import{processTextProp as e}from"../../../lib/utils/process/processCommonProp.js";const o=({cssClasses:o,customAttributtes:i,title:r})=>r?/* @__PURE__ */t("div",{className:o?.titlecontainer,...i,children:/* @__PURE__ */t(s,{additionalClasses:{text:o?.title},customAttributes:i,...e(r),component:e(r).component??"p",children:e(r).children})}):null;export{o as TitleStandAlone};
+import { Text } from "../../text/text2.js";
+import { processTextProp } from "../../../lib/utils/process/processCommonProp.js";
+import { jsx } from "react/jsx-runtime";
+const TitleStandAlone = ({ cssClasses: e, customAttributtes: t, title: n }) => n ? /* @__PURE__ */ jsx("div", {
+	className: e?.titlecontainer,
+	...t,
+	children: /* @__PURE__ */ jsx(Text, {
+		additionalClasses: { text: e?.title },
+		customAttributes: t,
+		...processTextProp(n),
+		component: processTextProp(n).component ?? "p",
+		children: processTextProp(n).children
+	})
+}) : null;
+export { TitleStandAlone };

package/dist/esm/components/textArea/textArea.js

@@ -1,2 +1,38 @@
-import{jsx as e}from"react/jsx-runtime";import{forwardRef as t,useState as o}from"react";import{useClassName as s}from"../../lib/hooks/useClassName/useClassName.js";import{TextAreaStandAlone as r}from"./textAreaStandAlone.js";import{getState as a}from"./utils/state.utils.js";const n=t(function({additionalClasses:t,disabled:n=!1,error:l=!1,labelInsideTextArea:i=!1,onBlur:m,onFocus:u,value:d,variant:p,...y},c){const f=s({additionalClassNames:t,component:"TEXT_AREA",variant:p}),[x,b]=o(!1);/* @__PURE__ */
-return e(r,{ref:c,cssClasses:f,state:a(n,l,d,x),value:d,onBlur:e=>{if(i){const t=e?.target,o=t?.parentElement;t&&o&&(o.style.removeProperty("outline"),o.style.removeProperty("boxShadow"),t.style.removeProperty("outline"),t.style.removeProperty("boxShadow"))}b(!1),m?.(e)},onFocus:e=>{if(i){const t=e?.target,o=t?.parentElement;if(t&&o){const e=window.getComputedStyle(t);o.style.outline=e.outline,o.style.boxShadow=e.boxShadow,t.style.outline="none",t.style.boxShadow="none"}}b(!0),u?.(e)},...y})});export{n as TextArea};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { TextAreaStandAlone } from "./textAreaStandAlone.js";
+import { getState } from "./utils/state.utils.js";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var TEXT_AREA = "TEXT_AREA";
+const TextArea = forwardRef(function({ additionalClasses: r, disabled: i = !1, error: a = !1, labelInsideTextArea: o = !1, onBlur: s, onFocus: c, value: l, variant: u, ...d }, f) {
+	let p = useClassName({
+		additionalClassNames: r,
+		component: TEXT_AREA,
+		variant: u
+	}), [m, h] = useState(!1);
+	return /* @__PURE__ */ jsx(TextAreaStandAlone, {
+		ref: f,
+		cssClasses: p,
+		state: getState(i, a, l, m),
+		value: l,
+		onBlur: (e) => {
+			if (o) {
+				let t = e?.target, n = t?.parentElement;
+				t && n && (n.style.removeProperty("outline"), n.style.removeProperty("boxShadow"), t.style.removeProperty("outline"), t.style.removeProperty("boxShadow"));
+			}
+			h(!1), s?.(e);
+		},
+		onFocus: (e) => {
+			if (o) {
+				let t = e?.target, n = t?.parentElement;
+				if (t && n) {
+					let e = window.getComputedStyle(t);
+					n.style.outline = e.outline, n.style.boxShadow = e.boxShadow, t.style.outline = "none", t.style.boxShadow = "none";
+				}
+			}
+			h(!0), c?.(e);
+		},
+		...d
+	});
+});
+export { TextArea };