@hellboy/ds 0.1.3 → 0.2.7

package/dist/components/page.d.mts

@@ -0,0 +1,30 @@
+import React__default, { ReactNode } from 'react';
+
+type PageWidth = 'full' | 'wide' | 'medium' | 'narrow';
+interface PageProps {
+    /**
+     * Page content width
+     * - full: 100% width
+     * - wide: 1400px max
+     * - medium: 1200px max (default)
+     * - narrow: 800px max
+     * @default 'medium'
+     */
+    width?: PageWidth;
+    /**
+     * Page content
+     */
+    children: ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+/**
+ * Page Component
+ * Main content container with responsive width control
+ * Use inside Layout's children for consistent content sizing
+ */
+declare const Page: React__default.FC<PageProps>;
+
+export { Page, type PageProps, type PageWidth };

package/dist/components/page.d.ts

@@ -0,0 +1,30 @@
+import React__default, { ReactNode } from 'react';
+
+type PageWidth = 'full' | 'wide' | 'medium' | 'narrow';
+interface PageProps {
+    /**
+     * Page content width
+     * - full: 100% width
+     * - wide: 1400px max
+     * - medium: 1200px max (default)
+     * - narrow: 800px max
+     * @default 'medium'
+     */
+    width?: PageWidth;
+    /**
+     * Page content
+     */
+    children: ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+/**
+ * Page Component
+ * Main content container with responsive width control
+ * Use inside Layout's children for consistent content sizing
+ */
+declare const Page: React__default.FC<PageProps>;
+
+export { Page, type PageProps, type PageWidth };

package/dist/components/page.js

@@ -0,0 +1,40 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/page/index.ts
+var page_exports = {};
+__export(page_exports, {
+  Page: () => Page
+});
+module.exports = __toCommonJS(page_exports);
+
+// src/components/page/page.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Page = ({ width = "medium", children, className }) => {
+  const pageClasses = [
+    "page",
+    `page--${width}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("main", { className: pageClasses, children });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Page
+});

package/dist/components/page.mjs

@@ -0,0 +1,13 @@
+// src/components/page/page.tsx
+import { jsx } from "react/jsx-runtime";
+var Page = ({ width = "medium", children, className }) => {
+  const pageClasses = [
+    "page",
+    `page--${width}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("main", { className: pageClasses, children });
+};
+export {
+  Page
+};

package/dist/components/popover.css

@@ -0,0 +1,87 @@
+/* src/style/components/popover/popover.css */
+.popover {
+  position: fixed;
+  background: var(--color-bg-1);
+  border-radius: var(--radius-base);
+  outline: 2px solid var(--color-bg-3);
+  outline-offset: -2px;
+  box-shadow: var(--shadow-md);
+  z-index: var(--z-popover);
+  min-width: 200px;
+  margin-top: var(--spacing-1);
+  animation: popover-slide-in var(--transition-base, 0.2s ease);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.popover--top {
+  animation: popover-slide-in-top var(--transition-base, 0.2s ease);
+  margin-bottom: var(--spacing-2);
+}
+.popover--bottom {
+  animation: popover-slide-in-bottom var(--transition-base, 0.2s ease);
+  margin-top: var(--spacing-2);
+}
+.popover--left {
+  animation: popover-slide-in-left var(--transition-base, 0.2s ease);
+  margin-right: var(--spacing-2);
+}
+.popover--right {
+  animation: popover-slide-in-right var(--transition-base, 0.2s ease);
+  margin-left: var(--spacing-2);
+}
+.popover:hover {
+  outline: 2px solid var(--color-primary-hover);
+}
+@keyframes popover-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes popover-slide-in-top {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes popover-slide-in-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes popover-slide-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes popover-slide-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+.popover__content {
+}

package/dist/components/popover.d.mts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+interface PopoverProps {
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    isOpen?: boolean;
+    onToggle?: () => void;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /** Alignment relative to the trigger: 'start', 'center', 'end' */
+    align?: 'start' | 'center' | 'end';
+    /** Gap (in pixels) between trigger and popover */
+    offset?: number;
+    /** Automatically flip to opposite placement if no space */
+    flip?: boolean;
+    /** Close popover when Escape key is pressed */
+    closeOnEscape?: boolean;
+    /** Close popover when clicking outside */
+    closeOnClickOutside?: boolean;
+}
+declare const Popover: React.FC<PopoverProps>;
+
+export { Popover, type PopoverProps };

package/dist/components/popover.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+interface PopoverProps {
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    isOpen?: boolean;
+    onToggle?: () => void;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /** Alignment relative to the trigger: 'start', 'center', 'end' */
+    align?: 'start' | 'center' | 'end';
+    /** Gap (in pixels) between trigger and popover */
+    offset?: number;
+    /** Automatically flip to opposite placement if no space */
+    flip?: boolean;
+    /** Close popover when Escape key is pressed */
+    closeOnEscape?: boolean;
+    /** Close popover when clicking outside */
+    closeOnClickOutside?: boolean;
+}
+declare const Popover: React.FC<PopoverProps>;
+
+export { Popover, type PopoverProps };

package/dist/components/popover.js

@@ -0,0 +1,243 @@
+"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/popover/index.ts
+var popover_exports = {};
+__export(popover_exports, {
+  Popover: () => Popover
+});
+module.exports = __toCommonJS(popover_exports);
+
+// src/components/popover/popover.tsx
+var React = __toESM(require("react"));
+var ReactDOM = __toESM(require("react-dom"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var Popover = ({
+  trigger,
+  children,
+  isOpen,
+  onToggle,
+  placement = "bottom",
+  align = "start",
+  offset = 8,
+  flip = true,
+  closeOnEscape = true,
+  closeOnClickOutside = true
+}) => {
+  const [internalOpen, setInternalOpen] = React.useState(false);
+  const triggerRef = React.useRef(null);
+  const popoverRef = React.useRef(null);
+  const [popoverStyle, setPopoverStyle] = React.useState({});
+  const [resolvedPlacement, setResolvedPlacement] = React.useState(placement);
+  const isControlled = isOpen !== void 0;
+  const open = isControlled ? isOpen : internalOpen;
+  const toggle = React.useCallback(() => {
+    if (isControlled) {
+      onToggle?.();
+    } else {
+      setInternalOpen((prev) => !prev);
+    }
+  }, [isControlled, onToggle]);
+  React.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (closeOnClickOutside && triggerRef.current && !triggerRef.current.contains(event.target) && popoverRef.current && !popoverRef.current.contains(event.target)) {
+        toggle();
+      }
+    };
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [open, toggle, closeOnClickOutside]);
+  React.useEffect(() => {
+    const handleEscapeKey = (event) => {
+      if (closeOnEscape && event.key === "Escape" && open) {
+        toggle();
+      }
+    };
+    if (open) {
+      document.addEventListener("keydown", handleEscapeKey);
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscapeKey);
+    };
+  }, [open, toggle, closeOnEscape]);
+  React.useEffect(() => {
+    if (!open || !triggerRef.current || !popoverRef.current) {
+      return;
+    }
+    const updatePosition = () => {
+      if (!triggerRef.current || !popoverRef.current) {
+        return;
+      }
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const popoverRect = popoverRef.current.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const spaceTop = triggerRect.top;
+      const spaceBottom = viewportHeight - triggerRect.bottom;
+      const spaceLeft = triggerRect.left;
+      const spaceRight = viewportWidth - triggerRect.right;
+      let finalPlacement = placement;
+      if (flip) {
+        if (placement === "right" && spaceRight < popoverRect.width + offset) {
+          finalPlacement = spaceLeft >= popoverRect.width + offset ? "left" : "bottom";
+        } else if (placement === "left" && spaceLeft < popoverRect.width + offset) {
+          finalPlacement = spaceRight >= popoverRect.width + offset ? "right" : "bottom";
+        } else if (placement === "bottom" && spaceBottom < popoverRect.height + offset) {
+          finalPlacement = spaceTop >= popoverRect.height + offset ? "top" : "bottom";
+        } else if (placement === "top" && spaceTop < popoverRect.height + offset) {
+          finalPlacement = spaceBottom >= popoverRect.height + offset ? "bottom" : "top";
+        }
+      }
+      setResolvedPlacement(finalPlacement);
+      const newStyle = {
+        position: "fixed",
+        zIndex: "var(--z-popover)",
+        opacity: 1,
+        visibility: "visible",
+        pointerEvents: "auto"
+      };
+      const getAlignmentOffset = () => {
+        let alignmentOffset = 0;
+        if (finalPlacement === "left" || finalPlacement === "right") {
+          switch (align) {
+            case "center":
+              alignmentOffset = (triggerRect.height - popoverRect.height) / 2;
+              break;
+            case "end":
+              alignmentOffset = triggerRect.height - popoverRect.height;
+              break;
+            case "start":
+            default:
+              alignmentOffset = 0;
+          }
+        } else {
+          switch (align) {
+            case "center":
+              alignmentOffset = (triggerRect.width - popoverRect.width) / 2;
+              break;
+            case "end":
+              alignmentOffset = triggerRect.width - popoverRect.width;
+              break;
+            case "start":
+            default:
+              alignmentOffset = 0;
+          }
+        }
+        return alignmentOffset;
+      };
+      switch (finalPlacement) {
+        case "right":
+          newStyle.top = triggerRect.top + getAlignmentOffset();
+          newStyle.left = triggerRect.right + offset;
+          break;
+        case "left":
+          newStyle.top = triggerRect.top + getAlignmentOffset();
+          newStyle.left = triggerRect.left - popoverRect.width - offset;
+          break;
+        case "top":
+          newStyle.top = triggerRect.top - popoverRect.height - offset;
+          newStyle.left = triggerRect.left + getAlignmentOffset();
+          break;
+        case "bottom":
+        default:
+          newStyle.top = triggerRect.bottom + offset;
+          newStyle.left = triggerRect.left + getAlignmentOffset();
+      }
+      if (typeof newStyle.left === "number") {
+        if (newStyle.left + popoverRect.width > viewportWidth - offset) {
+          newStyle.left = viewportWidth - popoverRect.width - offset;
+        }
+        if (newStyle.left < offset) {
+          newStyle.left = offset;
+        }
+      }
+      if (typeof newStyle.top === "number") {
+        if (newStyle.top + popoverRect.height > viewportHeight - offset) {
+          newStyle.top = viewportHeight - popoverRect.height - offset;
+        }
+        if (newStyle.top < offset) {
+          newStyle.top = offset;
+        }
+      }
+      setPopoverStyle(newStyle);
+    };
+    requestAnimationFrame(updatePosition);
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [open, placement, align, offset, flip]);
+  const handleTriggerClick = React.useCallback(() => {
+    toggle();
+  }, [toggle]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref: triggerRef,
+        onClick: handleTriggerClick,
+        style: { display: "inline-block", position: "relative" },
+        children: React.isValidElement(trigger) ? React.cloneElement(trigger, {
+          onClick: (e) => {
+            e.stopPropagation();
+            handleTriggerClick();
+            trigger.props?.onClick?.(e);
+          }
+        }) : trigger
+      }
+    ),
+    open && ReactDOM.createPortal(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          ref: popoverRef,
+          className: `popover popover--${resolvedPlacement}`,
+          style: {
+            ...popoverStyle,
+            // Start with opacity 0 and visibility hidden to prevent initial flash
+            opacity: popoverStyle.top !== void 0 ? 1 : 0,
+            visibility: popoverStyle.top !== void 0 ? "visible" : "hidden"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "popover__content", children })
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Popover
+});

package/dist/components/popover.mjs

@@ -0,0 +1,206 @@
+// src/components/popover/popover.tsx
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Popover = ({
+  trigger,
+  children,
+  isOpen,
+  onToggle,
+  placement = "bottom",
+  align = "start",
+  offset = 8,
+  flip = true,
+  closeOnEscape = true,
+  closeOnClickOutside = true
+}) => {
+  const [internalOpen, setInternalOpen] = React.useState(false);
+  const triggerRef = React.useRef(null);
+  const popoverRef = React.useRef(null);
+  const [popoverStyle, setPopoverStyle] = React.useState({});
+  const [resolvedPlacement, setResolvedPlacement] = React.useState(placement);
+  const isControlled = isOpen !== void 0;
+  const open = isControlled ? isOpen : internalOpen;
+  const toggle = React.useCallback(() => {
+    if (isControlled) {
+      onToggle?.();
+    } else {
+      setInternalOpen((prev) => !prev);
+    }
+  }, [isControlled, onToggle]);
+  React.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (closeOnClickOutside && triggerRef.current && !triggerRef.current.contains(event.target) && popoverRef.current && !popoverRef.current.contains(event.target)) {
+        toggle();
+      }
+    };
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [open, toggle, closeOnClickOutside]);
+  React.useEffect(() => {
+    const handleEscapeKey = (event) => {
+      if (closeOnEscape && event.key === "Escape" && open) {
+        toggle();
+      }
+    };
+    if (open) {
+      document.addEventListener("keydown", handleEscapeKey);
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscapeKey);
+    };
+  }, [open, toggle, closeOnEscape]);
+  React.useEffect(() => {
+    if (!open || !triggerRef.current || !popoverRef.current) {
+      return;
+    }
+    const updatePosition = () => {
+      if (!triggerRef.current || !popoverRef.current) {
+        return;
+      }
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const popoverRect = popoverRef.current.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const spaceTop = triggerRect.top;
+      const spaceBottom = viewportHeight - triggerRect.bottom;
+      const spaceLeft = triggerRect.left;
+      const spaceRight = viewportWidth - triggerRect.right;
+      let finalPlacement = placement;
+      if (flip) {
+        if (placement === "right" && spaceRight < popoverRect.width + offset) {
+          finalPlacement = spaceLeft >= popoverRect.width + offset ? "left" : "bottom";
+        } else if (placement === "left" && spaceLeft < popoverRect.width + offset) {
+          finalPlacement = spaceRight >= popoverRect.width + offset ? "right" : "bottom";
+        } else if (placement === "bottom" && spaceBottom < popoverRect.height + offset) {
+          finalPlacement = spaceTop >= popoverRect.height + offset ? "top" : "bottom";
+        } else if (placement === "top" && spaceTop < popoverRect.height + offset) {
+          finalPlacement = spaceBottom >= popoverRect.height + offset ? "bottom" : "top";
+        }
+      }
+      setResolvedPlacement(finalPlacement);
+      const newStyle = {
+        position: "fixed",
+        zIndex: "var(--z-popover)",
+        opacity: 1,
+        visibility: "visible",
+        pointerEvents: "auto"
+      };
+      const getAlignmentOffset = () => {
+        let alignmentOffset = 0;
+        if (finalPlacement === "left" || finalPlacement === "right") {
+          switch (align) {
+            case "center":
+              alignmentOffset = (triggerRect.height - popoverRect.height) / 2;
+              break;
+            case "end":
+              alignmentOffset = triggerRect.height - popoverRect.height;
+              break;
+            case "start":
+            default:
+              alignmentOffset = 0;
+          }
+        } else {
+          switch (align) {
+            case "center":
+              alignmentOffset = (triggerRect.width - popoverRect.width) / 2;
+              break;
+            case "end":
+              alignmentOffset = triggerRect.width - popoverRect.width;
+              break;
+            case "start":
+            default:
+              alignmentOffset = 0;
+          }
+        }
+        return alignmentOffset;
+      };
+      switch (finalPlacement) {
+        case "right":
+          newStyle.top = triggerRect.top + getAlignmentOffset();
+          newStyle.left = triggerRect.right + offset;
+          break;
+        case "left":
+          newStyle.top = triggerRect.top + getAlignmentOffset();
+          newStyle.left = triggerRect.left - popoverRect.width - offset;
+          break;
+        case "top":
+          newStyle.top = triggerRect.top - popoverRect.height - offset;
+          newStyle.left = triggerRect.left + getAlignmentOffset();
+          break;
+        case "bottom":
+        default:
+          newStyle.top = triggerRect.bottom + offset;
+          newStyle.left = triggerRect.left + getAlignmentOffset();
+      }
+      if (typeof newStyle.left === "number") {
+        if (newStyle.left + popoverRect.width > viewportWidth - offset) {
+          newStyle.left = viewportWidth - popoverRect.width - offset;
+        }
+        if (newStyle.left < offset) {
+          newStyle.left = offset;
+        }
+      }
+      if (typeof newStyle.top === "number") {
+        if (newStyle.top + popoverRect.height > viewportHeight - offset) {
+          newStyle.top = viewportHeight - popoverRect.height - offset;
+        }
+        if (newStyle.top < offset) {
+          newStyle.top = offset;
+        }
+      }
+      setPopoverStyle(newStyle);
+    };
+    requestAnimationFrame(updatePosition);
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [open, placement, align, offset, flip]);
+  const handleTriggerClick = React.useCallback(() => {
+    toggle();
+  }, [toggle]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: triggerRef,
+        onClick: handleTriggerClick,
+        style: { display: "inline-block", position: "relative" },
+        children: React.isValidElement(trigger) ? React.cloneElement(trigger, {
+          onClick: (e) => {
+            e.stopPropagation();
+            handleTriggerClick();
+            trigger.props?.onClick?.(e);
+          }
+        }) : trigger
+      }
+    ),
+    open && ReactDOM.createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: popoverRef,
+          className: `popover popover--${resolvedPlacement}`,
+          style: {
+            ...popoverStyle,
+            // Start with opacity 0 and visibility hidden to prevent initial flash
+            opacity: popoverStyle.top !== void 0 ? 1 : 0,
+            visibility: popoverStyle.top !== void 0 ? "visible" : "hidden"
+          },
+          children: /* @__PURE__ */ jsx("div", { className: "popover__content", children })
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+export {
+  Popover
+};