react-restyle-components 0.4.39 → 0.4.40

package/lib/src/core-components/src/components/Avatar/Avatar.js

@@ -1,39 +1,173 @@
-"use strict";import{jsx as a}from"react/jsx-runtime";import{styled as u}from"styled-components";import{Icon as b}from"../Icon/Icon";const h={sm:"2rem",md:"2.5rem",lg:"3rem",xl:"4rem",xxl:"5rem"},p=u.div`
-  width: ${({$size:e})=>h[e]};
-  height: ${({$size:e})=>h[e]};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from 'styled-components';
+import { Icon } from '../Icon/Icon';
+// Avatar size configuration
+const sizeMap = {
+    sm: '2rem',
+    md: '2.5rem',
+    lg: '3rem',
+    xl: '4rem',
+    xxl: '5rem', // 80px
+};
+// Styled components
+const AvatarContainer = styled.div `
+  width: ${({ $size }) => sizeMap[$size]};
+  height: ${({ $size }) => sizeMap[$size]};
   border-radius: 50%;
-  background-color: ${({$backgroundColor:e})=>e};
-  color: ${({$textColor:e})=>e};
+  background-color: ${({ $backgroundColor }) => $backgroundColor};
+  color: ${({ $textColor }) => $textColor};
   display: inline-flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   position: relative;
   user-select: none;
