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

package/dist/cjs/lib/utils/pickCustomAttributes/pickCustomAttributes.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),exports.pickCustomAttributes=(t,e=!0)=>t?Object.fromEntries(Object.entries(t).filter(([t,e])=>(t.startsWith("aria-")||t.startsWith("data-"))&&null!=e).map(([t,r])=>[t,e?String(r):r])):{};
+exports.pickCustomAttributes=(e,t=!0)=>e?Object.fromEntries(Object.entries(e).filter(([e,t])=>(e.startsWith(`aria-`)||e.startsWith(`data-`))&&t!=null).map(([e,n])=>[e,t?String(n):n])):{};

package/dist/cjs/lib/utils/process/processCommonProp.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=(t,r={})=>{const{allowReactElements:n=!0,extractContent:o=!0,maxLength:l,propertyName:c="children"}=r;if(null==t)return"children"===c?{children:null}:{};if("string"==typeof t){const e=l&&t.length>l?t.substring(0,l):t;return{[c]:e}}if(n&&e.isValidElement(t))return{children:t};if("object"==typeof t&&null!==t){if(o&&"content"in t){const e=t.content,r=l&&"string"==typeof e?e.substring(0,l):e;return{...t,children:r}}return t}return"children"===c?{children:null}:{}};exports.processCommonProp=t,exports.processIconProp=e=>t(e,{allowReactElements:!1,extractContent:!1,propertyName:"icon"}),exports.processTextProp=(e,r)=>t(e,{allowReactElements:!0,extractContent:!0,maxLength:r,propertyName:"children"});
+let e=require(`react`);const t=(t,n={})=>{let{allowReactElements:r=!0,extractContent:i=!0,maxLength:a,propertyName:o=`children`}=n;if(t==null)return o===`children`?{children:null}:{};if(typeof t==`string`){let e=a&&t.length>a?t.substring(0,a):t;return{[o]:e}}if(r&&(0,e.isValidElement)(t))return{children:t};if(typeof t==`object`&&t){if(i&&`content`in t){let e=t.content,n=a&&typeof e==`string`?e.substring(0,a):e;return{...t,children:n}}return t}return o===`children`?{children:null}:{}};exports.processIconProp=e=>t(e,{allowReactElements:!1,extractContent:!1,propertyName:`icon`}),exports.processTextProp=(e,n)=>t(e,{allowReactElements:!0,extractContent:!0,maxLength:n,propertyName:`children`});

package/dist/cjs/lib/utils/refs/syncRefs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),exports.syncInnerAndForwardedRef=({forwardedRef:e,innerRef:r})=>{e&&("function"==typeof e?e(r.current):e.current=r.current)};
+exports.syncInnerAndForwardedRef=({forwardedRef:e,innerRef:t})=>{e&&(typeof e==`function`?e(t.current):e.current=t.current)};

package/dist/cjs/lib/utils/scroll/hasScroll.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=t=>t.scrollHeight>t.clientHeight,l=t=>t.scrollWidth>t.clientWidth;exports.hasHorizontalScroll=l,exports.hasScroll=e=>t(e)||l(e),exports.hasVerticalScroll=t;
+const e=e=>e.scrollHeight>e.clientHeight,t=e=>e.scrollWidth>e.clientWidth;exports.hasHorizontalScroll=t,exports.hasScroll=n=>e(n)||t(n),exports.hasVerticalScroll=e;

package/dist/esm/components/accordion/accordionControlled.js

@@ -1 +1,27 @@
-import{jsx as o}from"react/jsx-runtime";import{forwardRef as e,useRef as r,useImperativeHandle as s}from"react";import{useClassName as n}from"../../lib/hooks/useClassName/useClassName.js";import{AccordionStandAlone as t}from"./accordionStandAlone.js";import{useAccordionContentOverflow as a}from"./hooks/useAccordionContentOverflow.js";import{useAccordionInertContent as i}from"./hooks/useAccordionInertContent.js";const d=e(({additionalClasses:e,children:d,expanded:m,variant:c,...l},p)=>{const f=n({additionalClassNames:e,component:"ACCORDION",variant:c}),C=r(null);return s(p,()=>C.current,[]),a({expanded:m,ref:C}),i({expanded:m,ref:C}),/* @__PURE__ */o(t,{ref:C,cssClasses:f,expanded:m,...l,children:d})});export{d as AccordionControlled};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { AccordionStandAlone } from "./accordionStandAlone.js";
+import { useAccordionContentOverflow } from "./hooks/useAccordionContentOverflow.js";
+import { useAccordionInertContent } from "./hooks/useAccordionInertContent.js";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const AccordionControlled = forwardRef(({ additionalClasses: e, children: t, expanded: n, variant: r, ...i }, a) => {
+	let o = useClassName({
+		additionalClassNames: e,
+		component: "ACCORDION",
+		variant: r
+	}), s = useRef(null);
+	return useImperativeHandle(a, () => s.current, []), useAccordionContentOverflow({
+		expanded: n,
+		ref: s
+	}), useAccordionInertContent({
+		expanded: n,
+		ref: s
+	}), /* @__PURE__ */ jsx(AccordionStandAlone, {
+		ref: s,
+		cssClasses: o,
+		expanded: n,
+		...i,
+		children: t
+	});
+});
+export { AccordionControlled };

