@hellboy/ds 0.1.2 → 0.2.7

package/dist/components/hero.mjs

@@ -0,0 +1,248 @@
+// src/components/hero/Hero.tsx
+import React, { useEffect, useRef, useState, useImperativeHandle } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var useParallax = (enabled, backgroundImage, backgroundSize, _backgroundPosition, parallaxSpeed = 0.5) => {
+  const [offsetY, setOffsetY] = useState(0);
+  const [imageDimensions, setImageDimensions] = useState(null);
+  const elementRef = 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 };
+    }
+  };
+  useEffect(() => {
+    if (!enabled || !backgroundImage) return;
+    const img = new Image();
+    img.onload = () => {
+      setImageDimensions({
+        width: img.naturalWidth,
+        height: img.naturalHeight
+      });
+    };
+    img.src = backgroundImage;
+  }, [enabled, backgroundImage]);
+  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 = React.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);
+    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__ */ jsxs(
+      "section",
+      {
+        ref: elementRef,
+        className: heroClasses,
+        style: heroStyle,
+        ...props,
+        children: [
+          backgroundImage && backgroundAuthor && /* @__PURE__ */ jsxs("div", { className: "hero__background-image-author", children: [
+            "Image by ",
+            backgroundAuthorLink ? /* @__PURE__ */ jsx("a", { href: backgroundAuthorLink, className: "link-action", target: "_blank", rel: "noopener noreferrer", children: backgroundAuthor }) : backgroundAuthor
+          ] }),
+          backgroundImage && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "hero__background",
+              style: backgroundStyle
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "hero__overlay" }),
+          /* @__PURE__ */ jsx("div", { className: "hero__content", children: children ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+            title && /* @__PURE__ */ jsx("h1", { className: "hero__title", style: titleStyle, children: title }),
+            subtitle && /* @__PURE__ */ jsx("p", { className: "hero__subtitle", style: subtitleStyle, children: subtitle }),
+            action && /* @__PURE__ */ jsx("div", { className: "hero__action", children: action })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+Hero.displayName = "Hero";
+export {
+  Hero
+};

package/{src/style/components/icons → dist/components}/icons.css

@@ -1,44 +1,43 @@
-/* Skeleton and basic icon styles */
+/* src/style/components/icons/icons.css */
 .icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
-
 .icon--skeleton {
-  background: linear-gradient(90deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.03) 50%, rgba(0,0,0,0.06) 100%);
+  background:
+    linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0.06) 0%,
+      rgba(0, 0, 0, 0.03) 50%,
+      rgba(0, 0, 0, 0.06) 100%);
   border-radius: 4px;
   animation: hb-skeleton 1.2s ease-in-out infinite;
 }
-
 @keyframes hb-skeleton {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
 }
-/**
- * Icon Component Styles
- */
-
 .icon {
   display: inline-block;
   flex-shrink: 0;
   transition: color var(--transition-base, 0.2s ease);
 }
-
 .icon--interactive {
   cursor: pointer;
   color: var(--color-foreground-1);
 }
-
 .icon--interactive:hover:not(:disabled) {
   color: var(--color-action-primary-hover);
 }
-
 .icon--interactive:active:not(:disabled) {
   color: var(--color-action-primary-active);
 }
-
 .icon--interactive:disabled {
   cursor: not-allowed;
   color: var(--color-foreground-2);
-}
+}

package/dist/components/icons.d.mts

