@abstraks-dev/ui-library 1.0.1

package/dist/components/Header.js

@@ -0,0 +1,372 @@
+"use strict";
+'use client';
+
+/**
+ * Header Component
+ *
+ * A responsive navigation header component that adapts between desktop and mobile layouts.
+ * Features keyboard navigation, screen reader support, and ARIA compliance.
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <Header
+ *   logo={<Logo />}
+ *   navigation={navigationItems}
+ *   mapMenuItems={mobileMenuItems}
+ *   hasAuth={true}
+ *   isMenuOpen={false}
+ *   isEllipsesOpen={false}
+ *   onMenuToggle={(isOpen) => setMenuOpen(isOpen)}
+ *   onEllipsesToggle={(isOpen) => setEllipsesOpen(isOpen)}
+ *   ariaLabel="Main navigation"
+ *   menuAriaLabel="Navigation menu"
+ *   userMenuAriaLabel="User menu"
+ *   avatarSrc="path/to/avatar.jpg"
+ * />
+ * ```
+ *
+ * @param {object} props - Component props
+ * @param {string} [props.componentName='header'] - Base component CSS class name
+ * @param {string} [props.additionalClassName=''] - Additional CSS classes to apply
+ * @param {React.ReactNode} props.logo - Logo element to display in header (required for branding)
+ * @param {React.ReactNode} props.navigation - Desktop navigation items (required for navigation)
+ * @param {React.ReactNode} props.mapMenuItems - Mobile navigation menu items (required for mobile UX)
+ * @param {boolean} [props.hasAuth=false] - Whether user is authenticated (affects UI layout)
+ * @param {React.ReactNode} [props.signInLink] - Sign in link component for unauthenticated users
+ * @param {React.ReactNode} [props.signUpLink] - Sign up link component for unauthenticated users
+ * @param {string} [props.avatarSrc] - User avatar image source for authenticated users
+ * @param {React.ReactNode[]} [props.ellipsesList=[]] - List of user menu items for dropdown
+ * @param {React.ReactNode} [props.search] - Search component for header search functionality
+ * @param {boolean} props.isMenuOpen - Whether mobile menu is currently open (controlled state, required)
+ * @param {boolean} props.isEllipsesOpen - Whether user dropdown menu is currently open (controlled state, required)
+ * @param {function} props.onMenuToggle - Callback when mobile menu toggle is triggered (required for state management)
+ * @param {function} props.onEllipsesToggle - Callback when user dropdown toggle is triggered (required for state management)
+ * @param {function} [props.onKeyDown] - Additional callback for custom keyboard event handling
+ * @param {string} props.ariaLabel - ARIA label for the header element (required for accessibility)
+ * @param {string} props.menuAriaLabel - ARIA label for the navigation menu (required for screen readers)
+ * @param {string} props.userMenuAriaLabel - ARIA label for the user menu (required for screen readers)
+ */
+'react';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Header = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _Avatar = require("./Avatar");
+var _SideMenu = require("./SideMenu");
+var _Close = require("../icons/Close");
+var _Hamburger = require("../icons/Hamburger");
+var _useWindowSize = require("../utils/useWindowSize");
+var _accessibility = require("../utils/accessibility");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } // components
+// utils
+/**
+ * Header Component
+ *
+ * A responsive navigation header component that adapts between desktop and mobile layouts.
+ * Features keyboard navigation, screen reader support, and ARIA compliance.
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <Header
+ *   logo={<Logo />}
+ *   navigation={navigationItems}
+ *   hasAuth={true}
+ *   isMenuOpen={false}
+ *   onMenuToggle={(isOpen) => setMenuOpen(isOpen)}
+ *   onEllipsesToggle={(isOpen) => setEllipsesOpen(isOpen)}
+ *   avatarSrc="path/to/avatar.jpg"
+ * />
+ * ```
+ */
+const Header = exports.Header = /*#__PURE__*/(0, _react.forwardRef)(({
+  // Core props
+  id,
+  className = '',
+  // Content props
+  logo = null,
+  navigation = null,
+  mapMenuItems = null,
+  signInLink = null,
+  signUpLink = null,
+  avatarSrc = null,
+  ellipsesList = [],
+  search = null,
+  // Behavior props
+  hasAuth = false,
+  isMenuOpen = false,
+  isEllipsesOpen = false,
+  // Event props
+  onMenuToggle = null,
+  onEllipsesToggle = null,
+  onKeyDown = null,
+  // Accessibility props
+  ariaLabel = 'Main navigation',
+  menuAriaLabel = 'Navigation menu',
+  userMenuAriaLabel = 'User menu',
+  // Legacy props (for backward compatibility - internal use only)
+  componentName = 'header',
+  additionalClassName = '',
+  ...restProps
+}, ref) => {
+  // Handle legacy prop mapping
+  const finalId = id || `header-${Math.random().toString(36).substr(2, 9)}`;
+  const finalClassName = className || additionalClassName;
+  const size = (0, _useWindowSize.useWindowSize)();
+  const isMobile = size.width < 768;
+
+  // Handle keyboard navigation
+  const handleKeyDown = event => {
+    const {
+      key,
+      target
+    } = event;
+
+    // Escape key closes any open menus
+    if (key === 'Escape') {
+      if (isMenuOpen && onMenuToggle) {
+        onMenuToggle(false);
+        (0, _accessibility.announceToScreenReader)('Menu closed');
+      }
+      if (isEllipsesOpen && onEllipsesToggle) {
+        onEllipsesToggle(false);
+        (0, _accessibility.announceToScreenReader)('User menu closed');
+      }
+    }
+
+    // Tab key management for focus trapping in mobile menu
+    if (key === 'Tab' && isMenuOpen && isMobile) {
+      const focusableElements = target.closest('.side-menu')?.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      if (focusableElements && focusableElements.length > 0) {
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        if (event.shiftKey && target === firstElement) {
+          event.preventDefault();
+          (0, _accessibility.safeFocus)(lastElement);
+        } else if (!event.shiftKey && target === lastElement) {
+          event.preventDefault();
+          (0, _accessibility.safeFocus)(firstElement);
+        }
+      }
+    }
+    if (onKeyDown) onKeyDown(event);
+  };
+
+  // Hamburger and Close icons
+  const hamburgerIcon = /*#__PURE__*/_react.default.createElement(_Hamburger.Hamburger, null);
+  const closeIcon = /*#__PURE__*/_react.default.createElement(_Close.Close, null);
+
+  // Handlers for menu and ellipses
+  const handleMenuToggle = () => {
+    if (onMenuToggle) onMenuToggle(!isMenuOpen);
+  };
+  const handleEllipsesToggle = () => {
+    if (onEllipsesToggle) onEllipsesToggle(!isEllipsesOpen);
+  };
+  return /*#__PURE__*/_react.default.createElement("header", _extends({
+    ref: ref,
+    id: finalId,
+    className: `${componentName} ${finalClassName}`,
+    "data-testid": componentName,
+    role: "banner",
+    "aria-label": ariaLabel,
+    onKeyDown: handleKeyDown
+  }, restProps), /*#__PURE__*/_react.default.createElement("div", {
+    className: isMobile ? 'container-mobile' : 'container-large'
+  }, logo, search, isMobile ? /*#__PURE__*/_react.default.createElement(_SideMenu.SideMenu, {
+    direction: "vertical",
+    position: "top",
+    isOpen: isMenuOpen,
+    onToggle: handleMenuToggle,
+    onOpen: () => (0, _accessibility.announceToScreenReader)('Menu opened'),
+    onClose: () => (0, _accessibility.announceToScreenReader)('Menu closed'),
+    closeOnBackdrop: true,
+    closeOnEscape: true,
+    ariaLabel: menuAriaLabel,
+    trigger: /*#__PURE__*/_react.default.createElement("button", {
+      type: "button",
+      "aria-label": `${isMenuOpen ? 'Close' : 'Open'} ${menuAriaLabel.toLowerCase()}`,
+      "aria-expanded": isMenuOpen,
+      "aria-controls": "mobile-navigation",
+      onClick: handleMenuToggle,
+      className: "mobile-menu-trigger"
+    }, hamburgerIcon),
+    rightIconClose: /*#__PURE__*/_react.default.createElement("button", {
+      type: "button",
+      "aria-label": "Close menu",
+      onClick: handleMenuToggle,
+      className: "mobile-menu-close"
+    }, closeIcon),
+    menuItems: mapMenuItems,
+    navigation: navigation,
+    signInLink: signInLink,
+    signUpLink: signUpLink,
+    avatarSrc: avatarSrc,
+    ellipsesList: ellipsesList,
+    userMenuAriaLabel: userMenuAriaLabel,
+    isEllipsesOpen: isEllipsesOpen,
+    onEllipsesToggle: handleEllipsesToggle
+  }) : /*#__PURE__*/_react.default.createElement("nav", {
+    className: "navigation",
+    "data-testid": "navigation",
+    role: "navigation",
+    "aria-label": menuAriaLabel
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: "unordered-list",
+    role: "menubar",
+    "aria-orientation": "horizontal"
+  }, navigation), /*#__PURE__*/_react.default.createElement("ul", {
+    className: "unordered-list auth-menu",
+    role: "menubar",
+    "aria-label": "Authentication"
+  }, hasAuth ? /*#__PURE__*/_react.default.createElement("li", {
+    className: "list-item",
+    role: "none"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "head"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "ellipses",
+    onClick: handleEllipsesToggle,
+    "aria-label": `${isEllipsesOpen ? 'Close' : 'Open'} ${userMenuAriaLabel.toLowerCase()}`,
+    "aria-expanded": isEllipsesOpen,
+    "aria-haspopup": "menu",
+    "aria-controls": "user-menu-dropdown",
+    id: "user-menu-button"
+  }, /*#__PURE__*/_react.default.createElement(_Avatar.Avatar, {
+    dimensions: "50px",
+    source: avatarSrc,
+    alt: "User avatar"
+  }), isEllipsesOpen && /*#__PURE__*/_react.default.createElement("div", {
+    className: "ellipses-content",
+    role: "menu",
+    "aria-labelledby": "user-menu-button",
+    id: "user-menu-dropdown"
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: "unordered-list",
+    role: "none"
+  }, ellipsesList))))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("li", {
+    className: "list-item",
+    role: "none"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    role: "menuitem",
+    tabIndex: 0
+  }, signInLink)), /*#__PURE__*/_react.default.createElement("li", {
+    className: "list-item",
+    role: "none"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    role: "menuitem",
+    tabIndex: 0
+  }, signUpLink)))))));
+});
+
+// Set display name for debugging
+Header.displayName = 'Header';
+Header.propTypes = {
+  // ===========================================
+  // Core Props
+  // ===========================================
+  /**
+   * Unique identifier for the component
+   */
+  id: _propTypes.string,
+  /**
+   * Additional CSS classes to apply
+   */
+  className: _propTypes.string,
+  // ===========================================
+  // Content Props
+  // ===========================================
+  /**
+   * Logo element to display in header (required for branding)
+   */
+  logo: _propTypes.node.isRequired,
+  /**
+   * Desktop navigation items (required for navigation)
+   */
+  navigation: _propTypes.node.isRequired,
+  /**
+   * Mobile navigation menu items (required for mobile UX)
+   */
+  mapMenuItems: _propTypes.node.isRequired,
+  /**
+   * Sign in link component for unauthenticated users
+   */
+  signInLink: _propTypes.node,
+  /**
+   * Sign up link component for unauthenticated users
+   */
+  signUpLink: _propTypes.node,
+  /**
+   * User avatar image source for authenticated users
+   */
+  avatarSrc: _propTypes.string,
+  /**
+   * List of user menu items for dropdown
+   */
+  ellipsesList: (0, _propTypes.arrayOf)(_propTypes.node),
+  /**
+   * Search component for header search functionality
+   */
+  search: _propTypes.node,
+  // ===========================================
+  // Behavior Props
+  // ===========================================
+  /**
+   * Whether user is authenticated (affects UI layout)
+   */
+  hasAuth: _propTypes.bool,
+  /**
+   * Whether mobile menu is currently open (controlled state, required)
+   */
+  isMenuOpen: _propTypes.bool.isRequired,
+  /**
+   * Whether user dropdown menu is currently open (controlled state, required)
+   */
+  isEllipsesOpen: _propTypes.bool.isRequired,
+  // ===========================================
+  // Event Props
+  // ===========================================
+  /**
+   * Callback when mobile menu toggle is triggered (required for state management)
+   */
+  onMenuToggle: _propTypes.func.isRequired,
+  /**
+   * Callback when user dropdown toggle is triggered (required for state management)
+   */
+  onEllipsesToggle: _propTypes.func.isRequired,
+  /**
+   * Additional callback for custom keyboard event handling
+   */
+  onKeyDown: _propTypes.func,
+  // ===========================================
+  // Accessibility Props
+  // ===========================================
+  /**
+   * ARIA label for the header element (required for accessibility)
+   */
+  ariaLabel: _propTypes.string.isRequired,
+  /**
+   * ARIA label for the navigation menu (required for screen readers)
+   */
+  menuAriaLabel: _propTypes.string.isRequired,
+  /**
+   * ARIA label for the user menu (required for screen readers)
+   */
+  userMenuAriaLabel: _propTypes.string.isRequired,
+  /**
+   * Use id for identification
+   * Base component CSS class name
+   */
+  componentName: _propTypes.string,
+  /**
+   * Use className instead
+   * Additional CSS classes to apply
+   */
+  additionalClassName: _propTypes.string
+};