package/dist/esm/components/accordion/accordionStandAlone.js

@@ -1,4 +1,43 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import{forwardRef as n,useId as o}from"react";import{CustomComponent as a}from"../../lib/components/customComponent/customComponent.js";import{pickCustomAttributes as c}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{STATE as r}from"./types/state.js";const i=n(({children:n,component:i="div",cssClasses:d,dataTestId:s="accordion",expanded:m,header:l,headerComponent:p="h3",onHeaderClick:h},u)=>{const b=`accordion-${o().replace(/:/g,"")}-content`,C={"data-state":m?r.EXPANDED:r.COLLAPSED},f=c(C);/* @__PURE__ */
-return t(a,{ref:u,className:d?.accordion,component:i,"data-testid":s,...f,children:/* @__PURE__ */e("div",{children:[
-/* @__PURE__ */t(a,{className:d?.header,component:p,...f,children:/* @__PURE__ */t("button",{"aria-controls":b,"aria-expanded":m,className:d?.headerbutton,"data-testid":`${s}-header`,type:"button",onClick:h,...f,children:l})}),
-/* @__PURE__ */t("div",{className:d?.content,"data-kbt-accordion-content":!0,"data-testid":`${s}-content`,id:b,...f,children:/* @__PURE__ */t("div",{className:d?.innercontent,"data-kbt-accordion-content-inner":!0,...f,children:n})})]})})});export{i as AccordionStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { CustomComponent } from "../../lib/components/customComponent/customComponent.js";
+import { STATE } from "./types/state.js";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const AccordionStandAlone = forwardRef(({ children: e, component: t = "div", cssClasses: n, dataTestId: r = "accordion", expanded: i, header: a, headerComponent: o = "h3", onHeaderClick: s }, c) => {
+	let l = `${`accordion-${useId().replace(/:/g, "")}`}-content`, u = pickCustomAttributes({ "data-state": i ? STATE.EXPANDED : STATE.COLLAPSED });
+	return /* @__PURE__ */ jsx(CustomComponent, {
+		ref: c,
+		className: n?.accordion,
+		component: t,
+		"data-testid": r,
+		...u,
+		children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(CustomComponent, {
+			className: n?.header,
+			component: o,
+			...u,
+			children: /* @__PURE__ */ jsx("button", {
+				"aria-controls": l,
+				"aria-expanded": i,
+				className: n?.headerbutton,
+				"data-testid": `${r}-header`,
+				type: "button",
+				onClick: s,
+				...u,
+				children: a
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: n?.content,
+			"data-kbt-accordion-content": !0,
+			"data-testid": `${r}-content`,
+			id: l,
+			...u,
+			children: /* @__PURE__ */ jsx("div", {
+				className: n?.innercontent,
+				"data-kbt-accordion-content-inner": !0,
+				...u,
+				children: e
+			})
+		})] })
+	});
+});
+export { AccordionStandAlone };

package/dist/esm/components/accordion/accordionUnControlled.js

@@ -1,2 +1,16 @@
-import{jsx as r}from"react/jsx-runtime";import{forwardRef as o,useState as e}from"react";import{AccordionControlled as n}from"./accordionControlled.js";const d=o(({children:o,defaultExpanded:d=!1,onExpandCollapse:t,...c},a)=>{const[i,l]=e(d);/* @__PURE__ */
-return r(n,{ref:a,...c,expanded:i,onHeaderClick:r=>{l(!i),t?.(!i,r)},children:o})});export{d as Accordion};
+import { AccordionControlled } from "./accordionControlled.js";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var AccordionUnControlled = forwardRef(({ children: t, defaultExpanded: n = !1, onExpandCollapse: r, ...i }, a) => {
+	let [o, s] = useState(n), c = (e) => {
+		s(!o), r?.(!o, e);
+	};
+	return /* @__PURE__ */ jsx(AccordionControlled, {
+		ref: a,
+		...i,
+		expanded: o,
+		onHeaderClick: c,
+		children: t
+	});
+});
+export { AccordionUnControlled };

package/dist/esm/components/accordion/hooks/useAccordionContentOverflow.js