@@ -0,0 +1,104 @@
+export { I as Icon, a as IconName, b as IconProps } from '../icons-Czahnf-r.mjs';
+import 'react';
+
+/**
+ * Centralized icon constants for the Hellboy Design System
+ * Provides consistent icon mappings across all components
+ */
+declare const INPUT_TYPE_ICONS: Record<string, string>;
+declare const BANNER_TYPE_ICONS: Record<string, string>;
+declare const ACTION_ICONS: {
+    readonly close: "x-mark-solid";
+    readonly back: "arrow-left-solid";
+    readonly forward: "arrow-right-solid";
+    readonly up: "arrow-up-solid";
+    readonly down: "arrow-down-solid";
+    readonly expand: "chevron-down-solid";
+    readonly collapse: "chevron-up-solid";
+    readonly menu: "bars-3-solid";
+    readonly more: "ellipsis-horizontal-solid";
+    readonly check: "check-solid";
+    readonly cross: "x-mark-solid";
+    readonly plus: "plus-solid";
+    readonly minus: "minus-solid";
+    readonly search: "magnifying-glass-solid";
+    readonly clear: "x-mark-solid";
+    readonly loading: "arrow-path-solid";
+    readonly error: "exclamation-triangle-solid";
+    readonly warning: "exclamation-triangle-solid";
+    readonly info: "information-circle-solid";
+    readonly success: "check-circle-solid";
+};
+declare const NAVIGATION_ICONS: {
+    readonly home: "home-solid";
+    readonly dashboard: "squares-2x2-solid";
+    readonly profile: "user-solid";
+    readonly settings: "cog-solid";
+    readonly logout: "arrow-right-on-rectangle-solid";
+    readonly login: "arrow-left-on-rectangle-solid";
+    readonly notifications: "bell-solid";
+    readonly messages: "chat-bubble-left-solid";
+    readonly help: "question-mark-circle-solid";
+    readonly support: "lifebuoy-solid";
+    readonly chevronDown: "chevron-down-solid";
+    readonly chevronUp: "chevron-up-solid";
+    readonly chevronLeft: "chevron-left-solid";
+    readonly chevronRight: "chevron-right-solid";
+};
+declare const STATUS_ICONS: {
+    readonly online: "check-circle-solid";
+    readonly offline: "x-circle-solid";
+    readonly pending: "clock-solid";
+    readonly active: "check-circle-solid";
+    readonly inactive: "x-circle-solid";
+    readonly loading: "arrow-path-solid";
+    readonly error: "exclamation-triangle-solid";
+    readonly warning: "exclamation-triangle-solid";
+    readonly success: "check-circle-solid";
+    readonly info: "information-circle-solid";
+};
+declare const FILE_TYPE_ICONS: {
+    readonly pdf: "document-solid";
+    readonly doc: "document-text-solid";
+    readonly docx: "document-text-solid";
+    readonly xls: "document-chart-bar-solid";
+    readonly xlsx: "document-chart-bar-solid";
+    readonly ppt: "presentation-chart-bar-solid";
+    readonly pptx: "presentation-chart-bar-solid";
+    readonly txt: "document-text-solid";
+    readonly csv: "table-cells-solid";
+    readonly zip: "archive-box-solid";
+    readonly image: "photo-solid";
+    readonly video: "video-camera-solid";
+    readonly audio: "musical-note-solid";
+    readonly default: "document-solid";
+};
+declare const SWITCH_ICONS: {
+    readonly moon: "moon-solid";
+    readonly sun: "sun-solid";
+    readonly speakerWave: "speaker-wave-solid";
+    readonly speakerXMark: "speaker-x-mark-solid";
+    readonly volumeUp: "speaker-wave-solid";
+    readonly volumeMute: "speaker-x-mark-solid";
+    readonly power: "power-solid";
+    readonly play: "play-solid";
+    readonly pause: "pause-solid";
+    readonly eye: "eye-solid";
+    readonly eyeSlash: "eye-slash-solid";
+    readonly wifi: "wifi-solid";
+    readonly wifiSlash: "wifi-slash-solid";
+    readonly lockClosed: "lock-closed-solid";
+    readonly lockOpen: "lock-open-solid";
+    readonly check: "check-solid";
+    readonly xMark: "x-mark-solid";
+};
+declare const CHECKBOX_ICONS: {
+    readonly checked: "check-solid";
+    readonly indeterminate: "minus-solid";
+};
+declare const LIST_ICONS: {
+    readonly selected: "check-solid";
+    readonly unselected: "circle-solid";
+};
+
+export { ACTION_ICONS, BANNER_TYPE_ICONS, CHECKBOX_ICONS, FILE_TYPE_ICONS, INPUT_TYPE_ICONS, LIST_ICONS, NAVIGATION_ICONS, STATUS_ICONS, SWITCH_ICONS };

package/dist/components/icons.d.ts