package/dist/components/Heading.js

@@ -0,0 +1,134 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Heading = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * Heading Component
+ *
+ * A semantic heading component that renders appropriate HTML heading elements (h1-h6)
+ * with proper accessibility and styling support.
+ *
+ * This component ensures proper document structure and hierarchy for screen readers
+ * and SEO while providing flexible styling options.
+ *
+ * @component
+ * @example
+ * // Basic usage
+ * <Heading level={1}>Main Page Title</Heading>
+ *
+ * @example
+ * // With custom styling and accessibility
+ * <Heading
+ *   level={2}
+ *   className="section-title"
+ *   id="about-section"
+ *   aria-describedby="about-description"
+ * >
+ *   About Us
+ * </Heading>
+ *
+ * @example
+ * // With different variants and sizes
+ * <Heading level={3} variant="primary" size="large">
+ *   Feature Highlight
+ * </Heading>
+ */
+const Heading = exports.Heading = /*#__PURE__*/(0, _react.forwardRef)(({
+  // Core props
+  level = 1,
+  children = null,
+  // Layout props
+  className = '',
+  variant = 'default',
+  size = 'default',
+  // Accessibility props
+  id,
+  'aria-level': ariaLevel,
+  'aria-labelledby': ariaLabelledby,
+  'aria-describedby': ariaDescribedby,
+  // Legacy props (for backward compatibility - internal use only)
+  additionalClassName = '',
+  componentName = 'heading',
+  ...restProps
+}, ref) => {
+  // Handle legacy prop mapping
+  // For backward compatibility, if variant is a number, treat it as level
+  const isLegacyVariant = typeof variant === 'number';
+  const finalLevel = isLegacyVariant ? variant : level;
+  const finalClassName = className || additionalClassName;
+
+  // Build CSS classes - keep it simple to match tests
+  const HeadingTag = `h${finalLevel}`;
+  const headingClasses = [HeadingTag, componentName, finalClassName].filter(Boolean).join(' ').trim();
+  return /*#__PURE__*/_react.default.createElement(HeadingTag, _extends({
+    ref: ref,
+    id: id,
+    className: headingClasses,
+    "data-testid": componentName
+    // Accessibility attributes
+    ,
+    "aria-level": ariaLevel || finalLevel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby
+  }, restProps), children);
+});
+var _default = exports.default = Heading; // Set display name for debugging
+Heading.displayName = 'Heading';
+Heading.propTypes = {
+  // ===========================================
+  // Core Props
+  // ===========================================
+  /**
+   * Heading level (1-6) that determines semantic importance and HTML element.
+   * Required for proper document structure and accessibility.
+   */
+  level: (0, _propTypes.oneOf)([1, 2, 3, 4, 5, 6]),
+  /**
+   * Unique identifier for the heading
+   */
+  id: _propTypes.string,
+  // ===========================================
+  // Content Props
+  // ===========================================
+  /**
+   * The content to be displayed in the heading.
+   * Can be text, React elements, or other nodes.
+   */
+  children: _propTypes.node,
+  // ===========================================
+  // Appearance Props
+  // ===========================================
+  /**
+   * Additional CSS classes to apply to the heading element
+   */
+  className: _propTypes.string,
+  /**
+   * Visual style variant
+   */
+  variant: _propTypes.string,
+  /**
+   * Size variant for the heading
+   */
+  size: _propTypes.string,
+  // ===========================================
+  // Accessibility Props
+  // ===========================================
+  /**
+   * ARIA level override (if different from semantic level)
+   */
+  'aria-level': (0, _propTypes.oneOf)([1, 2, 3, 4, 5, 6]),
+  /**
+   * ID of element that labels this heading
+   */
+  'aria-labelledby': _propTypes.string,
+  /**
+   * ID(s) of elements that describe this heading
+   */
+  'aria-describedby': _propTypes.string
+};