@@ -1 +1,24 @@
-import{useRef as e,useEffect as t}from"react";const n=({expanded:n,ref:r})=>{const o=e(n);t(()=>{const e=r.current?.querySelector("[data-kbt-accordion-content]"),t=e?.querySelector("[data-kbt-accordion-content-inner]");if(e instanceof HTMLElement&&t instanceof HTMLElement){if(o.current===n){const r=n?"visible":"hidden";return e.style.overflow=r,void(t.style.overflow=r)}o.current=n,e.style.overflow="hidden",t.style.overflow="hidden"}},[n]),t(()=>{const e=e=>{const t=r.current?.querySelector("[data-kbt-accordion-content]"),n=t?.querySelector("[data-kbt-accordion-content-inner]");t instanceof HTMLElement&&n instanceof HTMLElement&&e.target===t&&o.current&&(t.style.overflow="visible",n.style.overflow="visible")};return r.current?.addEventListener("transitionend",e),()=>{r.current?.removeEventListener("transitionend",e)}},[])};export{n as useAccordionContentOverflow};
+import { useEffect, useRef } from "react";
+const useAccordionContentOverflow = ({ expanded: n, ref: r }) => {
+	let i = useRef(n);
+	useEffect(() => {
+		let e = r.current?.querySelector("[data-kbt-accordion-content]"), t = e?.querySelector("[data-kbt-accordion-content-inner]");
+		if (!(!(e instanceof HTMLElement) || !(t instanceof HTMLElement))) {
+			if (i.current === n) {
+				let r = n ? "visible" : "hidden";
+				e.style.overflow = r, t.style.overflow = r;
+				return;
+			}
+			i.current = n, e.style.overflow = "hidden", t.style.overflow = "hidden";
+		}
+	}, [n]), useEffect(() => {
+		let e = (e) => {
+			let t = r.current?.querySelector("[data-kbt-accordion-content]"), n = t?.querySelector("[data-kbt-accordion-content-inner]");
+			!(t instanceof HTMLElement) || !(n instanceof HTMLElement) || e.target !== t || i.current && (t.style.overflow = "visible", n.style.overflow = "visible");
+		};
+		return r.current?.addEventListener("transitionend", e), () => {
+			r.current?.removeEventListener("transitionend", e);
+		};
+	}, []);
+};
+export { useAccordionContentOverflow };

package/dist/esm/components/accordion/hooks/useAccordionInertContent.js

@@ -1 +1,8 @@
-import{useEffect as t}from"react";const e=({expanded:e,ref:r})=>{t(()=>{const t=r.current?.querySelector("[data-kbt-accordion-content]");t instanceof HTMLElement&&(e?t.removeAttribute("inert"):t.setAttribute("inert",""))},[e])};export{e as useAccordionInertContent};
+import { useEffect } from "react";
+const useAccordionInertContent = ({ expanded: t, ref: n }) => {
+	useEffect(() => {
+		let e = n.current?.querySelector("[data-kbt-accordion-content]");
+		e instanceof HTMLElement && (t ? e.removeAttribute("inert") : e.setAttribute("inert", ""));
+	}, [t]);
+};
+export { useAccordionInertContent };

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

@@ -1 +1,5 @@
-const e={COLLAPSED:"collapsed",EXPANDED:"expanded"};export{e as STATE};
+const STATE = {
+	COLLAPSED: "collapsed",
+	EXPANDED: "expanded"
+};
+export { STATE };

package/dist/esm/components/alert/alertControlled.js

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

package/dist/esm/components/alert/alertStandAlone.js

@@ -1,2 +1,26 @@
-import{jsx as t}from"react/jsx-runtime";import{forwardRef as e}from"react";import{Text as i}from"../text/text.js";import{pickCustomAttributes as r}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{processTextProp as s}from"../../lib/utils/process/processCommonProp.js";const o=e(({ariaLive:e="off",content:o,cssClasses:a,id:n,role:c,...m},d)=>{const l=m["data-testid"]||"alert",{"data-testid":p,...f}=m,u=r(f),x=s(o);/* @__PURE__ */
-return t("div",{...u,ref:d,"aria-live":e,className:a?.container,"data-testid":l,id:n,role:c,children:/* @__PURE__ */t("div",{className:a?.contentcontainer,children:"string"==typeof o?/* @__PURE__ */t(i,{additionalClasses:{text:a?.description},component:"p",...x}):x.children})})});export{o as AlertStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { Text } from "../text/text2.js";
+import { processTextProp } from "../../lib/utils/process/processCommonProp.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const AlertStandAlone = forwardRef(({ ariaLive: e = "off", content: t, cssClasses: n, id: r, role: i, ...a }, o) => {
+	let s = a["data-testid"] || "alert", { "data-testid": c, ...l } = a, u = pickCustomAttributes(l), d = processTextProp(t), f = () => typeof t == "string" ? /* @__PURE__ */ jsx(Text, {
+		additionalClasses: { text: n?.description },
+		component: "p",
+		...d
+	}) : d.children;
+	return /* @__PURE__ */ jsx("div", {
+		...u,
+		ref: o,
+		"aria-live": e,
+		className: n?.container,
+		"data-testid": s,
+		id: r,
+		role: i,
+		children: /* @__PURE__ */ jsx("div", {
+			className: n?.contentcontainer,
+			children: f()
+		})
+	});
+});
+export { AlertStandAlone };