-  cursor: ${({$clickable:e})=>e?"pointer":"default"};
+  cursor: ${({ $clickable }) => ($clickable ? 'pointer' : 'default')};
   transition: all 0.2s ease-in-out;
 
   &:hover {
-    ${({$clickable:e})=>e&&`
+    ${({ $clickable }) => $clickable &&
+    `
       transform: scale(1.05);
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     `}
   }
-`,C=u.img`
+`;
+const AvatarImage = styled.img `
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 50%;
-`,A=u.span`
+`;
+const InitialsText = styled.span `
   font-weight: 600;
-  font-size: ${({$size:e})=>{switch(e){case"sm":return"0.75rem";case"md":return"0.875rem";case"lg":return"1rem";case"xl":return"1.25rem";case"xxl":return"1.5rem";default:return"0.875rem"}}};
+  font-size: ${({ $size }) => {
+    switch ($size) {
+        case 'sm':
+            return '0.75rem'; // 12px
+        case 'md':
+            return '0.875rem'; // 14px
+        case 'lg':
+            return '1rem'; // 16px
+        case 'xl':
+            return '1.25rem'; // 20px
+        case 'xxl':
+            return '1.5rem'; // 24px
+        default:
+            return '0.875rem';
+    }
+}};
   line-height: 1;
   text-transform: uppercase;
   letter-spacing: 0.5px;
-`,v=u.div`
+`;
+const IconWrapper = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: ${({$size:e})=>{switch(e){case"sm":return"1rem";case"md":return"1.25rem";case"lg":return"1.5rem";case"xl":return"2rem";case"xxl":return"2.5rem";default:return"1.25rem"}}};
-  height: ${({$size:e})=>{switch(e){case"sm":return"1rem";case"md":return"1.25rem";case"lg":return"1.5rem";case"xl":return"2rem";case"xxl":return"2.5rem";default:return"1.25rem"}}};
-`,I=e=>{if(!e)return"";const r=e.trim().split(/\s+/);if(r.length===1)return r[0].charAt(0).toUpperCase();const t=r[0].charAt(0).toUpperCase(),n=r[r.length-1].charAt(0).toUpperCase();return t+n},k=e=>{const r=["#f56565","#ed8936","#ecc94b","#48bb78","#38b2ac","#4299e1","#667eea","#9f7aea","#ed64a6","#f687b3","#fc8181","#f6ad55","#fbd38d","#68d391","#4fd1c7","#63b3ed","#7c3aed","#a78bfa","#f093fb","#fbb6ce"];let t=0;for(let n=0;n<e.length;n++)t=e.charCodeAt(n)+((t<<5)-t);return r[Math.abs(t)%r.length]},w=e=>(["#f56565","#ed8936","#667eea","#9f7aea","#7c3aed"].includes(e),"#ffffff");export const Avatar=({name:e="",initials:r,src:t,alt:n,size:s="md",backgroundColor:g,textColor:$,iconName:x="FaUser",className:m,classNames:o={},styles:c={},onClick:i})=>{const l=r||I(e),d=g||k(l||e||"User"),f=$||w(d);return t?a(p,{$size:s,$backgroundColor:d,$textColor:f,$clickable:!!i,className:`${m||""} ${o.container||""}`,style:c.container,onClick:i,title:e||n,children:a(C,{src:t,alt:n||e||"Avatar",className:o.image,style:c.image})}):l?a(p,{$size:s,$backgroundColor:d,$textColor:f,$clickable:!!i,className:`${m||""} ${o.container||""}`,style:c.container,onClick:i,title:e||`${l} Avatar`,children:a(A,{$size:s,className:o.initials,style:c.initials,children:l})}):a(p,{$size:s,$backgroundColor:d,$textColor:f,$clickable:!!i,className:`${m||""} ${o.container||""}`,style:c.container,onClick:i,title:"User Avatar",children:a(v,{$size:s,className:o.iconWrapper,style:c.iconWrapper,children:a(b,{nameIcon:x,propsIcon:{color:f,size:"100%"}})})})},AVATAR_SIZES=Object.keys(h);export default Avatar;
+  width: ${({ $size }) => {
+    switch ($size) {
+        case 'sm':
+            return '1rem';
+        case 'md':
+            return '1.25rem';
+        case 'lg':
+            return '1.5rem';
+        case 'xl':
+            return '2rem';
+        case 'xxl':
+            return '2.5rem';
+        default:
+            return '1.25rem';
+    }
+}};
+  height: ${({ $size }) => {
+    switch ($size) {
+        case 'sm':
+            return '1rem';
+        case 'md':
+            return '1.25rem';
+        case 'lg':
+            return '1.5rem';
+        case 'xl':
+            return '2rem';
+        case 'xxl':
+            return '2.5rem';
+        default:
+            return '1.25rem';
+    }
+}};
+`;
+// Utility functions
+const getInitials = (name) => {
+    if (!name)
+        return '';
+    const nameParts = name.trim().split(/\s+/);
+    if (nameParts.length === 1) {
+        return nameParts[0].charAt(0).toUpperCase();
+    }
+    // Take first letter of first name and first letter of last name
+    const firstInitial = nameParts[0].charAt(0).toUpperCase();
+    const lastInitial = nameParts[nameParts.length - 1].charAt(0).toUpperCase();
+    return firstInitial + lastInitial;
+};
+const generateBackgroundColor = (text) => {
+    // Generate a consistent color based on text
+    const colors = [
+        '#f56565',
+        '#ed8936',
+        '#ecc94b',
+        '#48bb78',
+        '#38b2ac',
+        '#4299e1',
+        '#667eea',
+        '#9f7aea',
+        '#ed64a6',
+        '#f687b3',
+        '#fc8181',
+        '#f6ad55',
+        '#fbd38d',
+        '#68d391',
+        '#4fd1c7',
+        '#63b3ed',
+        '#7c3aed',
+        '#a78bfa',
+        '#f093fb',
+        '#fbb6ce',
+    ];
+    let hash = 0;
+    for (let i = 0; i < text.length; i++) {
+        hash = text.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return colors[Math.abs(hash) % colors.length];
+};
+const getContrastColor = (backgroundColor) => {
+    // Simple contrast calculation
+    const darkColors = ['#f56565', '#ed8936', '#667eea', '#9f7aea', '#7c3aed'];
+    return darkColors.includes(backgroundColor) ? '#ffffff' : '#ffffff';
+};
+// Main Avatar component
+export const Avatar = ({ name = '', initials, src, alt, size = 'md', backgroundColor, textColor, iconName = 'FaUser', className, classNames = {}, styles = {}, onClick, }) => {
+    // Determine what to display
+    const displayInitials = initials || getInitials(name);
+    const defaultBgColor = backgroundColor ||
+        generateBackgroundColor(displayInitials || name || 'User');
+    const defaultTextColor = textColor || getContrastColor(defaultBgColor);
+    // Render image if src is provided
+    if (src) {
+        return (_jsx(AvatarContainer, { "$size": size, "$backgroundColor": defaultBgColor, "$textColor": defaultTextColor, "$clickable": !!onClick, className: `${className || ''} ${classNames.container || ''}`, style: styles.container, onClick: onClick, title: name || alt, children: _jsx(AvatarImage, { src: src, alt: alt || name || 'Avatar', className: classNames.image, style: styles.image }) }));
+    }
+    // Render initials if name or initials are provided
+    if (displayInitials) {
+        return (_jsx(AvatarContainer, { "$size": size, "$backgroundColor": defaultBgColor, "$textColor": defaultTextColor, "$clickable": !!onClick, className: `${className || ''} ${classNames.container || ''}`, style: styles.container, onClick: onClick, title: name || `${displayInitials} Avatar`, children: _jsx(InitialsText, { "$size": size, className: classNames.initials, style: styles.initials, children: displayInitials }) }));
+    }
+    // Render icon as fallback
+    return (_jsx(AvatarContainer, { "$size": size, "$backgroundColor": defaultBgColor, "$textColor": defaultTextColor, "$clickable": !!onClick, className: `${className || ''} ${classNames.container || ''}`, style: styles.container, onClick: onClick, title: "User Avatar", children: _jsx(IconWrapper, { "$size": size, className: classNames.iconWrapper, style: styles.iconWrapper, children: _jsx(Icon, { nameIcon: iconName, propsIcon: {
+                    color: defaultTextColor,
+                    size: '100%',
+                } }) }) }));
+};
+// Export size constants for external use
+export const AVATAR_SIZES = Object.keys(sizeMap);
+// Default export
+export default Avatar;

package/lib/src/core-components/src/components/Badge/Badge.js

@@ -1,5 +1,28 @@
-"use strict";import{jsx as g,jsxs as b}from"react/jsx-runtime";import B,{memo as u,useMemo as y}from"react";import{attachSubComponents as h}from"../../utils";import{InnerBadge as x}from"./InnerBadge/InnerBadge";import{styled as j}from"styled-components";import{InlineBadge as v}from"./InnerBadge/Inline";const C=j.div`
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { memo, useMemo } from 'react';
+import { attachSubComponents } from '../../utils';
+import { InnerBadge } from './InnerBadge/InnerBadge';
+import { styled } from 'styled-components';
+import { InlineBadge } from './InnerBadge/Inline';
+const BadgeContainer = styled.div `
   position: relative;
   width: min-content;
   display: inline-block;
-`,t=B.forwardRef(({size:n="hint",overlap:r="circular",children:o,position:a="bottom-right",variant:s="notification",iconSrc:m,count:e,"aria-label":i,classNames:d={},styles:f={},...l},p)=>{const c=y(()=>{if(i)return i;if(typeof e=="number")return`${e} notifications`;if(typeof e=="string"&&e)return`${e} notifications`},[i,e]);return b(C,{ref:p,"data-aui":"badge",className:d.container,style:f.container,...l,children:[g(x,{position:a,size:n,overlap:r,variant:s,iconSrc:m,count:e,"aria-label":c}),o]})});t.displayName="Badge";export const Badge=h("Badge",u(t),{Inline:v});
+`;
+const BadgeComponent = React.forwardRef(({ size = 'hint', overlap = 'circular', children, position = 'bottom-right', variant = 'notification', iconSrc, count, 'aria-label': ariaLabel, classNames = {}, styles = {}, ...props }, ref) => {
+    // Generate accessible label for the badge
+    const badgeAriaLabel = useMemo(() => {
+        if (ariaLabel)
+            return ariaLabel;
+        if (typeof count === 'number')
+            return `${count} notifications`;
+        if (typeof count === 'string' && count)
+            return `${count} notifications`;
+        return undefined;
+    }, [ariaLabel, count]);
+    return (_jsxs(BadgeContainer, { ref: ref, "data-aui": "badge", className: classNames.container, style: styles.container, ...props, children: [_jsx(InnerBadge, { position: position, size: size, overlap: overlap, variant: variant, iconSrc: iconSrc, count: count, "aria-label": badgeAriaLabel }), children] }));
+});
+BadgeComponent.displayName = 'Badge';
+export const Badge = attachSubComponents('Badge', memo(BadgeComponent), {
+    Inline: InlineBadge,
+});

package/lib/src/core-components/src/components/Badge/InnerBadge/Inline.js

@@ -1 +1,25 @@
-"use strict";import{jsx as l}from"react/jsx-runtime";import s,{forwardRef as f,useMemo as p}from"react";import{StyledIcon as u,StyledText as I,StyledInline as y}from"./elements";import{Icon as h}from"../../Icon/Icon";export const InlineBadge=s.memo(f(({size:r="md",variant:o="positive",iconSrc:n,count:e,children:t,...i},m)=>{const a=p(()=>{if(r==="hint")return null;if(n)return l(u,{$size:r,children:l(h,{nameIcon:n,propsIcon:{size:r==="sm"?"0.625rem":"0.75rem",color:"currentColor"}})});if(e!=null&&e!==""){const d=typeof e=="number"&&e>99?"99+":e;return l(I,{$size:r,children:d})}return t||null},[r,n,e,t]);return l(y,{"data-aui":"inline-badge",ref:m,$size:r,$variant:o,$hasIcon:!!n,role:"status",...i,children:a})}));InlineBadge.displayName="InlineBadge";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef, useMemo } from 'react';
+import { StyledIcon, StyledText, StyledInline } from './elements';
+import { Icon } from '../../Icon/Icon';
+export const InlineBadge = React.memo(forwardRef(({ size = 'md', variant = 'positive', iconSrc, count, children, ...props }, ref) => {
+    const childElement = useMemo(() => {
+        if (size === 'hint') {
+            return null;
+        }
+        if (iconSrc) {
+            return (_jsx(StyledIcon, { "$size": size, children: _jsx(Icon, { nameIcon: iconSrc, propsIcon: {
+                        size: size === 'sm' ? '0.625rem' : '0.75rem',
+                        color: 'currentColor',
+                    } }) }));
+        }
+        if (count !== undefined && count !== null && count !== '') {
+            const displayCount = typeof count === 'number' && count > 99 ? '99+' : count;
+            return _jsx(StyledText, { "$size": size, children: displayCount });
+        }
+        // Render children as text content when no iconSrc or count
+        return children || null;
+    }, [size, iconSrc, count, children]);
+    return (_jsx(StyledInline, { "data-aui": "inline-badge", ref: ref, "$size": size, "$variant": variant, "$hasIcon": !!iconSrc, role: "status", ...props, children: childElement }));
+}));
+InlineBadge.displayName = 'InlineBadge';

package/lib/src/core-components/src/components/Badge/InnerBadge/InnerBadge.js

@@ -1 +1,25 @@
-"use strict";import{jsx as t}from"react/jsx-runtime";import p,{useMemo as s}from"react";import{StyledIcon as f,StyledText as u,StyledBadge as h}from"./elements";import{Icon as I}from"../../Icon/Icon";export const InnerBadge=p.memo(({position:o="top-right",size:r="md",overlap:l="circular",variant:i="notification",iconSrc:n,count:e,...m})=>{const a=s(()=>{if(r==="hint")return null;if(n)return t(f,{$size:r,children:t(I,{nameIcon:n,propsIcon:{size:r==="sm"?"0.625rem":"0.75rem",color:"currentColor"}})});if(e!=null&&e!==""){const d=typeof e=="number"&&e>99?"99+":e;return t(u,{$size:r,children:d})}return null},[r,n,e]);return t(h,{$position:o,$size:r,$overlap:l,$variant:i,$hasIcon:!!n,role:"status","aria-live":"polite",...m,children:a})});InnerBadge.displayName="InnerBadge";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { StyledIcon, StyledText, StyledBadge } from './elements';
+import { Icon } from '../../Icon/Icon';
+export const InnerBadge = React.memo(({ position = 'top-right', size = 'md', overlap = 'circular', variant = 'notification', iconSrc, count, ...props }) => {
+    const childElement = useMemo(() => {
+        if (size === 'hint') {
+            return null;
+        }
+        if (iconSrc) {
+            return (_jsx(StyledIcon, { "$size": size, children: _jsx(Icon, { nameIcon: iconSrc, propsIcon: {
+                        size: size === 'sm' ? '0.625rem' : '0.75rem',
+                        color: 'currentColor',
+                    } }) }));
+        }
+        if (count !== undefined && count !== null && count !== '') {
+            // Format count display: show 99+ for numbers > 99
+            const displayCount = typeof count === 'number' && count > 99 ? '99+' : count;
+            return _jsx(StyledText, { "$size": size, children: displayCount });
+        }
+        return null;
+    }, [size, iconSrc, count]);
+    return (_jsx(StyledBadge, { "$position": position, "$size": size, "$overlap": overlap, "$variant": variant, "$hasIcon": !!iconSrc, role: "status", "aria-live": "polite", ...props, children: childElement }));
+});
+InnerBadge.displayName = 'InnerBadge';

package/lib/src/core-components/src/components/Badge/InnerBadge/elements.js

@@ -1,65 +1,111 @@
-"use strict";import{styled as n,css as r}from"styled-components";import{sizeMap as l}from"../types";const u=(t,e)=>{const[o,s]=e.split("-");let a,i;return o==="top"?a="-50%":a="50%",s==="right"?i="50%":i="-50%",t==="square"?r`
-      transform: translate(${i}, ${a});
-      ${o}: 0;
-      ${s}: 0;
-    `:r`
-    transform: translate(${i}, ${a});
-    ${o}: 14%;
-    ${s}: 14%;
-  `},d=t=>{switch(t){case"alert":return r`
+import { styled, css } from 'styled-components';
+import { sizeMap, } from '../types';
+const getTransform = (overlap, position) => {
+    const [vertical, horizontal] = position.split('-');
+    let verticalTranslate, horizontalTranslate;
+    vertical === 'top'
+        ? (verticalTranslate = '-50%')
+        : (verticalTranslate = '50%');
+    horizontal === 'right'
+        ? (horizontalTranslate = '50%')
+        : (horizontalTranslate = '-50%');
+    if (overlap === 'square') {
+        return css `
+      transform: translate(${horizontalTranslate}, ${verticalTranslate});
+      ${vertical}: 0;
+      ${horizontal}: 0;
+    `;
+    }
+    return css `
+    transform: translate(${horizontalTranslate}, ${verticalTranslate});
+    ${vertical}: 14%;
+    ${horizontal}: 14%;
+  `;
+};
+const getColor = (variant) => {
+    switch (variant) {
+        case 'alert':
+            return css `
         background-color: var(--aui-status-error);
         color: var(--aui-status-on-error);
-      `;case"warn":return r`
+      `;
+        case 'warn':
+            return css `
         background-color: var(--aui-status-warning);
         color: var(--aui-status-on-warning);
-      `;case"positive":return r`
+      `;
+        case 'positive':
+            return css `
         background-color: var(--aui-status-success);
         color: var(--aui-status-on-success);
-      `;case"neutral":return r`
+      `;
+        case 'neutral':
+            return css `
         background-color: var(--aui-neutral-soft);
         color: var(--aui-on-neutral-soft);
         border: 1px solid var(--aui-outline);
-      `;default:return r`
+      `;
+        default:
+            return css `
         background-color: var(--aui-primary);
         color: var(--aui-on-primary);
-      `}},g=(t,e)=>t==="sm"&&!e?r`
+      `;
+    }
+};
+const getPadding = (size, hasIcon) => {
+    if (size === 'sm' && !hasIcon) {
+        return css `
       padding: 0 var(--aui-spacing-050);
-    `:t==="md"&&!e?r`
+    `;
+    }
+    else if (size === 'md' && !hasIcon) {
+        return css `
       padding: 0 var(--aui-spacing-075);
-    `:r`
+    `;
+    }
+    else {
+        return css `
       padding: 0;
-    `,c=t=>r`
+    `;
+    }
+};
+const getSharedStyles = (props) => css `
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   border-radius: 1rem;
   width: fit-content;
-  min-height: ${l[t.$size]};
-  min-width: ${l[t.$size]};
-  ${t.$size==="hint"&&r`
+  min-height: ${sizeMap[props.$size]};
+  min-width: ${sizeMap[props.$size]};
+  ${props.$size === 'hint' &&
+    css `
     outline: 2px solid var(--aui-surface);
   `}
-  ${d(t.$variant)};
-  ${g(t.$size,t.$hasIcon)}
-`;export const StyledBadge=n.div`
+  ${getColor(props.$variant)};
+  ${getPadding(props.$size, props.$hasIcon)}
+`;
+export const StyledBadge = styled.div `
   position: absolute;
-  ${c}
-  ${t=>u(t.$overlap,t.$position)};
-`,StyledInline=n.div`
-  ${c}
-`,StyledText=n.span`
-  font-size: ${({$size:t})=>t==="sm"?"0.75rem":"0.875rem"};
+  ${getSharedStyles}
+  ${(props) => getTransform(props.$overlap, props.$position)};
+`;
+export const StyledInline = styled.div `
+  ${getSharedStyles}
+`;
+export const StyledText = styled.span `
+  font-size: ${({ $size }) => ($size === 'sm' ? '0.75rem' : '0.875rem')};
   font-weight: 700;
   line-height: 1rem;
   vertical-align: middle;
   font-variant-numeric: tabular-nums lining-nums;
-`,StyledIcon=n.div`
+`;
+export const StyledIcon = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: ${({$size:t})=>t==="sm"?"0.625rem":"0.75rem"};
-  height: ${({$size:t})=>t==="sm"?"0.625rem":"0.75rem"};
+  width: ${({ $size }) => ($size === 'sm' ? '0.625rem' : '0.75rem')};
+  height: ${({ $size }) => ($size === 'sm' ? '0.625rem' : '0.75rem')};
 
   .iconContainer {
     width: 100%;

package/lib/src/core-components/src/components/Badge/InnerBadge/index.js

@@ -1 +1 @@
-"use strict";export{InnerBadge}from"./InnerBadge";
+export { InnerBadge } from './InnerBadge';

package/lib/src/core-components/src/components/Badge/index.js

@@ -1 +1 @@
-"use strict";export*from"./Badge";
+export * from './Badge';

package/lib/src/core-components/src/components/Badge/types.js

@@ -1 +1,5 @@
-"use strict";export const sizeMap={hint:"0.5rem",sm:"1rem",md:"1.25rem"};
+export const sizeMap = {
+    hint: '0.5rem',
+    sm: '1rem',
+    md: '1.25rem',
+};

package/lib/src/core-components/src/components/Breadcrumb/Breadcrumb.js

@@ -1 +1,83 @@
-"use strict";"use client";import{jsx as r,jsxs as a}from"react/jsx-runtime";import d,{forwardRef as z,useEffect as y,useMemo as F,useRef as L,useState as H,useCallback as _}from"react";import{useCombinedRefs as q}from"../../utils/hooks";import{Container as K,BreadcrumbList as N,Item as B,Separator as R,SeparatorText as p,OverflowDots as G,IconWrapper as S,DropdownMenu as J,DropdownItem as P}from"./elements";const j=()=>r("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:r("polyline",{points:"9 18 15 12 9 6"})}),Q=()=>a("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[r("path",{d:"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"}),r("polyline",{points:"9 22 9 12 15 12 15 22"})]}),U=(C,t)=>{switch(C){case"chevron":return r(j,{});case"slash":return r(p,{$size:t,children:"/"});case"arrow":return r(p,{$size:t,children:"\u2192"});case"dot":return r(p,{$size:t,children:"\u2022"});default:return r(j,{})}};export const Breadcrumb=z(function({children:t,maxItems:i,showOverflowDots:E=!1,variant:l="default",size:n="medium",separatorType:u="chevron",customSeparator:D,showHomeIcon:O=!1,collapsedItems:A,onCollapsedToggle:$,ariaLabel:I,...m},M){const c=L(null),W=q(M,c),[s,v]=H(!1),h=L(null),b=A??[],w=_(()=>{const e=!s;v(e),$?.(e)},[s,$]);y(()=>{const e=o=>{h.current&&!h.current.contains(o.target)&&v(!1)};return s&&document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[s]);const k=F(()=>{const e=d.Children.toArray(t);return i&&e.length>i?e.slice(-i):e},[t,i]);y(()=>{if(c.current){const e=c.current.querySelector("ol")?.lastElementChild;e&&c.current.scroll?.(e.offsetLeft,0)}},[]);const g=D||U(u,n),x=d.Children.count(k);return r(K,{"data-aui":"breadcrumb","aria-label":I||m["aria-label"]||"Breadcrumb navigation",ref:W,$variant:l,$size:n,role:"navigation",...m,children:a(N,{$variant:l,$size:n,children:[E&&i&&d.Children.count(t)>i&&a(B,{$variant:l,$size:n,$isActive:!1,$isCollapsed:!0,"aria-hidden":"true",children:[r(G,{$size:n,onClick:w,role:"button",tabIndex:0,onKeyDown:e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),w())},children:"\u2022\u2022\u2022"}),b.length>0&&r(J,{ref:h,$isOpen:s,children:b.map((e,o)=>a(P,{href:e.href||"#",children:[e.icon&&r(S,{$size:n,children:e.icon}),e.label]},o))}),r(R,{$type:u,$size:n,"aria-hidden":"true",children:g})]}),d.Children.map(k,(e,o)=>{const f=o===x-1;return a(B,{$variant:l,$size:n,$isActive:f,$isCollapsed:!1,"aria-current":f?"page":void 0,children:[O&&o===0&&r(S,{$size:n,children:r(Q,{})}),e,!f&&r(R,{$type:u,$size:n,"aria-hidden":"true",children:g})]},o)})]})})});Breadcrumb.displayName="Breadcrumb";
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef, useEffect, useMemo, useRef, useState, useCallback, } from 'react';
+import { useCombinedRefs } from '../../utils/hooks';
+import { Container, BreadcrumbList, Item, Separator, SeparatorText, OverflowDots, IconWrapper, DropdownMenu, DropdownItem, } from './elements';
+const ChevronIcon = () => (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("polyline", { points: "9 18 15 12 9 6" }) }));
+const HomeIconSvg = () => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), _jsx("polyline", { points: "9 22 9 12 15 12 15 22" })] }));
+const getSeparatorContent = (type, size) => {
+    switch (type) {
+        case 'chevron':
+            return _jsx(ChevronIcon, {});
+        case 'slash':
+            return _jsx(SeparatorText, { "$size": size, children: "/" });
+        case 'arrow':
+            return _jsx(SeparatorText, { "$size": size, children: "\u2192" });
+        case 'dot':
+            return _jsx(SeparatorText, { "$size": size, children: "\u2022" });
+        default:
+            return _jsx(ChevronIcon, {});
+    }
+};
+export const Breadcrumb = forwardRef(function BreadcrumbComponent({ children, maxItems, showOverflowDots = false, variant = 'default', size = 'medium', separatorType = 'chevron', customSeparator, showHomeIcon = false, collapsedItems, onCollapsedToggle, ariaLabel, ...rest }, fRef) {
+    const innerRef = useRef(null);
+    const combinedRef = useCombinedRefs(fRef, innerRef);
+    const [isCollapsedOpen, setIsCollapsedOpen] = useState(false);
+    const dropdownRef = useRef(null);
+    // Ensure collapsedItems is always an array
+    const safeCollapsedItems = collapsedItems ?? [];
+    // Handle collapsed items
+    const handleCollapsedToggle = useCallback(() => {
+        const newState = !isCollapsedOpen;
+        setIsCollapsedOpen(newState);
+        onCollapsedToggle?.(newState);
+    }, [isCollapsedOpen, onCollapsedToggle]);
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsCollapsedOpen(false);
+            }
+        };
+        if (isCollapsedOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isCollapsedOpen]);
+    // Process children with maxItems limit
+    const breadcrumbChildren = useMemo(() => {
+        const childArray = React.Children.toArray(children);
+        if (maxItems && childArray.length > maxItems) {
+            return childArray.slice(-maxItems);
+        }
+        return childArray;
+    }, [children, maxItems]);
+    // Scroll to last item on mount
+    useEffect(() => {
+        if (innerRef.current) {
+            const lastElementChild = innerRef.current.querySelector('ol')
+                ?.lastElementChild;
+            if (lastElementChild) {
+                innerRef.current.scroll?.(lastElementChild.offsetLeft, 0);
+            }
+        }
+    }, []);
+    const separatorContent = customSeparator || getSeparatorContent(separatorType, size);
+    const childCount = React.Children.count(breadcrumbChildren);
+    return (_jsx(Container, { "data-aui": "breadcrumb", "aria-label": ariaLabel || rest['aria-label'] || 'Breadcrumb navigation', ref: combinedRef, "$variant": variant, "$size": size, role: "navigation", ...rest, children: _jsxs(BreadcrumbList, { "$variant": variant, "$size": size, children: [showOverflowDots &&
+                    maxItems &&
+                    React.Children.count(children) > maxItems && (_jsxs(Item, { "$variant": variant, "$size": size, "$isActive": false, "$isCollapsed": true, "aria-hidden": "true", children: [_jsx(OverflowDots, { "$size": size, onClick: handleCollapsedToggle, role: "button", tabIndex: 0, onKeyDown: (e) => {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                    e.preventDefault();
+                                    handleCollapsedToggle();
+                                }
+                            }, children: "\u2022\u2022\u2022" }), safeCollapsedItems.length > 0 && (_jsx(DropdownMenu, { ref: dropdownRef, "$isOpen": isCollapsedOpen, children: safeCollapsedItems.map((item, idx) => (_jsxs(DropdownItem, { href: item.href || '#', children: [item.icon && (_jsx(IconWrapper, { "$size": size, children: item.icon })), item.label] }, idx))) })), _jsx(Separator, { "$type": separatorType, "$size": size, "aria-hidden": "true", children: separatorContent })] })), React.Children.map(breadcrumbChildren, (child, index) => {
+                    const isLast = index === childCount - 1;
+                    const isFirst = index === 0;
+                    return (_jsxs(Item, { "$variant": variant, "$size": size, "$isActive": isLast, "$isCollapsed": false, "aria-current": isLast ? 'page' : undefined, children: [showHomeIcon && isFirst && (_jsx(IconWrapper, { "$size": size, children: _jsx(HomeIconSvg, {}) })), child, !isLast && (_jsx(Separator, { "$type": separatorType, "$size": size, "aria-hidden": "true", children: separatorContent }))] }, index));
+                })] }) }));
+});
+Breadcrumb.displayName = 'Breadcrumb';