@intlayer/design-system 6.1.6 → 7.0.0-canary.0

package/dist/esm/components/Accordion/Accordion.mjs

@@ -0,0 +1,106 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { Button, ButtonColor, ButtonVariant } from "../Button/Button.mjs";
+import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
+import { ChevronDown } from "lucide-react";
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Accordion/Accordion.tsx
+/**
+* Accordion component that allows the user to expand and collapse content.
+* It provides a header with a chevron icon that controls the visibility of the content.
+*
+* Features:
+* - Supports both controlled and uncontrolled modes
+* - Accessible with proper ARIA attributes
+* - Keyboard navigation support
+* - Smooth animations for expand/collapse
+* - Customizable styling
+*
+* @param header - The content of the header.
+* @param children - The content to be expanded and collapsed.
+* @param isOpen - Controlled state for whether the content is expanded.
+* @param defaultIsOpen - Default open state for uncontrolled mode.
+* @param onToggle - Callback when the accordion state changes.
+* @param disabled - Whether the accordion is disabled.
+* @param contentClassName - Custom class for the content container.
+* @param headerClassName - Custom class for the header.
+* @param contentId - ID for the content (used for aria-controls).
+*
+* @example
+* // Uncontrolled mode
+* <Accordion header="Accordion Header" defaultIsOpen={true}>
+*   <p>Accordion content</p>
+* </Accordion>
+*
+* @example
+* // Controlled mode
+* <Accordion
+*   header="Controlled Accordion"
+*   isOpen={isOpen}
+*   onToggle={setIsOpen}
+* >
+*   <p>Controlled content</p>
+* </Accordion>
+*/
+const Accordion = ({ children, header, isOpen, defaultIsOpen = false, onToggle, onClick, disabled = false, contentClassName, headerClassName, contentId, "aria-label": ariaLabel,...props }) => {
+	const isControlled = isOpen !== void 0;
+	const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);
+	const isExpandedState = isControlled ? isOpen : internalIsOpen;
+	const isHidden = !isExpandedState;
+	const generatedContentId = contentId || `accordion-content-${Math.random().toString(36).substr(2, 9)}`;
+	const handleToggle = useCallback((e) => {
+		if (disabled) return;
+		const newIsOpen = !isExpandedState;
+		if (!isControlled) setInternalIsOpen(newIsOpen);
+		onToggle?.(newIsOpen);
+		onClick?.(e);
+	}, [
+		disabled,
+		isExpandedState,
+		isControlled,
+		onToggle,
+		onClick
+	]);
+	const handleKeyDown = useCallback((e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			handleToggle(e);
+		}
+	}, [handleToggle]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full",
+		children: [/* @__PURE__ */ jsx(Button, {
+			variant: ButtonVariant.HOVERABLE,
+			color: ButtonColor.TEXT,
+			onClick: handleToggle,
+			onKeyDown: handleKeyDown,
+			disabled,
+			isFullWidth: true,
+			className: cn("flex items-center justify-between gap-2", headerClassName),
+			IconRight: ChevronDown,
+			iconClassName: cn("transform transition-transform duration-500 ease-in-out", isExpandedState ? "rotate-0" : "-rotate-180"),
+			"aria-expanded": isExpandedState,
+			"aria-controls": generatedContentId,
+			"aria-label": ariaLabel,
+			role: "button",
+			...props,
+			children: header
+		}), /* @__PURE__ */ jsx(MaxHeightSmoother, {
+			id: generatedContentId,
+			tabIndex: isHidden ? -1 : void 0,
+			isHidden,
+			className: contentClassName,
+			role: "region",
+			"aria-labelledby": generatedContentId,
+			children
+		})]
+	});
+};
+
+//#endregion
+export { Accordion };
+//# sourceMappingURL=Accordion.mjs.map

