@lax-wp/design-system 0.13.33 → 0.13.35

package/dist/components/data-display/tag/Tag.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs.js","sources":["../../../../src/components/data-display/tag/Tag.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, type CSSProperties, type Ref } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { CloseIcon } from \"../../icons/CloseIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\n\n/**\n * Available tag size options\n */\nexport type TagSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n/**\n * Available color names for tags\n */\nexport type TagColor =\n  | \"primary\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"neutral\"\n  | \"red\"\n  | \"green\"\n  | \"blue\"\n  | \"teal\"\n  | \"yellow\"\n  | \"orange\"\n  | \"peach\"\n  | \"purple\"\n  | \"navy\"\n  | \"gray\"\n  | \"grey\";\n\nexport type ThemeMode = \"light\" | \"dark\";\n\n/**\n * Upload handler function type\n */\nexport type UploadHandler = (file: File) => void | Promise<void>;\n\n/**\n * Props for the Tag component\n */\nexport interface TagProps {\n  /** The text content to display */\n  label: string;\n  /** Router path or external URL */\n  href?: string;\n  /** Color name or hex color value (example: #3B82F6 or red) */\n  color?: string;\n  /** Size variant */\n  size?: TagSize;\n  /** Additional CSS classes */\n  className?: string;\n  /** Click handler for the tag */\n  onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Mouse down handler */\n  onMouseDown?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Maximum character length before truncation */\n  truncate?: number;\n  /** Treat `color` as a hex color string (e.g. `#3B82F6` or `3b82f6`). When true, the value is applied as a hex regardless of named-color matches. */\n  isHashColor?: boolean;\n  /** Theme mode */\n  theme?: ThemeMode;\n  /** Icon to display before the label */\n  icon?: React.ReactNode;\n  /** Whether the tag is removable (shows close button) */\n  removable?: boolean;\n  /** Handler for remove button click */\n  onRemove?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Upload handler function */\n  onUpload?: UploadHandler;\n  /** Whether the tag accepts file uploads */\n  acceptsUpload?: boolean;\n  /** Whether to show a tooltip with the label on hover */\n  tooltip?: boolean;\n  /** Custom aria-label for accessibility */\n  \"aria-label\"?: string;\n  /** ARIA role override */\n  role?: React.AriaRole;\n}\n\n/**\n * Tag component displays labels with customizable colors and styling\n *\n * @example\n * ```tsx\n * <Tag label=\"React\" color=\"blue\" size=\"md\" />\n * <Tag label=\"TypeScript\" color=\"#3178c6\" isHashColor />\n * <Tag label=\"Removable\" removable onRemove={handleRemove} />\n * <Tag label=\"Upload\" acceptsUpload onUpload={handleUpload} />\n * ```\n */\nconst TAG_COLOR_CLASSES: Record<TagColor, string> = {\n  primary: \"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400\",\n  success: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n  warning: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n  error: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n  neutral: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  red: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n  green: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n  blue: \"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300\",\n  teal: \"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300\",\n  orange: \"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300\",\n  peach: \"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300\",\n  navy: \"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300\",\n  gray: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  grey: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  yellow: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n  purple: \"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300\",\n};\n\nconst HEX_COLOR_PATTERN = /^#[0-9a-fA-F]{6}$/;\nconst EXTERNAL_HREF_PATTERN = /^(?:[a-z][a-z\\d+\\-.]*:|\\/\\/)/i;\n\nconst getColorClasses = (color?: string, isHexColor?: boolean): string => {\n  if (isHexColor) return \"\";\n  if (!color) return TAG_COLOR_CLASSES.primary;\n  return TAG_COLOR_CLASSES[color.toLowerCase() as TagColor] ?? TAG_COLOR_CLASSES.primary;\n};\n\n/**\n * Normalize a 6-digit hex color string to lowercase `#rrggbb`.\n * Returns `undefined` if the value isn't a valid 6-digit hex.\n */\nconst normalizeHex = (value: string): string | undefined => {\n  const trimmed = value.trim().toLowerCase();\n  return HEX_COLOR_PATTERN.test(trimmed) ? trimmed : undefined;\n};\n\nconst isExternalHref = (href: string): boolean => EXTERNAL_HREF_PATTERN.test(href);\n\n/**\n * Get size-based styling classes\n */\nconst getSizeClasses = (size: TagSize): string => {\n  switch (size) {\n    case \"lg\":\n      return \"text-[14px] leading-[20px] px-1.5 border rounded-md\";\n    case \"sm\":\n      return \"text-[10px] leading-[15px] px-1 border-[0.5px] rounded\";\n    default: // md\n      return \"text-[12px] leading-[18px] px-1.5 border rounded-md\";\n  }\n};\n\nexport const Tag = forwardRef<HTMLElement, TagProps>(\n  (\n    {\n      label,\n      href,\n      color,\n      size = 'md',\n      className,\n      onClick,\n      onMouseDown,\n      truncate,\n      isHashColor = false,\n      theme,\n      icon,\n      removable = false,\n      onRemove,\n      onUpload,\n      acceptsUpload = false,\n      tooltip = false,\n      \"aria-label\": ariaLabel,\n      role,\n    },\n    ref\n  ) => {\n    const normalizedHex =\n      typeof color === \"string\" && (isHashColor || HEX_COLOR_PATTERN.test(color))\n        ? normalizeHex(color)\n        : undefined;\n    const isHexColor = Boolean(normalizedHex);\n    const tagStyle: CSSProperties = {\n      maxWidth: \"100%\",\n      ...(normalizedHex\n        ? {\n          backgroundColor: `${normalizedHex}26`,\n          borderColor: `${normalizedHex}59`,\n          color: normalizedHex,\n        }\n        : {}),\n    };\n    const isInteractive = Boolean(onClick || acceptsUpload || href);\n    const shouldRenderAnchor = Boolean(href && isExternalHref(href));\n\n    /**\n     * Handle file upload\n     */\n    const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {\n      const file = event.target.files?.[0];\n      if (file && onUpload) {\n        onUpload(file);\n      }\n      // Reset input value to allow same file selection\n      event.target.value = '';\n    };\n\n    const tagClassName = cn(\n      \"inline-flex items-center transition-colors font-medium\",\n      getColorClasses(color, isHexColor),\n      getSizeClasses(size),\n      isInteractive && \"cursor-pointer hover:opacity-80\",\n      className\n    );\n\n    const inner = (\n      <div className=\"flex items-center gap-0.5 min-w-0 overflow-hidden\" style={{ maxWidth: \"100%\" }}>\n        {icon}\n\n        {truncate ? (\n          <p\n            title={label}\n            className={cn(\n              \"overflow-hidden whitespace-nowrap text-ellipsis\",\n              isInteractive && \"cursor-pointer\"\n            )}\n            style={{ maxWidth: \"100%\" }}\n          >\n            {label.length > truncate ? `${label.slice(0, truncate)}...` : label}\n          </p>\n        ) : (\n          <p className=\"overflow-hidden whitespace-nowrap text-ellipsis\" style={{ maxWidth: \"100%\" }}>\n            {label}\n          </p>\n        )}\n\n        {acceptsUpload && (\n          <input\n            type=\"file\"\n            onChange={handleFileUpload}\n            className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n            aria-label={`Upload file for ${label}`}\n          />\n        )}\n\n        {removable && onRemove && (\n          <button\n            onClick={onRemove}\n            className=\"ml-1 flex-shrink-0\"\n            aria-label={`Remove ${label}`}\n            type=\"button\"\n          >\n            <CloseIcon size={12} className=\"cursor-pointer\" />\n          </button>\n        )}\n      </div>\n    );\n\n    const content = tooltip ? <Tooltip title={label} delayShow>{inner}</Tooltip> : inner;\n\n    if (href) {\n      if (shouldRenderAnchor) {\n        return (\n          <a\n            ref={ref as Ref<HTMLAnchorElement>}\n            href={href}\n            className={tagClassName}\n            style={tagStyle}\n            onMouseDown={onMouseDown}\n            onClick={onClick}\n            aria-label={ariaLabel || `Tag: ${label}`}\n            role={role}\n            data-theme={theme}\n          >\n            {content}\n          </a>\n        );\n      }\n\n      return (\n        <Link\n          ref={ref as Ref<HTMLAnchorElement>}\n          to={href}\n          className={tagClassName}\n          style={tagStyle}\n          onMouseDown={onMouseDown}\n          onClick={onClick}\n          aria-label={ariaLabel || `Tag: ${label}`}\n          role={role}\n          data-theme={theme}\n        >\n          {content}\n        </Link>\n      );\n    }\n\n    return (\n      <div\n        ref={ref as Ref<HTMLDivElement>}\n        className={tagClassName}\n        style={tagStyle}\n        onMouseDown={onMouseDown}\n        onClick={onClick}\n        onKeyDown={\n          isInteractive\n            ? (event) => {\n              if (event.key === \"Enter\" || event.key === \" \") {\n                event.preventDefault();\n                event.currentTarget.click();\n              }\n            }\n            : undefined\n        }\n        aria-label={ariaLabel || `Tag: ${label}`}\n        role={role ?? (isInteractive ? \"button\" : undefined)}\n        tabIndex={isInteractive ? 0 : undefined}\n        data-theme={theme}\n      >\n        {content}\n      </div>\n    );\n  }\n);\n\nTag.displayName = \"Tag\";\n"],"names":["TAG_COLOR_CLASSES","HEX_COLOR_PATTERN","EXTERNAL_HREF_PATTERN","getColorClasses","color","isHexColor","normalizeHex","value","trimmed","isExternalHref","href","getSizeClasses","size","Tag","forwardRef","label","className","onClick","onMouseDown","truncate","isHashColor","theme","icon","removable","onRemove","onUpload","acceptsUpload","tooltip","ariaLabel","role","ref","normalizedHex","tagStyle","isInteractive","shouldRenderAnchor","handleFileUpload","event","file","tagClassName","cn","inner","jsx","CloseIcon","content","Tooltip","Link"],"mappings":"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"}
+{"version":3,"file":"Tag.cjs.js","sources":["../../../../src/components/data-display/tag/Tag.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, type CSSProperties, type Ref } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { CloseIcon } from \"../../icons/CloseIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\n\n/**\n * Available tag size options\n */\nexport type TagSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n/**\n * Available color names for tags\n */\nexport type TagColor =\n  | \"primary\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"neutral\"\n  | \"red\"\n  | \"green\"\n  | \"blue\"\n  | \"teal\"\n  | \"yellow\"\n  | \"orange\"\n  | \"peach\"\n  | \"purple\"\n  | \"navy\"\n  | \"gray\"\n  | \"grey\";\n\nexport type ThemeMode = \"light\" | \"dark\";\n\n/**\n * Upload handler function type\n */\nexport type UploadHandler = (file: File) => void | Promise<void>;\n\n/**\n * Props for the Tag component\n */\nexport interface TagProps {\n  /** The text content to display */\n  label: string;\n  /** Router path or external URL */\n  href?: string;\n  /** Color name or hex color value (example: #3B82F6 or red) */\n  color?: string;\n  /** Size variant */\n  size?: TagSize;\n  /** Additional CSS classes */\n  className?: string;\n  /** Click handler for the tag */\n  onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Mouse down handler */\n  onMouseDown?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Maximum character length before truncation */\n  truncate?: number;\n  /** Treat `color` as a hex color string (e.g. `#3B82F6` or `3b82f6`). When true, the value is applied as a hex regardless of named-color matches. */\n  isHashColor?: boolean;\n  /** Theme mode */\n  theme?: ThemeMode;\n  /** Icon to display before the label */\n  icon?: React.ReactNode;\n  /** Whether the tag is removable (shows close button) */\n  removable?: boolean;\n  /** Handler for remove button click */\n  onRemove?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Upload handler function */\n  onUpload?: UploadHandler;\n  /** Whether the tag accepts file uploads */\n  acceptsUpload?: boolean;\n  /** Whether to show a tooltip with the label on hover */\n  tooltip?: boolean;\n  /** Custom aria-label for accessibility */\n  \"aria-label\"?: string;\n  /** ARIA role override */\n  role?: React.AriaRole;\n}\n\n/**\n * Tag component displays labels with customizable colors and styling\n *\n * @example\n * ```tsx\n * <Tag label=\"React\" color=\"blue\" size=\"md\" />\n * <Tag label=\"TypeScript\" color=\"#3178c6\" isHashColor />\n * <Tag label=\"Removable\" removable onRemove={handleRemove} />\n * <Tag label=\"Upload\" acceptsUpload onUpload={handleUpload} />\n * ```\n */\nconst TAG_COLOR_CLASSES: Record<TagColor, string> = {\n  primary: \"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400\",\n  success: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n  warning: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n  error: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n  neutral: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  red: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n  green: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n  blue: \"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300\",\n  teal: \"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300\",\n  orange: \"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300\",\n  peach: \"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300\",\n  navy: \"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300\",\n  gray: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  grey: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  yellow: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n  purple: \"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300\",\n};\n\nconst HEX_COLOR_PATTERN = /^#[0-9a-fA-F]{6}$/;\nconst EXTERNAL_HREF_PATTERN = /^(?:[a-z][a-z\\d+\\-.]*:|\\/\\/)/i;\n\nconst getColorClasses = (color?: string, isHexColor?: boolean): string => {\n  if (isHexColor) return \"\";\n  if (!color) return TAG_COLOR_CLASSES.primary;\n  return TAG_COLOR_CLASSES[color.toLowerCase() as TagColor] ?? TAG_COLOR_CLASSES.primary;\n};\n\n/**\n * Normalize a 6-digit hex color string to lowercase `#rrggbb`.\n * Returns `undefined` if the value isn't a valid 6-digit hex.\n */\nconst normalizeHex = (value: string): string | undefined => {\n  const trimmed = value.trim().toLowerCase();\n  return HEX_COLOR_PATTERN.test(trimmed) ? trimmed : undefined;\n};\n\nconst isExternalHref = (href: string): boolean => EXTERNAL_HREF_PATTERN.test(href);\n\n/**\n * Get size-based styling classes\n */\nconst getSizeClasses = (size: TagSize): string => {\n  switch (size) {\n    case \"xs\":\n      return \"text-3xs leading-3 px-1 border-[0.5px] rounded\";\n    case \"lg\":\n      return \"text-sm leading-5 px-1.5 border rounded-md\";\n    case \"sm\":\n      return \"text-2xs leading-4 px-1 border-[0.5px] rounded\";\n    default: // md\n      return \"text-xs leading-4 px-1.5 border rounded-md\";\n  }\n};\n\nexport const Tag = forwardRef<HTMLElement, TagProps>(\n  (\n    {\n      label,\n      href,\n      color,\n      size = 'md',\n      className,\n      onClick,\n      onMouseDown,\n      truncate,\n      isHashColor = false,\n      theme,\n      icon,\n      removable = false,\n      onRemove,\n      onUpload,\n      acceptsUpload = false,\n      tooltip = false,\n      \"aria-label\": ariaLabel,\n      role,\n    },\n    ref\n  ) => {\n    const normalizedHex =\n      typeof color === \"string\" && (isHashColor || HEX_COLOR_PATTERN.test(color))\n        ? normalizeHex(color)\n        : undefined;\n    const isHexColor = Boolean(normalizedHex);\n    const tagStyle: CSSProperties = {\n      maxWidth: \"100%\",\n      ...(normalizedHex\n        ? {\n          backgroundColor: `${normalizedHex}26`,\n          borderColor: `${normalizedHex}59`,\n          color: normalizedHex,\n        }\n        : {}),\n    };\n    const isInteractive = Boolean(onClick || acceptsUpload || href);\n    const shouldRenderAnchor = Boolean(href && isExternalHref(href));\n\n    /**\n     * Handle file upload\n     */\n    const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {\n      const file = event.target.files?.[0];\n      if (file && onUpload) {\n        onUpload(file);\n      }\n      // Reset input value to allow same file selection\n      event.target.value = '';\n    };\n\n    const tagClassName = cn(\n      \"inline-flex items-center transition-colors font-medium\",\n      getColorClasses(color, isHexColor),\n      getSizeClasses(size),\n      isInteractive && \"cursor-pointer hover:opacity-80\",\n      className\n    );\n\n    const inner = (\n      <div className=\"flex items-center gap-0.5 min-w-0 overflow-hidden\" style={{ maxWidth: \"100%\" }}>\n        {icon}\n\n        {truncate ? (\n          <p\n            title={label}\n            className={cn(\n              \"overflow-hidden whitespace-nowrap text-ellipsis\",\n              isInteractive && \"cursor-pointer\"\n            )}\n            style={{ maxWidth: \"100%\" }}\n          >\n            {label.length > truncate ? `${label.slice(0, truncate)}...` : label}\n          </p>\n        ) : (\n          <p className=\"overflow-hidden whitespace-nowrap text-ellipsis\" style={{ maxWidth: \"100%\" }}>\n            {label}\n          </p>\n        )}\n\n        {acceptsUpload && (\n          <input\n            type=\"file\"\n            onChange={handleFileUpload}\n            className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n            aria-label={`Upload file for ${label}`}\n          />\n        )}\n\n        {removable && onRemove && (\n          <button\n            onClick={onRemove}\n            className=\"ml-1 flex-shrink-0\"\n            aria-label={`Remove ${label}`}\n            type=\"button\"\n          >\n            <CloseIcon size={12} className=\"cursor-pointer\" />\n          </button>\n        )}\n      </div>\n    );\n\n    const content = tooltip ? <Tooltip title={label} delayShow>{inner}</Tooltip> : inner;\n\n    if (href) {\n      if (shouldRenderAnchor) {\n        return (\n          <a\n            ref={ref as Ref<HTMLAnchorElement>}\n            href={href}\n            className={tagClassName}\n            style={tagStyle}\n            onMouseDown={onMouseDown}\n            onClick={onClick}\n            aria-label={ariaLabel || `Tag: ${label}`}\n            role={role}\n            data-theme={theme}\n          >\n            {content}\n          </a>\n        );\n      }\n\n      return (\n        <Link\n          ref={ref as Ref<HTMLAnchorElement>}\n          to={href}\n          className={tagClassName}\n          style={tagStyle}\n          onMouseDown={onMouseDown}\n          onClick={onClick}\n          aria-label={ariaLabel || `Tag: ${label}`}\n          role={role}\n          data-theme={theme}\n        >\n          {content}\n        </Link>\n      );\n    }\n\n    return (\n      <div\n        ref={ref as Ref<HTMLDivElement>}\n        className={tagClassName}\n        style={tagStyle}\n        onMouseDown={onMouseDown}\n        onClick={onClick}\n        onKeyDown={\n          isInteractive\n            ? (event) => {\n              if (event.key === \"Enter\" || event.key === \" \") {\n                event.preventDefault();\n                event.currentTarget.click();\n              }\n            }\n            : undefined\n        }\n        aria-label={ariaLabel || `Tag: ${label}`}\n        role={role ?? (isInteractive ? \"button\" : undefined)}\n        tabIndex={isInteractive ? 0 : undefined}\n        data-theme={theme}\n      >\n        {content}\n      </div>\n    );\n  }\n);\n\nTag.displayName = \"Tag\";\n"],"names":["TAG_COLOR_CLASSES","HEX_COLOR_PATTERN","EXTERNAL_HREF_PATTERN","getColorClasses","color","isHexColor","normalizeHex","value","trimmed","isExternalHref","href","getSizeClasses","size","Tag","forwardRef","label","className","onClick","onMouseDown","truncate","isHashColor","theme","icon","removable","onRemove","onUpload","acceptsUpload","tooltip","ariaLabel","role","ref","normalizedHex","tagStyle","isInteractive","shouldRenderAnchor","handleFileUpload","event","file","tagClassName","cn","inner","jsx","CloseIcon","content","Tooltip","Link"],"mappings":"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"}

