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

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

@@ -0,0 +1,207 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { Button, ButtonVariant } from "../Button/Button.mjs";
+import { Link, LinkColor } from "../Link/Link.mjs";
+import { ChevronRightIcon } from "lucide-react";
+import { Fragment, createElement } from "react";
+import { cva } from "class-variance-authority";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { getIntlayer } from "@intlayer/core";
+import { useIntlayer } from "react-intlayer";
+
+//#region src/components/Breadcrumb/index.tsx
+/**
+* Breadcrumb variant styles using class-variance-authority
+*/
+const breadcrumbVariants = cva("flex flex-row flex-wrap items-center text-sm", {
+	variants: {
+		size: {
+			small: "gap-1 text-xs",
+			medium: "gap-2 text-sm",
+			large: "gap-3 text-base"
+		},
+		spacing: {
+			compact: "gap-1",
+			normal: "gap-2",
+			loose: "gap-4"
+		}
+	},
+	defaultVariants: {
+		size: "medium",
+		spacing: "normal"
+	}
+});
+/**
+* LinkLink sub-component for breadcrumb items that navigate to other pages
+*/
+const LinkLink = ({ href, lang, children, onClick, color, position, locale, className,...props }) => {
+	const linkLabel = getIntlayer("breadcrumb").linkLabel;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Link, {
+		href,
+		locale,
+		color,
+		onClick,
+		itemProp: "item",
+		isExternalLink: false,
+		itemScope: true,
+		itemType: "https://schema.org/WebPage",
+		...props,
+		label: `${linkLabel} ${children}`,
+		itemID: href,
+		children: /* @__PURE__ */ jsx("span", {
+			itemProp: "name",
+			children
+		})
+	}), /* @__PURE__ */ jsx("meta", {
+		itemProp: "position",
+		content: position.toString()
+	})] });
+};
+/**
+* ButtonLink sub-component for breadcrumb items with click handlers
+*/
+const ButtonLink = ({ children: text, onClick, color, position, className,...props }) => {
+	const { linkLabel } = useIntlayer("breadcrumb");
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+		onClick,
+		variant: ButtonVariant.LINK,
+		label: `${linkLabel} ${text}`,
+		color,
+		itemProp: "item",
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			itemProp: "name",
+			children: text
+		})
+	}), /* @__PURE__ */ jsx("meta", {
+		itemProp: "position",
+		content: position.toString()
+	})] });
+};
+/**
+* Span sub-component for static breadcrumb text items
+*/
+const Span = ({ children, position, className,...props }) => /* @__PURE__ */ jsxs("span", {
+	itemProp: "item",
+	className: cn("inline-flex items-center", "font-medium text-neutral-700", "transition-colors duration-200", className),
+	children: [/* @__PURE__ */ jsx("span", {
+		itemProp: "name",
+		...props,
+		children
+	}), /* @__PURE__ */ jsx("meta", {
+		itemProp: "position",
+		content: position.toString()
+	})]
+});
+/**
+* Breadcrumb component providing navigational context with accessibility features
+*
+* Features:
+* - Supports links, buttons, and static text elements
+* - Full keyboard navigation support
+* - ARIA attributes for screen readers
+* - Schema.org structured data for SEO
+* - Customizable separators and styling
+* - Internationalization support
+* - Responsive design variants
+*
+* @example
+* ```tsx
+* <Breadcrumb
+*   links={[
+*     'Home',
+*     { href: '/products', text: 'Products' },
+*     { onClick: handleCategory, text: 'Electronics' },
+*     'Smartphones'
+*   ]}
+*   size="medium"
+*   ariaLabel="Product navigation"
+* />
+* ```
+*/
+const Breadcrumb = ({ links, className, color = LinkColor.TEXT, locale, elementType = "page", separator = /* @__PURE__ */ jsx(ChevronRightIcon, { size: 10 }), ariaLabel = "breadcrumb", includeStructuredData = true, maxItems, size, spacing,...props }) => {
+	const displayLinks = maxItems && links.length > maxItems ? [
+		...links.slice(0, 1),
+		"...",
+		...links.slice(-(maxItems - 2))
+	] : links;
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": ariaLabel,
+		children: /* @__PURE__ */ jsx("ol", {
+			className: cn(breadcrumbVariants({
+				size,
+				spacing
+			}), className),
+			...includeStructuredData && {
+				itemScope: true,
+				itemType: "http://schema.org/BreadcrumbList"
+			},
+			...props,
+			children: displayLinks.map((link, index) => {
+				const isLastLink = index === displayLinks.length - 1;
+				const isLink = typeof link === "object" && typeof link.href === "string";
+				const isButton = typeof link === "object" && typeof link.onClick === "function";
+				const isActive = index === displayLinks.length - 1;
+				const ariaCurrent = isActive ? elementType : void 0;
+				const isTruncated = link === "...";
+				const text = link.text ?? link;
+				if (isTruncated) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("li", {
+					className: "flex items-center",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("span", {
+						className: "text-neutral-500",
+						children: "…"
+					})
+				}), !isLastLink && /* @__PURE__ */ jsx("li", {
+					"aria-hidden": "true",
+					className: "flex items-center",
+					children: separator
+				})] }, `truncated-${text}`);
+				let section = /* @__PURE__ */ jsx(Span, {
+					position: index + 1,
+					"aria-current": ariaCurrent,
+					className: cn("transition-colors duration-200", isActive && "text-neutral-900"),
+					children: text
+				}, text);
+				if (isLink) section = /* @__PURE__ */ jsx(LinkLink, {
+					href: link.href,
+					color,
+					position: index + 1,
+					locale,
+					"aria-current": ariaCurrent,
+					className: cn(isActive && "cursor-default text-neutral-900"),
+					children: text
+				}, text);
+				else if (isButton) section = /* @__PURE__ */ jsx(ButtonLink, {
+					onClick: link.onClick,
+					color,
+					position: index + 1,
+					"aria-current": ariaCurrent,
+					className: cn(isActive && "cursor-default text-neutral-900"),
+					children: text
+				}, text);
+				const listElement = /* @__PURE__ */ createElement("li", {
+					...includeStructuredData && {
+						itemProp: "itemListElement",
+						itemScope: true,
+						itemType: "https://schema.org/ListItem"
+					},
+					key: text,
+					className: "flex items-center"
+				}, section);
+				if (isLastLink) return listElement;
+				return /* @__PURE__ */ jsxs(Fragment, { children: [listElement, /* @__PURE__ */ jsx("li", {
+					"aria-hidden": "true",
+					className: "flex items-center",
+					children: separator
+				})] }, text);
+			})
+		})
+	});
+};
+
+//#endregion
+export { Breadcrumb };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["LinkLink: FC<LinkLinkProps>","ButtonLink: FC<ButtonButtonProps>","Span: FC<SpanProps>","Breadcrumb: FC<BreadcrumbProps>"],"sources":["../../../../src/components/Breadcrumb/index.tsx"],"sourcesContent":["'use client';\n\nimport { getIntlayer } from '@intlayer/core';\nimport type { LocalesValues } from '@intlayer/types';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { __DictionaryRegistry } from 'intlayer';\nimport { ChevronRightIcon } from 'lucide-react';\nimport { type FC, Fragment, type HTMLAttributes, type ReactNode } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { cn } from '../../utils/cn';\nimport { Button, type ButtonProps, ButtonVariant } from '../Button';\nimport { Link, LinkColor } from '../Link';\n\n/**\n * Props for LinkLink sub-component that renders breadcrumb items as links\n */\ntype LinkLinkProps = {\n  /**\n   * Position of the breadcrumb item in the list (1-based index)\n   */\n  position: number;\n  /**\n   * Locale for internationalization\n   */\n  locale?: LocalesValues;\n  /**\n   * URL to navigate to\n   */\n  href?: string;\n  /**\n   * Link color\n   */\n  color?: LinkColor | `${LinkColor}`;\n  /**\n   * Click handler\n   */\n  onClick?: () => void;\n  /**\n   * Children content\n   */\n  children?: string;\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n} & Omit<\n  HTMLAttributes<HTMLAnchorElement>,\n  'href' | 'onClick' | 'color' | 'children' | 'className'\n>;\n\n/**\n * Breadcrumb variant styles using class-variance-authority\n */\nconst breadcrumbVariants = cva('flex flex-row flex-wrap items-center text-sm', {\n  variants: {\n    size: {\n      small: 'gap-1 text-xs',\n      medium: 'gap-2 text-sm',\n      large: 'gap-3 text-base',\n    },\n    spacing: {\n      compact: 'gap-1',\n      normal: 'gap-2',\n      loose: 'gap-4',\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n    spacing: 'normal',\n  },\n});\n\n/**\n * LinkLink sub-component for breadcrumb items that navigate to other pages\n */\nconst LinkLink: FC<LinkLinkProps> = ({\n  href,\n  lang,\n  children,\n  onClick,\n  color,\n  position,\n  locale,\n  className,\n  ...props\n}) => {\n  const content = getIntlayer('breadcrumb');\n  const linkLabel = content.linkLabel;\n\n  return (\n    <>\n      <Link\n        href={href}\n        locale={locale}\n        color={color}\n        onClick={onClick}\n        itemProp=\"item\"\n        isExternalLink={false}\n        itemScope\n        itemType=\"https://schema.org/WebPage\"\n        {...props}\n        label={`${linkLabel} ${children}`}\n        itemID={href}\n      >\n        <span itemProp=\"name\">{children}</span>\n      </Link>\n      <meta itemProp=\"position\" content={position.toString()} />\n    </>\n  );\n};\n\n/**\n * Props for ButtonLink sub-component that renders breadcrumb items as interactive buttons\n */\ntype ButtonButtonProps = {\n  /**\n   * Text content for the breadcrumb button\n   */\n  children: string;\n  /**\n   * Position of the breadcrumb item in the list (1-based index)\n   */\n  position: number;\n} & Omit<ButtonProps, 'children' | 'label'>;\n\n/**\n * ButtonLink sub-component for breadcrumb items with click handlers\n */\nconst ButtonLink: FC<ButtonButtonProps> = ({\n  children: text,\n  onClick,\n  color,\n  position,\n  className,\n  ...props\n}) => {\n  const { linkLabel } = useIntlayer('breadcrumb');\n\n  return (\n    <>\n      <Button\n        onClick={onClick}\n        variant={ButtonVariant.LINK}\n        label={`${linkLabel} ${text}`}\n        color={color}\n        itemProp=\"item\"\n        {...props}\n      >\n        <span itemProp=\"name\">{text}</span>\n      </Button>\n      <meta itemProp=\"position\" content={position.toString()} />\n    </>\n  );\n};\n\n/**\n * Props for Span sub-component that renders static breadcrumb text\n */\ntype SpanProps = {\n  /**\n   * Text content for the static breadcrumb item\n   */\n  children: string;\n  /**\n   * Position of the breadcrumb item in the list (1-based index)\n   */\n  position: number;\n} & HTMLAttributes<HTMLSpanElement>;\n\n/**\n * Span sub-component for static breadcrumb text items\n */\nconst Span: FC<SpanProps> = ({ children, position, className, ...props }) => (\n  <span\n    itemProp=\"item\"\n    className={cn(\n      'inline-flex items-center',\n      'font-medium text-neutral-700',\n      'transition-colors duration-200',\n      className\n    )}\n  >\n    <span itemProp=\"name\" {...props}>\n      {children}\n    </span>\n    <meta itemProp=\"position\" content={position.toString()} />\n  </span>\n);\n\n/**\n * Detailed breadcrumb link configuration with optional href or onClick\n */\ntype DetailedBreadcrumbLink = {\n  /**\n   * URL to navigate to when the breadcrumb item is clicked\n   */\n  href?: string;\n  /**\n   * Text content to display for this breadcrumb item\n   */\n  text: string;\n  /**\n   * Custom click handler function for interactive breadcrumb items\n   */\n  onClick?: () => void;\n};\n\n/**\n * Union type representing different breadcrumb item configurations:\n * - string: Simple text breadcrumb item\n * - DetailedBreadcrumbLink: Object with href, text, and/or onClick properties\n */\nexport type BreadcrumbLink = string | DetailedBreadcrumbLink;\n\nexport type BreadcrumbProps = {\n  /**\n   * Array of breadcrumb items\n   */\n  links: BreadcrumbLink[];\n  /**\n   * Color scheme for breadcrumb links\n   * @default LinkColor.TEXT\n   */\n  color?: LinkColor | `${LinkColor}`;\n  /**\n   * Locale for internationalization\n   */\n  locale?: LocalesValues;\n  /**\n   * Element type for ARIA current attribute\n   * @default 'page'\n   */\n  elementType?: 'page' | 'location';\n  /**\n   * Custom separator between breadcrumb items\n   * @default ChevronRightIcon\n   */\n  separator?: ReactNode;\n  /**\n   * ARIA label for breadcrumb navigation\n   * @default 'breadcrumb'\n   */\n  ariaLabel?: string;\n  /**\n   * Whether to include structured data markup\n   * @default true\n   */\n  includeStructuredData?: boolean;\n  /**\n   * Maximum number of breadcrumb items to show before truncation\n   */\n  maxItems?: number;\n} & VariantProps<typeof breadcrumbVariants> &\n  HTMLAttributes<HTMLOListElement>;\n\n/**\n * Breadcrumb component providing navigational context with accessibility features\n *\n * Features:\n * - Supports links, buttons, and static text elements\n * - Full keyboard navigation support\n * - ARIA attributes for screen readers\n * - Schema.org structured data for SEO\n * - Customizable separators and styling\n * - Internationalization support\n * - Responsive design variants\n *\n * @example\n * ```tsx\n * <Breadcrumb\n *   links={[\n *     'Home',\n *     { href: '/products', text: 'Products' },\n *     { onClick: handleCategory, text: 'Electronics' },\n *     'Smartphones'\n *   ]}\n *   size=\"medium\"\n *   ariaLabel=\"Product navigation\"\n * />\n * ```\n */\nexport const Breadcrumb: FC<BreadcrumbProps> = ({\n  links,\n  className,\n  color = LinkColor.TEXT,\n  locale,\n  elementType = 'page',\n  separator = <ChevronRightIcon size={10} />,\n  ariaLabel = 'breadcrumb',\n  includeStructuredData = true,\n  maxItems,\n  size,\n  spacing,\n  ...props\n}) => {\n  const displayLinks =\n    maxItems && links.length > maxItems\n      ? [...links.slice(0, 1), '...', ...links.slice(-(maxItems - 2))]\n      : links;\n\n  return (\n    <nav aria-label={ariaLabel}>\n      <ol\n        className={cn(breadcrumbVariants({ size, spacing }), className)}\n        {...(includeStructuredData && {\n          itemScope: true,\n          itemType: 'http://schema.org/BreadcrumbList',\n        })}\n        {...props}\n      >\n        {displayLinks.map((link, index) => {\n          const isLastLink = index === displayLinks.length - 1;\n          const isLink =\n            typeof link === 'object' && typeof link.href === 'string';\n          const isButton =\n            typeof link === 'object' && typeof link.onClick === 'function';\n          const isActive = index === displayLinks.length - 1;\n          const ariaCurrent = isActive ? elementType : undefined;\n          const isTruncated = link === '...';\n\n          const text = (link as DetailedBreadcrumbLink).text ?? link;\n\n          if (isTruncated) {\n            return (\n              <Fragment key={`truncated-${text}`}>\n                <li className=\"flex items-center\" aria-hidden=\"true\">\n                  <span className=\"text-neutral-500\">…</span>\n                </li>\n                {!isLastLink && (\n                  <li aria-hidden=\"true\" className=\"flex items-center\">\n                    {separator}\n                  </li>\n                )}\n              </Fragment>\n            );\n          }\n\n          let section = (\n            <Span\n              key={text}\n              position={index + 1}\n              aria-current={ariaCurrent}\n              className={cn(\n                'transition-colors duration-200',\n                isActive && 'text-neutral-900'\n              )}\n            >\n              {text}\n            </Span>\n          );\n\n          if (isLink) {\n            section = (\n              <LinkLink\n                key={text}\n                href={link.href!}\n                color={color}\n                position={index + 1}\n                locale={locale}\n                aria-current={ariaCurrent}\n                className={cn(isActive && 'cursor-default text-neutral-900')}\n              >\n                {text}\n              </LinkLink>\n            );\n          } else if (isButton) {\n            section = (\n              <ButtonLink\n                key={text}\n                onClick={link.onClick!}\n                color={color}\n                position={index + 1}\n                aria-current={ariaCurrent}\n                className={cn(isActive && 'cursor-default text-neutral-900')}\n              >\n                {text}\n              </ButtonLink>\n            );\n          }\n\n          const listElement = (\n            <li\n              {...(includeStructuredData && {\n                itemProp: 'itemListElement',\n                itemScope: true,\n                itemType: 'https://schema.org/ListItem',\n              })}\n              key={text}\n              className=\"flex items-center\"\n            >\n              {section}\n            </li>\n          );\n\n          if (isLastLink) {\n            return listElement;\n          }\n\n          return (\n            <Fragment key={text}>\n              {listElement}\n              <li aria-hidden=\"true\" className=\"flex items-center\">\n                {separator}\n              </li>\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/Button/Button.mjs

@@ -0,0 +1,263 @@
+import { Loader } from "../Loader/index.mjs";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Button/Button.tsx
+/**
+* Button size variants for different use cases
+*/
+let ButtonSize = /* @__PURE__ */ function(ButtonSize$1) {
+	ButtonSize$1["SM"] = "sm";
+	ButtonSize$1["MD"] = "md";
+	ButtonSize$1["LG"] = "lg";
+	ButtonSize$1["XL"] = "xl";
+	ButtonSize$1["ICON_SM"] = "icon-sm";
+	ButtonSize$1["ICON_MD"] = "icon-md";
+	ButtonSize$1["ICON_LG"] = "icon-lg";
+	ButtonSize$1["ICON_XL"] = "icon-xl";
+	return ButtonSize$1;
+}({});
+/**
+* Icon positioning within the button
+*/
+let ButtonIconPosition = /* @__PURE__ */ function(ButtonIconPosition$1) {
+	ButtonIconPosition$1["LEFT"] = "left";
+	ButtonIconPosition$1["RIGHT"] = "right";
+	return ButtonIconPosition$1;
+}({});
+const buttonIconVariants = cva("", {
+	variants: {
+		size: {
+			[`${ButtonSize.SM}`]: "-translate-y-1/2 absolute top-1/2 size-3",
+			[`${ButtonSize.MD}`]: "-translate-y-1/2 absolute top-1/2 size-4",
+			[`${ButtonSize.LG}`]: "-translate-y-1/2 absolute top-1/2 size-5",
+			[`${ButtonSize.XL}`]: "-translate-y-1/2 absolute top-1/2 size-6",
+			[`${ButtonSize.ICON_SM}`]: "size-3",
+			[`${ButtonSize.ICON_MD}`]: "size-4",
+			[`${ButtonSize.ICON_LG}`]: "size-5",
+			[`${ButtonSize.ICON_XL}`]: "size-6"
+		},
+		position: {
+			[`${ButtonIconPosition.LEFT}`]: "left-3",
+			[`${ButtonIconPosition.RIGHT}`]: "right-3"
+		}
+	},
+	defaultVariants: { size: ButtonSize.MD }
+});
+/**
+* Button visual style variants
+*/
+let ButtonVariant = /* @__PURE__ */ function(ButtonVariant$1) {
+	ButtonVariant$1["DEFAULT"] = "default";
+	ButtonVariant$1["NONE"] = "none";
+	ButtonVariant$1["OUTLINE"] = "outline";
+	ButtonVariant$1["LINK"] = "link";
+	ButtonVariant$1["INVISIBLE_LINK"] = "invisible-link";
+	ButtonVariant$1["HOVERABLE"] = "hoverable";
+	ButtonVariant$1["INPUT"] = "input";
+	return ButtonVariant$1;
+}({});
+/**
+* Button color themes that work with the design system
+*/
+let ButtonColor = /* @__PURE__ */ function(ButtonColor$1) {
+	ButtonColor$1["PRIMARY"] = "primary";
+	ButtonColor$1["SECONDARY"] = "secondary";
+	ButtonColor$1["DESTRUCTIVE"] = "destructive";
+	ButtonColor$1["NEUTRAL"] = "neutral";
+	ButtonColor$1["LIGHT"] = "light";
+	ButtonColor$1["DARK"] = "dark";
+	ButtonColor$1["TEXT"] = "text";
+	ButtonColor$1["TEXT_INVERSE"] = "text-inverse";
+	ButtonColor$1["ERROR"] = "error";
+	ButtonColor$1["SUCCESS"] = "success";
+	ButtonColor$1["CUSTOM"] = "custom";
+	return ButtonColor$1;
+}({});
+/**
+* Text alignment options for button content
+*/
+let ButtonTextAlign = /* @__PURE__ */ function(ButtonTextAlign$1) {
+	ButtonTextAlign$1["LEFT"] = "left";
+	ButtonTextAlign$1["CENTER"] = "center";
+	ButtonTextAlign$1["RIGHT"] = "right";
+	return ButtonTextAlign$1;
+}({});
+/**
+* Enhanced button variants with improved accessibility and focus states
+*/
+const buttonVariants = cva("relative cursor-pointer truncate whitespace-nowrap font-medium transition-all duration-200 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50", {
+	variants: {
+		size: {
+			[`${ButtonSize.SM}`]: "min-h-7 px-3 text-xs max-md:py-1",
+			[`${ButtonSize.MD}`]: "min-h-8 px-6 text-sm max-md:py-2",
+			[`${ButtonSize.LG}`]: "min-h-10 px-8 text-lg max-md:py-3",
+			[`${ButtonSize.XL}`]: "min-h-11 px-10 text-xl max-md:py-4",
+			[`${ButtonSize.ICON_SM}`]: "p-1.5",
+			[`${ButtonSize.ICON_MD}`]: "p-1.5",
+			[`${ButtonSize.ICON_LG}`]: "p-2",
+			[`${ButtonSize.ICON_XL}`]: "p-3"
+		},
+		color: {
+			[`${ButtonColor.PRIMARY}`]: "text-primary *:text-text-light focus:ring-primary-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-primary-500/50",
+			[`${ButtonColor.SECONDARY}`]: "text-secondary *:text-text-light focus:ring-secondary-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-secondary-500/50",
+			[`${ButtonColor.DESTRUCTIVE}`]: "text-destructive *:text-text-light focus:ring-destructive-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-destructive-500/50",
+			[`${ButtonColor.NEUTRAL}`]: "text-neutral *:text-text-light focus:ring-neutral-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-neutral-500/50",
+			[`${ButtonColor.LIGHT}`]: "text-white *:text-text-light focus:ring-white/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-white/50",
+			[`${ButtonColor.DARK}`]: "text-neutral-800 *:text-text-light focus:ring-neutral-800/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-neutral-800/50",
+			[`${ButtonColor.TEXT}`]: "text-text *:text-text-opposite focus:ring-neutral-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-neutral-500/50",
+			[`${ButtonColor.TEXT_INVERSE}`]: "text-text-opposite *:text-text focus:ring-neutral-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-neutral-500/50",
+			[`${ButtonColor.ERROR}`]: "text-error *:text-text-light focus:ring-error/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-error/50",
+			[`${ButtonColor.SUCCESS}`]: "text-success *:text-text-light focus:ring-success/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-success/50",
+			[`${ButtonColor.CUSTOM}`]: "focus:ring-primary-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-primary-500/50"
+		},
+		variant: {
+			[`${ButtonVariant.DEFAULT}`]: "rounded-lg bg-current hover:bg-current/90",
+			[`${ButtonVariant.NONE}`]: "border-none bg-current/0 text-inherit hover:bg-current/0",
+			[`${ButtonVariant.OUTLINE}`]: "*:!text-current rounded-lg border-[1.5px] border-current bg-current/0 hover:bg-current/30",
+			[`${ButtonVariant.LINK}`]: "*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline",
+			[`${ButtonVariant.INVISIBLE_LINK}`]: "*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent",
+			[`${ButtonVariant.HOVERABLE}`]: "*:!text-current rounded-lg border-none bg-current/0 transition hover:bg-current/10 aria-[current]:bg-current/5",
+			[`${ButtonVariant.INPUT}`]: [
+				"*:!text-current w-full select-text resize-none rounded-xl border-2 bg-input-background text-input-text text-sm shadow-none outline-0 transition-all",
+				"border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]",
+				"aria-[invalid=true]:border-error",
+				"disabled:opacity-50"
+			]
+		},
+		textAlign: {
+			[`${ButtonTextAlign.LEFT}`]: "text-left",
+			[`${ButtonTextAlign.CENTER}`]: "text-center",
+			[`${ButtonTextAlign.RIGHT}`]: "text-right"
+		},
+		isFullWidth: {
+			true: "w-full",
+			false: ""
+		},
+		hasIconLeft: {
+			true: "px-12",
+			false: ""
+		},
+		hasIconRight: {
+			true: "pr-8",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		variant: ButtonVariant.DEFAULT,
+		size: ButtonSize.MD,
+		color: ButtonColor.CUSTOM,
+		textAlign: ButtonTextAlign.CENTER,
+		isFullWidth: false,
+		hasIconRight: false,
+		hasIconLeft: false
+	}
+});
+/**
+* Button Component - A comprehensive, accessible button component
+*
+* Features:
+* - Full accessibility compliance with ARIA attributes
+* - Multiple variants and sizes for different use cases
+* - Icon support (left and right positioning)
+* - Loading states with spinner
+* - Keyboard navigation support
+* - Focus management with visible indicators
+* - Responsive design adaptations
+*
+* @example
+* ```tsx
+* // Basic button
+* <Button label="Click me">Click me</Button>
+*
+* // Button with icon and loading state
+* <Button
+*   label="Save document"
+*   Icon={SaveIcon}
+*   isLoading={saving}
+*   disabled={!hasChanges}
+* >
+*   Save
+* </Button>
+*
+* // Destructive action button
+* <Button
+*   variant={ButtonVariant.OUTLINE}
+*   color={ButtonColor.DESTRUCTIVE}
+*   label="Delete item permanently"
+*   aria-describedby="delete-warning"
+* >
+*   Delete
+* </Button>
+* ```
+*/
+const Button = ({ variant, size, color, children, Icon, IconRight, iconClassName, isLoading = false, isActive = false, isSelected = false, isFullWidth = false, textAlign, disabled, label, className, type = "button", "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, "aria-pressed": ariaPressed,...props }) => {
+	const isLink = variant === ButtonVariant.LINK || variant === ButtonVariant.INVISIBLE_LINK;
+	const isIconOnly = !children && (Icon || IconRight);
+	const accessibilityProps = {
+		"aria-label": isIconOnly ? label : void 0,
+		"aria-labelledby": !isIconOnly ? void 0 : void 0,
+		"aria-describedby": ariaDescribedBy,
+		"aria-expanded": ariaExpanded,
+		"aria-haspopup": ariaHasPopup,
+		"aria-pressed": isActive !== void 0 ? isActive : ariaPressed,
+		"aria-busy": isLoading,
+		"aria-current": isActive ? "page" : void 0,
+		"aria-disabled": disabled || isLoading,
+		"aria-selected": isSelected
+	};
+	return /* @__PURE__ */ jsxs("button", {
+		disabled: isLoading || disabled,
+		role: isLink ? "link" : "button",
+		type,
+		className: buttonVariants({
+			variant,
+			size,
+			color,
+			isFullWidth,
+			textAlign: textAlign ?? (IconRight ? ButtonTextAlign.LEFT : ButtonTextAlign.CENTER),
+			hasIconLeft: Boolean(typeof children !== "undefined" && (typeof Icon !== "undefined" || isLoading)),
+			hasIconRight: Boolean(typeof children !== "undefined" && typeof IconRight !== "undefined"),
+			className
+		}),
+		...accessibilityProps,
+		...props,
+		children: [
+			Icon && !isLoading && /* @__PURE__ */ jsx(Icon, {
+				className: buttonIconVariants({
+					size,
+					className: iconClassName,
+					position: ButtonIconPosition.LEFT
+				}),
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ jsx(Loader, {
+				className: buttonIconVariants({
+					size,
+					className: iconClassName,
+					position: ButtonIconPosition.LEFT
+				}),
+				isLoading,
+				"aria-hidden": "true",
+				"data-testid": "loader"
+			}),
+			children && /* @__PURE__ */ jsx("span", { children }),
+			!children && isIconOnly && /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: label
+			}),
+			IconRight && /* @__PURE__ */ jsx(IconRight, {
+				className: buttonIconVariants({
+					size,
+					className: iconClassName,
+					position: ButtonIconPosition.RIGHT
+				}),
+				"aria-hidden": "true"
+			})
+		]
+	});
+};
+
+//#endregion
+export { Button, ButtonColor, ButtonIconPosition, ButtonSize, ButtonTextAlign, ButtonVariant };
+//# sourceMappingURL=Button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.mjs","names":["Button: FC<ButtonProps>"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport type { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react';\nimport { Loader } from '../Loader';\n\n/**\n * Button size variants for different use cases\n */\nexport enum ButtonSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  ICON_SM = 'icon-sm',\n  ICON_MD = 'icon-md',\n  ICON_LG = 'icon-lg',\n  ICON_XL = 'icon-xl',\n}\n\n/**\n * Icon positioning within the button\n */\nexport enum ButtonIconPosition {\n  LEFT = 'left',\n  RIGHT = 'right',\n}\n\nconst buttonIconVariants = cva('', {\n  variants: {\n    size: {\n      [`${ButtonSize.SM}`]: '-translate-y-1/2 absolute top-1/2 size-3',\n      [`${ButtonSize.MD}`]: '-translate-y-1/2 absolute top-1/2 size-4',\n      [`${ButtonSize.LG}`]: '-translate-y-1/2 absolute top-1/2 size-5',\n      [`${ButtonSize.XL}`]: '-translate-y-1/2 absolute top-1/2 size-6',\n      [`${ButtonSize.ICON_SM}`]: 'size-3',\n      [`${ButtonSize.ICON_MD}`]: 'size-4',\n      [`${ButtonSize.ICON_LG}`]: 'size-5',\n      [`${ButtonSize.ICON_XL}`]: 'size-6',\n    },\n    position: {\n      [`${ButtonIconPosition.LEFT}`]: 'left-3',\n      [`${ButtonIconPosition.RIGHT}`]: 'right-3',\n    },\n  },\n  defaultVariants: {\n    size: ButtonSize.MD,\n  },\n});\n\n/**\n * Button visual style variants\n */\nexport enum ButtonVariant {\n  DEFAULT = 'default',\n  NONE = 'none',\n  OUTLINE = 'outline',\n  LINK = 'link',\n  INVISIBLE_LINK = 'invisible-link',\n  HOVERABLE = 'hoverable',\n  INPUT = 'input',\n}\n\n/**\n * Button color themes that work with the design system\n */\nexport enum ButtonColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n  TEXT_INVERSE = 'text-inverse',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  CUSTOM = 'custom',\n}\n\n/**\n * Text alignment options for button content\n */\nexport enum ButtonTextAlign {\n  LEFT = 'left',\n  CENTER = 'center',\n  RIGHT = 'right',\n}\n\n/**\n * Enhanced button variants with improved accessibility and focus states\n */\nconst buttonVariants = cva(\n  'relative cursor-pointer truncate whitespace-nowrap font-medium transition-all duration-200 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      size: {\n        [`${ButtonSize.SM}`]: 'min-h-7 px-3 text-xs max-md:py-1',\n        [`${ButtonSize.MD}`]: 'min-h-8 px-6 text-sm max-md:py-2',\n        [`${ButtonSize.LG}`]: 'min-h-10 px-8 text-lg max-md:py-3',\n        [`${ButtonSize.XL}`]: 'min-h-11 px-10 text-xl max-md:py-4',\n        [`${ButtonSize.ICON_SM}`]: 'p-1.5',\n        [`${ButtonSize.ICON_MD}`]: 'p-1.5',\n        [`${ButtonSize.ICON_LG}`]: 'p-2',\n        [`${ButtonSize.ICON_XL}`]: 'p-3',\n      },\n      color: {\n        [`${ButtonColor.PRIMARY}`]:\n          'text-primary *:text-text-light focus:ring-primary-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-primary-500/50',\n        [`${ButtonColor.SECONDARY}`]:\n          'text-secondary *:text-text-light focus:ring-secondary-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-secondary-500/50',\n        [`${ButtonColor.DESTRUCTIVE}`]:\n          'text-destructive *:text-text-light focus:ring-destructive-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-destructive-500/50',\n        [`${ButtonColor.NEUTRAL}`]:\n          'text-neutral *:text-text-light focus:ring-neutral-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-neutral-500/50',\n        [`${ButtonColor.LIGHT}`]:\n          'text-white *:text-text-light focus:ring-white/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-white/50',\n        [`${ButtonColor.DARK}`]:\n          'text-neutral-800 *:text-text-light focus:ring-neutral-800/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-neutral-800/50',\n        [`${ButtonColor.TEXT}`]:\n          'text-text *:text-text-opposite focus:ring-neutral-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-neutral-500/50',\n        [`${ButtonColor.TEXT_INVERSE}`]:\n          'text-text-opposite *:text-text focus:ring-neutral-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-neutral-500/50',\n        [`${ButtonColor.ERROR}`]:\n          'text-error *:text-text-light focus:ring-error/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-error/50',\n        [`${ButtonColor.SUCCESS}`]:\n          'text-success *:text-text-light focus:ring-success/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-success/50',\n        [`${ButtonColor.CUSTOM}`]:\n          'focus:ring-primary-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-primary-500/50',\n      },\n      variant: {\n        [`${ButtonVariant.DEFAULT}`]:\n          'rounded-lg bg-current hover:bg-current/90',\n        [`${ButtonVariant.NONE}`]:\n          'border-none bg-current/0 text-inherit hover:bg-current/0',\n        [`${ButtonVariant.OUTLINE}`]:\n          '*:!text-current rounded-lg border-[1.5px] border-current bg-current/0 hover:bg-current/30',\n        [`${ButtonVariant.LINK}`]:\n          '*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline',\n        [`${ButtonVariant.INVISIBLE_LINK}`]:\n          '*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent',\n        [`${ButtonVariant.HOVERABLE}`]:\n          '*:!text-current rounded-lg border-none bg-current/0 transition hover:bg-current/10 aria-[current]:bg-current/5',\n        [`${ButtonVariant.INPUT}`]: [\n          '*:!text-current w-full select-text resize-none rounded-xl border-2 bg-input-background text-input-text text-sm shadow-none outline-0 transition-all',\n          'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n          'aria-[invalid=true]:border-error',\n          'disabled:opacity-50',\n        ],\n      },\n\n      textAlign: {\n        [`${ButtonTextAlign.LEFT}`]: 'text-left',\n        [`${ButtonTextAlign.CENTER}`]: 'text-center',\n        [`${ButtonTextAlign.RIGHT}`]: 'text-right',\n      },\n\n      isFullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n\n      hasIconLeft: {\n        true: 'px-12',\n        false: '',\n      },\n      hasIconRight: {\n        true: 'pr-8',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: ButtonVariant.DEFAULT,\n      size: ButtonSize.MD,\n      color: ButtonColor.CUSTOM,\n      textAlign: ButtonTextAlign.CENTER,\n      isFullWidth: false,\n      hasIconRight: false,\n      hasIconLeft: false,\n    },\n  }\n);\n\n/**\n * Enhanced Button component props with comprehensive type safety and accessibility features\n */\nexport type ButtonProps = DetailedHTMLProps<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n> &\n  VariantProps<typeof buttonVariants> & {\n    /**\n     * Accessible label for screen readers and assistive technologies.\n     * This is required for accessibility compliance.\n     */\n    label: string;\n\n    /**\n     * Optional icon to display on the left side of the button\n     */\n    Icon?: FC | LucideIcon;\n\n    /**\n     * Optional icon to display on the right side of the button\n     */\n    IconRight?: FC | LucideIcon;\n\n    /**\n     * Additional CSS classes for icon styling\n     */\n    iconClassName?: string;\n\n    /**\n     * Shows loading spinner and disables button interaction when true\n     */\n    isLoading?: boolean;\n\n    /**\n     * Marks the button as active (useful for navigation or toggle states)\n     */\n    isActive?: boolean;\n\n    /**\n     * Marks the button as selected\n     */\n    isSelected?: boolean;\n\n    /**\n     * Makes the button span the full width of its container\n     */\n    isFullWidth?: boolean;\n\n    /**\n     * Additional description for complex buttons (optional)\n     */\n    'aria-describedby'?: string;\n\n    /**\n     * Expanded state for collapsible sections (optional)\n     */\n    'aria-expanded'?: boolean;\n\n    /**\n     * Controls whether the button has popup/menu (optional)\n     */\n    'aria-haspopup'?:\n      | boolean\n      | 'true'\n      | 'false'\n      | 'menu'\n      | 'listbox'\n      | 'tree'\n      | 'grid'\n      | 'dialog';\n\n    /**\n     * Indicates if button controls are currently pressed (for toggle buttons)\n     */\n    'aria-pressed'?: boolean;\n  };\n\n/**\n * Button Component - A comprehensive, accessible button component\n *\n * Features:\n * - Full accessibility compliance with ARIA attributes\n * - Multiple variants and sizes for different use cases\n * - Icon support (left and right positioning)\n * - Loading states with spinner\n * - Keyboard navigation support\n * - Focus management with visible indicators\n * - Responsive design adaptations\n *\n * @example\n * ```tsx\n * // Basic button\n * <Button label=\"Click me\">Click me</Button>\n *\n * // Button with icon and loading state\n * <Button\n *   label=\"Save document\"\n *   Icon={SaveIcon}\n *   isLoading={saving}\n *   disabled={!hasChanges}\n * >\n *   Save\n * </Button>\n *\n * // Destructive action button\n * <Button\n *   variant={ButtonVariant.OUTLINE}\n *   color={ButtonColor.DESTRUCTIVE}\n *   label=\"Delete item permanently\"\n *   aria-describedby=\"delete-warning\"\n * >\n *   Delete\n * </Button>\n * ```\n */\nexport const Button: FC<ButtonProps> = ({\n  variant,\n  size,\n  color,\n  children,\n  Icon,\n  IconRight,\n  iconClassName,\n  isLoading = false,\n  isActive = false,\n  isSelected = false,\n  isFullWidth = false,\n  textAlign,\n  disabled,\n  label,\n  className,\n  type = 'button',\n  'aria-describedby': ariaDescribedBy,\n  'aria-expanded': ariaExpanded,\n  'aria-haspopup': ariaHasPopup,\n  'aria-pressed': ariaPressed,\n\n  ...props\n}) => {\n  const isLink =\n    variant === ButtonVariant.LINK || variant === ButtonVariant.INVISIBLE_LINK;\n  const isIconOnly = !children && (Icon || IconRight);\n\n  const accessibilityProps = {\n    'aria-label': isIconOnly ? label : undefined,\n    'aria-labelledby': !isIconOnly ? undefined : undefined,\n    'aria-describedby': ariaDescribedBy,\n    'aria-expanded': ariaExpanded,\n    'aria-haspopup': ariaHasPopup,\n    'aria-pressed': isActive !== undefined ? isActive : ariaPressed,\n    'aria-busy': isLoading,\n    'aria-current': (isActive ? 'page' : undefined) as 'page' | undefined,\n    'aria-disabled': disabled || isLoading,\n    'aria-selected': isSelected,\n  };\n\n  return (\n    <button\n      disabled={isLoading || disabled}\n      role={isLink ? 'link' : 'button'}\n      type={type}\n      className={buttonVariants({\n        variant,\n        size,\n        color,\n        isFullWidth,\n        textAlign:\n          textAlign ??\n          (IconRight ? ButtonTextAlign.LEFT : ButtonTextAlign.CENTER),\n        hasIconLeft: Boolean(\n          typeof children !== 'undefined' &&\n            (typeof Icon !== 'undefined' || isLoading)\n        ),\n        hasIconRight: Boolean(\n          typeof children !== 'undefined' && typeof IconRight !== 'undefined'\n        ),\n        className,\n      })}\n      {...accessibilityProps}\n      {...props}\n    >\n      {Icon && !isLoading && (\n        <Icon\n          className={buttonIconVariants({\n            size,\n            className: iconClassName,\n            position: ButtonIconPosition.LEFT,\n          })}\n          aria-hidden=\"true\"\n        />\n      )}\n\n      <Loader\n        className={buttonIconVariants({\n          size,\n          className: iconClassName,\n          position: ButtonIconPosition.LEFT,\n        })}\n        isLoading={isLoading}\n        aria-hidden=\"true\"\n        data-testid=\"loader\"\n      />\n\n      {children && <span>{children}</span>}\n\n      {!children && isIconOnly && <span className=\"sr-only\">{label}</span>}\n\n      {IconRight && (\n        <IconRight\n          className={buttonIconVariants({\n            size,\n            className: iconClassName,\n            position: ButtonIconPosition.RIGHT,\n          })}\n          aria-hidden=\"true\"\n        />\n      )}\n    </button>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+import { Button, ButtonColor, ButtonIconPosition, ButtonSize, ButtonTextAlign, ButtonVariant } from "./Button.mjs";
+
+export { Button, ButtonColor, ButtonIconPosition, ButtonSize, ButtonTextAlign, ButtonVariant };

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

@@ -0,0 +1,44 @@
+'use client';
+
+
+import { useCallback, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ClickOutsideDiv/index.tsx
+const ClickOutsideDiv = ({ children, onClickOutSide, listenForEscape = false, disabled = false,...props }) => {
+	const divRef = useRef(null);
+	const handleClickOutside = useCallback((event) => {
+		if (disabled) return;
+		if (divRef.current && !divRef.current.contains(event.target)) onClickOutSide();
+	}, [onClickOutSide, disabled]);
+	const handleKeyDown = useCallback((event) => {
+		if (disabled || !listenForEscape) return;
+		if (event.key === "Escape") onClickOutSide();
+	}, [
+		onClickOutSide,
+		disabled,
+		listenForEscape
+	]);
+	useEffect(() => {
+		document.addEventListener("mousedown", handleClickOutside, { passive: true });
+		if (listenForEscape) document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+			if (listenForEscape) document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [
+		handleClickOutside,
+		handleKeyDown,
+		listenForEscape
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: divRef,
+		...props,
+		role: props.role || "region",
+		children
+	});
+};
+
+//#endregion
+export { ClickOutsideDiv };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["ClickOutsideDiv: FC<ClickOutsideDivProps>"],"sources":["../../../../src/components/ClickOutsideDiv/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\n\nexport type ClickOutsideDivProps = PropsWithChildren<{\n  /**\n   * Callback function called when a click occurs outside the component\n   */\n  onClickOutSide: () => void;\n  /**\n   * Whether to listen for Escape key presses\n   * @default false\n   */\n  listenForEscape?: boolean;\n  /**\n   * Whether the component is disabled (won't trigger onClickOutSide)\n   * @default false\n   */\n  disabled?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nexport const ClickOutsideDiv: FC<ClickOutsideDivProps> = ({\n  children,\n  onClickOutSide,\n  listenForEscape = false,\n  disabled = false,\n  ...props\n}) => {\n  const divRef = useRef<HTMLDivElement>(null);\n\n  const handleClickOutside = useCallback(\n    (event: MouseEvent) => {\n      if (disabled) return;\n\n      // If clicking outside of the referenced element, call onClickOutSide\n      if (divRef.current && !divRef.current.contains(event.target as Node)) {\n        onClickOutSide();\n      }\n    },\n    [onClickOutSide, disabled]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (disabled || !listenForEscape) return;\n\n      if (event.key === 'Escape') {\n        onClickOutSide();\n      }\n    },\n    [onClickOutSide, disabled, listenForEscape]\n  );\n\n  useEffect(() => {\n    // Attach the event listeners\n    document.addEventListener('mousedown', handleClickOutside, {\n      passive: true,\n    });\n\n    if (listenForEscape) {\n      document.addEventListener('keydown', handleKeyDown);\n    }\n\n    // Clean up on unmount\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      if (listenForEscape) {\n        document.removeEventListener('keydown', handleKeyDown);\n      }\n    };\n  }, [handleClickOutside, handleKeyDown, listenForEscape]);\n\n  return (\n    <div\n      ref={divRef}\n      {...props}\n      // Add role for better accessibility when used as a container\n      role={props.role || 'region'}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AA6BA,MAAaA,mBAA6C,EACxD,UACA,gBACA,kBAAkB,OAClB,WAAW,MACX,GAAG,YACC;CACJ,MAAM,SAAS,OAAuB,KAAK;CAE3C,MAAM,qBAAqB,aACxB,UAAsB;AACrB,MAAI,SAAU;AAGd,MAAI,OAAO,WAAW,CAAC,OAAO,QAAQ,SAAS,MAAM,OAAe,CAClE,iBAAgB;IAGpB,CAAC,gBAAgB,SAAS,CAC3B;CAED,MAAM,gBAAgB,aACnB,UAAyB;AACxB,MAAI,YAAY,CAAC,gBAAiB;AAElC,MAAI,MAAM,QAAQ,SAChB,iBAAgB;IAGpB;EAAC;EAAgB;EAAU;EAAgB,CAC5C;AAED,iBAAgB;AAEd,WAAS,iBAAiB,aAAa,oBAAoB,EACzD,SAAS,MACV,CAAC;AAEF,MAAI,gBACF,UAAS,iBAAiB,WAAW,cAAc;AAIrD,eAAa;AACX,YAAS,oBAAoB,aAAa,mBAAmB;AAC7D,OAAI,gBACF,UAAS,oBAAoB,WAAW,cAAc;;IAGzD;EAAC;EAAoB;EAAe;EAAgB,CAAC;AAExD,QACE,oBAAC;EACC,KAAK;EACL,GAAI;EAEJ,MAAM,MAAM,QAAQ;EAEnB;GACG"}