@hellboy/ds 0.1.2 → 0.2.7

package/dist/components/hero.css

@@ -0,0 +1,121 @@
+/* src/style/components/hero/hero.css */
+.hero {
+  position: relative;
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+  background-repeat: no-repeat;
+}
+.hero__background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-repeat: no-repeat;
+  background-size: cover;
+  z-index: 0;
+  will-change: background-position;
+}
+.hero__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background:
+    linear-gradient(
+      0deg,
+      var(--color-accent) 0%,
+      rgba(0, 0, 0, 0) 30%,
+      rgba(0, 0, 0, 0) 100%);
+  pointer-events: none;
+  z-index: 1;
+}
+.hero__content {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: var(--container-max-width, 1200px);
+  margin: 0 auto;
+  padding: var(--spacing-8);
+  gap: var(--spacing-4);
+}
+.hero--align-left .hero__content {
+  align-items: flex-start;
+  text-align: left;
+}
+.hero--align-center .hero__content {
+  align-items: center;
+  text-align: center;
+}
+.hero--align-right .hero__content {
+  align-items: flex-end;
+  text-align: right;
+}
+.hero--vertical-top {
+  align-items: flex-start;
+}
+.hero--vertical-center {
+  align-items: center;
+}
+.hero--vertical-bottom {
+  align-items: flex-end;
+}
+.hero__title {
+  font-size: var(--font-size-8xl);
+  font-weight: var(--font-weight-bold);
+  line-height: 1.2;
+  color: var(--color-foreground-1);
+  margin: 0;
+  letter-spacing: -.04em;
+  text-shadow: 0 6px 0 var(--color-accent);
+}
+.hero__subtitle {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-normal);
+  line-height: 1.5;
+  background-color: var(--color-bg-2);
+  padding: .2em .6em;
+  color: var(--color-foreground-2);
+  margin: 0;
+  max-width: 60ch;
+}
+.hero--parallax .hero__background {
+  will-change: transform;
+  transform-style: preserve-3d;
+}
+.hero__background-image-author {
+  position: absolute;
+  bottom: var(--spacing-2);
+  right: var(--spacing-2);
+  font-size: var(--font-size-sm);
+  color: var(--color-foreground-4);
+  background-color: var(--color-bg-2);
+  padding: var(--spacing-1) var(--spacing-2);
+  z-index: 3;
+}
+@media (max-width: 768px) {
+  .hero__title {
+    font-size: calc(var(--font-size-3xl));
+  }
+  .hero__subtitle {
+    font-size: var(--font-size-lg);
+  }
+  .hero__content {
+    padding: var(--spacing-6) var(--spacing-4);
+  }
+}
+@media (max-width: 480px) {
+  .hero__title {
+    font-size: calc(var(--font-size-2xl));
+  }
+  .hero__subtitle {
+    font-size: var(--font-size-md);
+  }
+  .hero__content {
+    padding: var(--spacing-4) var(--spacing-3);
+  }
+}

package/dist/components/hero.d.mts

@@ -0,0 +1,111 @@
+import React__default from 'react';
+
+interface HeroProps {
+    /**
+     * Hero title
+     */
+    title: React__default.ReactNode;
+    /**
+     * Hero subtitle
+     */
+    subtitle?: React__default.ReactNode;
+    /**
+     * Button or action element
+     */
+    action?: React__default.ReactNode;
+    /**
+     * Background color
+     */
+    backgroundColor?: string;
+    /**
+     * Background image URL
+     */
+    backgroundImage?: string;
+    /**
+     * Background image position
+     * @default 'center'
+     */
+    backgroundPosition?: string;
+    /**
+     * Background image size
+     * @default 'cover'
+     */
+    backgroundSize?: string;
+    /**
+     * Background image Y offset (starting position before parallax)
+     * Defines which Y point of the image aligns with Y=0 of the container
+     * @default 0
+     * @example '50%' centers the image vertically
+     * @example '-100px' moves image up by 100px
+     */
+    backgroundYOffset?: string | number;
+    /**
+     * Hero height
+     * @default '50vh'
+     */
+    height?: string;
+    /**
+     * Custom padding
+     */
+    padding?: string;
+    /**
+     * Content alignment
+     * @default 'center'
+     */
+    align?: 'left' | 'center' | 'right';
+    /**
+     * Vertical alignment
+     * @default 'center'
+     */
+    verticalAlign?: 'top' | 'center' | 'bottom';
+    /**
+     * Fixed text color (overrides theme colors for better contrast with background images)
+     */
+    titleColor?: string;
+    /**
+     * Fixed subtitle color (overrides theme colors for better contrast with background images)
+     */
+    subtitleColor?: string;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+    /**
+     * Additional inline styles
+     */
+    style?: React__default.CSSProperties;
+    /**
+     * Children content (overrides title/subtitle/action if provided)
+     */
+    children?: React__default.ReactNode;
+    /**
+     * Enable parallax vertical effect on scroll
+     * @default false
+     */
+    parallax?: boolean;
+    /**
+     * Parallax movement speed/amount
+     * @default 0.5
+     * @example 0.3 - slow movement (30% of scroll)
+     * @example 1 - match scroll speed
+     * @example '50%' - move 50% of scroll distance
+     * @example '200px' - move maximum 200px
+     */
+    parallaxSpeed?: number | string;
+    /**
+     * Apply blur effect to background image
+     * @default false
+     */
+    blur?: boolean;
+    /**
+     * Background image author name (shown when backgroundImage is provided)
+     */
+    backgroundAuthor?: string;
+    /**
+     * Background image author link (optional, makes author name clickable)
+     */
+    backgroundAuthorLink?: string;
+}
+declare const Hero: React__default.ForwardRefExoticComponent<HeroProps & React__default.RefAttributes<HTMLElement>>;
+
+export { Hero, type HeroProps };