package/dist/esm/components/avatar/avatar.js

@@ -1,2 +1,23 @@
-import{jsx as i}from"react/jsx-runtime";import{forwardRef as o}from"react";import{useClassName as e}from"../../lib/hooks/useClassName/useClassName.js";import{useGenericComponents as s}from"../../lib/provider/genericComponentsProvider/genericComponentsProvider.js";import{AvatarStandAlone as t}from"./avatarStandAlone.js";const n=o(({additionalClasses:o,icon:n,image:r,initials:a,size:m,...l},c)=>{const{LINK:p}=s(),d=e({additionalClassNames:o,component:"AVATAR",variant:m});/* @__PURE__ */
-return i(t,{...l,ref:c,contentType:r?"with-images":a?"with-initials":"with-icon",cssClasses:d,icon:n,image:r,initials:a,linkComponent:p})});export{n as Avatar};
+import { useGenericComponents } from "../../lib/provider/genericComponentsProvider/genericComponentsProvider.js";
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { AvatarStandAlone } from "./avatarStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const Avatar = forwardRef(({ additionalClasses: e, icon: t, image: n, initials: r, size: i, ...a }, o) => {
+	let { LINK: s } = useGenericComponents(), c = useClassName({
+		additionalClassNames: e,
+		component: "AVATAR",
+		variant: i
+	}), l = n ? "with-images" : r ? "with-initials" : "with-icon";
+	return /* @__PURE__ */ jsx(AvatarStandAlone, {
+		...a,
+		ref: o,
+		contentType: l,
+		cssClasses: c,
+		icon: t,
+		image: n,
+		initials: r,
+		linkComponent: s
+	});
+});
+export { Avatar };

package/dist/esm/components/avatar/avatarStandAlone.js

@@ -1,2 +1,51 @@
-import{jsx as t}from"react/jsx-runtime";import{forwardRef as o}from"react";import{pickCustomAttributes as n}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{CustomComponent as s}from"../../lib/components/customComponent/customComponent.js";import{DrawContent as a}from"./fragments/drawContent.js";const e=o(({backgroundColor:o="color-default",contentType:e,cssClasses:i,dot:r,icon:c,image:m,initials:l,link:p,linkComponent:u="a",maxLengthInitials:d=2,onClick:C,...b},f)=>{const g={"data-background-type":o,"data-content-type":e},k=n({...b,...g}),y=m?{backgroundImage:`url(${m})`}:void 0;/* @__PURE__ */
-return t(s,p?{ref:f,className:i?.avatar,component:u,"data-testid":"avatar",style:y,...k,...p,children:/* @__PURE__ */t(a,{contentType:e,cssClasses:i,customAttributes:g,dot:r,icon:c,initials:l,maxLengthInitials:d})}:{ref:f,className:i?.avatar,component:C?"button":"div","data-testid":"avatar",style:y,type:C&&"button",onClick:C,...k,children:/* @__PURE__ */t(a,{contentType:e,cssClasses:i,customAttributes:g,dot:r,icon:c,initials:l,maxLengthInitials:d})})});export{e as AvatarStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { CustomComponent } from "../../lib/components/customComponent/customComponent.js";
+import { DrawContent } from "./fragments/drawContent.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const AvatarStandAlone = forwardRef(({ backgroundColor: e = "color-default", contentType: t, cssClasses: n, dot: r, icon: i, image: a, initials: o, link: s, linkComponent: c = "a", maxLengthInitials: l = 2, onClick: u, ...d }, f) => {
+	let p = {
+		"data-background-type": e,
+		"data-content-type": t
+	}, m = pickCustomAttributes({
+		...d,
+		...p
+	}), h = a ? { backgroundImage: `url(${a})` } : void 0;
+	return s ? /* @__PURE__ */ jsx(CustomComponent, {
+		ref: f,
+		className: n?.avatar,
+		component: c,
+		"data-testid": "avatar",
+		style: h,
+		...m,
+		...s,
+		children: /* @__PURE__ */ jsx(DrawContent, {
+			contentType: t,
+			cssClasses: n,
+			customAttributes: p,
+			dot: r,
+			icon: i,
+			initials: o,
+			maxLengthInitials: l
+		})
+	}) : /* @__PURE__ */ jsx(CustomComponent, {
+		ref: f,
+		className: n?.avatar,
+		component: u ? "button" : "div",
+		"data-testid": "avatar",
+		style: h,
+		type: u && "button",
+		onClick: u,
+		...m,
+		children: /* @__PURE__ */ jsx(DrawContent, {
+			contentType: t,
+			cssClasses: n,
+			customAttributes: p,
+			dot: r,
+			icon: i,
+			initials: o,
+			maxLengthInitials: l
+		})
+	});
+});
+export { AvatarStandAlone };

