@instincthub/react-ui 0.1.3 → 0.1.5

package/dist/src/components/ui/Action.js.map

@@ -1 +1 @@
-{"version":3,"file":"Action.js","sources":["../../../../src/components/ui/Action.tsx"],"sourcesContent":["import React from \"react\";\r\nimport Link from \"next/link\";\r\n\r\n/**\r\n * Defines the structure of a dropdown item\r\n */\r\nexport interface ActionDropdownItem {\r\n  /** Text label to display for the dropdown item */\r\n  label: string;\r\n  /** Click handler function */\r\n  onClick?: () => void;\r\n  /** Link destination if the dropdown item is a link */\r\n  href?: string;\r\n  /** Icon to display before the label */\r\n  iconBefore?: React.ReactNode;\r\n  /** Whether the item is disabled */\r\n  disabled?: boolean;\r\n  /** Optional additional class names */\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * ActionProps interface defines all possible props for the Action component\r\n */\r\ninterface ActionProps {\r\n  /** Text label to display in the action element */\r\n  label: string;\r\n  /** Click handler function */\r\n  onClick?: () => void;\r\n  /** Link destination if the action is a link */\r\n  href?: string;\r\n  /** Visual style variant */\r\n  variant?: \"primary\" | \"secondary\" | \"outline\" | \"danger\" | \"text\";\r\n  /** Size variation */\r\n  size?: \"small\" | \"medium\" | \"large\";\r\n  /** Whether the action should take up full width of container */\r\n  fullWidth?: boolean;\r\n  /** Whether the action is disabled */\r\n  disabled?: boolean;\r\n  /** Icon to display before the label */\r\n  iconBefore?: React.ReactNode;\r\n  /** Icon to display after the label */\r\n  iconAfter?: React.ReactNode;\r\n  /** Optional additional class names */\r\n  className?: string;\r\n  /** Target attribute for links */\r\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\r\n  /** Type attribute for buttons */\r\n  type?: \"button\" | \"submit\" | \"reset\";\r\n  /** Whether to add animation effect */\r\n  animated?: boolean;\r\n  /** Whether to show a dropdown menu */\r\n  dropdown?: boolean;\r\n  /** Items to display in the dropdown menu */\r\n  dropdownItems?: ActionDropdownItem[];\r\n  /** Position of the dropdown menu */\r\n  dropdownPosition?: \"left\" | \"right\" | \"center\";\r\n}\r\n\r\n/**\r\n * A versatile Action component that can be rendered as a button or link\r\n * with various styles, sizes, icon options, and dropdown functionality\r\n */\r\nconst Action = ({\r\n  label,\r\n  onClick,\r\n  href,\r\n  variant = \"primary\",\r\n  size = \"medium\",\r\n  fullWidth = false,\r\n  disabled = false,\r\n  iconBefore,\r\n  iconAfter,\r\n  className = \"\",\r\n  target,\r\n  type = \"button\",\r\n  animated = false,\r\n  dropdown = false,\r\n  dropdownItems = [],\r\n  dropdownPosition = \"right\",\r\n}: ActionProps) => {\r\n  // State to manage dropdown visibility\r\n  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);\r\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  // Handle opening/closing the dropdown\r\n  const toggleDropdown = (e: React.MouseEvent) => {\r\n    if (dropdown) {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      setIsDropdownOpen((prev) => !prev);\r\n    }\r\n  };\r\n\r\n  // Close dropdown when clicking outside\r\n  React.useEffect(() => {\r\n    const handleClickOutside = (event: MouseEvent) => {\r\n      if (\r\n        dropdownRef.current &&\r\n        !dropdownRef.current.contains(event.target as Node)\r\n      ) {\r\n        setIsDropdownOpen(false);\r\n      }\r\n    };\r\n\r\n    if (isDropdownOpen) {\r\n      document.addEventListener(\"mousedown\", handleClickOutside);\r\n    }\r\n\r\n    return () => {\r\n      document.removeEventListener(\"mousedown\", handleClickOutside);\r\n    };\r\n  }, [isDropdownOpen]);\r\n\r\n  // Construct class names based on props\r\n  const baseClasses = [\r\n    \"ihub-action\",\r\n    `ihub-action-${variant}`,\r\n    `ihub-action-${size}`,\r\n    fullWidth ? \"ihub-action-full-width\" : \"\",\r\n    disabled ? \"ihub-action-disabled\" : \"\",\r\n    animated ? \"ihub-action-animated\" : \"\",\r\n    dropdown ? \"ihub-action-with-dropdown\" : \"\",\r\n    className,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(\" \");\r\n\r\n  // Common content for both button and link\r\n  const content = (\r\n    <>\r\n      {iconBefore && (\r\n        <span className=\"ihub-action-icon-before\">{iconBefore}</span>\r\n      )}\r\n      <span className=\"ihub-action-label\">{label}</span>\r\n      {dropdown && (\r\n        <span className=\"ihub-action-dropdown-icon\">\r\n          <svg\r\n            width=\"12\"\r\n            height=\"7\"\r\n            viewBox=\"0 0 12 7\"\r\n            fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            style={variant === \"primary\" ? { color: \"#fff\" } : {}}\r\n          >\r\n            <path\r\n              d=\"M1 1L6 6L11 1\"\r\n              stroke=\"currentColor\"\r\n              strokeWidth=\"2\"\r\n              strokeLinecap=\"round\"\r\n              strokeLinejoin=\"round\"\r\n            />\r\n          </svg>\r\n        </span>\r\n      )}\r\n      {!dropdown && iconAfter && (\r\n        <span className=\"ihub-action-icon-after\">{iconAfter}</span>\r\n      )}\r\n    </>\r\n  );\r\n\r\n  // Dropdown menu\r\n  const dropdownMenu = isDropdownOpen &&\r\n    dropdown &&\r\n    dropdownItems.length > 0 && (\r\n      <div\r\n        className={`ihub-action-dropdown-menu ihub-action-dropdown-${dropdownPosition}`}\r\n        onClick={(e) => e.stopPropagation()}\r\n      >\r\n        {dropdownItems.map((item, index) => {\r\n          const itemClasses = [\r\n            \"ihub-action-dropdown-item\",\r\n            item.disabled ? \"ihub-action-dropdown-item-disabled\" : \"\",\r\n            item.className || \"\",\r\n          ]\r\n            .filter(Boolean)\r\n            .join(\" \");\r\n\r\n          const itemContent = (\r\n            <>\r\n              {item.iconBefore && (\r\n                <span className=\"ihub-action-dropdown-item-icon\">\r\n                  {item.iconBefore}\r\n                </span>\r\n              )}\r\n              <span className=\"ihub-action-dropdown-item-label\">\r\n                {item.label}\r\n              </span>\r\n            </>\r\n          );\r\n\r\n          if (item.href && !item.disabled) {\r\n            return (\r\n              <Link\r\n                key={index}\r\n                href={item.href}\r\n                className={itemClasses}\r\n                onClick={() => {\r\n                  if (item.onClick) item.onClick();\r\n                  setIsDropdownOpen(false);\r\n                }}\r\n              >\r\n                {itemContent}\r\n              </Link>\r\n            );\r\n          }\r\n\r\n          return (\r\n            <button\r\n              key={index}\r\n              className={itemClasses}\r\n              onClick={() => {\r\n                if (!item.disabled && item.onClick) {\r\n                  item.onClick();\r\n                  setIsDropdownOpen(false);\r\n                }\r\n              }}\r\n              disabled={item.disabled}\r\n              type=\"button\"\r\n            >\r\n              {itemContent}\r\n            </button>\r\n          );\r\n        })}\r\n      </div>\r\n    );\r\n\r\n  // Wrapper to contain both the action and dropdown\r\n  const renderWithDropdown = (actionElement: React.ReactNode) => {\r\n    if (!dropdown) return actionElement;\r\n\r\n    return (\r\n      <div className=\"ihub-action-dropdown-container\" ref={dropdownRef}>\r\n        {actionElement}\r\n        {dropdownMenu}\r\n      </div>\r\n    );\r\n  };\r\n\r\n  // If it's a link (with href prop) and not a dropdown\r\n  if (href && !disabled && !dropdown) {\r\n    return renderWithDropdown(\r\n      <Link\r\n        href={href}\r\n        className={baseClasses}\r\n        target={target}\r\n        onClick={onClick}\r\n      >\r\n        {content}\r\n      </Link>\r\n    );\r\n  }\r\n\r\n  // Otherwise render as button\r\n  return renderWithDropdown(\r\n    <button\r\n      type={type}\r\n      className={baseClasses}\r\n      onClick={dropdown ? toggleDropdown : onClick}\r\n      disabled={disabled}\r\n    >\r\n      {content}\r\n    </button>\r\n  );\r\n};\r\n\r\nexport default Action;\r\n"],"names":["Action","_ref","label","onClick","href","_ref$variant","variant","_ref$size","size","_ref$fullWidth","fullWidth","_ref$disabled","disabled","iconBefore","iconAfter","_ref$className","className","target","_ref$type","type","_ref$animated","animated","_ref$dropdown","dropdown","_ref$dropdownItems","dropdownItems","_ref$dropdownPosition","dropdownPosition","_React$useState","React","useState","_React$useState2","_slicedToArray","isDropdownOpen","setIsDropdownOpen","dropdownRef","useRef","useEffect","handleClickOutside","event","current","contains","document","addEventListener","removeEventListener","baseClasses","concat","filter","Boolean","join","content","_jsxs","_Fragment","children","_jsx","width","height","viewBox","fill","xmlns","style","color","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","dropdownMenu","length","e","stopPropagation","map","item","index","itemClasses","itemContent","Link","renderWithDropdown","actionElement","ref","preventDefault","prev"],"mappings":"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"}
+{"version":3,"file":"Action.js","sources":["../../../../src/components/ui/Action.tsx"],"sourcesContent":["import React from \"react\";\r\nimport Link from \"next/link\";\r\n\r\n/**\r\n * Defines the structure of a dropdown item\r\n */\r\nexport interface ActionDropdownItem {\r\n  /** Text label to display for the dropdown item */\r\n  label: string | React.ReactNode;\r\n  /** Click handler function */\r\n  onClick?: () => void;\r\n  /** Link destination if the dropdown item is a link */\r\n  href?: string;\r\n  /** Icon to display before the label */\r\n  iconBefore?: React.ReactNode;\r\n  /** Whether the item is disabled */\r\n  disabled?: boolean;\r\n  /** Optional additional class names */\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * ActionProps interface defines all possible props for the Action component\r\n */\r\ninterface ActionProps {\r\n  /** Text label to display in the action element */\r\n  label: string | React.ReactNode;\r\n  /** Click handler function */\r\n  onClick?: () => void;\r\n  /** Link destination if the action is a link */\r\n  href?: string;\r\n  /** Visual style variant */\r\n  variant?: \"primary\" | \"secondary\" | \"outline\" | \"danger\" | \"text\";\r\n  /** Size variation */\r\n  size?: \"small\" | \"medium\" | \"large\";\r\n  /** Whether the action should take up full width of container */\r\n  fullWidth?: boolean;\r\n  /** Whether the action is disabled */\r\n  disabled?: boolean;\r\n  /** Icon to display before the label */\r\n  iconBefore?: React.ReactNode;\r\n  /** Icon to display after the label */\r\n  iconAfter?: React.ReactNode;\r\n  /** Optional additional class names */\r\n  className?: string;\r\n  /** Target attribute for links */\r\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\r\n  /** Type attribute for buttons */\r\n  type?: \"button\" | \"submit\" | \"reset\";\r\n  /** Whether to add animation effect */\r\n  animated?: boolean;\r\n  /** Whether to show a dropdown menu */\r\n  dropdown?: boolean;\r\n  /** Items to display in the dropdown menu */\r\n  dropdownItems?: ActionDropdownItem[];\r\n  /** Position of the dropdown menu */\r\n  dropdownPosition?: \"left\" | \"right\" | \"center\";\r\n}\r\n\r\n/**\r\n * Action component\r\n * A versatile Action component that can be rendered as a button or link\r\n * with various styles, sizes, icon options, and dropdown functionality\r\n * @example\r\n * <Action\r\n *  label=\"Click Me\"\r\n * onClick={() => alert('Action clicked!')}\r\n * variant=\"primary\"\r\n * size=\"medium\"\r\n * fullWidth={false}\r\n * disabled={false}\r\n * iconBefore={<Icon />}\r\n * />\r\n */\r\nconst Action: React.FC<ActionProps> = ({\r\n  label,\r\n  onClick,\r\n  href,\r\n  variant = \"primary\",\r\n  size = \"medium\",\r\n  fullWidth = false,\r\n  disabled = false,\r\n  iconBefore,\r\n  iconAfter,\r\n  className = \"\",\r\n  target,\r\n  type = \"button\",\r\n  animated = false,\r\n  dropdown = false,\r\n  dropdownItems = [],\r\n  dropdownPosition = \"right\",\r\n}) => {\r\n  // State to manage dropdown visibility\r\n  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);\r\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  // Handle opening/closing the dropdown\r\n  const toggleDropdown = (e: React.MouseEvent) => {\r\n    if (dropdown) {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      setIsDropdownOpen((prev) => !prev);\r\n    }\r\n  };\r\n\r\n  // Close dropdown when clicking outside\r\n  React.useEffect(() => {\r\n    const handleClickOutside = (event: MouseEvent) => {\r\n      if (\r\n        dropdownRef.current &&\r\n        !dropdownRef.current.contains(event.target as Node)\r\n      ) {\r\n        setIsDropdownOpen(false);\r\n      }\r\n    };\r\n\r\n    if (isDropdownOpen) {\r\n      document.addEventListener(\"mousedown\", handleClickOutside);\r\n    }\r\n\r\n    return () => {\r\n      document.removeEventListener(\"mousedown\", handleClickOutside);\r\n    };\r\n  }, [isDropdownOpen]);\r\n\r\n  // Construct class names based on props\r\n  const baseClasses = [\r\n    \"ihub-action\",\r\n    `ihub-action-${variant}`,\r\n    `ihub-action-${size}`,\r\n    fullWidth ? \"ihub-action-full-width\" : \"\",\r\n    disabled ? \"ihub-action-disabled\" : \"\",\r\n    animated ? \"ihub-action-animated\" : \"\",\r\n    dropdown ? \"ihub-action-with-dropdown\" : \"\",\r\n    className,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(\" \");\r\n\r\n  // Common content for both button and link\r\n  const content = (\r\n    <>\r\n      {iconBefore && (\r\n        <span className=\"ihub-action-icon-before\">{iconBefore}</span>\r\n      )}\r\n      <span className=\"ihub-action-label\">{label}</span>\r\n      {dropdown && (\r\n        <span className=\"ihub-action-dropdown-icon\">\r\n          <svg\r\n            width=\"12\"\r\n            height=\"7\"\r\n            viewBox=\"0 0 12 7\"\r\n            fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            style={variant === \"primary\" ? { color: \"#fff\" } : {}}\r\n          >\r\n            <path\r\n              d=\"M1 1L6 6L11 1\"\r\n              stroke=\"currentColor\"\r\n              strokeWidth=\"2\"\r\n              strokeLinecap=\"round\"\r\n              strokeLinejoin=\"round\"\r\n            />\r\n          </svg>\r\n        </span>\r\n      )}\r\n      {!dropdown && iconAfter && (\r\n        <span className=\"ihub-action-icon-after\">{iconAfter}</span>\r\n      )}\r\n    </>\r\n  );\r\n\r\n  // Dropdown menu\r\n  const dropdownMenu = isDropdownOpen &&\r\n    dropdown &&\r\n    dropdownItems.length > 0 && (\r\n      <div\r\n        className={`ihub-action-dropdown-menu ihub-action-dropdown-${dropdownPosition}`}\r\n        onClick={(e) => e.stopPropagation()}\r\n      >\r\n        {dropdownItems.map((item, index) => {\r\n          const itemClasses = [\r\n            \"ihub-action-dropdown-item\",\r\n            item.disabled ? \"ihub-action-dropdown-item-disabled\" : \"\",\r\n            item.className || \"\",\r\n          ]\r\n            .filter(Boolean)\r\n            .join(\" \");\r\n\r\n          const itemContent = (\r\n            <>\r\n              {item.iconBefore && (\r\n                <span className=\"ihub-action-dropdown-item-icon\">\r\n                  {item.iconBefore}\r\n                </span>\r\n              )}\r\n              <span className=\"ihub-action-dropdown-item-label\">\r\n                {item.label}\r\n              </span>\r\n            </>\r\n          );\r\n\r\n          if (item.href && !item.disabled) {\r\n            return (\r\n              <Link\r\n                key={index}\r\n                href={item.href}\r\n                className={itemClasses}\r\n                onClick={() => {\r\n                  if (item.onClick) item.onClick();\r\n                  setIsDropdownOpen(false);\r\n                }}\r\n              >\r\n                {itemContent}\r\n              </Link>\r\n            );\r\n          }\r\n\r\n          return (\r\n            <button\r\n              key={index}\r\n              className={itemClasses}\r\n              onClick={() => {\r\n                if (!item.disabled && item.onClick) {\r\n                  item.onClick();\r\n                  setIsDropdownOpen(false);\r\n                }\r\n              }}\r\n              disabled={item.disabled}\r\n              type=\"button\"\r\n            >\r\n              {itemContent}\r\n            </button>\r\n          );\r\n        })}\r\n      </div>\r\n    );\r\n\r\n  // Wrapper to contain both the action and dropdown\r\n  const renderWithDropdown = (actionElement: React.ReactElement) => {\r\n    if (!dropdown) return actionElement;\r\n\r\n    return (\r\n      <div className=\"ihub-action-dropdown-container\" ref={dropdownRef}>\r\n        {actionElement}\r\n        {dropdownMenu}\r\n      </div>\r\n    );\r\n  };\r\n\r\n  // Render the appropriate element\r\n  const actionElement =\r\n    href && !disabled && !dropdown ? (\r\n      <Link\r\n        href={href}\r\n        className={baseClasses}\r\n        target={target}\r\n        onClick={onClick}\r\n      >\r\n        {content}\r\n      </Link>\r\n    ) : (\r\n      <button\r\n        type={type}\r\n        className={baseClasses}\r\n        onClick={dropdown ? toggleDropdown : onClick}\r\n        disabled={disabled}\r\n      >\r\n        {content}\r\n      </button>\r\n    );\r\n\r\n  return renderWithDropdown(actionElement);\r\n};\r\n\r\nexport default Action;\r\n"],"names":["Action","_ref","label","onClick","href","_ref$variant","variant","_ref$size","size","_ref$fullWidth","fullWidth","_ref$disabled","disabled","iconBefore","iconAfter","_ref$className","className","target","_ref$type","type","_ref$animated","animated","_ref$dropdown","dropdown","_ref$dropdownItems","dropdownItems","_ref$dropdownPosition","dropdownPosition","_React$useState","React","useState","_React$useState2","_slicedToArray","isDropdownOpen","setIsDropdownOpen","dropdownRef","useRef","useEffect","handleClickOutside","event","current","contains","document","addEventListener","removeEventListener","baseClasses","concat","filter","Boolean","join","content","_jsxs","_Fragment","children","_jsx","width","height","viewBox","fill","xmlns","style","color","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","dropdownMenu","length","e","stopPropagation","map","item","index","itemClasses","itemContent","Link","actionElement","ref","renderWithDropdown","preventDefault","prev"],"mappings":"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"}

