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

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

@@ -1,11 +1,106 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as r,useId as s}from"react";import{LabelStandAlone as a}from"../label/labelStandAlone.js";import{STATES as o}from"../../lib/types/states/states.js";import{pickCustomAttributes as i}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{processTextProp as n}from"../../lib/utils/process/processCommonProp.js";import{ErrorStandAlone as l}from"./components/errorStandAlone.js";import{HelpMessageStandAlone as c}from"./components/helpMessageStandAlone.js";import{TextCount as d}from"./components/textCount/textCount.js";import{TitleStandAlone as m}from"./components/titleStandAlone.js";import{buildAriaDescribedBy as u}from"./utils/aria.utils.js";const p=r(({additionalInfo:r,counterVariant:p,cssClasses:h,errorAriaLiveType:x="assertive",errorIcon:b,errorMessage:g,height:C,helpMessage:f,id:A,label:v,labelInsideTextArea:I,maxLength:j,onBlur:y,onChange:E,onFocus:L,placeholder:T,required:M,screenReaderTextCount:k,spellCheck:B,state:D,title:N,value:S,...q},$)=>{const _=`textarea-${s().replace(/:/g,"")}`,F=A??_,H=`${F}HelpText`,P=`${F}Error`,R=`${F}TextCount`,w=i({"data-state":D}),K=[o.DISABLED_EMPTY,o.DISABLED_FILLED].includes(D);/* @__PURE__ */
-return e("div",{ref:$,className:h?.text_area,"data-testid":"text-area",...w,...i(q),children:[
-/* @__PURE__ */t(m,{cssClasses:h,customAttributtes:w,title:N}),
-/* @__PURE__ */e("div",{className:h?.labeltextareacontainer,role:"button",style:{height:I?C:void 0},tabIndex:0,onClick:()=>document.getElementById(F)?.focus(),onKeyDown:e=>{"Enter"===e.key&&document.getElementById(F)?.focus()},children:[
-/* @__PURE__ */e("div",{className:h?.labelandadditionalinfocontainer,children:[
-/* @__PURE__ */t(a,{asteriskCssClasses:h?.required,customAttributes:w,inputId:F,required:M,textCssClasses:h?.label,...n(v),children:n(v).children}),r]}),
-/* @__PURE__ */t("textarea",{"aria-describedby":u({errorMessage:n(g).children,helpMessage:n(f).children,state:D,textAreaErrorId:P,textAreaHelpTextId:H}),className:h?.textarea,disabled:K,id:F,maxLength:j,placeholder:T,required:M,spellCheck:B,style:{height:C||void 0},value:S,onBlur:y,onChange:E,onFocus:L,...w,children:S})]}),
-/* @__PURE__ */e("div",{className:h?.bottomcontainer,...w,children:[
-/* @__PURE__ */e("div",{className:h?.helpmessageerrorcontainer,...w,children:[
-/* @__PURE__ */t(l,{cssClasses:h,customAttributtes:w,errorAriaLiveType:x,errorIcon:b,errorMessage:g,id:P,state:D}),
-/* @__PURE__ */t(c,{cssClasses:h,customAttributtes:w,helpMessage:f,id:H})]}),!!p&&/* @__PURE__ */t(d,{additionalClasses:{letftext:h?.counterleft,righttext:h?.counterright,text_count:h?.counter},currentCharacters:S?.length??0,id:R,maxLength:j,screenReaderText:k,variant:p})]})]})});export{p as TextAreaStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { processTextProp } from "../../lib/utils/process/processCommonProp.js";
+import { STATES } from "../../lib/types/states/states.js";
+import { LabelStandAlone } from "../label/labelStandAlone.js";
+import { ErrorStandAlone } from "./components/errorStandAlone.js";
+import { HelpMessageStandAlone } from "./components/helpMessageStandAlone.js";
+import { TextCount } from "./components/textCount/textCount.js";
+import { TitleStandAlone } from "./components/titleStandAlone.js";
+import { buildAriaDescribedBy } from "./utils/aria.utils.js";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const TextAreaStandAlone = forwardRef(({ additionalInfo: t, counterVariant: n, cssClasses: r, errorAriaLiveType: i = "assertive", errorIcon: a, errorMessage: o, height: s, helpMessage: c, id: l, label: u, labelInsideTextArea: d, maxLength: f, onBlur: p, onChange: m, onFocus: h, placeholder: g, required: _, screenReaderTextCount: v, spellCheck: y, state: b, title: x, value: S, ...C }, w) => {
+	let T = `textarea-${useId().replace(/:/g, "")}`, E = l ?? T, D = `${E}HelpText`, O = `${E}Error`, k = `${E}TextCount`, A = pickCustomAttributes({ "data-state": b }), j = [STATES.DISABLED_EMPTY, STATES.DISABLED_FILLED].includes(b);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: w,
+		className: r?.text_area,
+		"data-testid": "text-area",
+		...A,
+		...pickCustomAttributes(C),
+		children: [
+			/* @__PURE__ */ jsx(TitleStandAlone, {
+				cssClasses: r,
+				customAttributtes: A,
+				title: x
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: r?.labeltextareacontainer,
+				role: "button",
+				style: { height: d ? s : void 0 },
+				tabIndex: 0,
+				onClick: () => document.getElementById(E)?.focus(),
+				onKeyDown: (e) => {
+					e.key === "Enter" && document.getElementById(E)?.focus();
+				},
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: r?.labelandadditionalinfocontainer,
+					children: [/* @__PURE__ */ jsx(LabelStandAlone, {
+						asteriskCssClasses: r?.required,
+						customAttributes: A,
+						inputId: E,
+						required: _,
+						textCssClasses: r?.label,
+						...processTextProp(u),
+						children: processTextProp(u).children
+					}), t]
+				}), /* @__PURE__ */ jsx("textarea", {
+					"aria-describedby": buildAriaDescribedBy({
+						errorMessage: processTextProp(o).children,
+						helpMessage: processTextProp(c).children,
+						state: b,
+						textAreaErrorId: O,
+						textAreaHelpTextId: D
+					}),
+					className: r?.textarea,
+					disabled: j,
+					id: E,
+					maxLength: f,
+					placeholder: g,
+					required: _,
+					spellCheck: y,
+					style: { height: s || void 0 },
+					value: S,
+					onBlur: p,
+					onChange: m,
+					onFocus: h,
+					...A,
+					children: S
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: r?.bottomcontainer,
+				...A,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: r?.helpmessageerrorcontainer,
+					...A,
+					children: [/* @__PURE__ */ jsx(ErrorStandAlone, {
+						cssClasses: r,
+						customAttributtes: A,
+						errorAriaLiveType: i,
+						errorIcon: a,
+						errorMessage: o,
+						id: O,
+						state: b
+					}), /* @__PURE__ */ jsx(HelpMessageStandAlone, {
+						cssClasses: r,
+						customAttributtes: A,
+						helpMessage: c,
+						id: D
+					})]
+				}), !!n && /* @__PURE__ */ jsx(TextCount, {
+					additionalClasses: {
+						letftext: r?.counterleft,
+						righttext: r?.counterright,
+						text_count: r?.counter
+					},
+					currentCharacters: S?.length ?? 0,
+					id: k,
+					maxLength: f,
+					screenReaderText: v,
+					variant: n
+				})]
+			})
+		]
+	});
+});
+export { TextAreaStandAlone };

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