package/dist/esm/components/avatar/fragments/drawContent.js

@@ -1 +1,24 @@
-import{jsxs as t,Fragment as o,jsx as s}from"react/jsx-runtime";import{Dot as i}from"../../dot/dot.js";import{Text as e}from"../../text/text.js";import{ElementOrIcon as n}from"../../../lib/components/elementOrIcon/elementOrIcon.js";import{processIconProp as r,processTextProp as m}from"../../../lib/utils/process/processCommonProp.js";const c=({contentType:c,cssClasses:a,customAttributes:l,dot:p,icon:d,initials:u,maxLengthInitials:b})=>/* @__PURE__ */t(o,{children:[!!p?.number&&/* @__PURE__ */s("span",{className:a?.dot,children:/* @__PURE__ */s(i,{...p})}),"with-icon"===c&&/* @__PURE__ */s(n,{className:a?.icon,customAttributes:l,...r(d)}),"with-initials"===c&&/* @__PURE__ */s(e,{additionalClasses:{},"aria-hidden":!0,component:"span",customAttributes:l,...m(u,b)})]});export{c as DrawContent};
+import { Text } from "../../text/text2.js";
+import { processIconProp, processTextProp } from "../../../lib/utils/process/processCommonProp.js";
+import { Dot } from "../../dot/dot.js";
+import { ElementOrIcon } from "../../../lib/components/elementOrIcon/elementOrIcon.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const DrawContent = ({ contentType: e, cssClasses: t, customAttributes: n, dot: r, icon: i, initials: a, maxLengthInitials: o }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+	!!r?.number && /* @__PURE__ */ jsx("span", {
+		className: t?.dot,
+		children: /* @__PURE__ */ jsx(Dot, { ...r })
+	}),
+	e === "with-icon" && /* @__PURE__ */ jsx(ElementOrIcon, {
+		className: t?.icon,
+		customAttributes: n,
+		...processIconProp(i)
+	}),
+	e === "with-initials" && /* @__PURE__ */ jsx(Text, {
+		additionalClasses: {},
+		"aria-hidden": !0,
+		component: "span",
+		customAttributes: n,
+		...processTextProp(a, o)
+	})
+] });
+export { DrawContent };

package/dist/esm/components/badge/badge.js

@@ -1,2 +1,28 @@
-import{jsx as a}from"react/jsx-runtime";import{forwardRef as s,useState as t}from"react";import{useClassName as e}from"../../lib/hooks/useClassName/useClassName.js";import{BadgeStandAlone as o}from"./badgeStandAlone.js";const r=s(({additionalSizeClasses:s,additionalVariantClasses:r,hasDot:n=!0,onClick:i,size:l,variant:c,...m},d)=>{const[C,p]=t(!1),u=e({component:"BADGE",variant:c}),f=e({component:"BADGE",variant:l});/* @__PURE__ */
-return a(o,{...m,ref:d,active:C,cssSizeClasses:f,cssVariantClasses:u,hasDot:n,onBadgeBlur:a=>{a.currentTarget.contains(a.relatedTarget)||p(!1)},onClick:a=>{i?.(a),p(a=>!a)}})});export{r as Badge};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { BadgeStandAlone } from "./badgeStandAlone.js";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+const Badge = forwardRef(({ additionalSizeClasses: t, additionalVariantClasses: n, hasDot: r = !0, onClick: i, size: a, variant: o, ...s }, c) => {
+	let [l, u] = useState(!1), d = useClassName({
+		component: "BADGE",
+		variant: o
+	}), f = useClassName({
+		component: "BADGE",
+		variant: a
+	}), p = (e) => {
+		i?.(e), u((e) => !e);
+	}, m = (e) => {
+		e.currentTarget.contains(e.relatedTarget) || u(!1);
+	};
+	return /* @__PURE__ */ jsx(BadgeStandAlone, {
+		...s,
+		ref: c,
+		active: l,
+		cssSizeClasses: f,
+		cssVariantClasses: d,
+		hasDot: r,
+		onBadgeBlur: m,
+		onClick: p
+	});
+});
+export { Badge };