package/dist/src/components/ui/Badge.js

@@ -1,2 +1,2 @@
-import{jsx as o}from"react/jsx-runtime";var a=function(a){var d=a.children,i=a.variant,e=void 0===i?"default":i,n=a.size,t=void 0===n?"medium":n,u=a.shape,c=void 0===u?"rounded":u,b=a.outlined,l=void 0!==b&&b,r=a.className,v=void 0===r?"":r,h=a.count,s=a.maxCount,m=void 0===s?99:s,g=a.dot,f=void 0!==g&&g,p=a.standalone,x=void 0===p||p,C=a.onClick,j=d;f?j=null:void 0!==h&&(j=h>m?"".concat(m,"+"):h);var k=["ihub-badge","ihub-badge-".concat(e),"ihub-badge-".concat(t),"ihub-badge-".concat(c),l?"ihub-badge-outlined":"",f?"ihub-badge-dot":"",x?"":"ihub-badge-attached",v].filter(Boolean).join(" ");return o("span",{className:k,onClick:C,role:C?"button":void 0,tabIndex:C?0:void 0,children:j})};export{a as default};
+import{jsx as o}from"react/jsx-runtime";var a=function(a){var d=a.children,i=a.text,e=a.variant,t=void 0===e?"default":e,n=a.size,u=void 0===n?"medium":n,c=a.shape,b=void 0===c?"rounded":c,l=a.outlined,r=void 0!==l&&l,v=a.className,h=void 0===v?"":v,s=a.count,m=a.maxCount,g=void 0===m?99:m,f=a.dot,x=void 0!==f&&f,p=a.standalone,C=void 0===p||p,j=a.onClick,k=i||d;x?k=null:void 0!==s&&(k=s>g?"".concat(g,"+"):s);var N=["ihub-badge","ihub-badge-".concat(t),"ihub-badge-".concat(u),"ihub-badge-".concat(b),r?"ihub-badge-outlined":"",x?"ihub-badge-dot":"",C?"":"ihub-badge-attached",h].filter(Boolean).join(" ");return o("span",{className:N,onClick:j,role:j?"button":void 0,tabIndex:j?0:void 0,children:k})};export{a as default};
 //# sourceMappingURL=Badge.js.map