package/dist/components/data-display/tag/Tag.es.js

@@ -4,7 +4,7 @@ import { forwardRef as O } from "react";
 import { Link as W } from "react-router-dom";
 import { CloseIcon as B } from "../../icons/CloseIcon.es.js";
 import F from "../../tooltip/Tooltip.es.js";
-const m = {
+const k = {
   primary: "bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400",
   success: "bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300",
   warning: "bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300",
@@ -21,17 +21,19 @@ const m = {
   grey: "bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",
   yellow: "bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300",
   purple: "bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300"
-}, C = /^#[0-9a-fA-F]{6}$/, I = /^(?:[a-z][a-z\d+\-.]*:|\/\/)/i, j = (r, e) => e ? "" : r ? m[r.toLowerCase()] ?? m.primary : m.primary, P = (r) => {
+}, C = /^#[0-9a-fA-F]{6}$/, I = /^(?:[a-z][a-z\d+\-.]*:|\/\/)/i, j = (r, e) => e ? "" : r ? k[r.toLowerCase()] ?? k.primary : k.primary, P = (r) => {
   const e = r.trim().toLowerCase();
   return C.test(e) ? e : void 0;
 }, X = (r) => I.test(r), G = (r) => {
   switch (r) {
+    case "xs":
+      return "text-3xs leading-3 px-1 border-[0.5px] rounded";
     case "lg":
-      return "text-[14px] leading-[20px] px-1.5 border rounded-md";
+      return "text-sm leading-5 px-1.5 border rounded-md";
     case "sm":
-      return "text-[10px] leading-[15px] px-1 border-[0.5px] rounded";
+      return "text-2xs leading-4 px-1 border-[0.5px] rounded";
     default:
-      return "text-[12px] leading-[18px] px-1.5 border rounded-md";
+      return "text-xs leading-4 px-1.5 border rounded-md";
   }
 }, K = O(
   ({
@@ -103,7 +105,7 @@ const m = {
           children: /* @__PURE__ */ t(B, { size: 12, className: "cursor-pointer" })
         }
       )
-    ] }), k = z ? /* @__PURE__ */ t(F, { title: r, delayShow: !0, children: w }) : w;
+    ] }), m = z ? /* @__PURE__ */ t(F, { title: r, delayShow: !0, children: w }) : w;
     return e ? S ? /* @__PURE__ */ t(
       "a",
       {
@@ -116,7 +118,7 @@ const m = {
         "aria-label": b || `Tag: ${r}`,
         role: p,
         "data-theme": g,
-        children: k
+        children: m
       }
     ) : /* @__PURE__ */ t(
       W,
@@ -130,7 +132,7 @@ const m = {
         "aria-label": b || `Tag: ${r}`,
         role: p,
         "data-theme": g,
-        children: k
+        children: m
       }
     ) : /* @__PURE__ */ t(
       "div",
@@ -147,7 +149,7 @@ const m = {
         role: p ?? (o ? "button" : void 0),
         tabIndex: o ? 0 : void 0,
         "data-theme": g,
-        children: k
+        children: m
       }
     );
   }