package/dist/esm/components/badge/badgeStandAlone.js

@@ -1,7 +1,71 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import{forwardRef as s,useRef as o,useImperativeHandle as a,useCallback as r}from"react";import{Dot as i}from"../dot/dot.js";import{Text as n}from"../text/text.js";import{ElementOrIcon as l}from"../../lib/components/elementOrIcon/elementOrIcon.js";import{ScreenReaderOnly as c}from"../../lib/components/screen-reader-only/screenReaderOnly.js";import{pickCustomAttributes as m}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{processIconProp as d,processTextProp as u}from"../../lib/utils/process/processCommonProp.js";const p=s(({active:s,ariaLiveText:p,cssSizeClasses:b,cssVariantClasses:f,dot:h,hasDot:C,icon:j,label:N,labelIcon:$,onBadgeBlur:g,onClick:x,role:A,...v},k)=>{const y=o(null),B=o(null),I={"data-active":!!s},O=m({...v,customAttributes:I}),D=m(I),L=O["data-testid"]||"badge";a(k,()=>B.current,[]);const z=r(t=>{g?.(t)},[g]),P=r(t=>{x?.(t)},[x]);/* @__PURE__ */
-return t("div",{ref:B,className:`${f?.badge} ${b?.badge}`,"data-testid":`${L}-container`,...D,children:/* @__PURE__ */e("button",{ref:y,className:f?.button,"data-testid":L,role:A,type:"button",onBlur:z,onClick:P,...O,children:[
-/* @__PURE__ */e("span",{className:f?.dotcontainer,children:[!!h&&!!C&&/* @__PURE__ */t("span",{"aria-hidden":!0,className:f?.dot,children:/* @__PURE__ */t(i,{...h})}),
-/* @__PURE__ */t(l,{className:`${f?.icon} ${b?.icon}`,...d(j),customAttributes:I})]}),!!N&&/* @__PURE__ */e("span",{"aria-hidden":!0,className:f?.labelcontainer,children:[
-/* @__PURE__ */t(n,{additionalClasses:{text:`${b?.label} ${f?.label}`},component:"span",...u(N),customAttributes:I}),
-/* @__PURE__ */t(l,{className:f?.labelicon,rotate:s?"180deg":"0deg",transitionDuration:"0.2s",...d($),customAttributes:I})]}),
-/* @__PURE__ */t(c,{ariaLive:"polite",children:p})]})})});export{p as BadgeStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { Text } from "../text/text2.js";
+import { processIconProp, processTextProp } from "../../lib/utils/process/processCommonProp.js";
+import { Dot } from "../dot/dot.js";
+import { ScreenReaderOnly } from "../../lib/components/screen-reader-only/screenReaderOnly.js";
+import { ElementOrIcon } from "../../lib/components/elementOrIcon/elementOrIcon.js";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const BadgeStandAlone = forwardRef(({ active: t, ariaLiveText: n, cssSizeClasses: r, cssVariantClasses: i, dot: a, hasDot: o, icon: s, label: c, labelIcon: l, onBadgeBlur: u, onClick: d, role: f, ...p }, m) => {
+	let h = useRef(null), g = useRef(null), _ = { "data-active": !!t }, v = pickCustomAttributes({
+		...p,
+		customAttributes: _
+	}), y = pickCustomAttributes(_), b = v["data-testid"] || "badge";
+	useImperativeHandle(m, () => g.current, []);
+	let x = useCallback((e) => {
+		u?.(e);
+	}, [u]), S = useCallback((e) => {
+		d?.(e);
+	}, [d]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: g,
+		className: `${i?.badge} ${r?.badge}`,
+		"data-testid": `${b}-container`,
+		...y,
+		children: /* @__PURE__ */ jsxs("button", {
+			ref: h,
+			className: i?.button,
+			"data-testid": b,
+			role: f,
+			type: "button",
+			onBlur: x,
+			onClick: S,
+			...v,
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: i?.dotcontainer,
+					children: [!!a && !!o && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": !0,
+						className: i?.dot,
+						children: /* @__PURE__ */ jsx(Dot, { ...a })
+					}), /* @__PURE__ */ jsx(ElementOrIcon, {
+						className: `${i?.icon} ${r?.icon}`,
+						...processIconProp(s),
+						customAttributes: _
+					})]
+				}),
+				!!c && /* @__PURE__ */ jsxs("span", {
+					"aria-hidden": !0,
+					className: i?.labelcontainer,
+					children: [/* @__PURE__ */ jsx(Text, {
+						additionalClasses: { text: `${r?.label} ${i?.label}` },
+						component: "span",
+						...processTextProp(c),
+						customAttributes: _
+					}), /* @__PURE__ */ jsx(ElementOrIcon, {
+						className: i?.labelicon,
+						rotate: t ? "180deg" : "0deg",
+						transitionDuration: "0.2s",
+						...processIconProp(l),
+						customAttributes: _
+					})]
+				}),
+				/* @__PURE__ */ jsx(ScreenReaderOnly, {
+					ariaLive: "polite",
+					children: n
+				})
+			]
+		})
+	});
+});
+export { BadgeStandAlone };