package/dist/esm/components/Accordion/Accordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.mjs","names":["Accordion: FC<AccordionProps>"],"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown } from 'lucide-react';\nimport {\n  type FC,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport {\n  Button,\n  ButtonColor,\n  type ButtonProps,\n  ButtonVariant,\n} from '../Button';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\nexport interface AccordionProps\n  extends Omit<ButtonProps, 'children' | 'onToggle'> {\n  /** The content displayed in the accordion header */\n  header: ReactNode;\n  /** The collapsible content inside the accordion */\n  children: ReactNode;\n  /** Controls whether the accordion is open (controlled mode) */\n  isOpen?: boolean;\n  /** Default open state (uncontrolled mode) */\n  defaultIsOpen?: boolean;\n  /** Called when the accordion state changes */\n  onToggle?: (isOpen: boolean) => void;\n  /** Disable the accordion interaction */\n  disabled?: boolean;\n  /** Custom class for the content container */\n  contentClassName?: string;\n  /** Custom class for the header container */\n  headerClassName?: string;\n  /** Accessible label for screen readers */\n  'aria-label'?: string;\n  /** ID for the accordion content (for aria-controls) */\n  contentId?: string;\n}\n\n/**\n * Accordion component that allows the user to expand and collapse content.\n * It provides a header with a chevron icon that controls the visibility of the content.\n *\n * Features:\n * - Supports both controlled and uncontrolled modes\n * - Accessible with proper ARIA attributes\n * - Keyboard navigation support\n * - Smooth animations for expand/collapse\n * - Customizable styling\n *\n * @param header - The content of the header.\n * @param children - The content to be expanded and collapsed.\n * @param isOpen - Controlled state for whether the content is expanded.\n * @param defaultIsOpen - Default open state for uncontrolled mode.\n * @param onToggle - Callback when the accordion state changes.\n * @param disabled - Whether the accordion is disabled.\n * @param contentClassName - Custom class for the content container.\n * @param headerClassName - Custom class for the header.\n * @param contentId - ID for the content (used for aria-controls).\n *\n * @example\n * // Uncontrolled mode\n * <Accordion header=\"Accordion Header\" defaultIsOpen={true}>\n *   <p>Accordion content</p>\n * </Accordion>\n *\n * @example\n * // Controlled mode\n * <Accordion\n *   header=\"Controlled Accordion\"\n *   isOpen={isOpen}\n *   onToggle={setIsOpen}\n * >\n *   <p>Controlled content</p>\n * </Accordion>\n */\nexport const Accordion: FC<AccordionProps> = ({\n  children,\n  header,\n  isOpen,\n  defaultIsOpen = false,\n  onToggle,\n  onClick,\n  disabled = false,\n  contentClassName,\n  headerClassName,\n  contentId,\n  'aria-label': ariaLabel,\n  ...props\n}) => {\n  // Determine if we're in controlled or uncontrolled mode\n  const isControlled = isOpen !== undefined;\n  const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);\n\n  // Use controlled value if provided, otherwise use internal state\n  const isExpandedState = isControlled ? isOpen : internalIsOpen;\n  const isHidden = !isExpandedState;\n\n  // Generate unique ID for content if not provided\n  const generatedContentId =\n    contentId || `accordion-content-${Math.random().toString(36).substr(2, 9)}`;\n\n  const handleToggle = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      if (disabled) return;\n\n      const newIsOpen = !isExpandedState;\n\n      // Update internal state if uncontrolled\n      if (!isControlled) {\n        setInternalIsOpen(newIsOpen);\n      }\n\n      // Call external handlers\n      onToggle?.(newIsOpen);\n      onClick?.(e);\n    },\n    [disabled, isExpandedState, isControlled, onToggle, onClick]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      // Enter and Space should toggle the accordion\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        handleToggle(e as any);\n      }\n    },\n    [handleToggle]\n  );\n\n  return (\n    <div className=\"w-full\">\n      <Button\n        variant={ButtonVariant.HOVERABLE}\n        color={ButtonColor.TEXT}\n        onClick={handleToggle}\n        onKeyDown={handleKeyDown}\n        disabled={disabled}\n        isFullWidth\n        className={cn(\n          'flex items-center justify-between gap-2',\n          headerClassName\n        )}\n        IconRight={ChevronDown}\n        iconClassName={cn(\n          'transform transition-transform duration-500 ease-in-out',\n          isExpandedState ? 'rotate-0' : '-rotate-180'\n        )}\n        aria-expanded={isExpandedState}\n        aria-controls={generatedContentId}\n        aria-label={ariaLabel}\n        role=\"button\"\n        {...props}\n      >\n        {header}\n      </Button>\n\n      <MaxHeightSmoother\n        id={generatedContentId}\n        tabIndex={isHidden ? -1 : undefined}\n        isHidden={isHidden}\n        className={contentClassName}\n        role=\"region\"\n        aria-labelledby={generatedContentId}\n      >\n        {children}\n      </MaxHeightSmoother>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA,MAAaA,aAAiC,EAC5C,UACA,QACA,QACA,gBAAgB,OAChB,UACA,SACA,WAAW,OACX,kBACA,iBACA,WACA,cAAc,UACd,GAAG,YACC;CAEJ,MAAM,eAAe,WAAW;CAChC,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,cAAc;CAGnE,MAAM,kBAAkB,eAAe,SAAS;CAChD,MAAM,WAAW,CAAC;CAGlB,MAAM,qBACJ,aAAa,qBAAqB,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,OAAO,GAAG,EAAE;CAE3E,MAAM,eAAe,aAClB,MAA2C;AAC1C,MAAI,SAAU;EAEd,MAAM,YAAY,CAAC;AAGnB,MAAI,CAAC,aACH,mBAAkB,UAAU;AAI9B,aAAW,UAAU;AACrB,YAAU,EAAE;IAEd;EAAC;EAAU;EAAiB;EAAc;EAAU;EAAQ,CAC7D;CAED,MAAM,gBAAgB,aACnB,MAAwC;AAEvC,MAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,KAAE,gBAAgB;AAClB,gBAAa,EAAS;;IAG1B,CAAC,aAAa,CACf;AAED,QACE,qBAAC;EAAI,WAAU;aACb,oBAAC;GACC,SAAS,cAAc;GACvB,OAAO,YAAY;GACnB,SAAS;GACT,WAAW;GACD;GACV;GACA,WAAW,GACT,2CACA,gBACD;GACD,WAAW;GACX,eAAe,GACb,2DACA,kBAAkB,aAAa,cAChC;GACD,iBAAe;GACf,iBAAe;GACf,cAAY;GACZ,MAAK;GACL,GAAI;aAEH;IACM,EAET,oBAAC;GACC,IAAI;GACJ,UAAU,WAAW,KAAK;GAChB;GACV,WAAW;GACX,MAAK;GACL,mBAAiB;GAEhB;IACiB;GAChB"}

package/dist/esm/components/Accordion/index.mjs

@@ -0,0 +1,3 @@
+import { Accordion } from "./Accordion.mjs";
+
+export { Accordion };

package/dist/esm/components/Avatar/index.mjs

@@ -0,0 +1,144 @@
+import { cn } from "../../utils/cn.mjs";
+import { Loader } from "../Loader/index.mjs";
+import { User } from "lucide-react";
+import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Avatar/index.tsx
+/**
+* Size variants for the avatar
+*/
+const sizeVariants = {
+	sm: "size-6",
+	md: "size-9",
+	lg: "size-12",
+	xl: "size-16"
+};
+/**
+* @description Gets the capital letters from a name.
+* @param name - The name to extract capitals from.
+* @param separator - The separator to split the name (default is an empty string, which splits by each character).
+* @returns {string[]} An array of capital letters from the name.
+*/
+const getCapitals = (name, separator = " ") => {
+	if (!name) return [];
+	return (separator === " " ? name.trim().split(/\s+/) : name.split(separator)).filter(Boolean).map((word) => word.charAt(0).toUpperCase());
+};
+/**
+* Container component that renders either a button or div based on interactivity
+*/
+const Container = forwardRef(({ isClickable, onClick,...props }, ref) => {
+	if (isClickable && onClick) return /* @__PURE__ */ jsx("button", {
+		...props,
+		ref,
+		onClick,
+		type: "button"
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		role: props.tabIndex !== void 0 || props["aria-label"] ? "img" : void 0
+	});
+});
+Container.displayName = "AvatarContainer";
+/**
+* Avatar component that displays user profile images, initials, or a default user icon.
+* Supports loading states, authentication states, and accessibility features.
+*
+* @example
+* ```tsx
+* // With image
+* <Avatar src="https://example.com/avatar.jpg" fullname="John Doe" />
+*
+* // With initials
+* <Avatar fullname="John Doe" />
+*
+* // Clickable avatar
+* <Avatar
+*   fullname="John Doe"
+*   onClick={(e) => console.log('Avatar clicked')}
+* />
+*
+* // Loading state
+* <Avatar isLoading fullname="John Doe" />
+* ```
+*/
+const Avatar = ({ fullname, className, isLoading = false, isLoggedIn = true, src, onClick, size = "md", alt, focusable = false,...props }) => {
+	const isImageDefined = Boolean(src);
+	const isNameDefined = Boolean((fullname ?? "").length > 0);
+	const capitals = fullname ? getCapitals(fullname) : void 0;
+	const displayLoader = isLoading;
+	const displayAvatar = isLoggedIn && !displayLoader && isImageDefined;
+	const displayInitials = isLoggedIn && !displayLoader && !displayAvatar && isNameDefined;
+	const displayUserIcon = isLoggedIn && !displayLoader && !displayAvatar && !displayInitials;
+	const isClickable = onClick !== void 0;
+	const sizeClass = sizeVariants[size];
+	const accessibilityProps = useMemo(() => {
+		const baseProps = {};
+		if (displayAvatar && alt) baseProps["aria-label"] = alt;
+		else if (displayAvatar && fullname) baseProps["aria-label"] = `Avatar of ${fullname}`;
+		else if (displayInitials && fullname) baseProps["aria-label"] = `Avatar initials for ${fullname}`;
+		else if (displayUserIcon) baseProps["aria-label"] = "Default user avatar";
+		else if (displayLoader) {
+			baseProps["aria-label"] = "Loading avatar";
+			baseProps["aria-busy"] = true;
+		}
+		if (!isClickable && focusable) baseProps.tabIndex = 0;
+		if (isClickable) baseProps["aria-describedby"] = "avatar-description";
+		return baseProps;
+	}, [
+		displayAvatar,
+		displayInitials,
+		displayUserIcon,
+		displayLoader,
+		alt,
+		fullname,
+		isClickable,
+		focusable
+	]);
+	return /* @__PURE__ */ jsxs(Container, {
+		isClickable,
+		className: cn(`rounded-full border-[1.5px] border-text p-[1.5px]`, sizeClass, isClickable && `cursor-pointer hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2`, !isClickable && focusable && `focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2`, displayLoader && "animate-pulse", className),
+		onClick,
+		...accessibilityProps,
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "relative flex size-full flex-row items-center justify-center",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "absolute top-0 left-0 flex size-full flex-col items-center justify-center rounded-full bg-text text-text-opposite",
+				children: [
+					displayLoader && /* @__PURE__ */ jsx(Loader, {
+						className: "w-3/4",
+						"aria-label": "Loading user avatar"
+					}),
+					displayAvatar && /* @__PURE__ */ jsx("img", {
+						className: "size-full rounded-full object-cover",
+						src,
+						srcSet: src,
+						alt: alt || `Avatar of ${fullname}`,
+						width: 59,
+						height: 59,
+						loading: "lazy"
+					}),
+					displayInitials && /* @__PURE__ */ jsx("div", {
+						className: "flex size-full items-center justify-center gap-[0.1rem] font-bold text-sm max-md:py-1",
+						"aria-label": `Initials for ${fullname}`,
+						children: capitals?.map((capital, index) => /* @__PURE__ */ jsx("span", { children: capital }, `${capital}-${index}`))
+					}),
+					displayUserIcon && /* @__PURE__ */ jsx(User, {
+						size: size === "sm" ? 14 : size === "md" ? 25 : size === "lg" ? 30 : 40,
+						"aria-label": "Default user icon"
+					})
+				]
+			})
+		}), isClickable && /* @__PURE__ */ jsx("span", {
+			id: "avatar-description",
+			className: "sr-only",
+			children: "Click to view profile"
+		})]
+	});
+};
+
+//#endregion
+export { Avatar, getCapitals };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/components/Avatar/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["Avatar: FC<AvatarProps>","baseProps: Record<string, any>"],"sources":["../../../../src/components/Avatar/index.tsx"],"sourcesContent":["import { User } from 'lucide-react';\nimport type { ComponentProps, FC, HTMLAttributes } from 'react';\nimport { forwardRef, useMemo } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Loader } from '../Loader';\n\n/**\n * Props for the Avatar component\n */\nexport interface AvatarProps extends Omit<ComponentProps<'button'>, 'onClick'> {\n  /** Image source URL for the avatar */\n  src?: string;\n  /** Full name used to generate initials and alt text */\n  fullname?: string;\n  /** Displays a loading spinner when true */\n  isLoading?: boolean;\n  /** Whether the user is authenticated */\n  isLoggedIn?: boolean;\n  /** Size variant of the avatar */\n  size?: 'sm' | 'md' | 'lg' | 'xl';\n  /** Click handler - when provided, makes the avatar clickable */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Alternative text for accessibility */\n  alt?: string;\n  /** Whether the avatar should be focusable when not clickable */\n  focusable?: boolean;\n}\n\n/**\n * Size variants for the avatar\n */\nconst sizeVariants = {\n  sm: 'size-6',\n  md: 'size-9',\n  lg: 'size-12',\n  xl: 'size-16',\n} as const;\n\n/**\n * @description Gets the capital letters from a name.\n * @param name - The name to extract capitals from.\n * @param separator - The separator to split the name (default is an empty string, which splits by each character).\n * @returns {string[]} An array of capital letters from the name.\n */\nexport const getCapitals = (name: string, separator = ' '): string[] => {\n  if (!name) return [];\n\n  const parts =\n    separator === ' '\n      ? name\n          .trim()\n          .split(/\\s+/) // handle multiple spaces\n      : name.split(separator);\n\n  return parts.filter(Boolean).map((word) => word.charAt(0).toUpperCase());\n};\n\n/**\n * Container component that renders either a button or div based on interactivity\n */\nconst Container = forwardRef<\n  HTMLElement,\n  HTMLAttributes<HTMLElement> & {\n    isClickable: boolean;\n    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  }\n>(({ isClickable, onClick, ...props }, ref) => {\n  if (isClickable && onClick) {\n    return (\n      <button\n        {...(props as ComponentProps<'button'>)}\n        ref={ref as React.Ref<HTMLButtonElement>}\n        onClick={onClick}\n        type=\"button\"\n      />\n    );\n  }\n\n  return (\n    <div\n      {...(props as ComponentProps<'div'>)}\n      ref={ref as React.Ref<HTMLDivElement>}\n      role={\n        props.tabIndex !== undefined || props['aria-label'] ? 'img' : undefined\n      }\n    />\n  );\n});\n\nContainer.displayName = 'AvatarContainer';\n\n/**\n * Avatar component that displays user profile images, initials, or a default user icon.\n * Supports loading states, authentication states, and accessibility features.\n *\n * @example\n * ```tsx\n * // With image\n * <Avatar src=\"https://example.com/avatar.jpg\" fullname=\"John Doe\" />\n *\n * // With initials\n * <Avatar fullname=\"John Doe\" />\n *\n * // Clickable avatar\n * <Avatar\n *   fullname=\"John Doe\"\n *   onClick={(e) => console.log('Avatar clicked')}\n * />\n *\n * // Loading state\n * <Avatar isLoading fullname=\"John Doe\" />\n * ```\n */\nexport const Avatar: FC<AvatarProps> = ({\n  fullname,\n  className,\n  isLoading = false,\n  isLoggedIn = true,\n  src,\n  onClick,\n  size = 'md',\n  alt,\n  focusable = false,\n  ...props\n}) => {\n  const isImageDefined = Boolean(src);\n  const isNameDefined = Boolean((fullname ?? '').length > 0);\n  const capitals = fullname ? getCapitals(fullname) : undefined;\n\n  // Display logic\n  const displayLoader = isLoading;\n  const displayAvatar = isLoggedIn && !displayLoader && isImageDefined;\n  const displayInitials =\n    isLoggedIn && !displayLoader && !displayAvatar && isNameDefined;\n  const displayUserIcon =\n    isLoggedIn && !displayLoader && !displayAvatar && !displayInitials;\n\n  const isClickable = onClick !== undefined;\n  const sizeClass = sizeVariants[size];\n\n  // Accessibility attributes\n  const accessibilityProps = useMemo(() => {\n    const baseProps: Record<string, any> = {};\n\n    if (displayAvatar && alt) {\n      baseProps['aria-label'] = alt;\n    } else if (displayAvatar && fullname) {\n      baseProps['aria-label'] = `Avatar of ${fullname}`;\n    } else if (displayInitials && fullname) {\n      baseProps['aria-label'] = `Avatar initials for ${fullname}`;\n    } else if (displayUserIcon) {\n      baseProps['aria-label'] = 'Default user avatar';\n    } else if (displayLoader) {\n      baseProps['aria-label'] = 'Loading avatar';\n      baseProps['aria-busy'] = true;\n    }\n\n    if (!isClickable && focusable) {\n      baseProps.tabIndex = 0;\n    }\n\n    if (isClickable) {\n      baseProps['aria-describedby'] = 'avatar-description';\n    }\n\n    return baseProps;\n  }, [\n    displayAvatar,\n    displayInitials,\n    displayUserIcon,\n    displayLoader,\n    alt,\n    fullname,\n    isClickable,\n    focusable,\n  ]);\n\n  return (\n    <Container\n      isClickable={isClickable}\n      className={cn(\n        `rounded-full border-[1.5px] border-text p-[1.5px]`,\n        sizeClass,\n        isClickable &&\n          `cursor-pointer hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2`,\n        !isClickable &&\n          focusable &&\n          `focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2`,\n        displayLoader && 'animate-pulse',\n        className\n      )}\n      onClick={onClick}\n      {...accessibilityProps}\n      {...props}\n    >\n      <div className=\"relative flex size-full flex-row items-center justify-center\">\n        <div className=\"absolute top-0 left-0 flex size-full flex-col items-center justify-center rounded-full bg-text text-text-opposite\">\n          {displayLoader && (\n            <Loader className=\"w-3/4\" aria-label=\"Loading user avatar\" />\n          )}\n\n          {displayAvatar && (\n            <img\n              className=\"size-full rounded-full object-cover\"\n              src={src}\n              srcSet={src}\n              alt={alt || `Avatar of ${fullname}`}\n              width={59}\n              height={59}\n              loading=\"lazy\"\n            />\n          )}\n\n          {displayInitials && (\n            <div\n              className=\"flex size-full items-center justify-center gap-[0.1rem] font-bold text-sm max-md:py-1\"\n              aria-label={`Initials for ${fullname}`}\n            >\n              {capitals?.map((capital, index) => (\n                <span key={`${capital}-${index}`}>{capital}</span>\n              ))}\n            </div>\n          )}\n\n          {displayUserIcon && (\n            <User\n              size={\n                size === 'sm'\n                  ? 14\n                  : size === 'md'\n                    ? 25\n                    : size === 'lg'\n                      ? 30\n                      : 40\n              }\n              aria-label=\"Default user icon\"\n            />\n          )}\n        </div>\n      </div>\n\n      {isClickable && (\n        <span id=\"avatar-description\" className=\"sr-only\">\n          Click to view profile\n        </span>\n      )}\n    </Container>\n  );\n};\n"],"mappings":";;;;;;;;;;AA+BA,MAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;;;;;;;AAQD,MAAa,eAAe,MAAc,YAAY,QAAkB;AACtE,KAAI,CAAC,KAAM,QAAO,EAAE;AASpB,SANE,cAAc,MACV,KACG,MAAM,CACN,MAAM,MAAM,GACf,KAAK,MAAM,UAAU,EAEd,OAAO,QAAQ,CAAC,KAAK,SAAS,KAAK,OAAO,EAAE,CAAC,aAAa,CAAC;;;;;AAM1E,MAAM,YAAY,YAMf,EAAE,aAAa,QAAS,GAAG,SAAS,QAAQ;AAC7C,KAAI,eAAe,QACjB,QACE,oBAAC;EACC,GAAK;EACA;EACI;EACT,MAAK;GACL;AAIN,QACE,oBAAC;EACC,GAAK;EACA;EACL,MACE,MAAM,aAAa,UAAa,MAAM,gBAAgB,QAAQ;GAEhE;EAEJ;AAEF,UAAU,cAAc;;;;;;;;;;;;;;;;;;;;;;;AAwBxB,MAAaA,UAA2B,EACtC,UACA,WACA,YAAY,OACZ,aAAa,MACb,KACA,SACA,OAAO,MACP,KACA,YAAY,MACZ,GAAG,YACC;CACJ,MAAM,iBAAiB,QAAQ,IAAI;CACnC,MAAM,gBAAgB,SAAS,YAAY,IAAI,SAAS,EAAE;CAC1D,MAAM,WAAW,WAAW,YAAY,SAAS,GAAG;CAGpD,MAAM,gBAAgB;CACtB,MAAM,gBAAgB,cAAc,CAAC,iBAAiB;CACtD,MAAM,kBACJ,cAAc,CAAC,iBAAiB,CAAC,iBAAiB;CACpD,MAAM,kBACJ,cAAc,CAAC,iBAAiB,CAAC,iBAAiB,CAAC;CAErD,MAAM,cAAc,YAAY;CAChC,MAAM,YAAY,aAAa;CAG/B,MAAM,qBAAqB,cAAc;EACvC,MAAMC,YAAiC,EAAE;AAEzC,MAAI,iBAAiB,IACnB,WAAU,gBAAgB;WACjB,iBAAiB,SAC1B,WAAU,gBAAgB,aAAa;WAC9B,mBAAmB,SAC5B,WAAU,gBAAgB,uBAAuB;WACxC,gBACT,WAAU,gBAAgB;WACjB,eAAe;AACxB,aAAU,gBAAgB;AAC1B,aAAU,eAAe;;AAG3B,MAAI,CAAC,eAAe,UAClB,WAAU,WAAW;AAGvB,MAAI,YACF,WAAU,sBAAsB;AAGlC,SAAO;IACN;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,qBAAC;EACc;EACb,WAAW,GACT,qDACA,WACA,eACE,2GACF,CAAC,eACC,aACA,2EACF,iBAAiB,iBACjB,UACD;EACQ;EACT,GAAI;EACJ,GAAI;aAEJ,oBAAC;GAAI,WAAU;aACb,qBAAC;IAAI,WAAU;;KACZ,iBACC,oBAAC;MAAO,WAAU;MAAQ,cAAW;OAAwB;KAG9D,iBACC,oBAAC;MACC,WAAU;MACL;MACL,QAAQ;MACR,KAAK,OAAO,aAAa;MACzB,OAAO;MACP,QAAQ;MACR,SAAQ;OACR;KAGH,mBACC,oBAAC;MACC,WAAU;MACV,cAAY,gBAAgB;gBAE3B,UAAU,KAAK,SAAS,UACvB,oBAAC,oBAAkC,WAAxB,GAAG,QAAQ,GAAG,QAAyB,CAClD;OACE;KAGP,mBACC,oBAAC;MACC,MACE,SAAS,OACL,KACA,SAAS,OACP,KACA,SAAS,OACP,KACA;MAEV,cAAW;OACX;;KAEA;IACF,EAEL,eACC,oBAAC;GAAK,IAAG;GAAqB,WAAU;aAAU;IAE3C;GAEC"}