@@ -1 +1,6 @@
-import{STATES as e}from"../../../lib/types/states/states.js";const t=({errorMessage:t,helpMessage:r,state:s,textAreaErrorId:a,textAreaHelpTextId:o})=>{let p="";return r&&(p+=` ${o}`),t&&s===e.ERROR&&(p+=` ${a}`),p};export{t as buildAriaDescribedBy};
+import { STATES } from "../../../lib/types/states/states.js";
+const buildAriaDescribedBy = ({ errorMessage: e, helpMessage: t, state: n, textAreaErrorId: r, textAreaHelpTextId: i }) => {
+	let a = "";
+	return t && (a += ` ${i}`), e && n === STATES.ERROR && (a += ` ${r}`), a;
+};
+export { buildAriaDescribedBy };

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

@@ -1 +1,6 @@
-import{STATES as t}from"../../../lib/types/states/states.js";const E=(E,s,e,D)=>{let L;return L=E&&e?t.DISABLED_FILLED:E?t.DISABLED_EMPTY:s?t.ERROR:e?t.FILLED:D?t.ACTIVE:t.EMPTY,L};export{E as getState};
+import { STATES } from "../../../lib/types/states/states.js";
+const getState = (e, t, n, r) => {
+	let i;
+	return i = e && n ? STATES.DISABLED_FILLED : e ? STATES.DISABLED_EMPTY : t ? STATES.ERROR : n ? STATES.FILLED : r ? STATES.ACTIVE : STATES.EMPTY, i;
+};
+export { getState };

package/dist/esm/components/toggle/toggleControlled.js

@@ -1,2 +1,22 @@
-import{jsx as o}from"react/jsx-runtime";import{forwardRef as s}from"react";import{useClassName as e}from"../../lib/hooks/useClassName/useClassName.js";import{ToggleStandalone as a}from"./toggleStandAlone.js";const t=s(({additionalVariantClasses:s,checked:t,onClick:r,onToggle:n,variant:l,...i},m)=>{const c=e({additionalClassNames:s,component:"TOGGLE",variant:l});/* @__PURE__ */
-return o(a,{...i,ref:m,checked:t,cssClasses:c,onClick:o=>{const s=!t;n?.(s),r?.(o)}})});t.displayName="ToggleControlled";export{t as ToggleControlled};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { ToggleStandalone } from "./toggleStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const ToggleControlled = forwardRef(({ additionalVariantClasses: t, checked: n, onClick: r, onToggle: i, variant: a, ...o }, s) => {
+	let c = useClassName({
+		additionalClassNames: t,
+		component: "TOGGLE",
+		variant: a
+	}), l = (e) => {
+		i?.(!n), r?.(e);
+	};
+	return /* @__PURE__ */ jsx(ToggleStandalone, {
+		...o,
+		ref: s,
+		checked: n,
+		cssClasses: c,
+		onClick: l
+	});
+});
+ToggleControlled.displayName = "ToggleControlled";
+export { ToggleControlled };