package/dist/esm/components/breadcrumbs/breadcrumbs.js

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

package/dist/esm/components/breadcrumbs/breadcrumbsStandAlone.js

@@ -1,3 +1,36 @@
-import{jsx as r}from"react/jsx-runtime";import{forwardRef as e}from"react";import{pickCustomAttributes as t}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{CrumbStandAlone as s}from"./components/crumbStandAlone/crumbStandAlone.js";import{useIsOverflow as a}from"./hooks/useIsOverflow/useIsOverflow.js";import{crumbMaxCharName as i}from"./utils/crumbMaxCharName/crumbMaxCharName.js";const m=e(({crumbs:e,cssClasses:m,dividerIcon:o,id:n,lastOneCrumbComponent:l,link:c,minCharLimit:u=20,...d},b)=>{const{innerRef:p,isOverflow:f}=a(),C=t(d),h=d["data-testid"]||"breadcrumbs";/* @__PURE__ */
-return r("div",{...C,ref:b,"aria-label":void 0,"data-testid":h,id:n,children:/* @__PURE__ */r("nav",{ref:p,"aria-label":d["aria-label"],children:/* @__PURE__ */r("ol",{className:m?.breadcrumbs,children:e?.map((t,a)=>{const n=a+1===e.length;/* @__PURE__ */
-return r(s,{crumb:i(t,u,f,n),cssClasses:m,"data-testid":`${h}-${a}`,dividerIcon:o,lastCrumb:n,lastOneCrumbComponent:l,link:c},t.name)})})})})});export{m as BreadcrumbsStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { CrumbStandAlone } from "./components/crumbStandAlone/crumbStandAlone.js";
+import { useIsOverflow } from "./hooks/useIsOverflow/useIsOverflow.js";
+import { crumbMaxCharName } from "./utils/crumbMaxCharName/crumbMaxCharName.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const BreadcrumbsStandAlone = forwardRef(({ crumbs: n, cssClasses: r, dividerIcon: i, id: a, lastOneCrumbComponent: o, link: s, minCharLimit: c = 20, ...l }, u) => {
+	let { innerRef: d, isOverflow: f } = useIsOverflow(), p = pickCustomAttributes(l), m = l["data-testid"] || "breadcrumbs";
+	return /* @__PURE__ */ jsx("div", {
+		...p,
+		ref: u,
+		"aria-label": void 0,
+		"data-testid": m,
+		id: a,
+		children: /* @__PURE__ */ jsx("nav", {
+			ref: d,
+			"aria-label": l["aria-label"],
+			children: /* @__PURE__ */ jsx("ol", {
+				className: r?.breadcrumbs,
+				children: n?.map((e, t) => {
+					let a = t + 1 === n.length;
+					return /* @__PURE__ */ jsx(CrumbStandAlone, {
+						crumb: crumbMaxCharName(e, c, f, a),
+						cssClasses: r,
+						"data-testid": `${m}-${t}`,
+						dividerIcon: i,
+						lastCrumb: a,
+						lastOneCrumbComponent: o,
+						link: s
+					}, e.name);
+				})
+			})
+		})
+	});
+});
+export { BreadcrumbsStandAlone };

package/dist/esm/components/breadcrumbs/components/crumbStandAlone/crumbStandAlone.js