package/dist/components/Hero.js

@@ -0,0 +1,181 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Hero = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Animation = require("./Animation");
+var _propTypes = require("prop-types");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * Hero - Accessible hero section component for prominent content display
+ *
+ * Features:
+ * - Semantic HTML structure using section element
+ * - Background image support with accessibility features
+ * - Customizable overlay with opacity controls
+ * - Full ARIA support for screen readers
+ * - Responsive design with flexible content area
+ * - High contrast mode support
+ *
+ * Accessibility:
+ * - Uses semantic <section> element with proper ARIA roles
+ * - Background images include proper alt text descriptions
+ * - Screen reader accessible overlay elements
+ * - Proper landmark navigation with role="banner"
+ * - Focus management and keyboard navigation support
+ *
+ * @component
+ * @example
+ * // Basic hero with background
+ * <Hero background="/hero-image.jpg" backgroundAlt="City skyline">
+ *   <h1>Welcome to Our Platform</h1>
+ *   <p>Discover amazing features and capabilities.</p>
+ * </Hero>
+ *
+ * @example
+ * // Hero with overlay for better text readability
+ * <Hero
+ *   background="/hero.jpg"
+ *   backgroundAlt="Team collaboration"
+ *   hasOverlay={true}
+ *   overlayOpacity="dark"
+ * >
+ *   <h1>Build Something Amazing</h1>
+ * </Hero>
+ *
+ * @example
+ * // Custom styling and accessibility
+ * <Hero
+ *   className="landing-hero"
+ *   role="banner"
+ *   aria-label="Main hero section"
+ * >
+ *   <h1>No Background Hero</h1>
+ * </Hero>
+ */
+const Hero = exports.Hero = /*#__PURE__*/(0, _react.forwardRef)(({
+  // Core props
+  children = null,
+  background = null,
+  backgroundAlt = '',
+  // Layout props
+  className = '',
+  hasOverlay = false,
+  overlayOpacity = 'medium',
+  // Accessibility props
+  role = 'banner',
+  ariaLabel = null,
+  ariaLabelledBy = null,
+  // Legacy props (for backward compatibility - internal use only)
+  additionalClassName = '',
+  componentName = 'hero',
+  testId = 'hero',
+  ...restProps
+}, ref) => {
+  // Handle legacy prop mapping
+  const finalClassName = className || additionalClassName;
+
+  // Build CSS classes
+
+  const finalComponentName = componentName || 'hero';
+  const overlayClass = hasOverlay ? `${finalComponentName}--overlay-${overlayOpacity}` : '';
+  const heroClasses = [`${finalComponentName}-wrapper`, overlayClass, finalClassName].filter(Boolean).join(' ').trim();
+
+  // Accessibility attributes
+  const accessibilityProps = {
+    role,
+    ...(ariaLabel && {
+      'aria-label': ariaLabel
+    }),
+    ...(ariaLabelledBy && {
+      'aria-labelledby': ariaLabelledBy
+    }),
+    ...(background && backgroundAlt && {
+      'aria-describedby': `${testId}-bg-description`
+    })
+  };
+  return /*#__PURE__*/_react.default.createElement(_Animation.AnimatedDiv, {
+    fadingEntrances: "fadeIn",
+    duration: "faster"
+  }, /*#__PURE__*/_react.default.createElement("section", _extends({
+    ref: ref,
+    className: heroClasses,
+    "data-testid": testId || finalComponentName,
+    style: background ? {
+      backgroundImage: `url(${background})`
+    } : {}
+  }, accessibilityProps, restProps), background && backgroundAlt && /*#__PURE__*/_react.default.createElement("div", {
+    id: `${testId}-bg-description`,
+    className: "sr-only"
+  }, "Background image: ", backgroundAlt), hasOverlay && /*#__PURE__*/_react.default.createElement("div", {
+    className: `${finalComponentName}__overlay`,
+    "aria-hidden": "true"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: finalComponentName
+  }, children)));
+});
+Hero.propTypes = {
+  // ===========================================
+  // Content Props
+  // ===========================================
+  /**
+   * Content to display within the hero section
+   */
+  children: _propTypes.node,
+  // ===========================================
+  // Appearance Props
+  // ===========================================
+  /**
+   * Background image URL
+   */
+  background: _propTypes.string,
+  /**
+   * Alt text description for background image (required when background is provided)
+   */
+  backgroundAlt: _propTypes.string,
+  /**
+   * Additional CSS classes to apply to the hero wrapper
+   */
+  className: _propTypes.string,
+  /**
+   * Whether to show a semi-transparent overlay over the background
+   */
+  hasOverlay: _propTypes.bool,
+  /**
+   * Opacity level of the overlay
+   */
+  overlayOpacity: (0, _propTypes.oneOf)(['light', 'medium', 'dark']),
+  // ===========================================
+  // Accessibility Props
+  // ===========================================
+  /**
+   * ARIA role for semantic meaning
+   */
+  role: (0, _propTypes.oneOf)(['banner', 'region', 'main']),
+  /**
+   * ARIA label for accessibility
+   */
+  // aria-label is used as a prop, not ariaLabel
+  /**
+   * ID of element that labels this hero section
+   */
+  ariaLabelledBy: _propTypes.string,
+  /**
+   * Use className instead
+   */
+  additionalClassName: _propTypes.string,
+  /**
+   * Use className/id for identification
+   * Base CSS class name for the component
+   */
+  componentName: _propTypes.string,
+  /**
+   * Test ID for testing and automation
+   */
+  testId: _propTypes.string
+};
+Hero.displayName = 'Hero';
+var _default = exports.default = Hero;