package/dist/esm/components/Badge/index.mjs

@@ -0,0 +1,151 @@
+import { cn } from "../../utils/cn.mjs";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Badge/index.tsx
+/**
+* Badge color variants enum
+* @description Defines the available color themes for the badge component
+*/
+let BadgeColor = /* @__PURE__ */ function(BadgeColor$1) {
+	BadgeColor$1["PRIMARY"] = "primary";
+	BadgeColor$1["SECONDARY"] = "secondary";
+	BadgeColor$1["DESTRUCTIVE"] = "destructive";
+	BadgeColor$1["SUCCESS"] = "success";
+	BadgeColor$1["ERROR"] = "error";
+	BadgeColor$1["NEUTRAL"] = "neutral";
+	BadgeColor$1["LIGHT"] = "light";
+	BadgeColor$1["DARK"] = "dark";
+	BadgeColor$1["TEXT"] = "text";
+	BadgeColor$1["CUSTOM"] = "custom";
+	return BadgeColor$1;
+}({});
+/**
+* Badge visual variants enum
+* @description Defines the available visual styles for the badge component
+*/
+let BadgeVariant = /* @__PURE__ */ function(BadgeVariant$1) {
+	BadgeVariant$1["DEFAULT"] = "default";
+	BadgeVariant$1["NONE"] = "none";
+	BadgeVariant$1["OUTLINE"] = "outline";
+	BadgeVariant$1["HOVERABLE"] = "hoverable";
+	return BadgeVariant$1;
+}({});
+/**
+* Badge size variants enum
+* @description Defines the available sizes for the badge component
+*/
+let BadgeSize = /* @__PURE__ */ function(BadgeSize$1) {
+	BadgeSize$1["SMALL"] = "sm";
+	BadgeSize$1["MEDIUM"] = "md";
+	BadgeSize$1["LARGE"] = "lg";
+	return BadgeSize$1;
+}({});
+/**
+* Badge component variants using class-variance-authority
+* @description Defines the styling variants for different badge combinations
+*/
+const badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+	variants: {
+		color: {
+			[BadgeColor.PRIMARY]: "border-primary bg-primary text-primary hover:bg-primary-500",
+			[BadgeColor.SECONDARY]: "border-secondary bg-secondary text-secondary hover:bg-secondary-300",
+			[BadgeColor.DESTRUCTIVE]: "border-destructive bg-destructive text-destructive hover:bg-destructive-500",
+			[BadgeColor.SUCCESS]: "border-success bg-success text-success hover:bg-success-500",
+			[BadgeColor.ERROR]: "border-error bg-error text-error hover:bg-error-500",
+			[BadgeColor.NEUTRAL]: "border-neutral bg-neutral text-neutral hover:bg-neutral-600",
+			[BadgeColor.LIGHT]: "border-white bg-white text-white hover:bg-neutral-500",
+			[BadgeColor.DARK]: "border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900",
+			[BadgeColor.TEXT]: "border-text bg-text text-text hover:opacity-80",
+			[BadgeColor.CUSTOM]: ""
+		},
+		variant: {
+			[BadgeVariant.DEFAULT]: "rounded-lg text-text-opposite",
+			[BadgeVariant.NONE]: "border-none bg-opacity-0 text-inherit hover:bg-opacity-0",
+			[BadgeVariant.OUTLINE]: "rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30",
+			[BadgeVariant.HOVERABLE]: "rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10"
+		},
+		size: {
+			[BadgeSize.SMALL]: "px-2 py-0.5 text-xs",
+			[BadgeSize.MEDIUM]: "px-2.5 py-0.5 text-xs",
+			[BadgeSize.LARGE]: "px-3 py-1 text-sm"
+		}
+	},
+	defaultVariants: {
+		variant: BadgeVariant.DEFAULT,
+		color: BadgeColor.PRIMARY,
+		size: BadgeSize.MEDIUM
+	}
+});
+/**
+* Badge component for displaying status indicators, labels, and notifications
+*
+* @description A flexible badge component that supports multiple visual styles, colors, and interactive features.
+* It maintains accessibility standards and provides comprehensive customization options.
+*
+* @example
+* ```tsx
+* // Basic badge
+* <Badge>New</Badge>
+*
+* // Colored badge
+* <Badge color={BadgeColor.DESTRUCTIVE}>Error</Badge>
+*
+* // Clickable badge
+* <Badge clickable onClick={() => console.log('clicked')}>
+*   Clickable
+* </Badge>
+*
+* // Dismissible badge
+* <Badge dismissible onDismiss={() => console.log('dismissed')}>
+*   Dismissible
+* </Badge>
+* ```
+*/
+const Badge = ({ className, variant = BadgeVariant.DEFAULT, color = BadgeColor.PRIMARY, size = BadgeSize.MEDIUM, children, clickable = false, dismissible = false, onClick, onDismiss, role, tabIndex, "aria-label": ariaLabel,...props }) => {
+	const Component = clickable ? "button" : "span";
+	const handleKeyDown = (event) => {
+		if (clickable && onClick && (event.key === "Enter" || event.key === " ")) {
+			event.preventDefault();
+			onClick(event);
+		}
+	};
+	const handleDismiss = (event) => {
+		event.stopPropagation();
+		onDismiss?.();
+	};
+	return /* @__PURE__ */ jsxs(Component, {
+		className: cn(badgeVariants({
+			variant,
+			color,
+			size
+		}), clickable && "cursor-pointer hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2", dismissible && "pr-1", className),
+		onClick: clickable ? onClick : void 0,
+		onKeyDown: clickable ? handleKeyDown : void 0,
+		role: role || (clickable ? "button" : "status"),
+		tabIndex: clickable ? tabIndex ?? 0 : tabIndex,
+		"aria-label": ariaLabel || (clickable ? `${children} button` : void 0),
+		...props,
+		children: [children, dismissible && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-black/10 focus:outline-none focus:ring-1 focus:ring-offset-1",
+			onClick: handleDismiss,
+			"aria-label": `Remove ${children} badge`,
+			children: /* @__PURE__ */ jsxs("svg", {
+				className: "size-3",
+				viewBox: "0 0 20 20",
+				fill: "currentColor",
+				"aria-label": "Remove badge",
+				children: [/* @__PURE__ */ jsx("title", { children: "Remove badge" }), /* @__PURE__ */ jsx("path", {
+					fillRule: "evenodd",
+					d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+					clipRule: "evenodd"
+				})]
+			})
+		})]
+	});
+};
+
+//#endregion
+export { Badge, BadgeColor, BadgeSize, BadgeVariant, badgeVariants };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/components/Badge/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["Badge: React.FC<BadgeProps>"],"sources":["../../../../src/components/Badge/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Badge color variants enum\n * @description Defines the available color themes for the badge component\n */\nexport enum BadgeColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  SUCCESS = 'success',\n  ERROR = 'error',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n  CUSTOM = 'custom',\n}\n\n/**\n * Badge visual variants enum\n * @description Defines the available visual styles for the badge component\n */\nexport enum BadgeVariant {\n  DEFAULT = 'default',\n  NONE = 'none',\n  OUTLINE = 'outline',\n  HOVERABLE = 'hoverable',\n}\n\n/**\n * Badge size variants enum\n * @description Defines the available sizes for the badge component\n */\nexport enum BadgeSize {\n  SMALL = 'sm',\n  MEDIUM = 'md',\n  LARGE = 'lg',\n}\n\n/**\n * Badge component variants using class-variance-authority\n * @description Defines the styling variants for different badge combinations\n */\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      color: {\n        [BadgeColor.PRIMARY]:\n          'border-primary bg-primary text-primary hover:bg-primary-500',\n        [BadgeColor.SECONDARY]:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300',\n        [BadgeColor.DESTRUCTIVE]:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500',\n        [BadgeColor.SUCCESS]:\n          'border-success bg-success text-success hover:bg-success-500',\n        [BadgeColor.ERROR]:\n          'border-error bg-error text-error hover:bg-error-500',\n        [BadgeColor.NEUTRAL]:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600',\n        [BadgeColor.LIGHT]:\n          'border-white bg-white text-white hover:bg-neutral-500',\n        [BadgeColor.DARK]:\n          'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900',\n        [BadgeColor.TEXT]: 'border-text bg-text text-text hover:opacity-80',\n        [BadgeColor.CUSTOM]: '',\n      },\n      variant: {\n        [BadgeVariant.DEFAULT]: 'rounded-lg text-text-opposite',\n        [BadgeVariant.NONE]:\n          'border-none bg-opacity-0 text-inherit hover:bg-opacity-0',\n        [BadgeVariant.OUTLINE]:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30',\n        [BadgeVariant.HOVERABLE]:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10',\n      },\n      size: {\n        [BadgeSize.SMALL]: 'px-2 py-0.5 text-xs',\n        [BadgeSize.MEDIUM]: 'px-2.5 py-0.5 text-xs',\n        [BadgeSize.LARGE]: 'px-3 py-1 text-sm',\n      },\n    },\n    defaultVariants: {\n      variant: BadgeVariant.DEFAULT,\n      color: BadgeColor.PRIMARY,\n      size: BadgeSize.MEDIUM,\n    },\n  }\n);\n\n/**\n * Badge component props interface\n * @description Comprehensive props for the Badge component with accessibility and interactive features\n */\nexport interface BadgeProps extends HTMLAttributes<HTMLElement> {\n  /** The content to display inside the badge */\n  children?: React.ReactNode;\n  /** Color theme variant */\n  color?: BadgeColor;\n  /** Visual style variant */\n  variant?: BadgeVariant;\n  /** Size of the badge */\n  size?: BadgeSize;\n  /** Whether the badge is clickable */\n  clickable?: boolean;\n  /** Whether the badge is dismissible (shows close button) */\n  dismissible?: boolean;\n  /** Click handler for the badge */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Click handler for the dismiss button */\n  onDismiss?: () => void;\n  /** ARIA label for accessibility */\n  'aria-label'?: string;\n  /** Badge role for accessibility (default: 'status') */\n  role?: 'status' | 'button' | 'generic';\n  /** Whether badge should be focusable */\n  tabIndex?: number;\n}\n\n/**\n * Utility type for badge variant props\n */\nexport type BadgeVariantProps = VariantProps<typeof badgeVariants>;\n\n/**\n * Badge component for displaying status indicators, labels, and notifications\n *\n * @description A flexible badge component that supports multiple visual styles, colors, and interactive features.\n * It maintains accessibility standards and provides comprehensive customization options.\n *\n * @example\n * ```tsx\n * // Basic badge\n * <Badge>New</Badge>\n *\n * // Colored badge\n * <Badge color={BadgeColor.DESTRUCTIVE}>Error</Badge>\n *\n * // Clickable badge\n * <Badge clickable onClick={() => console.log('clicked')}>\n *   Clickable\n * </Badge>\n *\n * // Dismissible badge\n * <Badge dismissible onDismiss={() => console.log('dismissed')}>\n *   Dismissible\n * </Badge>\n * ```\n */\nexport const Badge: React.FC<BadgeProps> = ({\n  className,\n  variant = BadgeVariant.DEFAULT,\n  color = BadgeColor.PRIMARY,\n  size = BadgeSize.MEDIUM,\n  children,\n  clickable = false,\n  dismissible = false,\n  onClick,\n  onDismiss,\n  role,\n  tabIndex,\n  'aria-label': ariaLabel,\n  ...props\n}) => {\n  const Component = clickable ? 'button' : 'span';\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    if (clickable && onClick && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      onClick(event as any);\n    }\n  };\n\n  const handleDismiss = (event: React.MouseEvent) => {\n    event.stopPropagation();\n    onDismiss?.();\n  };\n\n  return (\n    <Component\n      className={cn(\n        badgeVariants({ variant, color, size }),\n        clickable &&\n          'cursor-pointer hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2',\n        dismissible && 'pr-1',\n        className\n      )}\n      onClick={clickable ? onClick : undefined}\n      onKeyDown={clickable ? handleKeyDown : undefined}\n      role={role || (clickable ? 'button' : 'status')}\n      tabIndex={clickable ? (tabIndex ?? 0) : tabIndex}\n      aria-label={ariaLabel || (clickable ? `${children} button` : undefined)}\n      {...props}\n    >\n      {children}\n      {dismissible && (\n        <button\n          type=\"button\"\n          className=\"ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-black/10 focus:outline-none focus:ring-1 focus:ring-offset-1\"\n          onClick={handleDismiss}\n          aria-label={`Remove ${children} badge`}\n        >\n          <svg\n            className=\"size-3\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-label=\"Remove badge\"\n          >\n            <title>Remove badge</title>\n            <path\n              fillRule=\"evenodd\"\n              d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n              clipRule=\"evenodd\"\n            />\n          </svg>\n        </button>\n      )}\n    </Component>\n  );\n};\n"],"mappings":";;;;;;;;;AAQA,IAAY,oDAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;AAOF,IAAY,wDAAL;AACL;AACA;AACA;AACA;;;;;;;AAOF,IAAY,kDAAL;AACL;AACA;AACA;;;;;;;AAOF,MAAa,gBAAgB,IAC3B,0KACA;CACE,UAAU;EACR,OAAO;IACJ,WAAW,UACV;IACD,WAAW,YACV;IACD,WAAW,cACV;IACD,WAAW,UACV;IACD,WAAW,QACV;IACD,WAAW,UACV;IACD,WAAW,QACV;IACD,WAAW,OACV;IACD,WAAW,OAAO;IAClB,WAAW,SAAS;GACtB;EACD,SAAS;IACN,aAAa,UAAU;IACvB,aAAa,OACZ;IACD,aAAa,UACZ;IACD,aAAa,YACZ;GACH;EACD,MAAM;IACH,UAAU,QAAQ;IAClB,UAAU,SAAS;IACnB,UAAU,QAAQ;GACpB;EACF;CACD,iBAAiB;EACf,SAAS,aAAa;EACtB,OAAO,WAAW;EAClB,MAAM,UAAU;EACjB;CACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DD,MAAaA,SAA+B,EAC1C,WACA,UAAU,aAAa,SACvB,QAAQ,WAAW,SACnB,OAAO,UAAU,QACjB,UACA,YAAY,OACZ,cAAc,OACd,SACA,WACA,MACA,UACA,cAAc,UACd,GAAG,YACC;CACJ,MAAM,YAAY,YAAY,WAAW;CAEzC,MAAM,iBAAiB,UAA4C;AACjE,MAAI,aAAa,YAAY,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AACxE,SAAM,gBAAgB;AACtB,WAAQ,MAAa;;;CAIzB,MAAM,iBAAiB,UAA4B;AACjD,QAAM,iBAAiB;AACvB,eAAa;;AAGf,QACE,qBAAC;EACC,WAAW,GACT,cAAc;GAAE;GAAS;GAAO;GAAM,CAAC,EACvC,aACE,oFACF,eAAe,QACf,UACD;EACD,SAAS,YAAY,UAAU;EAC/B,WAAW,YAAY,gBAAgB;EACvC,MAAM,SAAS,YAAY,WAAW;EACtC,UAAU,YAAa,YAAY,IAAK;EACxC,cAAY,cAAc,YAAY,GAAG,SAAS,WAAW;EAC7D,GAAI;aAEH,UACA,eACC,oBAAC;GACC,MAAK;GACL,WAAU;GACV,SAAS;GACT,cAAY,UAAU,SAAS;aAE/B,qBAAC;IACC,WAAU;IACV,SAAQ;IACR,MAAK;IACL,cAAW;eAEX,oBAAC,qBAAM,iBAAoB,EAC3B,oBAAC;KACC,UAAS;KACT,GAAE;KACF,UAAS;MACT;KACE;IACC;GAED"}