@@ -1,3 +1,49 @@
-import{jsxs as t,jsx as e,Fragment as i}from"react/jsx-runtime";import{Link as s}from"../../../link/link.js";import{Text as a}from"../../../text/text.js";import{ElementOrIcon as r}from"../../../../lib/components/elementOrIcon/elementOrIcon.js";import{useManageState as n}from"../../../../lib/hooks/useManageState/useManageState.js";import{STATES as o}from"../../../../lib/types/states/states.js";import{pickCustomAttributes as l}from"../../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{processIconProp as m}from"../../../../lib/utils/process/processCommonProp.js";const c=({crumb:c,cssClasses:d,dividerIcon:u,lastCrumb:b,lastOneCrumbComponent:p="span",link:k,...C})=>{const{setRef:f}=n({active:b,states:Object.values(o)}),j=l(C);/* @__PURE__ */
-return t("li",{ref:f,"aria-current":b?"page":void 0,className:d?.crumb,"data-testid":C["data-testid"],children:[!!b&&/* @__PURE__ */e(a,{additionalClasses:{text:d?.lastonecrumb},component:p,"data-testid":"last-breadcrumb",id:c.id,children:c.name}),!b&&/* @__PURE__ */t(i,{children:[!!k&&/* @__PURE__ */e("div",{className:d?.linkcontainer,children:/* @__PURE__ */e(s,{...j,action:"navigation",additionalTextClasses:{text:d?.link},"aria-label":c.ariaLabel,"data-testid":"breadcrumb-link",disabled:b,id:c.id,url:c.url,...k,onClick:t=>c.onClick?.(c.url,t),children:c.name})}),
-/* @__PURE__ */e("div",{className:d?.icondividercontainer,children:/* @__PURE__ */e(r,{className:d?.icondivider,...m(u)})})]})]})};export{c as CrumbStandAlone};
+import { pickCustomAttributes } from "../../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { Text } from "../../../text/text2.js";
+import { processIconProp } from "../../../../lib/utils/process/processCommonProp.js";
+import { ElementOrIcon } from "../../../../lib/components/elementOrIcon/elementOrIcon.js";
+import { Link } from "../../../link/link.js";
+import { STATES } from "../../../../lib/types/states/states.js";
+import { useManageState } from "../../../../lib/hooks/useManageState/useManageState.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const CrumbStandAlone = ({ crumb: t, cssClasses: n, dividerIcon: r, lastCrumb: i, lastOneCrumbComponent: a = "span", link: o, ...s }) => {
+	let { setRef: c } = useManageState({
+		active: i,
+		states: Object.values(STATES)
+	}), l = pickCustomAttributes(s);
+	return /* @__PURE__ */ jsxs("li", {
+		ref: c,
+		"aria-current": i ? "page" : void 0,
+		className: n?.crumb,
+		"data-testid": s["data-testid"],
+		children: [!!i && /* @__PURE__ */ jsx(Text, {
+			additionalClasses: { text: n?.lastonecrumb },
+			component: a,
+			"data-testid": "last-breadcrumb",
+			id: t.id,
+			children: t.name
+		}), !i && /* @__PURE__ */ jsxs(Fragment, { children: [!!o && /* @__PURE__ */ jsx("div", {
+			className: n?.linkcontainer,
+			children: /* @__PURE__ */ jsx(Link, {
+				...l,
+				action: "navigation",
+				additionalTextClasses: { text: n?.link },
+				"aria-label": t.ariaLabel,
+				"data-testid": "breadcrumb-link",
+				disabled: i,
+				id: t.id,
+				url: t.url,
+				...o,
+				onClick: (e) => t.onClick?.(t.url, e),
+				children: t.name
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: n?.icondividercontainer,
+			children: /* @__PURE__ */ jsx(ElementOrIcon, {
+				className: n?.icondivider,
+				...processIconProp(r)
+			})
+		})] })]
+	});
+};
+export { CrumbStandAlone };

package/dist/esm/components/breadcrumbs/hooks/useIsOverflow/useIsOverflow.js

@@ -1 +1,16 @@
-import{useState as e,useRef as n,useEffect as r}from"react";const t=()=>{const[t,i]=e(!1),o=n(null);return r(()=>{const e=o.current;if(!e)return()=>null;const n=()=>{const n=e.offsetWidth>window.innerWidth;i(n)};return n(),window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)},[]),{innerRef:o,isOverflow:t}};export{t as useIsOverflow};
+import { useEffect, useRef, useState } from "react";
+const useIsOverflow = () => {
+	let [n, r] = useState(!1), i = useRef(null);
+	return useEffect(() => {
+		let e = i.current;
+		if (!e) return () => null;
+		let t = () => {
+			r(e.offsetWidth > window.innerWidth);
+		};
+		return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
+	}, []), {
+		innerRef: i,
+		isOverflow: n
+	};
+};
+export { useIsOverflow };

package/dist/esm/components/breadcrumbs/utils/crumbMaxCharName/crumbMaxCharName.js

@@ -1 +1,7 @@
-function n(n,e,t,a){const c=!a||a&&t;return n.name.length>e&&c?{...n,name:n.name.slice(0,e)+"..."}:n}export{n as crumbMaxCharName};
+function crumbMaxCharName(e, t, n, r) {
+	return e.name.length > t && (!r || r && n) ? {
+		...e,
+		name: e.name.slice(0, t) + "..."
+	} : e;
+}
+export { crumbMaxCharName };