@@ -0,0 +1,104 @@
+export { I as Icon, a as IconName, b as IconProps } from '../icons-Czahnf-r.js';
+import 'react';
+
+/**
+ * Centralized icon constants for the Hellboy Design System
+ * Provides consistent icon mappings across all components
+ */
+declare const INPUT_TYPE_ICONS: Record<string, string>;
+declare const BANNER_TYPE_ICONS: Record<string, string>;
+declare const ACTION_ICONS: {
+    readonly close: "x-mark-solid";
+    readonly back: "arrow-left-solid";
+    readonly forward: "arrow-right-solid";
+    readonly up: "arrow-up-solid";
+    readonly down: "arrow-down-solid";
+    readonly expand: "chevron-down-solid";
+    readonly collapse: "chevron-up-solid";
+    readonly menu: "bars-3-solid";
+    readonly more: "ellipsis-horizontal-solid";
+    readonly check: "check-solid";
+    readonly cross: "x-mark-solid";
+    readonly plus: "plus-solid";
+    readonly minus: "minus-solid";
+    readonly search: "magnifying-glass-solid";
+    readonly clear: "x-mark-solid";
+    readonly loading: "arrow-path-solid";
+    readonly error: "exclamation-triangle-solid";
+    readonly warning: "exclamation-triangle-solid";
+    readonly info: "information-circle-solid";
+    readonly success: "check-circle-solid";
+};
+declare const NAVIGATION_ICONS: {
+    readonly home: "home-solid";
+    readonly dashboard: "squares-2x2-solid";
+    readonly profile: "user-solid";
+    readonly settings: "cog-solid";
+    readonly logout: "arrow-right-on-rectangle-solid";
+    readonly login: "arrow-left-on-rectangle-solid";
+    readonly notifications: "bell-solid";
+    readonly messages: "chat-bubble-left-solid";
+    readonly help: "question-mark-circle-solid";
+    readonly support: "lifebuoy-solid";
+    readonly chevronDown: "chevron-down-solid";
+    readonly chevronUp: "chevron-up-solid";
+    readonly chevronLeft: "chevron-left-solid";
+    readonly chevronRight: "chevron-right-solid";
+};
+declare const STATUS_ICONS: {
+    readonly online: "check-circle-solid";
+    readonly offline: "x-circle-solid";
+    readonly pending: "clock-solid";
+    readonly active: "check-circle-solid";
+    readonly inactive: "x-circle-solid";
+    readonly loading: "arrow-path-solid";
+    readonly error: "exclamation-triangle-solid";
+    readonly warning: "exclamation-triangle-solid";
+    readonly success: "check-circle-solid";
+    readonly info: "information-circle-solid";
+};
+declare const FILE_TYPE_ICONS: {
+    readonly pdf: "document-solid";
+    readonly doc: "document-text-solid";
+    readonly docx: "document-text-solid";
+    readonly xls: "document-chart-bar-solid";
+    readonly xlsx: "document-chart-bar-solid";
+    readonly ppt: "presentation-chart-bar-solid";
+    readonly pptx: "presentation-chart-bar-solid";
+    readonly txt: "document-text-solid";
+    readonly csv: "table-cells-solid";
+    readonly zip: "archive-box-solid";
+    readonly image: "photo-solid";
+    readonly video: "video-camera-solid";
+    readonly audio: "musical-note-solid";
+    readonly default: "document-solid";
+};
+declare const SWITCH_ICONS: {
+    readonly moon: "moon-solid";
+    readonly sun: "sun-solid";
+    readonly speakerWave: "speaker-wave-solid";
+    readonly speakerXMark: "speaker-x-mark-solid";
+    readonly volumeUp: "speaker-wave-solid";
+    readonly volumeMute: "speaker-x-mark-solid";
+    readonly power: "power-solid";
+    readonly play: "play-solid";
+    readonly pause: "pause-solid";
+    readonly eye: "eye-solid";
+    readonly eyeSlash: "eye-slash-solid";
+    readonly wifi: "wifi-solid";
+    readonly wifiSlash: "wifi-slash-solid";
+    readonly lockClosed: "lock-closed-solid";
+    readonly lockOpen: "lock-open-solid";
+    readonly check: "check-solid";
+    readonly xMark: "x-mark-solid";
+};
+declare const CHECKBOX_ICONS: {
+    readonly checked: "check-solid";
+    readonly indeterminate: "minus-solid";
+};
+declare const LIST_ICONS: {
+    readonly selected: "check-solid";
+    readonly unselected: "circle-solid";
+};
+
+export { ACTION_ICONS, BANNER_TYPE_ICONS, CHECKBOX_ICONS, FILE_TYPE_ICONS, INPUT_TYPE_ICONS, LIST_ICONS, NAVIGATION_ICONS, STATUS_ICONS, SWITCH_ICONS };