package/dist/esm/components/toggle/toggleStandAlone.js

@@ -1,4 +1,73 @@
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{forwardRef as t,useRef as a,useImperativeHandle as s}from"react";import{CustomComponent as n}from"../../lib/components/customComponent/customComponent.js";import{ElementOrIcon as i}from"../../lib/components/elementOrIcon/elementOrIcon.js";import{pickCustomAttributes as r}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{processIconProp as c}from"../../lib/utils/process/processCommonProp.js";import{buildComponentProps as l}from"./utils/buildComponentProps.js";import{useToggleTransform as d}from"./utils/thumbTransformCalculations.js";const m=({checked:t=!1,component:m="button",cssClasses:u,dataTestId:b="toggle",disabled:p=!1,id:f,leftIcon:h,name:v,onBlur:y,onClick:k,onFocus:C,onKeyDown:j,onMouseEnter:I,onMouseLeave:N,rightIcon:g,tabIndex:w,value:x,...M},A)=>{const T=t&&!!g,B=!t&&!!h,D="button"!==m,E=a(null),F=a(null),{transform:K}=d({checked:t,thumbRef:F,trackRef:E});s(A,()=>E.current,[]);const L=r(M),O=l({"aria-describedby":M["aria-describedby"],"aria-label":M["aria-label"],"aria-labelledby":M["aria-labelledby"],checked:t,decorative:D,disabled:p,id:f,name:v,onBlur:y,onClick:k,onFocus:C,onKeyDown:j,onMouseEnter:I,onMouseLeave:N,tabIndex:w,value:x});/* @__PURE__ */
-return e(n,{...L,...O,ref:E,className:u?.track,component:m,"data-checked":!!t||void 0,"data-disabled":!!p||void 0,"data-testid":b,children:/* @__PURE__ */o("span",{ref:F,className:u?.thumb,"data-checked":!!t||void 0,"data-disabled":!!p||void 0,style:{transform:K},children:[
-/* @__PURE__ */e("div",{className:u?.iconwrapper,"data-testid":`${b}-right-icon`,style:{opacity:T?1:0},children:/* @__PURE__ */e(i,{className:u?.icon,"data-disabled":!!p||void 0,...c(g)})}),
-/* @__PURE__ */e("div",{className:u?.iconwrapper,"data-testid":`${b}-left-icon`,style:{opacity:B?1:0},children:/* @__PURE__ */e(i,{className:u?.icon,"data-disabled":!!p||void 0,...c(h)})})]})})};m.displayName="ToggleStandAlone";const u=t(m);export{u as ToggleStandalone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { CustomComponent } from "../../lib/components/customComponent/customComponent.js";
+import { processIconProp } from "../../lib/utils/process/processCommonProp.js";
+import { ElementOrIcon } from "../../lib/components/elementOrIcon/elementOrIcon.js";
+import { buildComponentProps } from "./utils/buildComponentProps.js";
+import { useToggleTransform } from "./utils/thumbTransformCalculations.js";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ToggleStandAloneComponent = ({ checked: e = !1, component: t = "button", cssClasses: n, dataTestId: r = "toggle", disabled: i = !1, id: a, leftIcon: o, name: s, onBlur: c, onClick: l, onFocus: u, onKeyDown: d, onMouseEnter: f, onMouseLeave: p, rightIcon: m, tabIndex: h, value: g, ..._ }, v) => {
+	let y = e && !!m, b = !e && !!o, x = t !== "button", S = useRef(null), C = useRef(null), { transform: w } = useToggleTransform({
+		checked: e,
+		thumbRef: C,
+		trackRef: S
+	});
+	useImperativeHandle(v, () => S.current, []);
+	let T = pickCustomAttributes(_), E = buildComponentProps({
+		"aria-describedby": _["aria-describedby"],
+		"aria-label": _["aria-label"],
+		"aria-labelledby": _["aria-labelledby"],
+		checked: e,
+		decorative: x,
+		disabled: i,
+		id: a,
+		name: s,
+		onBlur: c,
+		onClick: l,
+		onFocus: u,
+		onKeyDown: d,
+		onMouseEnter: f,
+		onMouseLeave: p,
+		tabIndex: h,
+		value: g
+	});
+	return /* @__PURE__ */ jsx(CustomComponent, {
+		...T,
+		...E,
+		ref: S,
+		className: n?.track,
+		component: t,
+		"data-checked": e ? !0 : void 0,
+		"data-disabled": i ? !0 : void 0,
+		"data-testid": r,
+		children: /* @__PURE__ */ jsxs("span", {
+			ref: C,
+			className: n?.thumb,
+			"data-checked": e ? !0 : void 0,
+			"data-disabled": i ? !0 : void 0,
+			style: { transform: w },
+			children: [/* @__PURE__ */ jsx("div", {
+				className: n?.iconwrapper,
+				"data-testid": `${r}-right-icon`,
+				style: { opacity: y ? 1 : 0 },
+				children: /* @__PURE__ */ jsx(ElementOrIcon, {
+					className: n?.icon,
+					"data-disabled": i ? !0 : void 0,
+					...processIconProp(m)
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: n?.iconwrapper,
+				"data-testid": `${r}-left-icon`,
+				style: { opacity: b ? 1 : 0 },
+				children: /* @__PURE__ */ jsx(ElementOrIcon, {
+					className: n?.icon,
+					"data-disabled": i ? !0 : void 0,
+					...processIconProp(o)
+				})
+			})]
+		})
+	});
+};
+ToggleStandAloneComponent.displayName = "ToggleStandAlone";
+const ToggleStandalone = forwardRef(ToggleStandAloneComponent);
+export { ToggleStandalone };

package/dist/esm/components/toggle/toggleUnControlled.js

@@ -1,2 +1,17 @@
-import{jsx as o}from"react/jsx-runtime";import{forwardRef as e,useState as r}from"react";import{ToggleControlled as t}from"./toggleControlled.js";const n=e(({defaultChecked:e=!1,onToggle:n,variant:l,...a},c)=>{const[g,m]=r(e);/* @__PURE__ */
-return o(t,{...a,ref:c,checked:g,variant:l,onToggle:o=>{m(o),n?.(o)}})});n.displayName="ToggleUncontrolled";export{n as ToggleUncontrolled};
+import { ToggleControlled } from "./toggleControlled.js";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+const ToggleUncontrolled = forwardRef(({ defaultChecked: t = !1, onToggle: n, variant: r, ...i }, a) => {
+	let [o, s] = useState(t), c = (e) => {
+		s(e), n?.(e);
+	};
+	return /* @__PURE__ */ jsx(ToggleControlled, {
+		...i,
+		ref: a,
+		checked: o,
+		variant: r,
+		onToggle: c
+	});
+});
+ToggleUncontrolled.displayName = "ToggleUncontrolled";
+export { ToggleUncontrolled };

package/dist/esm/components/toggle/utils/buildComponentProps.js

@@ -1 +1,28 @@
-const e=e=>e.decorative?(e=>({"aria-hidden":!0,id:e.id,name:void 0,value:void 0}))(e):(e=>{const{"aria-describedby":a,"aria-label":o,"aria-labelledby":n,checked:d,disabled:i,id:l,name:r,onBlur:b,onClick:c,onFocus:s,onKeyDown:u,onMouseEnter:t,onMouseLeave:v,tabIndex:y,value:h}=e;return{"aria-checked":Boolean(d),"aria-describedby":a,"aria-label":o,"aria-labelledby":n,disabled:Boolean(i),id:l,name:r,onBlur:b,onClick:c,onFocus:s,onKeyDown:u,onMouseEnter:t,onMouseLeave:v,role:"switch",tabIndex:y,value:h}})(e);export{e as buildComponentProps};
+var getDecorativeProps = (e) => ({
+	"aria-hidden": !0,
+	id: e.id,
+	name: void 0,
+	value: void 0
+}), getInteractiveProps = (e) => {
+	let { "aria-describedby": t, "aria-label": n, "aria-labelledby": r, checked: i, disabled: a, id: o, name: s, onBlur: c, onClick: l, onFocus: u, onKeyDown: d, onMouseEnter: f, onMouseLeave: p, tabIndex: m, value: h } = e;
+	return {
+		"aria-checked": !!i,
+		"aria-describedby": t,
+		"aria-label": n,
+		"aria-labelledby": r,
+		disabled: !!a,
+		id: o,
+		name: s,
+		onBlur: c,
+		onClick: l,
+		onFocus: u,
+		onKeyDown: d,
+		onMouseEnter: f,
+		onMouseLeave: p,
+		role: "switch",
+		tabIndex: m,
+		value: h
+	};
+};
+const buildComponentProps = (n) => n.decorative ? getDecorativeProps(n) : getInteractiveProps(n);
+export { buildComponentProps };

package/dist/esm/components/toggle/utils/thumbTransformCalculations.js

@@ -1 +1,29 @@
-import{useState as t,useEffect as e}from"react";const r=({checked:r,thumbRef:d,trackRef:n})=>{const[a,i]=t("translateX(0px)");return e(()=>{if(n.current&&d.current){const t=window.getComputedStyle(n.current),e=window.getComputedStyle(d.current),a=(({checked:t,thumbStyles:e,trackStyles:r})=>{if(!r||!e)return"translateX(0px)";const d=(t=>!(!t?.borderWidth||"0"===t?.borderWidth||"0rem"===t?.borderWidth||"0px"===t?.borderWidth||"none"===t?.borderStyle))(r);return t?(({borderMultiple:t,borderWidth:e,thumbStyles:r,trackStyles:d})=>{if(!d||!r)return"translateX(0px)";const n=e||"0px";return d.paddingRight&&d.paddingLeft||d.padding?`translateX(calc(${d.width} - ${r.width} - ${d.paddingLeft||d.padding} - ${d.paddingRight||d.padding} - ${n} * ${t}))`:`translateX(calc(${d.width} - ${r.width} - ${n} * ${t}))`})({borderMultiple:d?2:0,borderWidth:d?r?.borderWidth:"0px",thumbStyles:e,trackStyles:r}):"translateX(0px)"})({checked:r,thumbStyles:e,trackStyles:t});i(a)}},[r]),{transform:a}};export{r as useToggleTransform};
+import { useEffect, useState } from "react";
+var calculateThumbTransform = ({ borderMultiple: e, borderWidth: t, thumbStyles: n, trackStyles: r }) => {
+	if (!r || !n) return "translateX(0px)";
+	let i = t || "0px";
+	return r.paddingRight && r.paddingLeft || r.padding ? `translateX(calc(${r.width} - ${n.width} - ${r.paddingLeft || r.padding} - ${r.paddingRight || r.padding} - ${i} * ${e}))` : `translateX(calc(${r.width} - ${n.width} - ${i} * ${e}))`;
+}, hasVisibleBorder = (e) => !!(e?.borderWidth && e?.borderWidth !== "0" && e?.borderWidth !== "0rem" && e?.borderWidth !== "0px" && e?.borderStyle !== "none"), getThumbTransform = ({ checked: e, thumbStyles: t, trackStyles: i }) => {
+	if (!i || !t) return "translateX(0px)";
+	let a = hasVisibleBorder(i), o = a ? i?.borderWidth : "0px";
+	return e ? calculateThumbTransform({
+		borderMultiple: a ? 2 : 0,
+		borderWidth: o,
+		thumbStyles: t,
+		trackStyles: i
+	}) : "translateX(0px)";
+};
+const useToggleTransform = ({ checked: n, thumbRef: r, trackRef: a }) => {
+	let [o, s] = useState("translateX(0px)");
+	return useEffect(() => {
+		if (a.current && r.current) {
+			let e = window.getComputedStyle(a.current);
+			s(getThumbTransform({
+				checked: n,
+				thumbStyles: window.getComputedStyle(r.current),
+				trackStyles: e
+			}));
+		}
+	}, [n]), { transform: o };
+};
+export { useToggleTransform };

package/dist/esm/components/tooltip/components/tooltipTrigger.js

@@ -1 +1,32 @@
-import{jsx as o}from"react/jsx-runtime";const e=({ariaDescribedBy:e,children:n,childrenAsButton:t,disabled:r,onClick:s,onKeyDown:i,onMouseDown:a,onMouseEnter:u,onMouseLeave:d,onMouseUp:l,triggerAsButton:c})=>t?/* @__PURE__ */o("button",{"aria-describedby":e,"aria-disabled":r,className:"kbt-tooltip__trigger-wrapper ",...c,disabled:r,type:"button",onClick:s,onKeyDown:i,onMouseDown:a,onMouseEnter:o=>{u?.(o)},onMouseLeave:o=>{d?.(o)},onMouseUp:l,children:n}):/* @__PURE__ */o("div",{className:"kbt-tooltip__trigger-wrapper ",role:"button",tabIndex:0,onClick:s,onKeyDown:i,onMouseDown:a,onMouseEnter:u,onMouseLeave:d,onMouseUp:l,children:n});export{e as TooltipTrigger};
+import { jsx } from "react/jsx-runtime";
+const TooltipTrigger = ({ ariaDescribedBy: t, children: n, childrenAsButton: r, disabled: i, onClick: a, onKeyDown: o, onMouseDown: s, onMouseEnter: c, onMouseLeave: l, onMouseUp: u, triggerAsButton: d }) => r ? /* @__PURE__ */ jsx("button", {
+	"aria-describedby": t,
+	"aria-disabled": i,
+	className: "kbt-tooltip__trigger-wrapper ",
+	...d,
+	disabled: i,
+	type: "button",
+	onClick: a,
+	onKeyDown: o,
+	onMouseDown: s,
+	onMouseEnter: (e) => {
+		c?.(e);
+	},
+	onMouseLeave: (e) => {
+		l?.(e);
+	},
+	onMouseUp: u,
+	children: n
+}) : /* @__PURE__ */ jsx("div", {
+	className: "kbt-tooltip__trigger-wrapper ",
+	role: "button",
+	tabIndex: 0,
+	onClick: a,
+	onKeyDown: o,
+	onMouseDown: s,
+	onMouseEnter: c,
+	onMouseLeave: l,
+	onMouseUp: u,
+	children: n
+});
+export { TooltipTrigger };

package/dist/esm/components/tooltip/hooks/useTooltip.js

@@ -1 +1,95 @@
-import{flip as e,shift as t,arrow as o}from"@floating-ui/dom";import{useRef as r,useState as s,useEffect as i,useCallback as l}from"react";import{useClassName as n}from"../../../lib/hooks/useClassName/useClassName.js";import{useClickOutside as p}from"../../../lib/hooks/useClickOutside/useClickOutside.js";import{useEscPressed as a}from"../../../lib/hooks/useEscPressed/useEscPressed.js";import{useActiveBreakpoints as c}from"../../../lib/hooks/useMediaDevice/useActiveBreakpoints.js";import{DEVICE_BREAKPOINTS as u}from"../../../lib/types/breakpoints/breakpoints.js";import{POSITIONS as f}from"../../../lib/types/positions/positions.js";import{focusElementOrFirstDescendant as m}from"../../../lib/utils/focusHandlers/focusHandlers.js";import{computePosition as d}from"../positioning/computePosition.js";const y=({align:y=f.TOP,...b})=>{const{device:R,isDesktop:v,isTablet:O}=c(),w=v||O,P=r(null),g=r(!0),T=r(!1),[E,h]=s(!1),[j,k]=s(y),x=n({additionalClassNames:b.additionalClasses,component:"TOOLTIP",variant:b.variant}),C=async()=>{if(!b.labelRef.current||!b.tooltipRef.current)return;const r=b.tooltipRef.current.lastElementChild;try{const s=await d(b.labelRef.current,b.tooltipRef.current,{middleware:[e(),t({padding:4}),o({element:r})],placement:y,strategy:"absolute"}),{middlewareData:i,placement:l,x:n,y:p}=s;k(l),b.tooltipRef.current?.style&&Object.assign(b.tooltipRef.current.style,{left:`${n}px`,top:`${p}px`});const{x:a,y:c}=i.arrow,m={bottom:f.TOP,left:f.RIGHT,right:f.LEFT,top:f.BOTTOM}[j.split("-")[0]],R={bottom:"",left:null!==a?`${a}px`:"",right:"",[m]:`calc(${x.tooltipexternalcontainer?.[u.DESKTOP]?.padding??0} - ${x.arrowposition?.[u.DESKTOP]?.top??"0px"} / 2)`,top:null!==c?`${c}px`:""};r&&r.style&&(r.style.removeProperty("left"),r.style.removeProperty("top"),r.style.removeProperty("right"),r.style.removeProperty("bottom"),Object.assign(r?.style,R))}catch(s){}},L=e=>{b.tooltipRef.current?.contains(e.target)||C()};i(()=>{const e=()=>{C()};return window.addEventListener("scroll",L,!0),window.addEventListener("resize",e),()=>{window.removeEventListener("scroll",L,!0),window.removeEventListener("resize",e)}},[]);const $=l(()=>{if(T.current){if(T.current=!1,g.current=!1,b.tooltipAsModal&&P.current?.focus({preventScroll:!0}),g.current=!0,w){if(!b.tooltipRef.current)return;b.tooltipRef.current.style&&(b.tooltipRef.current.style.display="none")}h(!1),b.onOpenClose?.(!1)}},[R,b.onOpenClose,b.tooltipAsModal]),D=l(e=>{T.current&&(e.stopPropagation(),$())},[$]);return a({disableStopPropagation:!0,onEscPress:D,ref:b.labelRef}),p(b.tooltipRef,$,[b.labelRef.current]),{allowFocusOpenTooltip:g,hideTooltip:$,open:E,placement:j,showTooltip:()=>{if(!T.current){if(T.current=!0,P.current=document.activeElement,w){if(!b.tooltipRef.current)return;b.tooltipRef.current.style&&(b.tooltipRef.current.style.display="flex"),C(),m(b.tooltipRef.current,{preventScroll:!0})}h(!0),b.onOpenClose?.(!0)}}}};export{y as useTooltip};
+import { useClassName } from "../../../lib/hooks/useClassName/useClassName.js";
+import { POSITIONS } from "../../../lib/types/positions/positions.js";
+import { DEVICE_BREAKPOINTS } from "../../../lib/types/breakpoints/breakpoints.js";
+import { focusElementOrFirstDescendant } from "../../../lib/utils/focusHandlers/focusHandlers.js";
+import { useClickOutside } from "../../../lib/hooks/useClickOutside/useClickOutside.js";
+import { useActiveBreakpoints } from "../../../lib/hooks/useMediaDevice/useActiveBreakpoints.js";
+import { useEscPressed } from "../../../lib/hooks/useEscPressed/useEscPressed.js";
+import { computePosition as computePosition$1 } from "../positioning/computePosition.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { arrow, flip, shift } from "@floating-ui/dom";
+const useTooltip = ({ align: l = POSITIONS.TOP, ...u }) => {
+	let { device: d, isDesktop: f, isTablet: p } = useActiveBreakpoints(), m = f || p, h = useRef(null), g = useRef(!0), _ = useRef(!1), [v, y] = useState(!1), [b, x] = useState(l), S = useClassName({
+		additionalClassNames: u.additionalClasses,
+		component: "TOOLTIP",
+		variant: u.variant
+	}), C = async () => {
+		if (!u.labelRef.current || !u.tooltipRef.current) return;
+		let e = u.tooltipRef.current.lastElementChild;
+		try {
+			let { middlewareData: t, placement: n, x: r, y: i } = await computePosition$1(u.labelRef.current, u.tooltipRef.current, {
+				middleware: [
+					flip(),
+					shift({ padding: 4 }),
+					arrow({ element: e })
+				],
+				placement: l,
+				strategy: "absolute"
+			});
+			x(n), u.tooltipRef.current?.style && Object.assign(u.tooltipRef.current.style, {
+				left: `${r}px`,
+				top: `${i}px`
+			});
+			let { x: a, y: o } = t.arrow, s = {
+				bottom: POSITIONS.TOP,
+				left: POSITIONS.RIGHT,
+				right: POSITIONS.LEFT,
+				top: POSITIONS.BOTTOM
+			}[b.split("-")[0]], c = {
+				bottom: "",
+				left: a === null ? "" : `${a}px`,
+				right: "",
+				[s]: `calc(${S.tooltipexternalcontainer?.[DEVICE_BREAKPOINTS.DESKTOP]?.padding ?? 0} - ${S.arrowposition?.[DEVICE_BREAKPOINTS.DESKTOP]?.top ?? "0px"} / 2)`,
+				top: o === null ? "" : `${o}px`
+			};
+			e && e.style && (e.style.removeProperty("left"), e.style.removeProperty("top"), e.style.removeProperty("right"), e.style.removeProperty("bottom"), Object.assign(e?.style, c));
+		} catch (e) {
+			console.error("Error computing position:", e);
+		}
+	}, w = (e) => {
+		u.tooltipRef.current?.contains(e.target) || C();
+	};
+	useEffect(() => {
+		let e = () => {
+			C();
+		};
+		return window.addEventListener("scroll", w, !0), window.addEventListener("resize", e), () => {
+			window.removeEventListener("scroll", w, !0), window.removeEventListener("resize", e);
+		};
+	}, []);
+	let T = () => {
+		if (!_.current) {
+			if (_.current = !0, h.current = document.activeElement, m) {
+				if (!u.tooltipRef.current) return;
+				u.tooltipRef.current.style && (u.tooltipRef.current.style.display = "flex"), C(), focusElementOrFirstDescendant(u.tooltipRef.current, { preventScroll: !0 });
+			}
+			y(!0), u.onOpenClose?.(!0);
+		}
+	}, E = useCallback(() => {
+		if (_.current) {
+			if (_.current = !1, g.current = !1, u.tooltipAsModal && h.current?.focus({ preventScroll: !0 }), g.current = !0, m) {
+				if (!u.tooltipRef.current) return;
+				u.tooltipRef.current.style && (u.tooltipRef.current.style.display = "none");
+			}
+			y(!1), u.onOpenClose?.(!1);
+		}
+	}, [
+		d,
+		u.onOpenClose,
+		u.tooltipAsModal
+	]);
+	return useEscPressed({
+		disableStopPropagation: !0,
+		onEscPress: useCallback((e) => {
+			_.current && (e.stopPropagation(), E());
+		}, [E]),
+		ref: u.labelRef
+	}), useClickOutside(u.tooltipRef, E, [u.labelRef.current]), {
+		allowFocusOpenTooltip: g,
+		hideTooltip: E,
+		open: v,
+		placement: b,
+		showTooltip: T
+	};
+};
+export { useTooltip };

package/dist/esm/components/tooltip/hooks/useTooltipAsModal.js

@@ -1 +1,3 @@
-import{useMemo as o}from"react";const t=({propTooltipAsModal:t,styleTooltipAsModal:p})=>o(()=>t??p??!1,[t,p]);export{t as useTooltipAsModal};
+import { useMemo } from "react";
+const useTooltipAsModal = ({ propTooltipAsModal: e, styleTooltipAsModal: t }) => useMemo(() => e ?? t ?? !1, [e, t]);
+export { useTooltipAsModal };

package/dist/esm/components/tooltip/hooks/useTooltipAsModalAriaLabel.js

@@ -1 +1,8 @@
-import{useState as r,useEffect as t}from"react";const e=e=>{const[n,o]=r(void 0);return t(()=>{e.current&&o(e.current.innerText)}),n};export{e as useTooltipAsModalAriaLabel};
+import { useEffect, useState } from "react";
+const useTooltipAsModalAriaLabel = (e) => {
+	let [t, n] = useState(void 0);
+	return useEffect(() => {
+		e.current && n(e.current.innerText);
+	}), t;
+};
+export { useTooltipAsModalAriaLabel };

package/dist/esm/components/tooltip/positioning/computePosition.js

@@ -1 +1,21 @@
-import{computePosition as t}from"@floating-ui/dom";const e=async(e,a,o)=>{const{middleware:r=[],placement:m="top",strategy:i="fixed"}=o,d=m||"top",n=await t(e,a,{middleware:r,placement:d,strategy:i}),p=n.placement||"top";return{middlewareData:n.middlewareData,placement:p,strategy:n.strategy,x:n.x,y:n.y}};export{e as computePosition};
+import { computePosition } from "@floating-ui/dom";
+/**
+* Tooltip positioning utilities built on top of Floating UI.
+* @see https://floating-ui.com/docs/platform
+* @license MIT - Floating UI is licensed under MIT
+*/
+const computePosition$1 = async (e, t, n) => {
+	let { middleware: r = [], placement: i = "top", strategy: a = "fixed" } = n, o = await computePosition(e, t, {
+		middleware: r,
+		placement: i || "top",
+		strategy: a
+	});
+	return {
+		middlewareData: o.middlewareData,
+		placement: o.placement || "top",
+		strategy: o.strategy,
+		x: o.x,
+		y: o.y
+	};
+};
+export { computePosition$1 as computePosition };

package/dist/esm/components/tooltip/tooltipControlled.js

@@ -1 +1,32 @@
-import{jsx as o}from"react/jsx-runtime";import{useRef as t,useImperativeHandle as l}from"react";import{useClassName as s}from"../../lib/hooks/useClassName/useClassName.js";import{useMediaDevice as e}from"../../lib/hooks/useMediaDevice/useMediaDevice.js";import{useScrollDetection as i}from"../../lib/hooks/useScrollDetection/useScrollDetection.js";import{useTooltipAsModal as a}from"./hooks/useTooltipAsModal.js";import{useTooltipAsModalAriaLabel as r}from"./hooks/useTooltipAsModalAriaLabel.js";import{TooltipStandAlone as p}from"./tooltipStandAlone.js";const m=({additionalClasses:m,tooltipAriaLabel:n,tooltipAsModal:c,tooltipAsModal:d=!1,tooltipRef:u,variant:A,...f})=>{const M=s({additionalClassNames:m,component:"TOOLTIP",variant:A}),T=e(),h=t(null),j=r(h),b=a({propTooltipAsModal:c,styleTooltipAsModal:d}),{handleScrollDetection:D,hasScroll:S}=i({autoFocus:!0});return l(u,()=>h.current,[]),/* @__PURE__ */o(p,{...f,contentHasScroll:S,contentRef:D,cssClasses:M,mediaDevice:T,tooltipAriaLabel:n??j,tooltipAsModal:a({propTooltipAsModal:b,styleTooltipAsModal:d}),tooltipRef:h})};export{m as TooltipControlled};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { useMediaDevice } from "../../lib/hooks/useMediaDevice/useMediaDevice.js";
+import { useScrollDetection } from "../../lib/hooks/useScrollDetection/useScrollDetection.js";
+import { useTooltipAsModal } from "./hooks/useTooltipAsModal.js";
+import { TooltipStandAlone } from "./tooltipStandAlone.js";
+import { useTooltipAsModalAriaLabel } from "./hooks/useTooltipAsModalAriaLabel.js";
+import { useImperativeHandle, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const TooltipControlled = ({ additionalClasses: e, tooltipAriaLabel: t, tooltipAsModal: n, tooltipAsModal: r = !1, tooltipRef: i, variant: a, ...o }) => {
+	let s = useClassName({
+		additionalClassNames: e,
+		component: "TOOLTIP",
+		variant: a
+	}), c = useMediaDevice(), l = useRef(null), u = useTooltipAsModalAriaLabel(l), d = useTooltipAsModal({
+		propTooltipAsModal: n,
+		styleTooltipAsModal: r
+	}), { handleScrollDetection: f, hasScroll: p } = useScrollDetection({ autoFocus: !0 });
+	return useImperativeHandle(i, () => l.current, []), /* @__PURE__ */ jsx(TooltipStandAlone, {
+		...o,
+		contentHasScroll: p,
+		contentRef: f,
+		cssClasses: s,
+		mediaDevice: c,
+		tooltipAriaLabel: t ?? u,
+		tooltipAsModal: useTooltipAsModal({
+			propTooltipAsModal: d,
+			styleTooltipAsModal: r
+		}),
+		tooltipRef: l
+	});
+};
+export { TooltipControlled };