package/dist/components/data-display/tag/Tag.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.es.js","sources":["../../../../src/components/data-display/tag/Tag.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, type CSSProperties, type Ref } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { CloseIcon } from \"../../icons/CloseIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\n\n/**\n * Available tag size options\n */\nexport type TagSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n/**\n * Available color names for tags\n */\nexport type TagColor =\n  | \"primary\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"neutral\"\n  | \"red\"\n  | \"green\"\n  | \"blue\"\n  | \"teal\"\n  | \"yellow\"\n  | \"orange\"\n  | \"peach\"\n  | \"purple\"\n  | \"navy\"\n  | \"gray\"\n  | \"grey\";\n\nexport type ThemeMode = \"light\" | \"dark\";\n\n/**\n * Upload handler function type\n */\nexport type UploadHandler = (file: File) => void | Promise<void>;\n\n/**\n * Props for the Tag component\n */\nexport interface TagProps {\n  /** The text content to display */\n  label: string;\n  /** Router path or external URL */\n  href?: string;\n  /** Color name or hex color value (example: #3B82F6 or red) */\n  color?: string;\n  /** Size variant */\n  size?: TagSize;\n  /** Additional CSS classes */\n  className?: string;\n  /** Click handler for the tag */\n  onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Mouse down handler */\n  onMouseDown?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Maximum character length before truncation */\n  truncate?: number;\n  /** Treat `color` as a hex color string (e.g. `#3B82F6` or `3b82f6`). When true, the value is applied as a hex regardless of named-color matches. */\n  isHashColor?: boolean;\n  /** Theme mode */\n  theme?: ThemeMode;\n  /** Icon to display before the label */\n  icon?: React.ReactNode;\n  /** Whether the tag is removable (shows close button) */\n  removable?: boolean;\n  /** Handler for remove button click */\n  onRemove?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Upload handler function */\n  onUpload?: UploadHandler;\n  /** Whether the tag accepts file uploads */\n  acceptsUpload?: boolean;\n  /** Whether to show a tooltip with the label on hover */\n  tooltip?: boolean;\n  /** Custom aria-label for accessibility */\n  \"aria-label\"?: string;\n  /** ARIA role override */\n  role?: React.AriaRole;\n}\n\n/**\n * Tag component displays labels with customizable colors and styling\n *\n * @example\n * ```tsx\n * <Tag label=\"React\" color=\"blue\" size=\"md\" />\n * <Tag label=\"TypeScript\" color=\"#3178c6\" isHashColor />\n * <Tag label=\"Removable\" removable onRemove={handleRemove} />\n * <Tag label=\"Upload\" acceptsUpload onUpload={handleUpload} />\n * ```\n */\nconst TAG_COLOR_CLASSES: Record<TagColor, string> = {\n  primary: \"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400\",\n  success: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n  warning: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n  error: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n  neutral: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  red: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n  green: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n  blue: \"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300\",\n  teal: \"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300\",\n  orange: \"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300\",\n  peach: \"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300\",\n  navy: \"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300\",\n  gray: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  grey: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  yellow: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n  purple: \"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300\",\n};\n\nconst HEX_COLOR_PATTERN = /^#[0-9a-fA-F]{6}$/;\nconst EXTERNAL_HREF_PATTERN = /^(?:[a-z][a-z\\d+\\-.]*:|\\/\\/)/i;\n\nconst getColorClasses = (color?: string, isHexColor?: boolean): string => {\n  if (isHexColor) return \"\";\n  if (!color) return TAG_COLOR_CLASSES.primary;\n  return TAG_COLOR_CLASSES[color.toLowerCase() as TagColor] ?? TAG_COLOR_CLASSES.primary;\n};\n\n/**\n * Normalize a 6-digit hex color string to lowercase `#rrggbb`.\n * Returns `undefined` if the value isn't a valid 6-digit hex.\n */\nconst normalizeHex = (value: string): string | undefined => {\n  const trimmed = value.trim().toLowerCase();\n  return HEX_COLOR_PATTERN.test(trimmed) ? trimmed : undefined;\n};\n\nconst isExternalHref = (href: string): boolean => EXTERNAL_HREF_PATTERN.test(href);\n\n/**\n * Get size-based styling classes\n */\nconst getSizeClasses = (size: TagSize): string => {\n  switch (size) {\n    case \"lg\":\n      return \"text-[14px] leading-[20px] px-1.5 border rounded-md\";\n    case \"sm\":\n      return \"text-[10px] leading-[15px] px-1 border-[0.5px] rounded\";\n    default: // md\n      return \"text-[12px] leading-[18px] px-1.5 border rounded-md\";\n  }\n};\n\nexport const Tag = forwardRef<HTMLElement, TagProps>(\n  (\n    {\n      label,\n      href,\n      color,\n      size = 'md',\n      className,\n      onClick,\n      onMouseDown,\n      truncate,\n      isHashColor = false,\n      theme,\n      icon,\n      removable = false,\n      onRemove,\n      onUpload,\n      acceptsUpload = false,\n      tooltip = false,\n      \"aria-label\": ariaLabel,\n      role,\n    },\n    ref\n  ) => {\n    const normalizedHex =\n      typeof color === \"string\" && (isHashColor || HEX_COLOR_PATTERN.test(color))\n        ? normalizeHex(color)\n        : undefined;\n    const isHexColor = Boolean(normalizedHex);\n    const tagStyle: CSSProperties = {\n      maxWidth: \"100%\",\n      ...(normalizedHex\n        ? {\n          backgroundColor: `${normalizedHex}26`,\n          borderColor: `${normalizedHex}59`,\n          color: normalizedHex,\n        }\n        : {}),\n    };\n    const isInteractive = Boolean(onClick || acceptsUpload || href);\n    const shouldRenderAnchor = Boolean(href && isExternalHref(href));\n\n    /**\n     * Handle file upload\n     */\n    const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {\n      const file = event.target.files?.[0];\n      if (file && onUpload) {\n        onUpload(file);\n      }\n      // Reset input value to allow same file selection\n      event.target.value = '';\n    };\n\n    const tagClassName = cn(\n      \"inline-flex items-center transition-colors font-medium\",\n      getColorClasses(color, isHexColor),\n      getSizeClasses(size),\n      isInteractive && \"cursor-pointer hover:opacity-80\",\n      className\n    );\n\n    const inner = (\n      <div className=\"flex items-center gap-0.5 min-w-0 overflow-hidden\" style={{ maxWidth: \"100%\" }}>\n        {icon}\n\n        {truncate ? (\n          <p\n            title={label}\n            className={cn(\n              \"overflow-hidden whitespace-nowrap text-ellipsis\",\n              isInteractive && \"cursor-pointer\"\n            )}\n            style={{ maxWidth: \"100%\" }}\n          >\n            {label.length > truncate ? `${label.slice(0, truncate)}...` : label}\n          </p>\n        ) : (\n          <p className=\"overflow-hidden whitespace-nowrap text-ellipsis\" style={{ maxWidth: \"100%\" }}>\n            {label}\n          </p>\n        )}\n\n        {acceptsUpload && (\n          <input\n            type=\"file\"\n            onChange={handleFileUpload}\n            className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n            aria-label={`Upload file for ${label}`}\n          />\n        )}\n\n        {removable && onRemove && (\n          <button\n            onClick={onRemove}\n            className=\"ml-1 flex-shrink-0\"\n            aria-label={`Remove ${label}`}\n            type=\"button\"\n          >\n            <CloseIcon size={12} className=\"cursor-pointer\" />\n          </button>\n        )}\n      </div>\n    );\n\n    const content = tooltip ? <Tooltip title={label} delayShow>{inner}</Tooltip> : inner;\n\n    if (href) {\n      if (shouldRenderAnchor) {\n        return (\n          <a\n            ref={ref as Ref<HTMLAnchorElement>}\n            href={href}\n            className={tagClassName}\n            style={tagStyle}\n            onMouseDown={onMouseDown}\n            onClick={onClick}\n            aria-label={ariaLabel || `Tag: ${label}`}\n            role={role}\n            data-theme={theme}\n          >\n            {content}\n          </a>\n        );\n      }\n\n      return (\n        <Link\n          ref={ref as Ref<HTMLAnchorElement>}\n          to={href}\n          className={tagClassName}\n          style={tagStyle}\n          onMouseDown={onMouseDown}\n          onClick={onClick}\n          aria-label={ariaLabel || `Tag: ${label}`}\n          role={role}\n          data-theme={theme}\n        >\n          {content}\n        </Link>\n      );\n    }\n\n    return (\n      <div\n        ref={ref as Ref<HTMLDivElement>}\n        className={tagClassName}\n        style={tagStyle}\n        onMouseDown={onMouseDown}\n        onClick={onClick}\n        onKeyDown={\n          isInteractive\n            ? (event) => {\n              if (event.key === \"Enter\" || event.key === \" \") {\n                event.preventDefault();\n                event.currentTarget.click();\n              }\n            }\n            : undefined\n        }\n        aria-label={ariaLabel || `Tag: ${label}`}\n        role={role ?? (isInteractive ? \"button\" : undefined)}\n        tabIndex={isInteractive ? 0 : undefined}\n        data-theme={theme}\n      >\n        {content}\n      </div>\n    );\n  }\n);\n\nTag.displayName = \"Tag\";\n"],"names":["TAG_COLOR_CLASSES","HEX_COLOR_PATTERN","EXTERNAL_HREF_PATTERN","getColorClasses","color","isHexColor","normalizeHex","value","trimmed","isExternalHref","href","getSizeClasses","size","Tag","forwardRef","label","className","onClick","onMouseDown","truncate","isHashColor","theme","icon","removable","onRemove","onUpload","acceptsUpload","tooltip","ariaLabel","role","ref","normalizedHex","tagStyle","isInteractive","shouldRenderAnchor","handleFileUpload","event","file","tagClassName","cn","inner","jsx","CloseIcon","content","Tooltip","Link"],"mappings":";;;;;;AA4FA,MAAMA,IAA8C;AAAA,EAClD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,KAAK;AAAA,EACL,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AACV,GAEMC,IAAoB,qBACpBC,IAAwB,iCAExBC,IAAkB,CAACC,GAAgBC,MACnCA,IAAmB,KAClBD,IACEJ,EAAkBI,EAAM,YAAA,CAAyB,KAAKJ,EAAkB,UAD5DA,EAAkB,SAQjCM,IAAe,CAACC,MAAsC;AAC1D,QAAMC,IAAUD,EAAM,KAAA,EAAO,YAAA;AAC7B,SAAON,EAAkB,KAAKO,CAAO,IAAIA,IAAU;AACrD,GAEMC,IAAiB,CAACC,MAA0BR,EAAsB,KAAKQ,CAAI,GAK3EC,IAAiB,CAACC,MAA0B;AAChD,UAAQA,GAAA;AAAA,IACN,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EAAA;AAEb,GAEaC,IAAMC;AAAA,EACjB,CACE;AAAA,IACE,OAAAC;AAAA,IACA,MAAAL;AAAA,IACA,OAAAN;AAAA,IACA,MAAAQ,IAAO;AAAA,IACP,WAAAI;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,SAAAC,IAAU;AAAA,IACV,cAAcC;AAAA,IACd,MAAAC;AAAA,EAAA,GAEFC,MACG;AACH,UAAMC,IACJ,OAAO3B,KAAU,aAAagB,KAAenB,EAAkB,KAAKG,CAAK,KACrEE,EAAaF,CAAK,IAClB,QACAC,IAAa,EAAQ0B,GACrBC,IAA0B;AAAA,MAC9B,UAAU;AAAA,MACV,GAAID,IACA;AAAA,QACA,iBAAiB,GAAGA,CAAa;AAAA,QACjC,aAAa,GAAGA,CAAa;AAAA,QAC7B,OAAOA;AAAA,MAAA,IAEP,CAAA;AAAA,IAAC,GAEDE,IAAgB,GAAQhB,KAAWS,KAAiBhB,IACpDwB,IAAqB,GAAQxB,KAAQD,EAAeC,CAAI,IAKxDyB,IAAmB,CAACC,MAA+C;AACvE,YAAMC,IAAOD,EAAM,OAAO,QAAQ,CAAC;AACnC,MAAIC,KAAQZ,KACVA,EAASY,CAAI,GAGfD,EAAM,OAAO,QAAQ;AAAA,IACvB,GAEME,IAAeC;AAAA,MACnB;AAAA,MACApC,EAAgBC,GAAOC,CAAU;AAAA,MACjCM,EAAeC,CAAI;AAAA,MACnBqB,KAAiB;AAAA,MACjBjB;AAAA,IAAA,GAGIwB,sBACH,OAAA,EAAI,WAAU,qDAAoD,OAAO,EAAE,UAAU,OAAA,GACnF,UAAA;AAAA,MAAAlB;AAAA,MAEAH,IACC,gBAAAsB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO1B;AAAA,UACP,WAAWwB;AAAA,YACT;AAAA,YACAN,KAAiB;AAAA,UAAA;AAAA,UAEnB,OAAO,EAAE,UAAU,OAAA;AAAA,UAElB,UAAAlB,EAAM,SAASI,IAAW,GAAGJ,EAAM,MAAM,GAAGI,CAAQ,CAAC,QAAQJ;AAAA,QAAA;AAAA,MAAA,IAGhE,gBAAA0B,EAAC,KAAA,EAAE,WAAU,mDAAkD,OAAO,EAAE,UAAU,OAAA,GAC/E,UAAA1B,EAAA,CACH;AAAA,MAGDW,KACC,gBAAAe;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAUN;AAAA,UACV,WAAU;AAAA,UACV,cAAY,mBAAmBpB,CAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAIvCQ,KAAaC,KACZ,gBAAAiB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASjB;AAAA,UACT,WAAU;AAAA,UACV,cAAY,UAAUT,CAAK;AAAA,UAC3B,MAAK;AAAA,UAEL,UAAA,gBAAA0B,EAACC,GAAA,EAAU,MAAM,IAAI,WAAU,iBAAA,CAAiB;AAAA,QAAA;AAAA,MAAA;AAAA,IAClD,GAEJ,GAGIC,IAAUhB,IAAU,gBAAAc,EAACG,GAAA,EAAQ,OAAO7B,GAAO,WAAS,IAAE,UAAAyB,EAAA,CAAM,IAAaA;AAE/E,WAAI9B,IACEwB,IAEA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAX;AAAA,QACA,MAAApB;AAAA,QACA,WAAW4B;AAAA,QACX,OAAON;AAAA,QACP,aAAAd;AAAA,QACA,SAAAD;AAAA,QACA,cAAYW,KAAa,QAAQb,CAAK;AAAA,QACtC,MAAAc;AAAA,QACA,cAAYR;AAAA,QAEX,UAAAsB;AAAA,MAAA;AAAA,IAAA,IAML,gBAAAF;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,KAAAf;AAAA,QACA,IAAIpB;AAAA,QACJ,WAAW4B;AAAA,QACX,OAAON;AAAA,QACP,aAAAd;AAAA,QACA,SAAAD;AAAA,QACA,cAAYW,KAAa,QAAQb,CAAK;AAAA,QACtC,MAAAc;AAAA,QACA,cAAYR;AAAA,QAEX,UAAAsB;AAAA,MAAA;AAAA,IAAA,IAML,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAX;AAAA,QACA,WAAWQ;AAAA,QACX,OAAON;AAAA,QACP,aAAAd;AAAA,QACA,SAAAD;AAAA,QACA,WACEgB,IACI,CAACG,MAAU;AACX,WAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACzCA,EAAM,eAAA,GACNA,EAAM,cAAc,MAAA;AAAA,QAExB,IACE;AAAA,QAEN,cAAYR,KAAa,QAAQb,CAAK;AAAA,QACtC,MAAMc,MAASI,IAAgB,WAAW;AAAA,QAC1C,UAAUA,IAAgB,IAAI;AAAA,QAC9B,cAAYZ;AAAA,QAEX,UAAAsB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA9B,EAAI,cAAc;"}
+{"version":3,"file":"Tag.es.js","sources":["../../../../src/components/data-display/tag/Tag.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, type CSSProperties, type Ref } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { CloseIcon } from \"../../icons/CloseIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\n\n/**\n * Available tag size options\n */\nexport type TagSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n/**\n * Available color names for tags\n */\nexport type TagColor =\n  | \"primary\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"neutral\"\n  | \"red\"\n  | \"green\"\n  | \"blue\"\n  | \"teal\"\n  | \"yellow\"\n  | \"orange\"\n  | \"peach\"\n  | \"purple\"\n  | \"navy\"\n  | \"gray\"\n  | \"grey\";\n\nexport type ThemeMode = \"light\" | \"dark\";\n\n/**\n * Upload handler function type\n */\nexport type UploadHandler = (file: File) => void | Promise<void>;\n\n/**\n * Props for the Tag component\n */\nexport interface TagProps {\n  /** The text content to display */\n  label: string;\n  /** Router path or external URL */\n  href?: string;\n  /** Color name or hex color value (example: #3B82F6 or red) */\n  color?: string;\n  /** Size variant */\n  size?: TagSize;\n  /** Additional CSS classes */\n  className?: string;\n  /** Click handler for the tag */\n  onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Mouse down handler */\n  onMouseDown?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Maximum character length before truncation */\n  truncate?: number;\n  /** Treat `color` as a hex color string (e.g. `#3B82F6` or `3b82f6`). When true, the value is applied as a hex regardless of named-color matches. */\n  isHashColor?: boolean;\n  /** Theme mode */\n  theme?: ThemeMode;\n  /** Icon to display before the label */\n  icon?: React.ReactNode;\n  /** Whether the tag is removable (shows close button) */\n  removable?: boolean;\n  /** Handler for remove button click */\n  onRemove?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Upload handler function */\n  onUpload?: UploadHandler;\n  /** Whether the tag accepts file uploads */\n  acceptsUpload?: boolean;\n  /** Whether to show a tooltip with the label on hover */\n  tooltip?: boolean;\n  /** Custom aria-label for accessibility */\n  \"aria-label\"?: string;\n  /** ARIA role override */\n  role?: React.AriaRole;\n}\n\n/**\n * Tag component displays labels with customizable colors and styling\n *\n * @example\n * ```tsx\n * <Tag label=\"React\" color=\"blue\" size=\"md\" />\n * <Tag label=\"TypeScript\" color=\"#3178c6\" isHashColor />\n * <Tag label=\"Removable\" removable onRemove={handleRemove} />\n * <Tag label=\"Upload\" acceptsUpload onUpload={handleUpload} />\n * ```\n */\nconst TAG_COLOR_CLASSES: Record<TagColor, string> = {\n  primary: \"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400\",\n  success: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n  warning: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n  error: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n  neutral: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  red: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n  green: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n  blue: \"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300\",\n  teal: \"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300\",\n  orange: \"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300\",\n  peach: \"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300\",\n  navy: \"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300\",\n  gray: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  grey: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  yellow: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n  purple: \"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300\",\n};\n\nconst HEX_COLOR_PATTERN = /^#[0-9a-fA-F]{6}$/;\nconst EXTERNAL_HREF_PATTERN = /^(?:[a-z][a-z\\d+\\-.]*:|\\/\\/)/i;\n\nconst getColorClasses = (color?: string, isHexColor?: boolean): string => {\n  if (isHexColor) return \"\";\n  if (!color) return TAG_COLOR_CLASSES.primary;\n  return TAG_COLOR_CLASSES[color.toLowerCase() as TagColor] ?? TAG_COLOR_CLASSES.primary;\n};\n\n/**\n * Normalize a 6-digit hex color string to lowercase `#rrggbb`.\n * Returns `undefined` if the value isn't a valid 6-digit hex.\n */\nconst normalizeHex = (value: string): string | undefined => {\n  const trimmed = value.trim().toLowerCase();\n  return HEX_COLOR_PATTERN.test(trimmed) ? trimmed : undefined;\n};\n\nconst isExternalHref = (href: string): boolean => EXTERNAL_HREF_PATTERN.test(href);\n\n/**\n * Get size-based styling classes\n */\nconst getSizeClasses = (size: TagSize): string => {\n  switch (size) {\n    case \"xs\":\n      return \"text-3xs leading-3 px-1 border-[0.5px] rounded\";\n    case \"lg\":\n      return \"text-sm leading-5 px-1.5 border rounded-md\";\n    case \"sm\":\n      return \"text-2xs leading-4 px-1 border-[0.5px] rounded\";\n    default: // md\n      return \"text-xs leading-4 px-1.5 border rounded-md\";\n  }\n};\n\nexport const Tag = forwardRef<HTMLElement, TagProps>(\n  (\n    {\n      label,\n      href,\n      color,\n      size = 'md',\n      className,\n      onClick,\n      onMouseDown,\n      truncate,\n      isHashColor = false,\n      theme,\n      icon,\n      removable = false,\n      onRemove,\n      onUpload,\n      acceptsUpload = false,\n      tooltip = false,\n      \"aria-label\": ariaLabel,\n      role,\n    },\n    ref\n  ) => {\n    const normalizedHex =\n      typeof color === \"string\" && (isHashColor || HEX_COLOR_PATTERN.test(color))\n        ? normalizeHex(color)\n        : undefined;\n    const isHexColor = Boolean(normalizedHex);\n    const tagStyle: CSSProperties = {\n      maxWidth: \"100%\",\n      ...(normalizedHex\n        ? {\n          backgroundColor: `${normalizedHex}26`,\n          borderColor: `${normalizedHex}59`,\n          color: normalizedHex,\n        }\n        : {}),\n    };\n    const isInteractive = Boolean(onClick || acceptsUpload || href);\n    const shouldRenderAnchor = Boolean(href && isExternalHref(href));\n\n    /**\n     * Handle file upload\n     */\n    const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {\n      const file = event.target.files?.[0];\n      if (file && onUpload) {\n        onUpload(file);\n      }\n      // Reset input value to allow same file selection\n      event.target.value = '';\n    };\n\n    const tagClassName = cn(\n      \"inline-flex items-center transition-colors font-medium\",\n      getColorClasses(color, isHexColor),\n      getSizeClasses(size),\n      isInteractive && \"cursor-pointer hover:opacity-80\",\n      className\n    );\n\n    const inner = (\n      <div className=\"flex items-center gap-0.5 min-w-0 overflow-hidden\" style={{ maxWidth: \"100%\" }}>\n        {icon}\n\n        {truncate ? (\n          <p\n            title={label}\n            className={cn(\n              \"overflow-hidden whitespace-nowrap text-ellipsis\",\n              isInteractive && \"cursor-pointer\"\n            )}\n            style={{ maxWidth: \"100%\" }}\n          >\n            {label.length > truncate ? `${label.slice(0, truncate)}...` : label}\n          </p>\n        ) : (\n          <p className=\"overflow-hidden whitespace-nowrap text-ellipsis\" style={{ maxWidth: \"100%\" }}>\n            {label}\n          </p>\n        )}\n\n        {acceptsUpload && (\n          <input\n            type=\"file\"\n            onChange={handleFileUpload}\n            className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n            aria-label={`Upload file for ${label}`}\n          />\n        )}\n\n        {removable && onRemove && (\n          <button\n            onClick={onRemove}\n            className=\"ml-1 flex-shrink-0\"\n            aria-label={`Remove ${label}`}\n            type=\"button\"\n          >\n            <CloseIcon size={12} className=\"cursor-pointer\" />\n          </button>\n        )}\n      </div>\n    );\n\n    const content = tooltip ? <Tooltip title={label} delayShow>{inner}</Tooltip> : inner;\n\n    if (href) {\n      if (shouldRenderAnchor) {\n        return (\n          <a\n            ref={ref as Ref<HTMLAnchorElement>}\n            href={href}\n            className={tagClassName}\n            style={tagStyle}\n            onMouseDown={onMouseDown}\n            onClick={onClick}\n            aria-label={ariaLabel || `Tag: ${label}`}\n            role={role}\n            data-theme={theme}\n          >\n            {content}\n          </a>\n        );\n      }\n\n      return (\n        <Link\n          ref={ref as Ref<HTMLAnchorElement>}\n          to={href}\n          className={tagClassName}\n          style={tagStyle}\n          onMouseDown={onMouseDown}\n          onClick={onClick}\n          aria-label={ariaLabel || `Tag: ${label}`}\n          role={role}\n          data-theme={theme}\n        >\n          {content}\n        </Link>\n      );\n    }\n\n    return (\n      <div\n        ref={ref as Ref<HTMLDivElement>}\n        className={tagClassName}\n        style={tagStyle}\n        onMouseDown={onMouseDown}\n        onClick={onClick}\n        onKeyDown={\n          isInteractive\n            ? (event) => {\n              if (event.key === \"Enter\" || event.key === \" \") {\n                event.preventDefault();\n                event.currentTarget.click();\n              }\n            }\n            : undefined\n        }\n        aria-label={ariaLabel || `Tag: ${label}`}\n        role={role ?? (isInteractive ? \"button\" : undefined)}\n        tabIndex={isInteractive ? 0 : undefined}\n        data-theme={theme}\n      >\n        {content}\n      </div>\n    );\n  }\n);\n\nTag.displayName = \"Tag\";\n"],"names":["TAG_COLOR_CLASSES","HEX_COLOR_PATTERN","EXTERNAL_HREF_PATTERN","getColorClasses","color","isHexColor","normalizeHex","value","trimmed","isExternalHref","href","getSizeClasses","size","Tag","forwardRef","label","className","onClick","onMouseDown","truncate","isHashColor","theme","icon","removable","onRemove","onUpload","acceptsUpload","tooltip","ariaLabel","role","ref","normalizedHex","tagStyle","isInteractive","shouldRenderAnchor","handleFileUpload","event","file","tagClassName","cn","inner","jsx","CloseIcon","content","Tooltip","Link"],"mappings":"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"}