package/dist/esm/components/Breadcrumb/breadcrumb.content.mjs

@@ -0,0 +1,33 @@
+import { t } from "intlayer";
+
+//#region src/components/Breadcrumb/breadcrumb.content.ts
+const breadCrumbContent = {
+	key: "breadcrumb",
+	content: { linkLabel: t({
+		en: "Go to",
+		fr: "Aller à",
+		es: "Ir a",
+		"en-GB": "Go to",
+		de: "Gehe zu",
+		ja: "に移動",
+		ko: "로 이동",
+		zh: "转到",
+		it: "Vai a",
+		pt: "Ir para",
+		hi: "कर जाएं",
+		ar: "اذهب إلى",
+		ru: "Перейти на",
+		tr: "Git",
+		pl: "Przejdź do",
+		id: "Pergi ke",
+		vi: "Đi tới"
+	}) },
+	title: "Breadcrumb navigation",
+	description: "Content declaration for the breadcrumb component's navigation label, used to guide users through hierarchical structures within the interface.",
+	tags: ["navigation", "breadcrumb"]
+};
+var breadcrumb_content_default = breadCrumbContent;
+
+//#endregion
+export { breadCrumbContent, breadcrumb_content_default as default };
+//# sourceMappingURL=breadcrumb.content.mjs.map