package/dist/components/hero.d.ts

@@ -0,0 +1,111 @@
+import React__default from 'react';
+
+interface HeroProps {
+    /**
+     * Hero title
+     */
+    title: React__default.ReactNode;
+    /**
+     * Hero subtitle
+     */
+    subtitle?: React__default.ReactNode;
+    /**
+     * Button or action element
+     */
+    action?: React__default.ReactNode;
+    /**
+     * Background color
+     */
+    backgroundColor?: string;
+    /**
+     * Background image URL
+     */
+    backgroundImage?: string;
+    /**
+     * Background image position
+     * @default 'center'
+     */
+    backgroundPosition?: string;
+    /**
+     * Background image size
+     * @default 'cover'
+     */
+    backgroundSize?: string;
+    /**
+     * Background image Y offset (starting position before parallax)
+     * Defines which Y point of the image aligns with Y=0 of the container
+     * @default 0
+     * @example '50%' centers the image vertically
+     * @example '-100px' moves image up by 100px
+     */
+    backgroundYOffset?: string | number;
+    /**
+     * Hero height
+     * @default '50vh'
+     */
+    height?: string;
+    /**
+     * Custom padding
+     */
+    padding?: string;
+    /**
+     * Content alignment
+     * @default 'center'
+     */
+    align?: 'left' | 'center' | 'right';
+    /**
+     * Vertical alignment
+     * @default 'center'
+     */
+    verticalAlign?: 'top' | 'center' | 'bottom';
+    /**
+     * Fixed text color (overrides theme colors for better contrast with background images)
+     */
+    titleColor?: string;
+    /**
+     * Fixed subtitle color (overrides theme colors for better contrast with background images)
+     */
+    subtitleColor?: string;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+    /**
+     * Additional inline styles
+     */
+    style?: React__default.CSSProperties;
+    /**
+     * Children content (overrides title/subtitle/action if provided)
+     */
+    children?: React__default.ReactNode;
+    /**
+     * Enable parallax vertical effect on scroll
+     * @default false
+     */
+    parallax?: boolean;
+    /**
+     * Parallax movement speed/amount
+     * @default 0.5
+     * @example 0.3 - slow movement (30% of scroll)
+     * @example 1 - match scroll speed
+     * @example '50%' - move 50% of scroll distance
+     * @example '200px' - move maximum 200px
+     */
+    parallaxSpeed?: number | string;
+    /**
+     * Apply blur effect to background image
+     * @default false
+     */
+    blur?: boolean;
+    /**
+     * Background image author name (shown when backgroundImage is provided)
+     */
+    backgroundAuthor?: string;
+    /**
+     * Background image author link (optional, makes author name clickable)
+     */
+    backgroundAuthorLink?: string;
+}
+declare const Hero: React__default.ForwardRefExoticComponent<HeroProps & React__default.RefAttributes<HTMLElement>>;
+
+export { Hero, type HeroProps };

package/dist/components/hero.js