package/dist/components/floating-bar/FloatingBar.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),C=require("antd"),i=require("../../_virtual/index.cjs.js"),g=require("framer-motion"),c=require("react"),T=require("react-i18next"),n=require("../data-display/typography/Typography.cjs.js"),B=require("../buttons/option-button/OptionButton.cjs.js"),L=require("../button/IconButton.cjs.js"),w=require("../tooltip/Tooltip.cjs.js"),q=require("../icon/icons.generated.cjs.js"),R=({size:r=24,fill:o="currentColor",className:p})=>a.jsx("svg",{className:p,width:r,height:r,viewBox:"0 0 20 20",fill:o,xmlns:"http://www.w3.org/2000/svg",children:a.jsx("path",{d:"M10.0002 11.1666L5.91683 15.2499C5.76405 15.4027 5.56961 15.4791 5.3335 15.4791C5.09739 15.4791 4.90294 15.4027 4.75016 15.2499C4.59738 15.0971 4.521 14.9027 4.521 14.6666C4.521 14.4305 4.59738 14.236 4.75016 14.0833L8.8335 9.99992L4.75016 5.91659C4.59738 5.76381 4.521 5.56936 4.521 5.33325C4.521 5.09714 4.59738 4.9027 4.75016 4.74992C4.90294 4.59714 5.09739 4.52075 5.3335 4.52075C5.56961 4.52075 5.76405 4.59714 5.91683 4.74992L10.0002 8.83325L14.0835 4.74992C14.2363 4.59714 14.4307 4.52075 14.6668 4.52075C14.9029 4.52075 15.0974 4.59714 15.2502 4.74992C15.4029 4.9027 15.4793 5.09714 15.4793 5.33325C15.4793 5.56936 15.4029 5.76381 15.2502 5.91659L11.1668 9.99992L15.2502 14.0833C15.4029 14.236 15.4793 14.4305 15.4793 14.6666C15.4793 14.9027 15.4029 15.0971 15.2502 15.2499C15.0974 15.4027 14.9029 15.4791 14.6668 15.4791C14.4307 15.4791 14.2363 15.4027 14.0835 15.2499L10.0002 11.1666Z"})}),F=({fill:r="#cccccc",className:o})=>a.jsx("svg",{height:"20",width:"20",viewBox:"0 0 20 20",focusable:"false",className:o,children:a.jsx("path",{fill:r,d:"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"})}),j=r=>{const{show:o,isFlowDashboard:p,onClose:k,actionItems:m,selectedItemsCount:N,deleteConfig:d,showActionBg:D}=r,{t:h}=T.useTranslation(),[y,u]=c.useState(!1),[I,b]=c.useState(!0),t=c.useRef(null),f=c.useRef(null);c.useEffect(()=>{const e=new ResizeObserver(()=>{if(t.current&&f.current){const s=t.current.scrollWidth-100;m.length*180+100>s?b(!1):b(!0)}});return t.current&&e.observe(t.current),()=>{t.current&&e.unobserve(t.current)}});const l={label:h("Delete"),icon:a.jsx(q.DeleteIcon,{size:16,className:"text-error-500"}),onClick:d?.onClick,...d},x=m.filter(e=>e.visible!==!1).map((e,s)=>({key:s,label:a.jsx(B.OptionButton,{icon:e.dropdownIcon,text:e?.label||"",onClick:e.onClick,className:"font-inter text-[14px] font-medium text-black-900 dark:text-black-200 gap-1.5"}),children:e.dropdownItems,disabled:!1}));return o?a.jsx(g.motion.div,{initial:{y:20,opacity:0},animate:{y:0,opacity:1},exit:{y:20,opacity:0},transition:{duration:.2,ease:[.4,0,.2,1],opacity:{duration:.15}},ref:t,className:i("h-[40px]",p?"ml-60 w-1/2":"w-full"),children:a.jsxs("div",{className:i("h-[40px] border py-1.5 px-2 text-white bg-primary-800 dark:bg-black-700 flex justify-between items-center"),children:[a.jsxs("div",{className:"flex items-center",children:[a.jsx(L,{tooltip:"Close",variant:"ghost",onClick:k,className:"!p-0 text-white hover:opacity-80 hover:rotate-90 transition-all duration-200",children:a.jsx(R,{size:20})}),a.jsxs("div",{className:"flex items-center gap-1.5 ml-2",children:[a.jsx("span",{className:"text-primary-600 dark:text-black-100 bg-primary-50 dark:bg-black-800 border-primary-200 dark:border-black-800 text-xs leading-4 font-normal border rounded-full pr-2 pl-2",children:N||0}),a.jsx(n.Typography,{size:"extra-small",appearance:"custom",className:"text-white",children:h("Selected")})]})]}),a.jsx("div",{ref:f,className:i("h-[36px] flex items-center rounded-full font-inter",D?"bg-primary-900 dark:bg-black-800 px-[10px] rounded-[43px]":""),children:I?a.jsxs(g.motion.div,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.2},className:"flex bg-primary-800 dark:bg-black-800 px-4 rounded-full",children:[m.map((e,s)=>e.visible!==!1&&a.jsx("div",{children:e.type==="dropdown"?a.jsx(C.Dropdown,{menu:{items:e.dropdownItems},trigger:[e.dropdownTrigger||"click"],overlayClassName:"!min-w-[148px]",placement:"bottomRight",getPopupContainer:v=>v.parentElement,open:y,onOpenChange:u,children:a.jsx("button",{id:`btn-floating-bar-${e.label}`,onClick:e.onClick,disabled:e.disabled,className:i(e?.label?"flex items-center mx-1 gap-1.5 py-1 pr-3 pl-2 rounded-md text-white hover:text-primary-50 hover:scale-105 transition-all duration-200 bg-transparent":"bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80",e?.hideLabel&&"!p-1.5",(e.label==="Delete"||e.label==="Remove"||e.label==="Delete user"||e.label==="Delete Permanently")&&"!text-error-500",e.disabled&&"opacity-70"),children:a.jsxs(w,{hideTooltip:!e.tooltip,title:e.tooltip,className:"flex items-center",children:[e.icon,!e?.hideLabel&&e.label&&a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-inherit ml-1.5",appearance:"custom",children:e.label})]})},s)}):a.jsx("button",{id:`btn-floating-bar-${e.label}`,onClick:e.onClick,disabled:e.disabled,className:i(e?.label?"flex items-center mx-1 gap-1.5 py-1 pr-3 pl-2 rounded-md text-white hover:text-primary-50 hover:scale-105 transition-all duration-200 bg-transparent":"bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80",e?.hideLabel&&"!p-1.5",(e.label==="Delete"||e.label==="Remove"||e.label==="Delete Permanently")&&"!text-error-500",e.disabled&&"opacity-70"),children:a.jsxs(w,{hideTooltip:!e.tooltip,title:e.tooltip,className:"flex items-center",children:[e.icon,!e?.hideLabel&&e.label&&a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-inherit ml-1.5",appearance:"custom",children:e.label})]})})},s)),d?a.jsxs("button",{id:`btn-floating-bar-${l.label}`,onClick:l.onClick,disabled:l.disabled,className:i("flex items-center gap-1.5 py-1 pr-3 pl-2 rounded-md hover:scale-105 hover:opacity-80 transition-all duration-200",l.disabled&&"opacity-70"),children:[l.icon,a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-error-500",appearance:"custom",children:l.label})]}):null]}):a.jsxs(g.motion.div,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.2},className:"minw-[150px] p-1.5 flex items-center",children:[a.jsx(C.Dropdown,{menu:{items:x},trigger:["click"],overlayClassName:"!min-w-[148px]",placement:"bottomRight",getPopupContainer:e=>e.parentElement,open:y,onOpenChange:u,children:a.jsxs("button",{id:"btn-floating-bar-actions",disabled:x.length===0,className:i("flex items-center gap-1.5 px-2 py-1 w-22 h-7 rounded-full bg-primary-700 hover:scale-105 hover:opacity-80 transition-all duration-200",x.length===0&&"opacity-60 hover:scale-100 hover:opacity-60"),type:"button",children:[a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-white",children:h("Actions")}),a.jsx(F,{fill:"#FFFFFF",className:"w-[16px] h-[16px]"})]})}),d?a.jsxs("button",{id:`btn-floating-bar-${l.label}`,onClick:l.onClick,disabled:l.disabled,className:i("flex items-center gap-1.5 py-1 pr-3 pl-2 rounded-md hover:scale-105 hover:opacity-80 transition-all duration-200",l.disabled&&"opacity-70"),type:"button",children:[l.icon,a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-error-500",appearance:"custom",children:l.label})]}):null]})})]})}):null};j.displayName="FloatingBar";exports.FloatingBar=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),C=require("antd"),i=require("../../_virtual/index.cjs.js"),g=require("framer-motion"),c=require("react"),T=require("react-i18next"),n=require("../data-display/typography/Typography.cjs.js"),B=require("../buttons/option-button/OptionButton.cjs.js"),L=require("../button/IconButton.cjs.js"),w=require("../tooltip/Tooltip.cjs.js"),q=require("../icon/icons.generated.cjs.js"),R=({size:r=24,fill:o="currentColor",className:p})=>a.jsx("svg",{className:p,width:r,height:r,viewBox:"0 0 20 20",fill:o,xmlns:"http://www.w3.org/2000/svg",children:a.jsx("path",{d:"M10.0002 11.1666L5.91683 15.2499C5.76405 15.4027 5.56961 15.4791 5.3335 15.4791C5.09739 15.4791 4.90294 15.4027 4.75016 15.2499C4.59738 15.0971 4.521 14.9027 4.521 14.6666C4.521 14.4305 4.59738 14.236 4.75016 14.0833L8.8335 9.99992L4.75016 5.91659C4.59738 5.76381 4.521 5.56936 4.521 5.33325C4.521 5.09714 4.59738 4.9027 4.75016 4.74992C4.90294 4.59714 5.09739 4.52075 5.3335 4.52075C5.56961 4.52075 5.76405 4.59714 5.91683 4.74992L10.0002 8.83325L14.0835 4.74992C14.2363 4.59714 14.4307 4.52075 14.6668 4.52075C14.9029 4.52075 15.0974 4.59714 15.2502 4.74992C15.4029 4.9027 15.4793 5.09714 15.4793 5.33325C15.4793 5.56936 15.4029 5.76381 15.2502 5.91659L11.1668 9.99992L15.2502 14.0833C15.4029 14.236 15.4793 14.4305 15.4793 14.6666C15.4793 14.9027 15.4029 15.0971 15.2502 15.2499C15.0974 15.4027 14.9029 15.4791 14.6668 15.4791C14.4307 15.4791 14.2363 15.4027 14.0835 15.2499L10.0002 11.1666Z"})}),F=({fill:r="#cccccc",className:o})=>a.jsx("svg",{height:"20",width:"20",viewBox:"0 0 20 20",focusable:"false",className:o,children:a.jsx("path",{fill:r,d:"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"})}),j=r=>{const{show:o,isFlowDashboard:p,onClose:k,actionItems:m,selectedItemsCount:N,deleteConfig:d,showActionBg:D}=r,{t:h}=T.useTranslation(),[y,u]=c.useState(!1),[I,b]=c.useState(!0),t=c.useRef(null),f=c.useRef(null);c.useEffect(()=>{const e=new ResizeObserver(()=>{if(t.current&&f.current){const s=t.current.scrollWidth-100;m.length*180+100>s?b(!1):b(!0)}});return t.current&&e.observe(t.current),()=>{t.current&&e.unobserve(t.current)}});const l={label:h("Delete"),icon:a.jsx(q.DeleteIcon,{size:16,className:"text-error-500"}),onClick:d?.onClick,...d},x=m.filter(e=>e.visible!==!1).map((e,s)=>({key:s,label:a.jsx(B.OptionButton,{icon:e.dropdownIcon,text:e?.label||"",onClick:e.onClick,className:"font-inter text-base font-medium text-black-900 dark:text-black-200 gap-1.5"}),children:e.dropdownItems,disabled:!1}));return o?a.jsx(g.motion.div,{initial:{y:20,opacity:0},animate:{y:0,opacity:1},exit:{y:20,opacity:0},transition:{duration:.2,ease:[.4,0,.2,1],opacity:{duration:.15}},ref:t,className:i("h-[40px]",p?"ml-60 w-1/2":"w-full"),children:a.jsxs("div",{className:i("h-[40px] border py-1.5 px-2 text-white bg-primary-800 dark:bg-black-700 flex justify-between items-center"),children:[a.jsxs("div",{className:"flex items-center",children:[a.jsx(L,{tooltip:"Close",variant:"ghost",onClick:k,className:"!p-0 text-white hover:opacity-80 hover:rotate-90 transition-all duration-200",children:a.jsx(R,{size:20})}),a.jsxs("div",{className:"flex items-center gap-1.5 ml-2",children:[a.jsx("span",{className:"text-primary-600 dark:text-black-100 bg-primary-50 dark:bg-black-800 border-primary-200 dark:border-black-800 text-xs leading-4 font-normal border rounded-full pr-2 pl-2",children:N||0}),a.jsx(n.Typography,{size:"extra-small",appearance:"custom",className:"text-white",children:h("Selected")})]})]}),a.jsx("div",{ref:f,className:i("h-[36px] flex items-center rounded-full font-inter",D?"bg-primary-900 dark:bg-black-800 px-[10px] rounded-[43px]":""),children:I?a.jsxs(g.motion.div,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.2},className:"flex bg-primary-800 dark:bg-black-800 px-4 rounded-full",children:[m.map((e,s)=>e.visible!==!1&&a.jsx("div",{children:e.type==="dropdown"?a.jsx(C.Dropdown,{menu:{items:e.dropdownItems},trigger:[e.dropdownTrigger||"click"],overlayClassName:"!min-w-[148px]",placement:"bottomRight",getPopupContainer:v=>v.parentElement,open:y,onOpenChange:u,children:a.jsx("button",{id:`btn-floating-bar-${e.label}`,onClick:e.onClick,disabled:e.disabled,className:i(e?.label?"flex items-center mx-1 gap-1.5 py-1 pr-3 pl-2 rounded-md text-white hover:text-primary-50 hover:scale-105 transition-all duration-200 bg-transparent":"bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80",e?.hideLabel&&"!p-1.5",(e.label==="Delete"||e.label==="Remove"||e.label==="Delete user"||e.label==="Delete Permanently")&&"!text-error-500",e.disabled&&"opacity-70"),children:a.jsxs(w,{hideTooltip:!e.tooltip,title:e.tooltip,className:"flex items-center",children:[e.icon,!e?.hideLabel&&e.label&&a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-inherit ml-1.5",appearance:"custom",children:e.label})]})},s)}):a.jsx("button",{id:`btn-floating-bar-${e.label}`,onClick:e.onClick,disabled:e.disabled,className:i(e?.label?"flex items-center mx-1 gap-1.5 py-1 pr-3 pl-2 rounded-md text-white hover:text-primary-50 hover:scale-105 transition-all duration-200 bg-transparent":"bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80",e?.hideLabel&&"!p-1.5",(e.label==="Delete"||e.label==="Remove"||e.label==="Delete Permanently")&&"!text-error-500",e.disabled&&"opacity-70"),children:a.jsxs(w,{hideTooltip:!e.tooltip,title:e.tooltip,className:"flex items-center",children:[e.icon,!e?.hideLabel&&e.label&&a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-inherit ml-1.5",appearance:"custom",children:e.label})]})})},s)),d?a.jsxs("button",{id:`btn-floating-bar-${l.label}`,onClick:l.onClick,disabled:l.disabled,className:i("flex items-center gap-1.5 py-1 pr-3 pl-2 rounded-md hover:scale-105 hover:opacity-80 transition-all duration-200",l.disabled&&"opacity-70"),children:[l.icon,a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-error-500",appearance:"custom",children:l.label})]}):null]}):a.jsxs(g.motion.div,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.2},className:"minw-[150px] p-1.5 flex items-center",children:[a.jsx(C.Dropdown,{menu:{items:x},trigger:["click"],overlayClassName:"!min-w-[148px]",placement:"bottomRight",getPopupContainer:e=>e.parentElement,open:y,onOpenChange:u,children:a.jsxs("button",{id:"btn-floating-bar-actions",disabled:x.length===0,className:i("flex items-center gap-1.5 px-2 py-1 w-22 h-7 rounded-full bg-primary-700 hover:scale-105 hover:opacity-80 transition-all duration-200",x.length===0&&"opacity-60 hover:scale-100 hover:opacity-60"),type:"button",children:[a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-white",children:h("Actions")}),a.jsx(F,{fill:"#FFFFFF",className:"w-[16px] h-[16px]"})]})}),d?a.jsxs("button",{id:`btn-floating-bar-${l.label}`,onClick:l.onClick,disabled:l.disabled,className:i("flex items-center gap-1.5 py-1 pr-3 pl-2 rounded-md hover:scale-105 hover:opacity-80 transition-all duration-200",l.disabled&&"opacity-70"),type:"button",children:[l.icon,a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-error-500",appearance:"custom",children:l.label})]}):null]})})]})}):null};j.displayName="FloatingBar";exports.FloatingBar=j;
 //# sourceMappingURL=FloatingBar.cjs.js.map

package/dist/components/floating-bar/FloatingBar.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingBar.cjs.js","sources":["../../../src/components/floating-bar/FloatingBar.tsx"],"sourcesContent":["import { Dropdown } from \"antd\";\nimport cn from \"classnames\";\nimport { motion } from \"framer-motion\";\nimport { useEffect, useRef, useState, type FC, type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Typography } from \"../data-display/typography/Typography\";\nimport { OptionButton } from \"../buttons/option-button/OptionButton\";\nimport IconButton from \"../button/IconButton\";\nimport Tooltip from \"../tooltip/Tooltip\";\nimport { DeleteIcon } from \"../icon\";\n\n/**\n * Close icon component\n */\nconst CloseIcon: FC<{ size?: number; fill?: string; className?: string }> = ({\n  size = 24,\n  fill = \"currentColor\",\n  className,\n}) => (\n  <svg\n    className={className}\n    width={size}\n    height={size}\n    viewBox=\"0 0 20 20\"\n    fill={fill}\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path d=\"M10.0002 11.1666L5.91683 15.2499C5.76405 15.4027 5.56961 15.4791 5.3335 15.4791C5.09739 15.4791 4.90294 15.4027 4.75016 15.2499C4.59738 15.0971 4.521 14.9027 4.521 14.6666C4.521 14.4305 4.59738 14.236 4.75016 14.0833L8.8335 9.99992L4.75016 5.91659C4.59738 5.76381 4.521 5.56936 4.521 5.33325C4.521 5.09714 4.59738 4.9027 4.75016 4.74992C4.90294 4.59714 5.09739 4.52075 5.3335 4.52075C5.56961 4.52075 5.76405 4.59714 5.91683 4.74992L10.0002 8.83325L14.0835 4.74992C14.2363 4.59714 14.4307 4.52075 14.6668 4.52075C14.9029 4.52075 15.0974 4.59714 15.2502 4.74992C15.4029 4.9027 15.4793 5.09714 15.4793 5.33325C15.4793 5.56936 15.4029 5.76381 15.2502 5.91659L11.1668 9.99992L15.2502 14.0833C15.4029 14.236 15.4793 14.4305 15.4793 14.6666C15.4793 14.9027 15.4029 15.0971 15.2502 15.2499C15.0974 15.4027 14.9029 15.4791 14.6668 15.4791C14.4307 15.4791 14.2363 15.4027 14.0835 15.2499L10.0002 11.1666Z\" />\n  </svg>\n);\n\n/**\n * Dropdown arrow icon component\n */\nconst DropdownArrowIcon: FC<{ fill?: string; className?: string }> = ({\n  fill = \"#cccccc\",\n  className,\n}) => (\n  <svg\n    height=\"20\"\n    width=\"20\"\n    viewBox=\"0 0 20 20\"\n    focusable=\"false\"\n    className={className}\n  >\n    <path\n      fill={fill}\n      d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"\n    />\n  </svg>\n);\n\n/**\n * Configuration for action buttons in the floating bar\n */\nexport type ButtonConfig = {\n  /** Button label text */\n  label?: string;\n  /** Icon element to display */\n  icon: ReactNode;\n  /** Click handler for the action */\n  onClick?: () => void;\n  /** Icon for dropdown mode */\n  dropdownIcon?: ReactNode;\n  /** Whether the action is visible */\n  visible?: boolean;\n  /** Whether the action is disabled */\n  disabled?: boolean;\n  /** Tooltip text */\n  tooltip?: string;\n  /** Whether to hide the label text */\n  hideLabel?: boolean;\n  /** Action type */\n  type?: \"button\" | \"dropdown\";\n  /** Dropdown trigger mode */\n  dropdownTrigger?: \"click\" | \"hover\";\n  /** Dropdown menu items */\n  dropdownItems?: Array<{\n    label: ReactNode;\n    key: string;\n    disabled?: boolean;\n  }>;\n};\n\n/**\n * Props for the FloatingBar component\n */\nexport type TFloatingBar = {\n  /** Whether the floating bar is visible */\n  show?: boolean;\n  /** Close handler */\n  onClose: () => void;\n  /** Whether this is used in flow dashboard layout */\n  isFlowDashboard?: boolean;\n  /** Array of action configurations */\n  actionItems: ButtonConfig[];\n  /** Number of selected items */\n  selectedItemsCount?: number;\n  /** Delete action configuration */\n  deleteConfig?: {\n    label?: string;\n    disabled?: boolean;\n    onClick?: () => void;\n  };\n  /** Whether to show action background */\n  showActionBg?: boolean;\n};\n\n/**\n * FloatingBar component provides a floating action bar for bulk operations.\n * Drop-in replacement matching the lax-web-portal implementation.\n *\n * @example\n * ```tsx\n * <FloatingBar\n *   show={selectedItems.length > 0}\n *   onClose={() => setSelectedItems([])}\n *   selectedItemsCount={selectedItems.length}\n *   actionItems={[\n *     {\n *       label: \"Edit\",\n *       icon: <EditIcon size={16} />,\n *       onClick: handleEdit,\n *     },\n *     {\n *       label: \"Archive\",\n *       icon: <ArchiveIcon size={16} />,\n *       onClick: handleArchive,\n *     },\n *   ]}\n *   deleteConfig={{\n *     label: \"Delete\",\n *     onClick: handleDelete,\n *   }}\n * />\n * ```\n */\nexport const FloatingBar: FC<TFloatingBar> = (props) => {\n  const {\n    show,\n    isFlowDashboard,\n    onClose,\n    actionItems,\n    selectedItemsCount,\n    deleteConfig,\n    showActionBg,\n  } = props;\n\n  const { t } = useTranslation();\n  const [showDropdown, setShowDropdown] = useState<boolean>(false);\n  const [showButtons, setShowButtons] = useState<boolean>(true);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const actionContainerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const observer = new ResizeObserver(() => {\n      if (containerRef.current && actionContainerRef.current) {\n        const containerWidth = containerRef.current.scrollWidth - 100;\n        const totalActionItemsWidth = actionItems.length * 180 + 100;\n        if (totalActionItemsWidth > containerWidth) {\n          setShowButtons(false);\n        } else {\n          setShowButtons(true);\n        }\n      }\n    });\n\n    if (containerRef.current) {\n      observer.observe(containerRef.current);\n    }\n\n    return () => {\n      if (containerRef.current) {\n        observer.unobserve(containerRef.current);\n      }\n    };\n  });\n\n  const deleteButtonConfig = {\n    label: t(\"Delete\"),\n    icon: <DeleteIcon size={16} className=\"text-error-500\" />,\n    color: \"text-error-500 dark:text-error-500\",\n    onClick: deleteConfig?.onClick,\n    ...deleteConfig,\n  };\n\n  const dropDownItems = actionItems\n    .filter((button) => button.visible !== false)\n    .map((button, index) => ({\n      key: index,\n      label: (\n        <OptionButton\n          icon={button.dropdownIcon}\n          text={button?.label || \"\"}\n          onClick={button.onClick}\n          className=\"font-inter text-[14px] font-medium text-black-900 dark:text-black-200 gap-1.5\"\n        />\n      ),\n      children: button.dropdownItems,\n      disabled: false,\n    }));\n\n  return !show ? null : (\n    <motion.div\n      initial={{ y: 20, opacity: 0 }}\n      animate={{ y: 0, opacity: 1 }}\n      exit={{ y: 20, opacity: 0 }}\n      transition={{\n        duration: 0.2,\n        ease: [0.4, 0, 0.2, 1],\n        opacity: { duration: 0.15 },\n      }}\n      ref={containerRef}\n      className={cn(\"h-[40px]\", isFlowDashboard ? \"ml-60 w-1/2\" : \"w-full\")}\n    >\n      <div\n        className={cn(\n          \"h-[40px] border py-1.5 px-2 text-white bg-primary-800 dark:bg-black-700 flex justify-between items-center\"\n        )}\n      >\n        <div className=\"flex items-center\">\n          <IconButton\n            tooltip=\"Close\"\n            variant=\"ghost\"\n            onClick={onClose}\n            className=\"!p-0 text-white hover:opacity-80 hover:rotate-90 transition-all duration-200\"\n          >\n            <CloseIcon size={20} />\n          </IconButton>\n          <div className=\"flex items-center gap-1.5 ml-2\">\n            <span className=\"text-primary-600 dark:text-black-100 bg-primary-50 dark:bg-black-800 border-primary-200 dark:border-black-800 text-xs leading-4 font-normal border rounded-full pr-2 pl-2\">\n              {selectedItemsCount || 0}\n            </span>\n            <Typography\n              size=\"extra-small\"\n              appearance=\"custom\"\n              className=\"text-white\"\n            >\n              {t(\"Selected\")}\n            </Typography>\n          </div>\n        </div>\n        <div\n          ref={actionContainerRef}\n          className={cn(\n            \"h-[36px] flex items-center rounded-full font-inter\",\n            showActionBg\n              ? \"bg-primary-900 dark:bg-black-800 px-[10px] rounded-[43px]\"\n              : \"\"\n          )}\n        >\n          {showButtons ? (\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={{ duration: 0.2 }}\n              className=\"flex bg-primary-800 dark:bg-black-800 px-4 rounded-full\"\n            >\n              {actionItems.map(\n                (button, index) =>\n                  button.visible !== false && (\n                    <div key={index}>\n                      {button.type === \"dropdown\" ? (\n                        <Dropdown\n                          menu={{\n                            items: button.dropdownItems,\n                          }}\n                          trigger={[button.dropdownTrigger || \"click\"]}\n                          overlayClassName=\"!min-w-[148px]\"\n                          placement=\"bottomRight\"\n                          getPopupContainer={(trigger) =>\n                            trigger.parentElement as HTMLElement\n                          }\n                          open={showDropdown}\n                          onOpenChange={setShowDropdown}\n                        >\n                          <button\n                            key={index}\n                            id={`btn-floating-bar-${button.label}`}\n                            onClick={button.onClick}\n                            disabled={button.disabled}\n                            className={cn(\n                              !button?.label\n                                ? \"bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80\"\n                                : \"flex items-center mx-1 gap-1.5 py-1 pr-3 pl-2 rounded-md text-white hover:text-primary-50 hover:scale-105 transition-all duration-200 bg-transparent\",\n                              button?.hideLabel && \"!p-1.5\",\n                              (button.label === \"Delete\" ||\n                                button.label === \"Remove\" ||\n                                button.label === \"Delete user\" ||\n                                button.label === \"Delete Permanently\") &&\n                                \"!text-error-500\",\n                              button.disabled && \"opacity-70\"\n                            )}\n                          >\n                            <Tooltip\n                              hideTooltip={!button.tooltip}\n                              title={button.tooltip}\n                              className=\"flex items-center\"\n                            >\n                              {button.icon}\n                              {!button?.hideLabel && button.label && (\n                                <Typography\n                                  size=\"small\"\n                                  variant=\"medium\"\n                                  className={\"text-inherit ml-1.5\"}\n                                  appearance=\"custom\"\n                                >\n                                  {button.label}\n                                </Typography>\n                              )}\n                            </Tooltip>\n                          </button>\n                        </Dropdown>\n                      ) : (\n                        <button\n                          id={`btn-floating-bar-${button.label}`}\n                          onClick={button.onClick}\n                          disabled={button.disabled}\n                          className={cn(\n                            !button?.label\n                              ? \"bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80\"\n                              : \"flex items-center mx-1 gap-1.5 py-1 pr-3 pl-2 rounded-md text-white hover:text-primary-50 hover:scale-105 transition-all duration-200 bg-transparent\",\n                            button?.hideLabel && \"!p-1.5\",\n                            (button.label === \"Delete\" ||\n                              button.label === \"Remove\" ||\n                              button.label === \"Delete Permanently\") &&\n                              \"!text-error-500\",\n                            button.disabled && \"opacity-70\"\n                          )}\n                        >\n                          <Tooltip\n                            hideTooltip={!button.tooltip}\n                            title={button.tooltip}\n                            className=\"flex items-center\"\n                          >\n                            {button.icon}\n\n                            {!button?.hideLabel && button.label && (\n                              <Typography\n                                size=\"small\"\n                                variant=\"medium\"\n                                className={\"text-inherit ml-1.5\"}\n                                appearance=\"custom\"\n                              >\n                                {button.label}\n                              </Typography>\n                            )}\n                          </Tooltip>\n                        </button>\n                      )}\n                    </div>\n                  )\n              )}\n              {deleteConfig ? (\n                <button\n                  id={`btn-floating-bar-${deleteButtonConfig.label}`}\n                  onClick={deleteButtonConfig.onClick}\n                  disabled={deleteButtonConfig.disabled}\n                  className={cn(\n                    \"flex items-center gap-1.5 py-1 pr-3 pl-2 rounded-md hover:scale-105 hover:opacity-80 transition-all duration-200\",\n                    deleteButtonConfig.disabled && \"opacity-70\"\n                  )}\n                >\n                  {deleteButtonConfig.icon}\n                  <Typography\n                    size=\"small\"\n                    variant=\"medium\"\n                    className=\"text-error-500\"\n                    appearance=\"custom\"\n                  >\n                    {deleteButtonConfig.label}\n                  </Typography>\n                </button>\n              ) : null}\n            </motion.div>\n          ) : (\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={{ duration: 0.2 }}\n              className=\"minw-[150px] p-1.5 flex items-center\"\n            >\n              <Dropdown\n                menu={{\n                  items: dropDownItems,\n                }}\n                trigger={[\"click\"]}\n                overlayClassName=\"!min-w-[148px]\"\n                placement=\"bottomRight\"\n                getPopupContainer={(trigger) =>\n                  trigger.parentElement as HTMLElement\n                }\n                open={showDropdown}\n                onOpenChange={setShowDropdown}\n              >\n                <button\n                  id={`btn-floating-bar-actions`}\n                  disabled={dropDownItems.length === 0}\n                  className={cn(\n                    \"flex items-center gap-1.5 px-2 py-1 w-22 h-7 rounded-full bg-primary-700 hover:scale-105 hover:opacity-80 transition-all duration-200\",\n                    dropDownItems.length === 0 &&\n                      \"opacity-60 hover:scale-100 hover:opacity-60\"\n                  )}\n                  type=\"button\"\n                >\n                  <Typography\n                    size=\"small\"\n                    variant=\"medium\"\n                    className=\"text-white\"\n                  >\n                    {t(\"Actions\")}\n                  </Typography>\n                  <DropdownArrowIcon\n                    fill=\"#FFFFFF\"\n                    className=\"w-[16px] h-[16px]\"\n                  />\n                </button>\n              </Dropdown>\n              {deleteConfig ? (\n                <button\n                  id={`btn-floating-bar-${deleteButtonConfig.label}`}\n                  onClick={deleteButtonConfig.onClick}\n                  disabled={deleteButtonConfig.disabled}\n                  className={cn(\n                    \"flex items-center gap-1.5 py-1 pr-3 pl-2 rounded-md hover:scale-105 hover:opacity-80 transition-all duration-200\",\n                    deleteButtonConfig.disabled && \"opacity-70\"\n                  )}\n                  type=\"button\"\n                >\n                  {deleteButtonConfig.icon}\n                  <Typography\n                    size=\"small\"\n                    variant=\"medium\"\n                    className=\"text-error-500\"\n                    appearance=\"custom\"\n                  >\n                    {deleteButtonConfig.label}\n                  </Typography>\n                </button>\n              ) : null}\n            </motion.div>\n          )}\n        </div>\n      </div>\n    </motion.div>\n  );\n};\n\nFloatingBar.displayName = \"FloatingBar\";\n\n// Re-export types for convenience\nexport type { ButtonConfig as FloatingBarActionConfig };\nexport type FloatingBarDeleteConfig = TFloatingBar[\"deleteConfig\"];\nexport type FloatingBarProps = TFloatingBar;\n\n// Legacy type exports for backwards compatibility\nexport type FloatingBarSize = \"small\" | \"medium\" | \"large\";\nexport type FloatingBarPosition = \"top\" | \"bottom\";\nexport type FloatingBarTheme = \"primary\" | \"dark\" | \"light\";\n"],"names":["CloseIcon","size","fill","className","jsx","DropdownArrowIcon","FloatingBar","props","show","isFlowDashboard","onClose","actionItems","selectedItemsCount","deleteConfig","showActionBg","t","useTranslation","showDropdown","setShowDropdown","useState","showButtons","setShowButtons","containerRef","useRef","actionContainerRef","useEffect","observer","containerWidth","deleteButtonConfig","DeleteIcon","dropDownItems","button","index","OptionButton","motion","cn","jsxs","IconButton","Typography","Dropdown","trigger","Tooltip"],"mappings":"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"}
+{"version":3,"file":"FloatingBar.cjs.js","sources":["../../../src/components/floating-bar/FloatingBar.tsx"],"sourcesContent":["import { Dropdown } from \"antd\";\nimport cn from \"classnames\";\nimport { motion } from \"framer-motion\";\nimport { useEffect, useRef, useState, type FC, type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Typography } from \"../data-display/typography/Typography\";\nimport { OptionButton } from \"../buttons/option-button/OptionButton\";\nimport IconButton from \"../button/IconButton\";\nimport Tooltip from \"../tooltip/Tooltip\";\nimport { DeleteIcon } from \"../icon\";\n\n/**\n * Close icon component\n */\nconst CloseIcon: FC<{ size?: number; fill?: string; className?: string }> = ({\n  size = 24,\n  fill = \"currentColor\",\n  className,\n}) => (\n  <svg\n    className={className}\n    width={size}\n    height={size}\n    viewBox=\"0 0 20 20\"\n    fill={fill}\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path d=\"M10.0002 11.1666L5.91683 15.2499C5.76405 15.4027 5.56961 15.4791 5.3335 15.4791C5.09739 15.4791 4.90294 15.4027 4.75016 15.2499C4.59738 15.0971 4.521 14.9027 4.521 14.6666C4.521 14.4305 4.59738 14.236 4.75016 14.0833L8.8335 9.99992L4.75016 5.91659C4.59738 5.76381 4.521 5.56936 4.521 5.33325C4.521 5.09714 4.59738 4.9027 4.75016 4.74992C4.90294 4.59714 5.09739 4.52075 5.3335 4.52075C5.56961 4.52075 5.76405 4.59714 5.91683 4.74992L10.0002 8.83325L14.0835 4.74992C14.2363 4.59714 14.4307 4.52075 14.6668 4.52075C14.9029 4.52075 15.0974 4.59714 15.2502 4.74992C15.4029 4.9027 15.4793 5.09714 15.4793 5.33325C15.4793 5.56936 15.4029 5.76381 15.2502 5.91659L11.1668 9.99992L15.2502 14.0833C15.4029 14.236 15.4793 14.4305 15.4793 14.6666C15.4793 14.9027 15.4029 15.0971 15.2502 15.2499C15.0974 15.4027 14.9029 15.4791 14.6668 15.4791C14.4307 15.4791 14.2363 15.4027 14.0835 15.2499L10.0002 11.1666Z\" />\n  </svg>\n);\n\n/**\n * Dropdown arrow icon component\n */\nconst DropdownArrowIcon: FC<{ fill?: string; className?: string }> = ({\n  fill = \"#cccccc\",\n  className,\n}) => (\n  <svg\n    height=\"20\"\n    width=\"20\"\n    viewBox=\"0 0 20 20\"\n    focusable=\"false\"\n    className={className}\n  >\n    <path\n      fill={fill}\n      d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"\n    />\n  </svg>\n);\n\n/**\n * Configuration for action buttons in the floating bar\n */\nexport type ButtonConfig = {\n  /** Button label text */\n  label?: string;\n  /** Icon element to display */\n  icon: ReactNode;\n  /** Click handler for the action */\n  onClick?: () => void;\n  /** Icon for dropdown mode */\n  dropdownIcon?: ReactNode;\n  /** Whether the action is visible */\n  visible?: boolean;\n  /** Whether the action is disabled */\n  disabled?: boolean;\n  /** Tooltip text */\n  tooltip?: string;\n  /** Whether to hide the label text */\n  hideLabel?: boolean;\n  /** Action type */\n  type?: \"button\" | \"dropdown\";\n  /** Dropdown trigger mode */\n  dropdownTrigger?: \"click\" | \"hover\";\n  /** Dropdown menu items */\n  dropdownItems?: Array<{\n    label: ReactNode;\n    key: string;\n    disabled?: boolean;\n  }>;\n};\n\n/**\n * Props for the FloatingBar component\n */\nexport type TFloatingBar = {\n  /** Whether the floating bar is visible */\n  show?: boolean;\n  /** Close handler */\n  onClose: () => void;\n  /** Whether this is used in flow dashboard layout */\n  isFlowDashboard?: boolean;\n  /** Array of action configurations */\n  actionItems: ButtonConfig[];\n  /** Number of selected items */\n  selectedItemsCount?: number;\n  /** Delete action configuration */\n  deleteConfig?: {\n    label?: string;\n    disabled?: boolean;\n    onClick?: () => void;\n  };\n  /** Whether to show action background */\n  showActionBg?: boolean;\n};\n\n/**\n * FloatingBar component provides a floating action bar for bulk operations.\n * Drop-in replacement matching the lax-web-portal implementation.\n *\n * @example\n * ```tsx\n * <FloatingBar\n *   show={selectedItems.length > 0}\n *   onClose={() => setSelectedItems([])}\n *   selectedItemsCount={selectedItems.length}\n *   actionItems={[\n *     {\n *       label: \"Edit\",\n *       icon: <EditIcon size={16} />,\n *       onClick: handleEdit,\n *     },\n *     {\n *       label: \"Archive\",\n *       icon: <ArchiveIcon size={16} />,\n *       onClick: handleArchive,\n *     },\n *   ]}\n *   deleteConfig={{\n *     label: \"Delete\",\n *     onClick: handleDelete,\n *   }}\n * />\n * ```\n */\nexport const FloatingBar: FC<TFloatingBar> = (props) => {\n  const {\n    show,\n    isFlowDashboard,\n    onClose,\n    actionItems,\n    selectedItemsCount,\n    deleteConfig,\n    showActionBg,\n  } = props;\n\n  const { t } = useTranslation();\n  const [showDropdown, setShowDropdown] = useState<boolean>(false);\n  const [showButtons, setShowButtons] = useState<boolean>(true);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const actionContainerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const observer = new ResizeObserver(() => {\n      if (containerRef.current && actionContainerRef.current) {\n        const containerWidth = containerRef.current.scrollWidth - 100;\n        const totalActionItemsWidth = actionItems.length * 180 + 100;\n        if (totalActionItemsWidth > containerWidth) {\n          setShowButtons(false);\n        } else {\n          setShowButtons(true);\n        }\n      }\n    });\n\n    if (containerRef.current) {\n      observer.observe(containerRef.current);\n    }\n\n    return () => {\n      if (containerRef.current) {\n        observer.unobserve(containerRef.current);\n      }\n    };\n  });\n\n  const deleteButtonConfig = {\n    label: t(\"Delete\"),\n    icon: <DeleteIcon size={16} className=\"text-error-500\" />,\n    color: \"text-error-500 dark:text-error-500\",\n    onClick: deleteConfig?.onClick,\n    ...deleteConfig,\n  };\n\n  const dropDownItems = actionItems\n    .filter((button) => button.visible !== false)\n    .map((button, index) => ({\n      key: index,\n      label: (\n        <OptionButton\n          icon={button.dropdownIcon}\n          text={button?.label || \"\"}\n          onClick={button.onClick}\n          className=\"font-inter text-base font-medium text-black-900 dark:text-black-200 gap-1.5\"\n        />\n      ),\n      children: button.dropdownItems,\n      disabled: false,\n    }));\n\n  return !show ? null : (\n    <motion.div\n      initial={{ y: 20, opacity: 0 }}\n      animate={{ y: 0, opacity: 1 }}\n      exit={{ y: 20, opacity: 0 }}\n      transition={{\n        duration: 0.2,\n        ease: [0.4, 0, 0.2, 1],\n        opacity: { duration: 0.15 },\n      }}\n      ref={containerRef}\n      className={cn(\"h-[40px]\", isFlowDashboard ? \"ml-60 w-1/2\" : \"w-full\")}\n    >\n      <div\n        className={cn(\n          \"h-[40px] border py-1.5 px-2 text-white bg-primary-800 dark:bg-black-700 flex justify-between items-center\"\n        )}\n      >\n        <div className=\"flex items-center\">\n          <IconButton\n            tooltip=\"Close\"\n            variant=\"ghost\"\n            onClick={onClose}\n            className=\"!p-0 text-white hover:opacity-80 hover:rotate-90 transition-all duration-200\"\n          >\n            <CloseIcon size={20} />\n          </IconButton>\n          <div className=\"flex items-center gap-1.5 ml-2\">\n            <span className=\"text-primary-600 dark:text-black-100 bg-primary-50 dark:bg-black-800 border-primary-200 dark:border-black-800 text-xs leading-4 font-normal border rounded-full pr-2 pl-2\">\n              {selectedItemsCount || 0}\n            </span>\n            <Typography\n              size=\"extra-small\"\n              appearance=\"custom\"\n              className=\"text-white\"\n            >\n              {t(\"Selected\")}\n            </Typography>\n          </div>\n        </div>\n        <div\n          ref={actionContainerRef}\n          className={cn(\n            \"h-[36px] flex items-center rounded-full font-inter\",\n            showActionBg\n              ? \"bg-primary-900 dark:bg-black-800 px-[10px] rounded-[43px]\"\n              : \"\"\n          )}\n        >\n          {showButtons ? (\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={{ duration: 0.2 }}\n              className=\"flex bg-primary-800 dark:bg-black-800 px-4 rounded-full\"\n            >\n              {actionItems.map(\n                (button, index) =>\n                  button.visible !== false && (\n                    <div key={index}>\n                      {button.type === \"dropdown\" ? (\n                        <Dropdown\n                          menu={{\n                            items: button.dropdownItems,\n                          }}\n                          trigger={[button.dropdownTrigger || \"click\"]}\n                          overlayClassName=\"!min-w-[148px]\"\n                          placement=\"bottomRight\"\n                          getPopupContainer={(trigger) =>\n                            trigger.parentElement as HTMLElement\n                          }\n                          open={showDropdown}\n                          onOpenChange={setShowDropdown}\n                        >\n                          <button\n                            key={index}\n                            id={`btn-floating-bar-${button.label}`}\n                            onClick={button.onClick}\n                            disabled={button.disabled}\n                            className={cn(\n                              !button?.label\n                                ? \"bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80\"\n                                : \"flex items-center mx-1 gap-1.5 py-1 pr-3 pl-2 rounded-md text-white hover:text-primary-50 hover:scale-105 transition-all duration-200 bg-transparent\",\n                              button?.hideLabel && \"!p-1.5\",\n                              (button.label === \"Delete\" ||\n                                button.label === \"Remove\" ||\n                                button.label === \"Delete user\" ||\n                                button.label === \"Delete Permanently\") &&\n                                \"!text-error-500\",\n                              button.disabled && \"opacity-70\"\n                            )}\n                          >\n                            <Tooltip\n                              hideTooltip={!button.tooltip}\n                              title={button.tooltip}\n                              className=\"flex items-center\"\n                            >\n                              {button.icon}\n                              {!button?.hideLabel && button.label && (\n                                <Typography\n                                  size=\"small\"\n                                  variant=\"medium\"\n                                  className={\"text-inherit ml-1.5\"}\n                                  appearance=\"custom\"\n                                >\n                                  {button.label}\n                                </Typography>\n                              )}\n                            </Tooltip>\n                          </button>\n                        </Dropdown>\n                      ) : (\n                        <button\n                          id={`btn-floating-bar-${button.label}`}\n                          onClick={button.onClick}\n                          disabled={button.disabled}\n                          className={cn(\n                            !button?.label\n                              ? \"bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80\"\n                              : \"flex items-center mx-1 gap-1.5 py-1 pr-3 pl-2 rounded-md text-white hover:text-primary-50 hover:scale-105 transition-all duration-200 bg-transparent\",\n                            button?.hideLabel && \"!p-1.5\",\n                            (button.label === \"Delete\" ||\n                              button.label === \"Remove\" ||\n                              button.label === \"Delete Permanently\") &&\n                              \"!text-error-500\",\n                            button.disabled && \"opacity-70\"\n                          )}\n                        >\n                          <Tooltip\n                            hideTooltip={!button.tooltip}\n                            title={button.tooltip}\n                            className=\"flex items-center\"\n                          >\n                            {button.icon}\n\n                            {!button?.hideLabel && button.label && (\n                              <Typography\n                                size=\"small\"\n                                variant=\"medium\"\n                                className={\"text-inherit ml-1.5\"}\n                                appearance=\"custom\"\n                              >\n                                {button.label}\n                              </Typography>\n                            )}\n                          </Tooltip>\n                        </button>\n                      )}\n                    </div>\n                  )\n              )}\n              {deleteConfig ? (\n                <button\n                  id={`btn-floating-bar-${deleteButtonConfig.label}`}\n                  onClick={deleteButtonConfig.onClick}\n                  disabled={deleteButtonConfig.disabled}\n                  className={cn(\n                    \"flex items-center gap-1.5 py-1 pr-3 pl-2 rounded-md hover:scale-105 hover:opacity-80 transition-all duration-200\",\n                    deleteButtonConfig.disabled && \"opacity-70\"\n                  )}\n                >\n                  {deleteButtonConfig.icon}\n                  <Typography\n                    size=\"small\"\n                    variant=\"medium\"\n                    className=\"text-error-500\"\n                    appearance=\"custom\"\n                  >\n                    {deleteButtonConfig.label}\n                  </Typography>\n                </button>\n              ) : null}\n            </motion.div>\n          ) : (\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={{ duration: 0.2 }}\n              className=\"minw-[150px] p-1.5 flex items-center\"\n            >\n              <Dropdown\n                menu={{\n                  items: dropDownItems,\n                }}\n                trigger={[\"click\"]}\n                overlayClassName=\"!min-w-[148px]\"\n                placement=\"bottomRight\"\n                getPopupContainer={(trigger) =>\n                  trigger.parentElement as HTMLElement\n                }\n                open={showDropdown}\n                onOpenChange={setShowDropdown}\n              >\n                <button\n                  id={`btn-floating-bar-actions`}\n                  disabled={dropDownItems.length === 0}\n                  className={cn(\n                    \"flex items-center gap-1.5 px-2 py-1 w-22 h-7 rounded-full bg-primary-700 hover:scale-105 hover:opacity-80 transition-all duration-200\",\n                    dropDownItems.length === 0 &&\n                      \"opacity-60 hover:scale-100 hover:opacity-60\"\n                  )}\n                  type=\"button\"\n                >\n                  <Typography\n                    size=\"small\"\n                    variant=\"medium\"\n                    className=\"text-white\"\n                  >\n                    {t(\"Actions\")}\n                  </Typography>\n                  <DropdownArrowIcon\n                    fill=\"#FFFFFF\"\n                    className=\"w-[16px] h-[16px]\"\n                  />\n                </button>\n              </Dropdown>\n              {deleteConfig ? (\n                <button\n                  id={`btn-floating-bar-${deleteButtonConfig.label}`}\n                  onClick={deleteButtonConfig.onClick}\n                  disabled={deleteButtonConfig.disabled}\n                  className={cn(\n                    \"flex items-center gap-1.5 py-1 pr-3 pl-2 rounded-md hover:scale-105 hover:opacity-80 transition-all duration-200\",\n                    deleteButtonConfig.disabled && \"opacity-70\"\n                  )}\n                  type=\"button\"\n                >\n                  {deleteButtonConfig.icon}\n                  <Typography\n                    size=\"small\"\n                    variant=\"medium\"\n                    className=\"text-error-500\"\n                    appearance=\"custom\"\n                  >\n                    {deleteButtonConfig.label}\n                  </Typography>\n                </button>\n              ) : null}\n            </motion.div>\n          )}\n        </div>\n      </div>\n    </motion.div>\n  );\n};\n\nFloatingBar.displayName = \"FloatingBar\";\n\n// Re-export types for convenience\nexport type { ButtonConfig as FloatingBarActionConfig };\nexport type FloatingBarDeleteConfig = TFloatingBar[\"deleteConfig\"];\nexport type FloatingBarProps = TFloatingBar;\n\n// Legacy type exports for backwards compatibility\nexport type FloatingBarSize = \"small\" | \"medium\" | \"large\";\nexport type FloatingBarPosition = \"top\" | \"bottom\";\nexport type FloatingBarTheme = \"primary\" | \"dark\" | \"light\";\n"],"names":["CloseIcon","size","fill","className","jsx","DropdownArrowIcon","FloatingBar","props","show","isFlowDashboard","onClose","actionItems","selectedItemsCount","deleteConfig","showActionBg","t","useTranslation","showDropdown","setShowDropdown","useState","showButtons","setShowButtons","containerRef","useRef","actionContainerRef","useEffect","observer","containerWidth","deleteButtonConfig","DeleteIcon","dropDownItems","button","index","OptionButton","motion","cn","jsxs","IconButton","Typography","Dropdown","trigger","Tooltip"],"mappings":"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"}

package/dist/components/floating-bar/FloatingBar.es.js

@@ -1,7 +1,7 @@
 import { jsx as a, jsxs as i } from "react/jsx-runtime";
 import { Dropdown as C } from "antd";
 import r from "../../_virtual/index.es.js";
-import { motion as f } from "framer-motion";
+import { motion as x } from "framer-motion";
 import { useState as w, useRef as k, useEffect as z } from "react";
 import { useTranslation as F } from "react-i18next";
 import { Typography as s } from "../data-display/typography/Typography.es.js";
@@ -69,7 +69,7 @@ const O = ({
     icon: /* @__PURE__ */ a(A, { size: 16, className: "text-error-500" }),
     onClick: d?.onClick,
     ...d
-  }, x = m.filter((e) => e.visible !== !1).map((e, n) => ({
+  }, f = m.filter((e) => e.visible !== !1).map((e, n) => ({
     key: n,
     label: /* @__PURE__ */ a(
       R,
@@ -77,14 +77,14 @@ const O = ({
         icon: e.dropdownIcon,
         text: e?.label || "",
         onClick: e.onClick,
-        className: "font-inter text-[14px] font-medium text-black-900 dark:text-black-200 gap-1.5"
+        className: "font-inter text-base font-medium text-black-900 dark:text-black-200 gap-1.5"
       }
     ),
     children: e.dropdownItems,
     disabled: !1
   }));
   return c ? /* @__PURE__ */ a(
-    f.div,
+    x.div,
     {
       initial: { y: 20, opacity: 0 },
       animate: { y: 0, opacity: 1 },
@@ -136,7 +136,7 @@ const O = ({
                   L ? "bg-primary-900 dark:bg-black-800 px-[10px] rounded-[43px]" : ""
                 ),
                 children: B ? /* @__PURE__ */ i(
-                  f.div,
+                  x.div,
                   {
                     initial: { opacity: 0 },
                     animate: { opacity: 1 },
@@ -257,7 +257,7 @@ const O = ({
                     ]
                   }
                 ) : /* @__PURE__ */ i(
-                  f.div,
+                  x.div,
                   {
                     initial: { opacity: 0 },
                     animate: { opacity: 1 },
@@ -268,7 +268,7 @@ const O = ({
                         C,
                         {
                           menu: {
-                            items: x
+                            items: f
                           },
                           trigger: ["click"],
                           overlayClassName: "!min-w-[148px]",
@@ -280,10 +280,10 @@ const O = ({
                             "button",
                             {
                               id: "btn-floating-bar-actions",
-                              disabled: x.length === 0,
+                              disabled: f.length === 0,
                               className: r(
                                 "flex items-center gap-1.5 px-2 py-1 w-22 h-7 rounded-full bg-primary-700 hover:scale-105 hover:opacity-80 transition-all duration-200",
-                                x.length === 0 && "opacity-60 hover:scale-100 hover:opacity-60"
+                                f.length === 0 && "opacity-60 hover:scale-100 hover:opacity-60"
                               ),
                               type: "button",
                               children: [

package/dist/components/floating-bar/FloatingBar.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingBar.es.js","sources":["../../../src/components/floating-bar/FloatingBar.tsx"],"sourcesContent":["import { Dropdown } from \"antd\";\nimport cn from \"classnames\";\nimport { motion } from \"framer-motion\";\nimport { useEffect, useRef, useState, type FC, type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Typography } from \"../data-display/typography/Typography\";\nimport { OptionButton } from \"../buttons/option-button/OptionButton\";\nimport IconButton from \"../button/IconButton\";\nimport Tooltip from \"../tooltip/Tooltip\";\nimport { DeleteIcon } from \"../icon\";\n\n/**\n * Close icon component\n */\nconst CloseIcon: FC<{ size?: number; fill?: string; className?: string }> = ({\n  size = 24,\n  fill = \"currentColor\",\n  className,\n}) => (\n  <svg\n    className={className}\n    width={size}\n    height={size}\n    viewBox=\"0 0 20 20\"\n    fill={fill}\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path d=\"M10.0002 11.1666L5.91683 15.2499C5.76405 15.4027 5.56961 15.4791 5.3335 15.4791C5.09739 15.4791 4.90294 15.4027 4.75016 15.2499C4.59738 15.0971 4.521 14.9027 4.521 14.6666C4.521 14.4305 4.59738 14.236 4.75016 14.0833L8.8335 9.99992L4.75016 5.91659C4.59738 5.76381 4.521 5.56936 4.521 5.33325C4.521 5.09714 4.59738 4.9027 4.75016 4.74992C4.90294 4.59714 5.09739 4.52075 5.3335 4.52075C5.56961 4.52075 5.76405 4.59714 5.91683 4.74992L10.0002 8.83325L14.0835 4.74992C14.2363 4.59714 14.4307 4.52075 14.6668 4.52075C14.9029 4.52075 15.0974 4.59714 15.2502 4.74992C15.4029 4.9027 15.4793 5.09714 15.4793 5.33325C15.4793 5.56936 15.4029 5.76381 15.2502 5.91659L11.1668 9.99992L15.2502 14.0833C15.4029 14.236 15.4793 14.4305 15.4793 14.6666C15.4793 14.9027 15.4029 15.0971 15.2502 15.2499C15.0974 15.4027 14.9029 15.4791 14.6668 15.4791C14.4307 15.4791 14.2363 15.4027 14.0835 15.2499L10.0002 11.1666Z\" />\n  </svg>\n);\n\n/**\n * Dropdown arrow icon component\n */\nconst DropdownArrowIcon: FC<{ fill?: string; className?: string }> = ({\n  fill = \"#cccccc\",\n  className,\n}) => (\n  <svg\n    height=\"20\"\n    width=\"20\"\n    viewBox=\"0 0 20 20\"\n    focusable=\"false\"\n    className={className}\n  >\n    <path\n      fill={fill}\n      d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"\n    />\n  </svg>\n);\n\n/**\n * Configuration for action buttons in the floating bar\n */\nexport type ButtonConfig = {\n  /** Button label text */\n  label?: string;\n  /** Icon element to display */\n  icon: ReactNode;\n  /** Click handler for the action */\n  onClick?: () => void;\n  /** Icon for dropdown mode */\n  dropdownIcon?: ReactNode;\n  /** Whether the action is visible */\n  visible?: boolean;\n  /** Whether the action is disabled */\n  disabled?: boolean;\n  /** Tooltip text */\n  tooltip?: string;\n  /** Whether to hide the label text */\n  hideLabel?: boolean;\n  /** Action type */\n  type?: \"button\" | \"dropdown\";\n  /** Dropdown trigger mode */\n  dropdownTrigger?: \"click\" | \"hover\";\n  /** Dropdown menu items */\n  dropdownItems?: Array<{\n    label: ReactNode;\n    key: string;\n    disabled?: boolean;\n  }>;\n};\n\n/**\n * Props for the FloatingBar component\n */\nexport type TFloatingBar = {\n  /** Whether the floating bar is visible */\n  show?: boolean;\n  /** Close handler */\n  onClose: () => void;\n  /** Whether this is used in flow dashboard layout */\n  isFlowDashboard?: boolean;\n  /** Array of action configurations */\n  actionItems: ButtonConfig[];\n  /** Number of selected items */\n  selectedItemsCount?: number;\n  /** Delete action configuration */\n  deleteConfig?: {\n    label?: string;\n    disabled?: boolean;\n    onClick?: () => void;\n  };\n  /** Whether to show action background */\n  showActionBg?: boolean;\n};\n\n/**\n * FloatingBar component provides a floating action bar for bulk operations.\n * Drop-in replacement matching the lax-web-portal implementation.\n *\n * @example\n * ```tsx\n * <FloatingBar\n *   show={selectedItems.length > 0}\n *   onClose={() => setSelectedItems([])}\n *   selectedItemsCount={selectedItems.length}\n *   actionItems={[\n *     {\n *       label: \"Edit\",\n *       icon: <EditIcon size={16} />,\n *       onClick: handleEdit,\n *     },\n *     {\n *       label: \"Archive\",\n *       icon: <ArchiveIcon size={16} />,\n *       onClick: handleArchive,\n *     },\n *   ]}\n *   deleteConfig={{\n *     label: \"Delete\",\n *     onClick: handleDelete,\n *   }}\n * />\n * ```\n */\nexport const FloatingBar: FC<TFloatingBar> = (props) => {\n  const {\n    show,\n    isFlowDashboard,\n    onClose,\n    actionItems,\n    selectedItemsCount,\n    deleteConfig,\n    showActionBg,\n  } = props;\n\n  const { t } = useTranslation();\n  const [showDropdown, setShowDropdown] = useState<boolean>(false);\n  const [showButtons, setShowButtons] = useState<boolean>(true);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const actionContainerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const observer = new ResizeObserver(() => {\n      if (containerRef.current && actionContainerRef.current) {\n        const containerWidth = containerRef.current.scrollWidth - 100;\n        const totalActionItemsWidth = actionItems.length * 180 + 100;\n        if (totalActionItemsWidth > containerWidth) {\n          setShowButtons(false);\n        } else {\n          setShowButtons(true);\n        }\n      }\n    });\n\n    if (containerRef.current) {\n      observer.observe(containerRef.current);\n    }\n\n    return () => {\n      if (containerRef.current) {\n        observer.unobserve(containerRef.current);\n      }\n    };\n  });\n\n  const deleteButtonConfig = {\n    label: t(\"Delete\"),\n    icon: <DeleteIcon size={16} className=\"text-error-500\" />,\n    color: \"text-error-500 dark:text-error-500\",\n    onClick: deleteConfig?.onClick,\n    ...deleteConfig,\n  };\n\n  const dropDownItems = actionItems\n    .filter((button) => button.visible !== false)\n    .map((button, index) => ({\n      key: index,\n      label: (\n        <OptionButton\n          icon={button.dropdownIcon}\n          text={button?.label || \"\"}\n          onClick={button.onClick}\n          className=\"font-inter text-[14px] font-medium text-black-900 dark:text-black-200 gap-1.5\"\n        />\n      ),\n      children: button.dropdownItems,\n      disabled: false,\n    }));\n\n  return !show ? null : (\n    <motion.div\n      initial={{ y: 20, opacity: 0 }}\n      animate={{ y: 0, opacity: 1 }}\n      exit={{ y: 20, opacity: 0 }}\n      transition={{\n        duration: 0.2,\n        ease: [0.4, 0, 0.2, 1],\n        opacity: { duration: 0.15 },\n      }}\n      ref={containerRef}\n      className={cn(\"h-[40px]\", isFlowDashboard ? \"ml-60 w-1/2\" : \"w-full\")}\n    >\n      <div\n        className={cn(\n          \"h-[40px] border py-1.5 px-2 text-white bg-primary-800 dark:bg-black-700 flex justify-between items-center\"\n        )}\n      >\n        <div className=\"flex items-center\">\n          <IconButton\n            tooltip=\"Close\"\n            variant=\"ghost\"\n            onClick={onClose}\n            className=\"!p-0 text-white hover:opacity-80 hover:rotate-90 transition-all duration-200\"\n          >\n            <CloseIcon size={20} />\n          </IconButton>\n          <div className=\"flex items-center gap-1.5 ml-2\">\n            <span className=\"text-primary-600 dark:text-black-100 bg-primary-50 dark:bg-black-800 border-primary-200 dark:border-black-800 text-xs leading-4 font-normal border rounded-full pr-2 pl-2\">\n              {selectedItemsCount || 0}\n            </span>\n            <Typography\n              size=\"extra-small\"\n              appearance=\"custom\"\n              className=\"text-white\"\n            >\n              {t(\"Selected\")}\n            </Typography>\n          </div>\n        </div>\n        <div\n          ref={actionContainerRef}\n          className={cn(\n            \"h-[36px] flex items-center rounded-full font-inter\",\n            showActionBg\n              ? \"bg-primary-900 dark:bg-black-800 px-[10px] rounded-[43px]\"\n              : \"\"\n          )}\n        >\n          {showButtons ? (\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={{ duration: 0.2 }}\n              className=\"flex bg-primary-800 dark:bg-black-800 px-4 rounded-full\"\n            >\n              {actionItems.map(\n                (button, index) =>\n                  button.visible !== false && (\n                    <div key={index}>\n                      {button.type === \"dropdown\" ? (\n                        <Dropdown\n                          menu={{\n                            items: button.dropdownItems,\n                          }}\n                          trigger={[button.dropdownTrigger || \"click\"]}\n                          overlayClassName=\"!min-w-[148px]\"\n                          placement=\"bottomRight\"\n                          getPopupContainer={(trigger) =>\n                            trigger.parentElement as HTMLElement\n                          }\n                          open={showDropdown}\n                          onOpenChange={setShowDropdown}\n                        >\n                          <button\n                            key={index}\n                            id={`btn-floating-bar-${button.label}`}\n                            onClick={button.onClick}\n                            disabled={button.disabled}\n                            className={cn(\n                              !button?.label\n                                ? \"bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80\"\n                                : \"flex items-center mx-1 gap-1.5 py-1 pr-3 pl-2 rounded-md text-white hover:text-primary-50 hover:scale-105 transition-all duration-200 bg-transparent\",\n                              button?.hideLabel && \"!p-1.5\",\n                              (button.label === \"Delete\" ||\n                                button.label === \"Remove\" ||\n                                button.label === \"Delete user\" ||\n                                button.label === \"Delete Permanently\") &&\n                                \"!text-error-500\",\n                              button.disabled && \"opacity-70\"\n                            )}\n                          >\n                            <Tooltip\n                              hideTooltip={!button.tooltip}\n                              title={button.tooltip}\n                              className=\"flex items-center\"\n                            >\n                              {button.icon}\n                              {!button?.hideLabel && button.label && (\n                                <Typography\n                                  size=\"small\"\n                                  variant=\"medium\"\n                                  className={\"text-inherit ml-1.5\"}\n                                  appearance=\"custom\"\n                                >\n                                  {button.label}\n                                </Typography>\n                              )}\n                            </Tooltip>\n                          </button>\n                        </Dropdown>\n                      ) : (\n                        <button\n                          id={`btn-floating-bar-${button.label}`}\n                          onClick={button.onClick}\n                          disabled={button.disabled}\n                          className={cn(\n                            !button?.label\n                              ? \"bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80\"\n                              : \"flex items-center mx-1 gap-1.5 py-1 pr-3 pl-2 rounded-md text-white hover:text-primary-50 hover:scale-105 transition-all duration-200 bg-transparent\",\n                            button?.hideLabel && \"!p-1.5\",\n                            (button.label === \"Delete\" ||\n                              button.label === \"Remove\" ||\n                              button.label === \"Delete Permanently\") &&\n                              \"!text-error-500\",\n                            button.disabled && \"opacity-70\"\n                          )}\n                        >\n                          <Tooltip\n                            hideTooltip={!button.tooltip}\n                            title={button.tooltip}\n                            className=\"flex items-center\"\n                          >\n                            {button.icon}\n\n                            {!button?.hideLabel && button.label && (\n                              <Typography\n                                size=\"small\"\n                                variant=\"medium\"\n                                className={\"text-inherit ml-1.5\"}\n                                appearance=\"custom\"\n                              >\n                                {button.label}\n                              </Typography>\n                            )}\n                          </Tooltip>\n                        </button>\n                      )}\n                    </div>\n                  )\n              )}\n              {deleteConfig ? (\n                <button\n                  id={`btn-floating-bar-${deleteButtonConfig.label}`}\n                  onClick={deleteButtonConfig.onClick}\n                  disabled={deleteButtonConfig.disabled}\n                  className={cn(\n                    \"flex items-center gap-1.5 py-1 pr-3 pl-2 rounded-md hover:scale-105 hover:opacity-80 transition-all duration-200\",\n                    deleteButtonConfig.disabled && \"opacity-70\"\n                  )}\n                >\n                  {deleteButtonConfig.icon}\n                  <Typography\n                    size=\"small\"\n                    variant=\"medium\"\n                    className=\"text-error-500\"\n                    appearance=\"custom\"\n                  >\n                    {deleteButtonConfig.label}\n                  </Typography>\n                </button>\n              ) : null}\n            </motion.div>\n          ) : (\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={{ duration: 0.2 }}\n              className=\"minw-[150px] p-1.5 flex items-center\"\n            >\n              <Dropdown\n                menu={{\n                  items: dropDownItems,\n                }}\n                trigger={[\"click\"]}\n                overlayClassName=\"!min-w-[148px]\"\n                placement=\"bottomRight\"\n                getPopupContainer={(trigger) =>\n                  trigger.parentElement as HTMLElement\n                }\n                open={showDropdown}\n                onOpenChange={setShowDropdown}\n              >\n                <button\n                  id={`btn-floating-bar-actions`}\n                  disabled={dropDownItems.length === 0}\n                  className={cn(\n                    \"flex items-center gap-1.5 px-2 py-1 w-22 h-7 rounded-full bg-primary-700 hover:scale-105 hover:opacity-80 transition-all duration-200\",\n                    dropDownItems.length === 0 &&\n                      \"opacity-60 hover:scale-100 hover:opacity-60\"\n                  )}\n                  type=\"button\"\n                >\n                  <Typography\n                    size=\"small\"\n                    variant=\"medium\"\n                    className=\"text-white\"\n                  >\n                    {t(\"Actions\")}\n                  </Typography>\n                  <DropdownArrowIcon\n                    fill=\"#FFFFFF\"\n                    className=\"w-[16px] h-[16px]\"\n                  />\n                </button>\n              </Dropdown>\n              {deleteConfig ? (\n                <button\n                  id={`btn-floating-bar-${deleteButtonConfig.label}`}\n                  onClick={deleteButtonConfig.onClick}\n                  disabled={deleteButtonConfig.disabled}\n                  className={cn(\n                    \"flex items-center gap-1.5 py-1 pr-3 pl-2 rounded-md hover:scale-105 hover:opacity-80 transition-all duration-200\",\n                    deleteButtonConfig.disabled && \"opacity-70\"\n                  )}\n                  type=\"button\"\n                >\n                  {deleteButtonConfig.icon}\n                  <Typography\n                    size=\"small\"\n                    variant=\"medium\"\n                    className=\"text-error-500\"\n                    appearance=\"custom\"\n                  >\n                    {deleteButtonConfig.label}\n                  </Typography>\n                </button>\n              ) : null}\n            </motion.div>\n          )}\n        </div>\n      </div>\n    </motion.div>\n  );\n};\n\nFloatingBar.displayName = \"FloatingBar\";\n\n// Re-export types for convenience\nexport type { ButtonConfig as FloatingBarActionConfig };\nexport type FloatingBarDeleteConfig = TFloatingBar[\"deleteConfig\"];\nexport type FloatingBarProps = TFloatingBar;\n\n// Legacy type exports for backwards compatibility\nexport type FloatingBarSize = \"small\" | \"medium\" | \"large\";\nexport type FloatingBarPosition = \"top\" | \"bottom\";\nexport type FloatingBarTheme = \"primary\" | \"dark\" | \"light\";\n"],"names":["CloseIcon","size","fill","className","jsx","DropdownArrowIcon","FloatingBar","props","show","isFlowDashboard","onClose","actionItems","selectedItemsCount","deleteConfig","showActionBg","t","useTranslation","showDropdown","setShowDropdown","useState","showButtons","setShowButtons","containerRef","useRef","actionContainerRef","useEffect","observer","containerWidth","deleteButtonConfig","DeleteIcon","dropDownItems","button","index","OptionButton","motion","cn","jsxs","IconButton","Typography","Dropdown","trigger","Tooltip"],"mappings":"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"}
+{"version":3,"file":"FloatingBar.es.js","sources":["../../../src/components/floating-bar/FloatingBar.tsx"],"sourcesContent":["import { Dropdown } from \"antd\";\nimport cn from \"classnames\";\nimport { motion } from \"framer-motion\";\nimport { useEffect, useRef, useState, type FC, type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Typography } from \"../data-display/typography/Typography\";\nimport { OptionButton } from \"../buttons/option-button/OptionButton\";\nimport IconButton from \"../button/IconButton\";\nimport Tooltip from \"../tooltip/Tooltip\";\nimport { DeleteIcon } from \"../icon\";\n\n/**\n * Close icon component\n */\nconst CloseIcon: FC<{ size?: number; fill?: string; className?: string }> = ({\n  size = 24,\n  fill = \"currentColor\",\n  className,\n}) => (\n  <svg\n    className={className}\n    width={size}\n    height={size}\n    viewBox=\"0 0 20 20\"\n    fill={fill}\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path d=\"M10.0002 11.1666L5.91683 15.2499C5.76405 15.4027 5.56961 15.4791 5.3335 15.4791C5.09739 15.4791 4.90294 15.4027 4.75016 15.2499C4.59738 15.0971 4.521 14.9027 4.521 14.6666C4.521 14.4305 4.59738 14.236 4.75016 14.0833L8.8335 9.99992L4.75016 5.91659C4.59738 5.76381 4.521 5.56936 4.521 5.33325C4.521 5.09714 4.59738 4.9027 4.75016 4.74992C4.90294 4.59714 5.09739 4.52075 5.3335 4.52075C5.56961 4.52075 5.76405 4.59714 5.91683 4.74992L10.0002 8.83325L14.0835 4.74992C14.2363 4.59714 14.4307 4.52075 14.6668 4.52075C14.9029 4.52075 15.0974 4.59714 15.2502 4.74992C15.4029 4.9027 15.4793 5.09714 15.4793 5.33325C15.4793 5.56936 15.4029 5.76381 15.2502 5.91659L11.1668 9.99992L15.2502 14.0833C15.4029 14.236 15.4793 14.4305 15.4793 14.6666C15.4793 14.9027 15.4029 15.0971 15.2502 15.2499C15.0974 15.4027 14.9029 15.4791 14.6668 15.4791C14.4307 15.4791 14.2363 15.4027 14.0835 15.2499L10.0002 11.1666Z\" />\n  </svg>\n);\n\n/**\n * Dropdown arrow icon component\n */\nconst DropdownArrowIcon: FC<{ fill?: string; className?: string }> = ({\n  fill = \"#cccccc\",\n  className,\n}) => (\n  <svg\n    height=\"20\"\n    width=\"20\"\n    viewBox=\"0 0 20 20\"\n    focusable=\"false\"\n    className={className}\n  >\n    <path\n      fill={fill}\n      d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"\n    />\n  </svg>\n);\n\n/**\n * Configuration for action buttons in the floating bar\n */\nexport type ButtonConfig = {\n  /** Button label text */\n  label?: string;\n  /** Icon element to display */\n  icon: ReactNode;\n  /** Click handler for the action */\n  onClick?: () => void;\n  /** Icon for dropdown mode */\n  dropdownIcon?: ReactNode;\n  /** Whether the action is visible */\n  visible?: boolean;\n  /** Whether the action is disabled */\n  disabled?: boolean;\n  /** Tooltip text */\n  tooltip?: string;\n  /** Whether to hide the label text */\n  hideLabel?: boolean;\n  /** Action type */\n  type?: \"button\" | \"dropdown\";\n  /** Dropdown trigger mode */\n  dropdownTrigger?: \"click\" | \"hover\";\n  /** Dropdown menu items */\n  dropdownItems?: Array<{\n    label: ReactNode;\n    key: string;\n    disabled?: boolean;\n  }>;\n};\n\n/**\n * Props for the FloatingBar component\n */\nexport type TFloatingBar = {\n  /** Whether the floating bar is visible */\n  show?: boolean;\n  /** Close handler */\n  onClose: () => void;\n  /** Whether this is used in flow dashboard layout */\n  isFlowDashboard?: boolean;\n  /** Array of action configurations */\n  actionItems: ButtonConfig[];\n  /** Number of selected items */\n  selectedItemsCount?: number;\n  /** Delete action configuration */\n  deleteConfig?: {\n    label?: string;\n    disabled?: boolean;\n    onClick?: () => void;\n  };\n  /** Whether to show action background */\n  showActionBg?: boolean;\n};\n\n/**\n * FloatingBar component provides a floating action bar for bulk operations.\n * Drop-in replacement matching the lax-web-portal implementation.\n *\n * @example\n * ```tsx\n * <FloatingBar\n *   show={selectedItems.length > 0}\n *   onClose={() => setSelectedItems([])}\n *   selectedItemsCount={selectedItems.length}\n *   actionItems={[\n *     {\n *       label: \"Edit\",\n *       icon: <EditIcon size={16} />,\n *       onClick: handleEdit,\n *     },\n *     {\n *       label: \"Archive\",\n *       icon: <ArchiveIcon size={16} />,\n *       onClick: handleArchive,\n *     },\n *   ]}\n *   deleteConfig={{\n *     label: \"Delete\",\n *     onClick: handleDelete,\n *   }}\n * />\n * ```\n */\nexport const FloatingBar: FC<TFloatingBar> = (props) => {\n  const {\n    show,\n    isFlowDashboard,\n    onClose,\n    actionItems,\n    selectedItemsCount,\n    deleteConfig,\n    showActionBg,\n  } = props;\n\n  const { t } = useTranslation();\n  const [showDropdown, setShowDropdown] = useState<boolean>(false);\n  const [showButtons, setShowButtons] = useState<boolean>(true);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const actionContainerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const observer = new ResizeObserver(() => {\n      if (containerRef.current && actionContainerRef.current) {\n        const containerWidth = containerRef.current.scrollWidth - 100;\n        const totalActionItemsWidth = actionItems.length * 180 + 100;\n        if (totalActionItemsWidth > containerWidth) {\n          setShowButtons(false);\n        } else {\n          setShowButtons(true);\n        }\n      }\n    });\n\n    if (containerRef.current) {\n      observer.observe(containerRef.current);\n    }\n\n    return () => {\n      if (containerRef.current) {\n        observer.unobserve(containerRef.current);\n      }\n    };\n  });\n\n  const deleteButtonConfig = {\n    label: t(\"Delete\"),\n    icon: <DeleteIcon size={16} className=\"text-error-500\" />,\n    color: \"text-error-500 dark:text-error-500\",\n    onClick: deleteConfig?.onClick,\n    ...deleteConfig,\n  };\n\n  const dropDownItems = actionItems\n    .filter((button) => button.visible !== false)\n    .map((button, index) => ({\n      key: index,\n      label: (\n        <OptionButton\n          icon={button.dropdownIcon}\n          text={button?.label || \"\"}\n          onClick={button.onClick}\n          className=\"font-inter text-base font-medium text-black-900 dark:text-black-200 gap-1.5\"\n        />\n      ),\n      children: button.dropdownItems,\n      disabled: false,\n    }));\n\n  return !show ? null : (\n    <motion.div\n      initial={{ y: 20, opacity: 0 }}\n      animate={{ y: 0, opacity: 1 }}\n      exit={{ y: 20, opacity: 0 }}\n      transition={{\n        duration: 0.2,\n        ease: [0.4, 0, 0.2, 1],\n        opacity: { duration: 0.15 },\n      }}\n      ref={containerRef}\n      className={cn(\"h-[40px]\", isFlowDashboard ? \"ml-60 w-1/2\" : \"w-full\")}\n    >\n      <div\n        className={cn(\n          \"h-[40px] border py-1.5 px-2 text-white bg-primary-800 dark:bg-black-700 flex justify-between items-center\"\n        )}\n      >\n        <div className=\"flex items-center\">\n          <IconButton\n            tooltip=\"Close\"\n            variant=\"ghost\"\n            onClick={onClose}\n            className=\"!p-0 text-white hover:opacity-80 hover:rotate-90 transition-all duration-200\"\n          >\n            <CloseIcon size={20} />\n          </IconButton>\n          <div className=\"flex items-center gap-1.5 ml-2\">\n            <span className=\"text-primary-600 dark:text-black-100 bg-primary-50 dark:bg-black-800 border-primary-200 dark:border-black-800 text-xs leading-4 font-normal border rounded-full pr-2 pl-2\">\n              {selectedItemsCount || 0}\n            </span>\n            <Typography\n              size=\"extra-small\"\n              appearance=\"custom\"\n              className=\"text-white\"\n            >\n              {t(\"Selected\")}\n            </Typography>\n          </div>\n        </div>\n        <div\n          ref={actionContainerRef}\n          className={cn(\n            \"h-[36px] flex items-center rounded-full font-inter\",\n            showActionBg\n              ? \"bg-primary-900 dark:bg-black-800 px-[10px] rounded-[43px]\"\n              : \"\"\n          )}\n        >\n          {showButtons ? (\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={{ duration: 0.2 }}\n              className=\"flex bg-primary-800 dark:bg-black-800 px-4 rounded-full\"\n            >\n              {actionItems.map(\n                (button, index) =>\n                  button.visible !== false && (\n                    <div key={index}>\n                      {button.type === \"dropdown\" ? (\n                        <Dropdown\n                          menu={{\n                            items: button.dropdownItems,\n                          }}\n                          trigger={[button.dropdownTrigger || \"click\"]}\n                          overlayClassName=\"!min-w-[148px]\"\n                          placement=\"bottomRight\"\n                          getPopupContainer={(trigger) =>\n                            trigger.parentElement as HTMLElement\n                          }\n                          open={showDropdown}\n                          onOpenChange={setShowDropdown}\n                        >\n                          <button\n                            key={index}\n                            id={`btn-floating-bar-${button.label}`}\n                            onClick={button.onClick}\n                            disabled={button.disabled}\n                            className={cn(\n                              !button?.label\n                                ? \"bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80\"\n                                : \"flex items-center mx-1 gap-1.5 py-1 pr-3 pl-2 rounded-md text-white hover:text-primary-50 hover:scale-105 transition-all duration-200 bg-transparent\",\n                              button?.hideLabel && \"!p-1.5\",\n                              (button.label === \"Delete\" ||\n                                button.label === \"Remove\" ||\n                                button.label === \"Delete user\" ||\n                                button.label === \"Delete Permanently\") &&\n                                \"!text-error-500\",\n                              button.disabled && \"opacity-70\"\n                            )}\n                          >\n                            <Tooltip\n                              hideTooltip={!button.tooltip}\n                              title={button.tooltip}\n                              className=\"flex items-center\"\n                            >\n                              {button.icon}\n                              {!button?.hideLabel && button.label && (\n                                <Typography\n                                  size=\"small\"\n                                  variant=\"medium\"\n                                  className={\"text-inherit ml-1.5\"}\n                                  appearance=\"custom\"\n                                >\n                                  {button.label}\n                                </Typography>\n                              )}\n                            </Tooltip>\n                          </button>\n                        </Dropdown>\n                      ) : (\n                        <button\n                          id={`btn-floating-bar-${button.label}`}\n                          onClick={button.onClick}\n                          disabled={button.disabled}\n                          className={cn(\n                            !button?.label\n                              ? \"bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80\"\n                              : \"flex items-center mx-1 gap-1.5 py-1 pr-3 pl-2 rounded-md text-white hover:text-primary-50 hover:scale-105 transition-all duration-200 bg-transparent\",\n                            button?.hideLabel && \"!p-1.5\",\n                            (button.label === \"Delete\" ||\n                              button.label === \"Remove\" ||\n                              button.label === \"Delete Permanently\") &&\n                              \"!text-error-500\",\n                            button.disabled && \"opacity-70\"\n                          )}\n                        >\n                          <Tooltip\n                            hideTooltip={!button.tooltip}\n                            title={button.tooltip}\n                            className=\"flex items-center\"\n                          >\n                            {button.icon}\n\n                            {!button?.hideLabel && button.label && (\n                              <Typography\n                                size=\"small\"\n                                variant=\"medium\"\n                                className={\"text-inherit ml-1.5\"}\n                                appearance=\"custom\"\n                              >\n                                {button.label}\n                              </Typography>\n                            )}\n                          </Tooltip>\n                        </button>\n                      )}\n                    </div>\n                  )\n              )}\n              {deleteConfig ? (\n                <button\n                  id={`btn-floating-bar-${deleteButtonConfig.label}`}\n                  onClick={deleteButtonConfig.onClick}\n                  disabled={deleteButtonConfig.disabled}\n                  className={cn(\n                    \"flex items-center gap-1.5 py-1 pr-3 pl-2 rounded-md hover:scale-105 hover:opacity-80 transition-all duration-200\",\n                    deleteButtonConfig.disabled && \"opacity-70\"\n                  )}\n                >\n                  {deleteButtonConfig.icon}\n                  <Typography\n                    size=\"small\"\n                    variant=\"medium\"\n                    className=\"text-error-500\"\n                    appearance=\"custom\"\n                  >\n                    {deleteButtonConfig.label}\n                  </Typography>\n                </button>\n              ) : null}\n            </motion.div>\n          ) : (\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={{ duration: 0.2 }}\n              className=\"minw-[150px] p-1.5 flex items-center\"\n            >\n              <Dropdown\n                menu={{\n                  items: dropDownItems,\n                }}\n                trigger={[\"click\"]}\n                overlayClassName=\"!min-w-[148px]\"\n                placement=\"bottomRight\"\n                getPopupContainer={(trigger) =>\n                  trigger.parentElement as HTMLElement\n                }\n                open={showDropdown}\n                onOpenChange={setShowDropdown}\n              >\n                <button\n                  id={`btn-floating-bar-actions`}\n                  disabled={dropDownItems.length === 0}\n                  className={cn(\n                    \"flex items-center gap-1.5 px-2 py-1 w-22 h-7 rounded-full bg-primary-700 hover:scale-105 hover:opacity-80 transition-all duration-200\",\n                    dropDownItems.length === 0 &&\n                      \"opacity-60 hover:scale-100 hover:opacity-60\"\n                  )}\n                  type=\"button\"\n                >\n                  <Typography\n                    size=\"small\"\n                    variant=\"medium\"\n                    className=\"text-white\"\n                  >\n                    {t(\"Actions\")}\n                  </Typography>\n                  <DropdownArrowIcon\n                    fill=\"#FFFFFF\"\n                    className=\"w-[16px] h-[16px]\"\n                  />\n                </button>\n              </Dropdown>\n              {deleteConfig ? (\n                <button\n                  id={`btn-floating-bar-${deleteButtonConfig.label}`}\n                  onClick={deleteButtonConfig.onClick}\n                  disabled={deleteButtonConfig.disabled}\n                  className={cn(\n                    \"flex items-center gap-1.5 py-1 pr-3 pl-2 rounded-md hover:scale-105 hover:opacity-80 transition-all duration-200\",\n                    deleteButtonConfig.disabled && \"opacity-70\"\n                  )}\n                  type=\"button\"\n                >\n                  {deleteButtonConfig.icon}\n                  <Typography\n                    size=\"small\"\n                    variant=\"medium\"\n                    className=\"text-error-500\"\n                    appearance=\"custom\"\n                  >\n                    {deleteButtonConfig.label}\n                  </Typography>\n                </button>\n              ) : null}\n            </motion.div>\n          )}\n        </div>\n      </div>\n    </motion.div>\n  );\n};\n\nFloatingBar.displayName = \"FloatingBar\";\n\n// Re-export types for convenience\nexport type { ButtonConfig as FloatingBarActionConfig };\nexport type FloatingBarDeleteConfig = TFloatingBar[\"deleteConfig\"];\nexport type FloatingBarProps = TFloatingBar;\n\n// Legacy type exports for backwards compatibility\nexport type FloatingBarSize = \"small\" | \"medium\" | \"large\";\nexport type FloatingBarPosition = \"top\" | \"bottom\";\nexport type FloatingBarTheme = \"primary\" | \"dark\" | \"light\";\n"],"names":["CloseIcon","size","fill","className","jsx","DropdownArrowIcon","FloatingBar","props","show","isFlowDashboard","onClose","actionItems","selectedItemsCount","deleteConfig","showActionBg","t","useTranslation","showDropdown","setShowDropdown","useState","showButtons","setShowButtons","containerRef","useRef","actionContainerRef","useEffect","observer","containerWidth","deleteButtonConfig","DeleteIcon","dropDownItems","button","index","OptionButton","motion","cn","jsxs","IconButton","Typography","Dropdown","trigger","Tooltip"],"mappings":"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"}