package/dist/esm/components/Breadcrumb/breadcrumb.content.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.content.mjs","names":[],"sources":["../../../../src/components/Breadcrumb/breadcrumb.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nexport const breadCrumbContent = {\n  key: 'breadcrumb',\n  content: {\n    linkLabel: t({\n      en: 'Go to',\n      fr: 'Aller à',\n      es: 'Ir a',\n      'en-GB': 'Go to',\n      de: 'Gehe zu',\n      ja: 'に移動',\n      ko: '로 이동',\n      zh: '转到',\n      it: 'Vai a',\n      pt: 'Ir para',\n      hi: 'कर जाएं',\n      ar: 'اذهب إلى',\n      ru: 'Перейти на',\n      tr: 'Git',\n      pl: 'Przejdź do',\n      id: 'Pergi ke',\n      vi: 'Đi tới',\n    }),\n  },\n  title: 'Breadcrumb navigation',\n  description:\n    \"Content declaration for the breadcrumb component's navigation label, used to guide users through hierarchical structures within the interface.\",\n  tags: ['navigation', 'breadcrumb'],\n} satisfies Dictionary;\n\nexport default breadCrumbContent;\n"],"mappings":";;;AAEA,MAAa,oBAAoB;CAC/B,KAAK;CACL,SAAS,EACP,WAAW,EAAE;EACX,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,SAAS;EACT,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,CAAC,EACH;CACD,OAAO;CACP,aACE;CACF,MAAM,CAAC,cAAc,aAAa;CACnC;AAED,iCAAe"}