@@ -0,0 +1,285 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/hero/index.ts
+var hero_exports = {};
+__export(hero_exports, {
+  Hero: () => Hero
+});
+module.exports = __toCommonJS(hero_exports);
+
+// src/components/hero/Hero.tsx
+var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var useParallax = (enabled, backgroundImage, backgroundSize, _backgroundPosition, parallaxSpeed = 0.5) => {
+  const [offsetY, setOffsetY] = (0, import_react.useState)(0);
+  const [imageDimensions, setImageDimensions] = (0, import_react.useState)(null);
+  const elementRef = (0, import_react.useRef)(null);
+  const getHeroHeight = () => {
+    if (!elementRef.current) return 0;
+    const computedStyle = window.getComputedStyle(elementRef.current);
+    const heightValue = computedStyle.height;
+    if (heightValue.endsWith("px")) {
+      return parseFloat(heightValue);
+    } else if (heightValue.endsWith("vh")) {
+      return parseFloat(heightValue) / 100 * window.innerHeight;
+    } else if (heightValue.endsWith("rem")) {
+      return parseFloat(heightValue) * parseFloat(window.getComputedStyle(document.documentElement).fontSize);
+    }
+    return parseFloat(heightValue) || 400;
+  };
+  const getHeroWidth = () => {
+    if (!elementRef.current) return 0;
+    const computedStyle = window.getComputedStyle(elementRef.current);
+    const widthValue = computedStyle.width;
+    if (widthValue.endsWith("px")) {
+      return parseFloat(widthValue);
+    } else if (widthValue.endsWith("vw")) {
+      return parseFloat(widthValue) / 100 * window.innerWidth;
+    } else if (widthValue.endsWith("rem")) {
+      return parseFloat(widthValue) * parseFloat(window.getComputedStyle(document.documentElement).fontSize);
+    }
+    return parseFloat(widthValue) || 800;
+  };
+  const calculateEffectiveImageSize = (naturalWidth, naturalHeight, containerWidth, containerHeight, bgSize) => {
+    const aspectRatio = naturalWidth / naturalHeight;
+    const containerAspectRatio = containerWidth / containerHeight;
+    if (bgSize === "cover") {
+      if (aspectRatio > containerAspectRatio) {
+        return {
+          width: containerHeight * aspectRatio,
+          height: containerHeight
+        };
+      } else {
+        return {
+          width: containerWidth,
+          height: containerWidth / aspectRatio
+        };
+      }
+    } else if (bgSize === "contain") {
+      if (aspectRatio > containerAspectRatio) {
+        return {
+          width: containerWidth,
+          height: containerWidth / aspectRatio
+        };
+      } else {
+        return {
+          width: containerHeight * aspectRatio,
+          height: containerHeight
+        };
+      }
+    } else if (bgSize.includes("px")) {
+      const sizeParts = bgSize.split(" ");
+      if (sizeParts.length === 1) {
+        const size = parseFloat(sizeParts[0]);
+        return { width: size, height: size };
+      } else {
+        return {
+          width: parseFloat(sizeParts[0]),
+          height: parseFloat(sizeParts[1])
+        };
+      }
+    } else {
+      return { width: naturalWidth, height: naturalHeight };
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    if (!enabled || !backgroundImage) return;
+    const img = new Image();
+    img.onload = () => {
+      setImageDimensions({
+        width: img.naturalWidth,
+        height: img.naturalHeight
+      });
+    };
+    img.src = backgroundImage;
+  }, [enabled, backgroundImage]);
+  (0, import_react.useEffect)(() => {
+    if (!enabled || !elementRef.current) return;
+    const getScrollParent = (element) => {
+      let currentElement = element.parentElement;
+      while (currentElement) {
+        const style = window.getComputedStyle(currentElement);
+        const hasScroll = style.overflowY === "auto" || style.overflowY === "scroll";
+        if (hasScroll) {
+          return currentElement;
+        }
+        currentElement = currentElement.parentElement;
+      }
+      return window.document.documentElement;
+    };
+    const scrollParent = getScrollParent(elementRef.current);
+    const isWindowScroll = scrollParent === document.documentElement;
+    const handleScroll = () => {
+      if (!elementRef.current) return;
+      const heroHeight = getHeroHeight();
+      const heroWidth = getHeroWidth();
+      let scrolled;
+      if (isWindowScroll) {
+        const rect = elementRef.current.getBoundingClientRect();
+        scrolled = Math.max(0, -rect.top);
+      } else {
+        const rect = elementRef.current.getBoundingClientRect();
+        const parentRect = scrollParent.getBoundingClientRect();
+        scrolled = Math.max(0, parentRect.top - rect.top);
+      }
+      let parallaxOffset;
+      if (typeof parallaxSpeed === "number") {
+        parallaxOffset = scrolled * -parallaxSpeed;
+      } else if (parallaxSpeed.includes("%")) {
+        const percent = parseFloat(parallaxSpeed) / 100;
+        parallaxOffset = scrolled * -percent;
+      } else {
+        const maxMovement = parseFloat(parallaxSpeed);
+        const ratio = Math.min(1, scrolled / heroHeight);
+        parallaxOffset = -maxMovement * ratio;
+      }
+      if (imageDimensions && backgroundSize) {
+        const effectiveSize = calculateEffectiveImageSize(
+          imageDimensions.width,
+          imageDimensions.height,
+          heroWidth,
+          heroHeight,
+          backgroundSize
+        );
+        const availableOffset = (effectiveSize.height - heroHeight) / 2;
+        if (availableOffset > 0) {
+          parallaxOffset = Math.max(-availableOffset, Math.min(availableOffset, parallaxOffset));
+        } else {
+          parallaxOffset = 0;
+        }
+      } else if (imageDimensions && imageDimensions.height <= heroHeight) {
+        parallaxOffset = 0;
+      }
+      setOffsetY(parallaxOffset);
+    };
+    scrollParent.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+    return () => scrollParent.removeEventListener("scroll", handleScroll);
+  }, [enabled, imageDimensions, backgroundSize]);
+  return { offsetY, elementRef };
+};
+var Hero = import_react.default.forwardRef(
+  ({
+    title,
+    subtitle,
+    action,
+    backgroundColor,
+    backgroundImage,
+    backgroundPosition = "center",
+    backgroundSize = "cover",
+    backgroundYOffset = 0,
+    height = "50vh",
+    padding,
+    align = "center",
+    verticalAlign = "center",
+    className,
+    style,
+    children,
+    parallax = false,
+    parallaxSpeed = 0.5,
+    titleColor,
+    subtitleColor,
+    blur = false,
+    backgroundAuthor,
+    backgroundAuthorLink,
+    ...props
+  }, ref) => {
+    const { offsetY, elementRef } = useParallax(parallax, backgroundImage, backgroundSize, backgroundPosition, parallaxSpeed);
+    (0, import_react.useImperativeHandle)(ref, () => elementRef.current);
+    const titleStyle = titleColor ? { color: titleColor } : {};
+    const subtitleStyle = subtitleColor ? { color: subtitleColor } : {};
+    const heroClasses = [
+      "hero",
+      `hero--align-${align}`,
+      `hero--vertical-${verticalAlign}`,
+      parallax && "hero--parallax",
+      className
+    ].filter(Boolean).join(" ");
+    const heroStyle = {
+      ...style,
+      height,
+      backgroundColor,
+      padding
+    };
+    const getBackgroundPositionY = () => {
+      if (!parallax) return backgroundPosition;
+      let baseOffset = 0;
+      if (typeof backgroundYOffset === "number") {
+        baseOffset = backgroundYOffset;
+      } else if (typeof backgroundYOffset === "string") {
+        if (backgroundYOffset.includes("%")) {
+          return `center calc(${backgroundYOffset} + ${offsetY}px)`;
+        }
+        baseOffset = parseFloat(backgroundYOffset);
+      }
+      const finalY = baseOffset + offsetY;
+      return `center ${finalY}px`;
+    };
+    const backgroundStyle = backgroundImage ? {
+      backgroundImage: `url(${backgroundImage})`,
+      backgroundPosition: getBackgroundPositionY(),
+      backgroundSize,
+      filter: blur ? "blur(2px)" : void 0
+    } : {};
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "section",
+      {
+        ref: elementRef,
+        className: heroClasses,
+        style: heroStyle,
+        ...props,
+        children: [
+          backgroundImage && backgroundAuthor && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hero__background-image-author", children: [
+            "Image by ",
+            backgroundAuthorLink ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: backgroundAuthorLink, className: "link-action", target: "_blank", rel: "noopener noreferrer", children: backgroundAuthor }) : backgroundAuthor
+          ] }),
+          backgroundImage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: "hero__background",
+              style: backgroundStyle
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hero__overlay" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hero__content", children: children ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "hero__title", style: titleStyle, children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "hero__subtitle", style: subtitleStyle, children: subtitle }),
+            action && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hero__action", children: action })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+Hero.displayName = "Hero";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Hero
+});