package/dist/src/components/ui/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../../src/components/ui/Badge.tsx"],"sourcesContent":["import React from \"react\";\r\n\r\nexport type BadgeVariant =\r\n  | \"default\"\r\n  | \"primary\"\r\n  | \"success\"\r\n  | \"warning\"\r\n  | \"danger\"\r\n  | \"info\";\r\nexport type BadgeSize = \"small\" | \"medium\" | \"large\";\r\nexport type BadgeShape = \"rounded\" | \"pill\" | \"square\";\r\n\r\nexport interface BadgeProps {\r\n  /**\r\n   * The content to display inside the badge\r\n   */\r\n  children?: React.ReactNode;\r\n\r\n  /**\r\n   * The visual style variant of the badge\r\n   * @default 'default'\r\n   */\r\n  variant?: BadgeVariant;\r\n\r\n  /**\r\n   * The size of the badge\r\n   * @default 'medium'\r\n   */\r\n  size?: BadgeSize;\r\n\r\n  /**\r\n   * The shape of the badge\r\n   * @default 'rounded'\r\n   */\r\n  shape?: BadgeShape;\r\n\r\n  /**\r\n   * Whether the badge has an outline style\r\n   * @default false\r\n   */\r\n  outlined?: boolean;\r\n\r\n  /**\r\n   * Additional CSS class names\r\n   */\r\n  className?: string;\r\n\r\n  /**\r\n   * Badge value for notification-style badges\r\n   */\r\n  count?: number;\r\n\r\n  /**\r\n   * Maximum count to display before showing \"count+\"\r\n   * @default 99\r\n   */\r\n  maxCount?: number;\r\n\r\n  /**\r\n   * Show a dot badge without content\r\n   * @default false\r\n   */\r\n  dot?: boolean;\r\n\r\n  /**\r\n   * Makes the badge standalone (not overlaying another element)\r\n   * @default true\r\n   */\r\n  standalone?: boolean;\r\n\r\n  /**\r\n   * Optional click handler\r\n   */\r\n  onClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;\r\n}\r\n\r\n/**\r\n * Badge Component - Used for displaying counts, status indicators, or labels\r\n */\r\nconst Badge: React.FC<BadgeProps> = ({\r\n  children,\r\n  variant = \"default\",\r\n  size = \"medium\",\r\n  shape = \"rounded\",\r\n  outlined = false,\r\n  className = \"\",\r\n  count,\r\n  maxCount = 99,\r\n  dot = false,\r\n  standalone = true,\r\n  onClick,\r\n}) => {\r\n  // Determine the content to display\r\n  let content = children;\r\n  if (dot) {\r\n    content = null;\r\n  } else if (count !== undefined) {\r\n    content = count > maxCount ? `${maxCount}+` : count;\r\n  }\r\n\r\n  // Build CSS class name\r\n  const badgeClasses = [\r\n    \"ihub-badge\",\r\n    `ihub-badge-${variant}`,\r\n    `ihub-badge-${size}`,\r\n    `ihub-badge-${shape}`,\r\n    outlined ? \"ihub-badge-outlined\" : \"\",\r\n    dot ? \"ihub-badge-dot\" : \"\",\r\n    !standalone ? \"ihub-badge-attached\" : \"\",\r\n    className,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(\" \");\r\n\r\n  return (\r\n    <span\r\n      className={badgeClasses}\r\n      onClick={onClick}\r\n      role={onClick ? \"button\" : undefined}\r\n      tabIndex={onClick ? 0 : undefined}\r\n    >\r\n      {content}\r\n    </span>\r\n  );\r\n};\r\n\r\nexport default Badge;\r\n"],"names":["Badge","_ref","children","_ref$variant","variant","_ref$size","size","_ref$shape","shape","_ref$outlined","outlined","_ref$className","className","count","_ref$maxCount","maxCount","_ref$dot","dot","_ref$standalone","standalone","onClick","content","undefined","concat","badgeClasses","filter","Boolean","join","_jsx","role","tabIndex"],"mappings":"wCA+EA,IAAMA,EAA8B,SAAzBC,GAYN,IAXHC,EAAQD,EAARC,SAAQC,EAAAF,EACRG,QAAAA,OAAU,IAAHD,EAAG,UAASA,EAAAE,EAAAJ,EACnBK,KAAAA,OAAO,IAAHD,EAAG,SAAQA,EAAAE,EAAAN,EACfO,MAAAA,OAAQ,IAAHD,EAAG,UAASA,EAAAE,EAAAR,EACjBS,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAV,EAChBW,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EACdE,EAAKZ,EAALY,MAAKC,EAAAb,EACLc,SAAAA,OAAW,IAAHD,EAAG,GAAEA,EAAAE,EAAAf,EACbgB,IAAAA,OAAM,IAAHD,GAAQA,EAAAE,EAAAjB,EACXkB,WAAAA,OAAa,IAAHD,GAAOA,EACjBE,EAAOnB,EAAPmB,QAGIC,EAAUnB,EACVe,EACFI,EAAU,UACSC,IAAVT,IACTQ,EAAUR,EAAQE,KAAQQ,OAAMR,EAAQ,KAAMF,GAIhD,IAAMW,EAAe,CACnB,2BAAYD,OACEnB,GAAOmB,cAAAA,OACPjB,GAAI,cAAAiB,OACJf,GACdE,EAAW,sBAAwB,GACnCO,EAAM,iBAAmB,GACxBE,EAAqC,GAAxB,sBACdP,GAECa,OAAOC,SACPC,KAAK,KAER,OACEC,EACE,OAAA,CAAAhB,UAAWY,EACXJ,QAASA,EACTS,KAAMT,EAAU,cAAWE,EAC3BQ,SAAUV,EAAU,OAAIE,WAEvBD,GAGP"}
+{"version":3,"file":"Badge.js","sources":["../../../../src/components/ui/Badge.tsx"],"sourcesContent":["import React from \"react\";\r\n\r\nexport type BadgeVariant =\r\n  | \"default\"\r\n  | \"primary\"\r\n  | \"secondary\"\r\n  | \"success\"\r\n  | \"warning\"\r\n  | \"danger\"\r\n  | \"info\";\r\nexport type BadgeSize = \"small\" | \"medium\" | \"large\";\r\nexport type BadgeShape = \"rounded\" | \"pill\" | \"square\";\r\n\r\nexport interface BadgeProps {\r\n  /**\r\n   * The content to display inside the badge\r\n   */\r\n  children?: React.ReactNode;\r\n\r\n  /**\r\n   * Text content to display (alias for children)\r\n   */\r\n  text?: string;\r\n\r\n  /**\r\n   * The visual style variant of the badge\r\n   * @default 'default | default primary | success | warning | danger | info'\r\n   */\r\n  variant?: BadgeVariant;\r\n\r\n  /**\r\n   * The size of the badge\r\n   * @default 'medium'\r\n   */\r\n  size?: BadgeSize;\r\n\r\n  /**\r\n   * The shape of the badge\r\n   * @default 'rounded'\r\n   */\r\n  shape?: BadgeShape;\r\n\r\n  /**\r\n   * Whether the badge has an outline style\r\n   * @default false\r\n   */\r\n  outlined?: boolean;\r\n\r\n  /**\r\n   * Additional CSS class names\r\n   */\r\n  className?: string;\r\n\r\n  /**\r\n   * Badge value for notification-style badges\r\n   */\r\n  count?: number;\r\n\r\n  /**\r\n   * Maximum count to display before showing \"count+\"\r\n   * @default 99\r\n   */\r\n  maxCount?: number;\r\n\r\n  /**\r\n   * Show a dot badge without content\r\n   * @default false\r\n   */\r\n  dot?: boolean;\r\n\r\n  /**\r\n   * Makes the badge standalone (not overlaying another element)\r\n   * @default true\r\n   */\r\n  standalone?: boolean;\r\n\r\n  /**\r\n   * Optional click handler\r\n   */\r\n  onClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;\r\n}\r\n\r\n/**\r\n * Badge Component - Used for displaying counts, status indicators, or labels\r\n */\r\nconst Badge: React.FC<BadgeProps> = ({\r\n  children,\r\n  text,\r\n  variant = \"default\",\r\n  size = \"medium\",\r\n  shape = \"rounded\",\r\n  outlined = false,\r\n  className = \"\",\r\n  count,\r\n  maxCount = 99,\r\n  dot = false,\r\n  standalone = true,\r\n  onClick,\r\n}) => {\r\n  // Determine the content to display\r\n  let content = text || children;\r\n  if (dot) {\r\n    content = null;\r\n  } else if (count !== undefined) {\r\n    content = count > maxCount ? `${maxCount}+` : count;\r\n  }\r\n\r\n  // Build CSS class name\r\n  const badgeClasses = [\r\n    \"ihub-badge\",\r\n    `ihub-badge-${variant}`,\r\n    `ihub-badge-${size}`,\r\n    `ihub-badge-${shape}`,\r\n    outlined ? \"ihub-badge-outlined\" : \"\",\r\n    dot ? \"ihub-badge-dot\" : \"\",\r\n    !standalone ? \"ihub-badge-attached\" : \"\",\r\n    className,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(\" \");\r\n\r\n  return (\r\n    <span\r\n      className={badgeClasses}\r\n      onClick={onClick}\r\n      role={onClick ? \"button\" : undefined}\r\n      tabIndex={onClick ? 0 : undefined}\r\n    >\r\n      {content}\r\n    </span>\r\n  );\r\n};\r\n\r\nexport default Badge;\r\n\r\n/**\r\n * @example\r\n * // Basic usage\r\n * <Badge>New</Badge>\r\n *\r\n * @example\r\n * // Different variants\r\n * <Badge variant=\"primary\">Primary</Badge>\r\n * <Badge variant=\"success\">Success</Badge>\r\n * <Badge variant=\"warning\">Warning</Badge>\r\n * <Badge variant=\"danger\">Danger</Badge>\r\n * <Badge variant=\"info\">Info</Badge>\r\n *\r\n * @example\r\n * // Different sizes\r\n * <Badge size=\"small\">Small</Badge>\r\n * <Badge size=\"medium\">Medium</Badge>\r\n * <Badge size=\"large\">Large</Badge>\r\n *\r\n * @example\r\n * // Different shapes\r\n * <Badge shape=\"rounded\">Rounded</Badge>\r\n * <Badge shape=\"pill\">Pill</Badge>\r\n * <Badge shape=\"square\">Square</Badge>\r\n *\r\n * @example\r\n * // Outlined style\r\n * <Badge variant=\"primary\" outlined>Outlined</Badge>\r\n *\r\n * @example\r\n * // Count badges\r\n * <Badge count={5} variant=\"danger\" />\r\n * <Badge count={150} maxCount={99} variant=\"primary\" />\r\n *\r\n * @example\r\n * // Dot badge (status indicator)\r\n * <Badge dot variant=\"success\" />\r\n *\r\n * @example\r\n * // Clickable badge\r\n * <Badge\r\n *   variant=\"primary\"\r\n *   onClick={(e) => console.log('Badge clicked')}\r\n * >\r\n *   Clickable\r\n * </Badge>\r\n *\r\n * @example\r\n * // Usage recommendations:\r\n * // 1. For status indicators: use 'dot' prop with appropriate variant\r\n * // 2. For notification counts: use 'count' prop with 'danger' or 'primary' variant\r\n * // 3. For labels/tags: use text content with 'pill' shape\r\n * // 4. For action badges: add onClick handler and use 'primary' variant\r\n * // 5. For subtle indicators: use 'outlined' prop with muted variants\r\n */\r\n"],"names":["Badge","_ref","children","text","_ref$variant","variant","_ref$size","size","_ref$shape","shape","_ref$outlined","outlined","_ref$className","className","count","_ref$maxCount","maxCount","_ref$dot","dot","_ref$standalone","standalone","onClick","content","undefined","concat","badgeClasses","filter","Boolean","join","_jsx","role","tabIndex"],"mappings":"wCAqFA,IAAMA,EAA8B,SAAzBC,GAaN,IAZHC,EAAQD,EAARC,SACAC,EAAIF,EAAJE,KAAIC,EAAAH,EACJI,QAAAA,OAAU,IAAHD,EAAG,UAASA,EAAAE,EAAAL,EACnBM,KAAAA,OAAO,IAAHD,EAAG,SAAQA,EAAAE,EAAAP,EACfQ,MAAAA,OAAQ,IAAHD,EAAG,UAASA,EAAAE,EAAAT,EACjBU,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAX,EAChBY,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EACdE,EAAKb,EAALa,MAAKC,EAAAd,EACLe,SAAAA,OAAW,IAAHD,EAAG,GAAEA,EAAAE,EAAAhB,EACbiB,IAAAA,OAAM,IAAHD,GAAQA,EAAAE,EAAAlB,EACXmB,WAAAA,OAAa,IAAHD,GAAOA,EACjBE,EAAOpB,EAAPoB,QAGIC,EAAUnB,GAAQD,EAClBgB,EACFI,EAAU,UACSC,IAAVT,IACTQ,EAAUR,EAAQE,KAAQQ,OAAMR,EAAQ,KAAMF,GAIhD,IAAMW,EAAe,CACnB,2BAAYD,OACEnB,GAAOmB,cAAAA,OACPjB,GAAI,cAAAiB,OACJf,GACdE,EAAW,sBAAwB,GACnCO,EAAM,iBAAmB,GACxBE,EAAqC,GAAxB,sBACdP,GAECa,OAAOC,SACPC,KAAK,KAER,OACEC,EACE,OAAA,CAAAhB,UAAWY,EACXJ,QAASA,EACTS,KAAMT,EAAU,cAAWE,EAC3BQ,SAAUV,EAAU,OAAIE,WAEvBD,GAGP"}