@hellboy/ds 0.1.3 → 0.2.7

package/dist/components/section.mjs

@@ -0,0 +1,1364 @@
+// src/components/_shared/Backdrop.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Backdrop = React.forwardRef(
+  ({ className = "", blur = true, style, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: `backdrop ${blur ? "backdrop--blur" : ""} ${className}`,
+        style,
+        "aria-hidden": "true",
+        ...props
+      }
+    );
+  }
+);
+Backdrop.displayName = "Backdrop";
+
+// src/components/icons/icons.tsx
+import { Icon as IconifyIcon } from "@iconify/react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Icon = ({ name, size = 24, className, loading = false, ...rest }) => {
+  const iconName = name.includes(":") ? name : `heroicons:${name}`;
+  const classes = ["icon", className].filter(Boolean).join(" ");
+  if (loading) {
+    const style = { width: size, height: size };
+    return /* @__PURE__ */ jsx2(
+      "span",
+      {
+        className: `${classes} icon--skeleton`,
+        style,
+        "aria-hidden": rest["aria-label"] ? "false" : "true",
+        ...rest["aria-label"] ? { "aria-label": rest["aria-label"] } : {}
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(
+    IconifyIcon,
+    {
+      icon: iconName,
+      width: size,
+      height: size,
+      className: classes,
+      ...rest
+    }
+  );
+};
+
+// src/components/icons/iconConstants.ts
+var INPUT_TYPE_ICONS = {
+  // Standard HTML input types
+  email: "envelope-solid",
+  password: "lock-closed-solid",
+  search: "magnifying-glass-solid",
+  date: "calendar-days-solid",
+  time: "clock-solid",
+  "datetime-local": "calendar-days-solid",
+  tel: "phone-solid",
+  url: "link-solid",
+  number: "hashtag-solid",
+  // Additional semantic types
+  username: "user-solid",
+  name: "user-solid",
+  firstname: "user-solid",
+  lastname: "user-solid",
+  address: "map-pin-solid",
+  city: "building-solid",
+  state: "map-solid",
+  zip: "map-pin-solid",
+  "zip-code": "map-pin-solid",
+  country: "globe-americas-solid",
+  creditcard: "credit-card-solid",
+  card: "credit-card-solid",
+  cvv: "lock-closed-solid",
+  expiry: "calendar-days-solid",
+  "expiration-date": "calendar-days-solid",
+  // File and media types
+  file: "document-solid",
+  image: "photo-solid",
+  video: "video-camera-solid",
+  audio: "microphone-solid",
+  // Communication
+  message: "chat-bubble-left-solid",
+  comment: "chat-bubble-left-solid",
+  feedback: "chat-bubble-left-solid",
+  // Actions and states
+  submit: "paper-airplane-solid",
+  send: "paper-airplane-solid",
+  save: "floppy-disk-solid",
+  edit: "pencil-solid",
+  delete: "trash-solid",
+  remove: "x-mark-solid",
+  add: "plus-solid",
+  create: "plus-solid",
+  upload: "arrow-up-tray-solid",
+  download: "arrow-down-tray-solid",
+  refresh: "arrow-path-solid",
+  reload: "arrow-path-solid",
+  settings: "cog-solid",
+  config: "cog-solid",
+  filter: "funnel-solid",
+  sort: "bars-arrow-up-solid"
+};
+var ACTION_ICONS = {
+  close: "x-mark-solid",
+  back: "arrow-left-solid",
+  forward: "arrow-right-solid",
+  up: "arrow-up-solid",
+  down: "arrow-down-solid",
+  expand: "chevron-down-solid",
+  collapse: "chevron-up-solid",
+  menu: "bars-3-solid",
+  more: "ellipsis-horizontal-solid",
+  check: "check-solid",
+  cross: "x-mark-solid",
+  plus: "plus-solid",
+  minus: "minus-solid",
+  search: "magnifying-glass-solid",
+  clear: "x-mark-solid",
+  loading: "arrow-path-solid",
+  error: "exclamation-triangle-solid",
+  warning: "exclamation-triangle-solid",
+  info: "information-circle-solid",
+  success: "check-circle-solid"
+};
+
+// src/components/_shared/Thumb.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+
+// src/components/_shared/HeadingAnchor.tsx
+import { useState as useState6, useMemo } from "react";
+
+// src/components/dialog/Dialog.tsx
+import * as React3 from "react";
+import { createPortal } from "react-dom";
+
+// src/components/button/button.tsx
+import React2 from "react";
+import { Button as AriakitButton } from "@ariakit/react";
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var Button = React2.forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    children,
+    isLoading = false,
+    disabled = false,
+    fullWidth = false,
+    startIcon,
+    endIcon,
+    iconOnly = false,
+    href,
+    active = false,
+    className,
+    onClick,
+    ...props
+  }, ref) => {
+    const buttonClasses = [
+      "btn",
+      `btn--${variant}`,
+      `btn--${size}`,
+      fullWidth && "btn--full-width",
+      iconOnly && "btn--icon-only",
+      active && "btn--active",
+      className
+    ].filter(Boolean).join(" ");
+    const iconSize = size === "xs" ? 14 : size === "sm" ? 16 : size === "lg" ? 24 : 20;
+    const buttonContent = /* @__PURE__ */ jsxs2(Fragment, { children: [
+      isLoading && /* @__PURE__ */ jsx4("span", { className: "btn__spinner" }),
+      startIcon && (isLoading ? /* @__PURE__ */ jsx4("span", { className: "btn__icon-placeholder", style: { width: iconSize, height: iconSize } }) : /* @__PURE__ */ jsx4(Icon, { name: startIcon, size: iconSize, className: "btn__icon" })),
+      !iconOnly && children,
+      endIcon && /* @__PURE__ */ jsx4(Icon, { name: endIcon, size: iconSize, className: "btn__icon" })
+    ] });
+    const handleClick = (e) => {
+      if (href && !isLoading && !disabled) {
+        window.location.href = href;
+      }
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ jsx4(
+      AriakitButton,
+      {
+        ref,
+        disabled: disabled || isLoading,
+        className: buttonClasses,
+        onClick: handleClick,
+        ...props,
+        children: buttonContent
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/dialog/Dialog.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var Dialog = ({
+  open,
+  onClose,
+  title,
+  children,
+  size = "md",
+  footer,
+  showCloseButton = true,
+  closeOnBackdropClick = true,
+  closeOnEscape = true,
+  className = "",
+  ariaLabel,
+  ariaDescribedBy
+}) => {
+  const dialogRef = React3.useRef(null);
+  React3.useEffect(() => {
+    if (!open || !closeOnEscape) return;
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [open, closeOnEscape, onClose]);
+  React3.useEffect(() => {
+    if (open) {
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+      document.body.style.overflow = "hidden";
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+    } else {
+      document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
+    };
+  }, [open]);
+  React3.useEffect(() => {
+    if (!open || !dialogRef.current) return;
+    const dialog = dialogRef.current;
+    const focusableElements = dialog.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+    const handleTab = (e) => {
+      if (e.key !== "Tab") return;
+      if (e.shiftKey) {
+        if (document.activeElement === firstElement) {
+          e.preventDefault();
+          lastElement?.focus();
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          e.preventDefault();
+          firstElement?.focus();
+        }
+      }
+    };
+    dialog.addEventListener("keydown", handleTab);
+    firstElement?.focus();
+    return () => {
+      dialog.removeEventListener("keydown", handleTab);
+    };
+  }, [open]);
+  const handleBackdropClick = (e) => {
+    if (closeOnBackdropClick && e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  if (!open) return null;
+  const dialogContent = /* @__PURE__ */ jsxs3("div", { className: "dialog__portal", children: [
+    /* @__PURE__ */ jsx5(Backdrop, { onClick: handleBackdropClick, "data-enter": "" }),
+    /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        ref: dialogRef,
+        className: `dialog dialog--${size} ${className}`,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": ariaLabel || title,
+        "aria-describedby": ariaDescribedBy,
+        children: [
+          (title || showCloseButton) && /* @__PURE__ */ jsxs3("div", { className: "dialog__header", children: [
+            title && /* @__PURE__ */ jsx5("h2", { className: "dialog__title", children: title }),
+            showCloseButton && /* @__PURE__ */ jsx5(
+              Button,
+              {
+                variant: "ghost",
+                className: "dialog__close",
+                startIcon: ACTION_ICONS.close,
+                iconOnly: true,
+                onClick: onClose,
+                "aria-label": "Close dialog"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx5("div", { className: "dialog__content scrollable", children }),
+          footer && /* @__PURE__ */ jsx5("div", { className: "dialog__footer", children: footer })
+        ]
+      }
+    )
+  ] });
+  return createPortal(dialogContent, document.body);
+};
+
+// src/components/input/InputText.tsx
+import React9 from "react";
+
+// src/components/input/Input.tsx
+import * as React8 from "react";
+
+// src/components/input/InputField.tsx
+import * as React4 from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var InputField = React4.forwardRef(
+  ({
+    type = "text",
+    label,
+    helperText,
+    error,
+    icon,
+    iconRight,
+    fullWidth = false,
+    size = "md",
+    className = "",
+    disabled,
+    id,
+    onRightIconClick,
+    ...props
+  }, ref) => {
+    const inputId = id || `input-${React4.useId()}`;
+    const containerClasses = [
+      "input-container",
+      fullWidth && "input-container--full-width",
+      className
+    ].filter(Boolean).join(" ");
+    const inputClasses = [
+      "input",
+      `input--${size}`,
+      error && "input--error",
+      disabled && "input--disabled",
+      icon && "input--has-icon-left",
+      iconRight && "input--has-icon-right"
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs4("div", { className: containerClasses, children: [
+      label && /* @__PURE__ */ jsx6("label", { htmlFor: inputId, className: "input__label", children: label }),
+      /* @__PURE__ */ jsxs4("div", { className: "input__wrapper", children: [
+        icon && /* @__PURE__ */ jsx6("span", { className: "input__icon input__icon--left", "aria-hidden": "true", children: /* @__PURE__ */ jsx6(Icon, { name: icon, size: 16 }) }),
+        /* @__PURE__ */ jsx6(
+          "input",
+          {
+            ref,
+            type,
+            id: inputId,
+            className: inputClasses,
+            disabled,
+            ...props
+          }
+        ),
+        iconRight && /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            className: "input__icon input__icon--right",
+            onClick: onRightIconClick,
+            tabIndex: -1,
+            "aria-label": "Icon action",
+            children: /* @__PURE__ */ jsx6(Icon, { name: iconRight, size: 16 })
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsx6("p", { className: "input__message input__message--error", children: error }),
+      helperText && !error && /* @__PURE__ */ jsx6("p", { className: "input__message", children: helperText })
+    ] });
+  }
+);
+
+// src/components/popover/popover.tsx
+import * as React5 from "react";
+import * as ReactDOM from "react-dom";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } 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] = React5.useState(false);
+  const triggerRef = React5.useRef(null);
+  const popoverRef = React5.useRef(null);
+  const [popoverStyle, setPopoverStyle] = React5.useState({});
+  const [resolvedPlacement, setResolvedPlacement] = React5.useState(placement);
+  const isControlled = isOpen !== void 0;
+  const open = isControlled ? isOpen : internalOpen;
+  const toggle = React5.useCallback(() => {
+    if (isControlled) {
+      onToggle?.();
+    } else {
+      setInternalOpen((prev) => !prev);
+    }
+  }, [isControlled, onToggle]);
+  React5.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]);
+  React5.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]);
+  React5.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 = React5.useCallback(() => {
+    toggle();
+  }, [toggle]);
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        ref: triggerRef,
+        onClick: handleTriggerClick,
+        style: { display: "inline-block", position: "relative" },
+        children: React5.isValidElement(trigger) ? React5.cloneElement(trigger, {
+          onClick: (e) => {
+            e.stopPropagation();
+            handleTriggerClick();
+            trigger.props?.onClick?.(e);
+          }
+        }) : trigger
+      }
+    ),
+    open && ReactDOM.createPortal(
+      /* @__PURE__ */ jsx7(
+        "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__ */ jsx7("div", { className: "popover__content", children })
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+
+// src/components/input/DatePicker.tsx
+import * as React6 from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var DAYS_OF_WEEK = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var DatePicker = ({ value, onChange, disabled }) => {
+  const parseDate = (dateStr) => {
+    if (!dateStr) {
+      const today = /* @__PURE__ */ new Date();
+      return { year: today.getFullYear(), month: today.getMonth(), day: today.getDate() };
+    }
+    const [year, month, day] = dateStr.split("-").map(Number);
+    return { year, month: month - 1, day };
+  };
+  const { year: initialYear, month: initialMonth, day: selectedDay } = parseDate(value);
+  const [currentYear, setCurrentYear] = React6.useState(initialYear);
+  const [currentMonth, setCurrentMonth] = React6.useState(initialMonth);
+  const getDaysInMonth = (year, month) => {
+    return new Date(year, month + 1, 0).getDate();
+  };
+  const getFirstDayOfMonth = (year, month) => {
+    return new Date(year, month, 1).getDay();
+  };
+  const handleDateSelect = (day) => {
+    if (disabled) return;
+    const formattedDate = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+    onChange(formattedDate);
+  };
+  const handlePrevMonth = () => {
+    if (currentMonth === 0) {
+      setCurrentMonth(11);
+      setCurrentYear(currentYear - 1);
+    } else {
+      setCurrentMonth(currentMonth - 1);
+    }
+  };
+  const handleNextMonth = () => {
+    if (currentMonth === 11) {
+      setCurrentMonth(0);
+      setCurrentYear(currentYear + 1);
+    } else {
+      setCurrentMonth(currentMonth + 1);
+    }
+  };
+  const daysInMonth = getDaysInMonth(currentYear, currentMonth);
+  const firstDay = getFirstDayOfMonth(currentYear, currentMonth);
+  const days = [
+    ...Array(firstDay).fill(null),
+    ...Array.from({ length: daysInMonth }, (_, i) => i + 1)
+  ];
+  return /* @__PURE__ */ jsxs6("div", { className: "date-picker", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "date-picker__header", children: [
+      /* @__PURE__ */ jsx8(
+        "button",
+        {
+          type: "button",
+          className: "date-picker__nav",
+          onClick: handlePrevMonth,
+          disabled,
+          "aria-label": "Previous month",
+          children: "\u2039"
+        }
+      ),
+      /* @__PURE__ */ jsxs6("div", { className: "date-picker__title", children: [
+        /* @__PURE__ */ jsx8(
+          "select",
+          {
+            className: "date-picker__select",
+            value: currentMonth,
+            onChange: (e) => setCurrentMonth(Number(e.target.value)),
+            disabled,
+            children: MONTHS.map((month, idx) => /* @__PURE__ */ jsx8("option", { value: idx, children: month }, month))
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "select",
+          {
+            className: "date-picker__select",
+            value: currentYear,
+            onChange: (e) => setCurrentYear(Number(e.target.value)),
+            disabled,
+            children: Array.from({ length: 100 }, (_, i) => currentYear - 50 + i).map((year) => /* @__PURE__ */ jsx8("option", { value: year, children: year }, year))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx8(
+        "button",
+        {
+          type: "button",
+          className: "date-picker__nav",
+          onClick: handleNextMonth,
+          disabled,
+          "aria-label": "Next month",
+          children: "\u203A"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx8("div", { className: "date-picker__weekdays", children: DAYS_OF_WEEK.map((day) => /* @__PURE__ */ jsx8("div", { className: "date-picker__weekday", children: day }, day)) }),
+    /* @__PURE__ */ jsx8("div", { className: "date-picker__days", children: days.map((day, idx) => /* @__PURE__ */ jsx8(
+      "button",
+      {
+        type: "button",
+        className: `date-picker__day ${day === selectedDay ? "date-picker__day--selected" : ""} ${!day ? "date-picker__day--empty" : ""}`,
+        onClick: () => day && handleDateSelect(day),
+        disabled: !day || disabled,
+        children: day || ""
+      },
+      idx
+    )) })
+  ] });
+};
+
+// src/components/input/TimePicker.tsx
+import * as React7 from "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var parseTime = (timeStr) => {
+  if (!timeStr) return { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 };
+  const parts = timeStr.split(":");
+  const hours = parseInt(parts[0] || "0", 10);
+  const minutes = parseInt(parts[1] || "0", 10);
+  const secondsParts = (parts[2] || "0").split(".");
+  const seconds = parseInt(secondsParts[0] || "0", 10);
+  const milliseconds = parseInt(secondsParts[1] || "0", 10);
+  return { hours, minutes, seconds, milliseconds };
+};
+var TimeColumn = ({
+  label,
+  value,
+  max,
+  field,
+  step,
+  disabled,
+  onChange
+}) => {
+  const items = Array.from({ length: Math.floor(max / step) + 1 }, (_, i) => i * step);
+  const columnRef = React7.useRef(null);
+  React7.useEffect(() => {
+    if (columnRef.current) {
+      const selected = columnRef.current.querySelector(".time-picker__item--selected");
+      if (selected) {
+        selected.scrollIntoView({ block: "center", behavior: "smooth" });
+      }
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsxs7("div", { className: "time-picker__column", children: [
+    /* @__PURE__ */ jsx9("div", { className: "time-picker__label", children: label }),
+    /* @__PURE__ */ jsx9("div", { className: "time-picker__scroll scrollable", ref: columnRef, children: items.map((item) => /* @__PURE__ */ jsx9(
+      "button",
+      {
+        type: "button",
+        className: `time-picker__item ${item === value ? "time-picker__item--selected" : ""}`,
+        onClick: () => onChange(field, item),
+        disabled,
+        children: String(item).padStart(field === "milliseconds" ? 3 : 2, "0")
+      },
+      item
+    )) })
+  ] });
+};
+var TimePicker = ({
+  value,
+  onChange,
+  disabled,
+  showMilliseconds = false,
+  minuteStep = 1
+}) => {
+  const [internalTime, setInternalTime] = React7.useState(value);
+  React7.useEffect(() => {
+    setInternalTime(value);
+  }, [value]);
+  const { hours, minutes, seconds, milliseconds } = parseTime(internalTime);
+  const handleChange = (field, newValue) => {
+    if (disabled) return;
+    const currentParsed = parseTime(internalTime);
+    const updated = { ...currentParsed, [field]: newValue };
+    let formattedTime = `${String(updated.hours).padStart(2, "0")}:${String(updated.minutes).padStart(2, "0")}:${String(updated.seconds).padStart(2, "0")}`;
+    if (showMilliseconds && updated.milliseconds > 0) {
+      formattedTime += `.${String(updated.milliseconds).padStart(3, "0")}`;
+    }
+    setInternalTime(formattedTime);
+    onChange(formattedTime);
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: "time-picker", children: [
+    /* @__PURE__ */ jsx9(
+      TimeColumn,
+      {
+        label: "Hours",
+        value: hours,
+        max: 23,
+        field: "hours",
+        step: 1,
+        disabled,
+        onChange: handleChange
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      TimeColumn,
+      {
+        label: "Minutes",
+        value: minutes,
+        max: 59,
+        field: "minutes",
+        step: minuteStep,
+        disabled,
+        onChange: handleChange
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      TimeColumn,
+      {
+        label: "Seconds",
+        value: seconds,
+        max: 59,
+        field: "seconds",
+        step: 1,
+        disabled,
+        onChange: handleChange
+      }
+    ),
+    showMilliseconds && /* @__PURE__ */ jsx9(
+      TimeColumn,
+      {
+        label: "ms",
+        value: milliseconds,
+        max: 999,
+        field: "milliseconds",
+        step: 1,
+        disabled,
+        onChange: handleChange
+      }
+    )
+  ] });
+};
+
+// src/components/input/Input.tsx
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var TYPE_ICON_MAP = INPUT_TYPE_ICONS;
+var formatDisplayValue = (val, inputType) => {
+  if (!val) return "";
+  if (inputType === "date") {
+    const [year, month, day] = val.split("-");
+    return `${day}/${month}/${year}`;
+  }
+  if (inputType === "time") {
+    return val;
+  }
+  if (inputType === "datetime-local") {
+    const [datePart, timePart] = val.split("T");
+    if (datePart && timePart) {
+      const [year, month, day] = datePart.split("-");
+      return `${day}/${month}/${year} ${timePart}`;
+    }
+    return val;
+  }
+  return val;
+};
+var Input = React8.forwardRef(
+  ({
+    type = "text",
+    label,
+    helperText,
+    error,
+    icon,
+    fullWidth = false,
+    size = "md",
+    className = "",
+    disabled,
+    id,
+    showMilliseconds = false,
+    minuteStep = 1,
+    showClear = true,
+    ...props
+  }, ref) => {
+    const [showPassword, setShowPassword] = React8.useState(false);
+    const [showDateTimePicker, setShowDateTimePicker] = React8.useState(false);
+    const inputRef = React8.useRef(null);
+    const leftIcon = icon || TYPE_ICON_MAP[type];
+    const isPasswordType = type === "password";
+    const actualType = isPasswordType && showPassword ? "text" : type !== "date" && type !== "time" && type !== "datetime-local" ? type : "text";
+    const isDateTimeType = type === "date" || type === "time" || type === "datetime-local";
+    const isSearchType = type === "search";
+    const hasValue = props.value && String(props.value).length > 0;
+    const rightIconName = isPasswordType ? showPassword ? "heroicons:eye-slash-solid" : "heroicons:eye-solid" : isDateTimeType ? "heroicons:chevron-down-solid" : isSearchType && hasValue && showClear ? ACTION_ICONS.clear : void 0;
+    const handleRightIconClick = () => {
+      if (isPasswordType) {
+        setShowPassword(!showPassword);
+      } else if (isDateTimeType) {
+        setShowDateTimePicker(!showDateTimePicker);
+      } else if (isSearchType && hasValue && showClear) {
+        if (props.onChange) {
+          props.onChange({ target: { value: "" } });
+        }
+      }
+    };
+    const handleDateTimeChange = (newValue) => {
+      if (props.onChange) {
+        props.onChange({ target: { value: newValue } });
+      }
+    };
+    if (!isDateTimeType) {
+      return /* @__PURE__ */ jsx10(
+        InputField,
+        {
+          ref: ref || inputRef,
+          type: actualType,
+          label,
+          helperText,
+          error,
+          icon: leftIcon,
+          iconRight: rightIconName,
+          onRightIconClick: handleRightIconClick,
+          fullWidth,
+          size,
+          className,
+          disabled,
+          id,
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs8("div", { className: `input-container ${fullWidth ? "input-container--full-width" : ""} ${className}`.trim(), children: [
+      label && /* @__PURE__ */ jsx10("label", { htmlFor: id, className: "input__label", children: label }),
+      /* @__PURE__ */ jsx10(
+        Popover,
+        {
+          trigger: /* @__PURE__ */ jsx10(
+            InputField,
+            {
+              ref: ref || inputRef,
+              type: "text",
+              icon: leftIcon,
+              iconRight: rightIconName,
+              onRightIconClick: () => setShowDateTimePicker(!showDateTimePicker),
+              fullWidth,
+              size,
+              disabled,
+              id,
+              value: formatDisplayValue(String(props.value || ""), type),
+              placeholder: props.placeholder,
+              readOnly: true
+            }
+          ),
+          isOpen: showDateTimePicker,
+          onToggle: () => setShowDateTimePicker(!showDateTimePicker),
+          placement: "bottom",
+          children: /* @__PURE__ */ jsxs8("div", { style: { padding: "1rem" }, children: [
+            (type === "date" || type === "datetime-local") && /* @__PURE__ */ jsx10(
+              DatePicker,
+              {
+                value: String(props.value || "").split("T")[0],
+                onChange: (newDate) => {
+                  if (type === "datetime-local") {
+                    const time = String(props.value || "").split("T")[1] || "00:00:00";
+                    handleDateTimeChange(`${newDate}T${time}`);
+                  } else {
+                    handleDateTimeChange(newDate);
+                    setShowDateTimePicker(false);
+                  }
+                },
+                disabled
+              }
+            ),
+            (type === "time" || type === "datetime-local") && /* @__PURE__ */ jsx10(
+              TimePicker,
+              {
+                value: String(props.value || "").split("T")[1] || "00:00:00",
+                onChange: (newTime) => {
+                  if (type === "datetime-local") {
+                    const date = String(props.value || "").split("T")[0] || (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+                    handleDateTimeChange(`${date}T${newTime}`);
+                  } else {
+                    handleDateTimeChange(newTime);
+                  }
+                },
+                disabled,
+                showMilliseconds,
+                minuteStep
+              }
+            )
+          ] })
+        }
+      ),
+      error && /* @__PURE__ */ jsx10("p", { className: "input__message input__message--error", children: error }),
+      helperText && !error && /* @__PURE__ */ jsx10("p", { className: "input__message", children: helperText })
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+// src/components/input/InputText.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var InputText = React9.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx11(Input, { ref, ...props, type: "text" });
+});
+InputText.displayName = "InputText";
+
+// src/components/input/InputEmail.tsx
+import React10 from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var InputEmail = React10.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx12(Input, { ref, ...props, type: "email" });
+});
+InputEmail.displayName = "InputEmail";
+
+// src/components/input/InputPassword.tsx
+import React11 from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var InputPassword = React11.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx13(Input, { ref, ...props, type: "password" });
+});
+InputPassword.displayName = "InputPassword";
+
+// src/components/input/InputSearch.tsx
+import React12 from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var InputSearch = React12.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx14(Input, { ref, ...props, type: "search" });
+});
+InputSearch.displayName = "InputSearch";
+
+// src/components/input/InputTel.tsx
+import React13 from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var InputTel = React13.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx15(Input, { ref, ...props, type: "tel" });
+});
+InputTel.displayName = "InputTel";
+
+// src/components/input/InputUrl.tsx
+import React14 from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var InputUrl = React14.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx16(Input, { ref, ...props, type: "url" });
+});
+InputUrl.displayName = "InputUrl";
+
+// src/components/input/InputNumber.tsx
+import React15 from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var InputNumber = React15.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx17(Input, { ref, ...props, type: "number" });
+});
+InputNumber.displayName = "InputNumber";
+
+// src/components/input/InputDate.tsx
+import React16 from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var InputDate = React16.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx18(Input, { ref, ...props, type: "date" });
+});
+InputDate.displayName = "InputDate";
+
+// src/components/input/InputTime.tsx
+import React17 from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var InputTime = React17.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx19(Input, { ref, ...props, type: "time" });
+});
+InputTime.displayName = "InputTime";
+
+// src/components/input/InputDateTime.tsx
+import React18 from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var InputDateTime = React18.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx20(Input, { ref, ...props, type: "datetime-local" });
+});
+InputDateTime.displayName = "InputDateTime";
+
+// src/components/tooltip/tooltip.tsx
+import * as React19 from "react";
+import * as ReactDOM2 from "react-dom";
+import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
+var Tooltip = ({
+  content,
+  children,
+  placement = "top",
+  delay = 0,
+  disabled = false
+}) => {
+  const [isVisible, setIsVisible] = React19.useState(false);
+  const [tooltipStyle, setTooltipStyle] = React19.useState({});
+  const [resolvedPlacement, setResolvedPlacement] = React19.useState(placement);
+  const triggerRef = React19.useRef(null);
+  const tooltipRef = React19.useRef(null);
+  const timeoutRef = React19.useRef();
+  React19.useEffect(() => {
+    if (!isVisible || !triggerRef.current || !tooltipRef.current) {
+      return;
+    }
+    const updatePosition = () => {
+      if (!triggerRef.current || !tooltipRef.current) {
+        return;
+      }
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const tooltipRect = tooltipRef.current.getBoundingClientRect();
+      if (tooltipRect.width === 0 || tooltipRect.height === 0) {
+        setTimeout(updatePosition, 10);
+        return;
+      }
+      const gap = 8;
+      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 (placement === "right" && spaceRight < tooltipRect.width + gap) {
+        finalPlacement = spaceLeft >= tooltipRect.width + gap ? "left" : "bottom";
+      } else if (placement === "left" && spaceLeft < tooltipRect.width + gap) {
+        finalPlacement = spaceRight >= tooltipRect.width + gap ? "right" : "bottom";
+      } else if (placement === "bottom" && spaceBottom < tooltipRect.height + gap) {
+        finalPlacement = spaceTop >= tooltipRect.height + gap ? "top" : "bottom";
+      } else if (placement === "top" && spaceTop < tooltipRect.height + gap) {
+        finalPlacement = spaceBottom >= tooltipRect.height + gap ? "bottom" : "top";
+      }
+      setResolvedPlacement(finalPlacement);
+      const newStyle = {
+        position: "fixed",
+        zIndex: 1e4,
+        opacity: 1,
+        visibility: "visible",
+        pointerEvents: "auto"
+      };
+      switch (finalPlacement) {
+        case "right":
+          newStyle.top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+          newStyle.left = triggerRect.right + gap;
+          break;
+        case "left":
+          newStyle.top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+          newStyle.left = triggerRect.left - tooltipRect.width - gap;
+          break;
+        case "top":
+          newStyle.top = triggerRect.top - tooltipRect.height - gap;
+          newStyle.left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+          break;
+        case "bottom":
+        default:
+          newStyle.top = triggerRect.bottom + gap;
+          newStyle.left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+      }
+      if (newStyle.left < 0) {
+        newStyle.left = 0;
+      } else if (newStyle.left + tooltipRect.width > viewportWidth) {
+        newStyle.left = viewportWidth - tooltipRect.width;
+      }
+      if (newStyle.top < 0) {
+        newStyle.top = 0;
+      } else if (newStyle.top + tooltipRect.height > viewportHeight) {
+        newStyle.top = viewportHeight - tooltipRect.height;
+      }
+      setTooltipStyle(newStyle);
+    };
+    requestAnimationFrame(updatePosition);
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [isVisible, placement]);
+  const handleMouseEnter = () => {
+    if (disabled) return;
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setIsVisible(true);
+    }, delay);
+  };
+  const handleMouseLeave = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setIsVisible(false);
+    }, 150);
+  };
+  const handleClick = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsVisible(false);
+  };
+  const childElement = React19.Children.only(children);
+  const childWithHandlers = React19.cloneElement(childElement, {
+    ref: triggerRef,
+    onMouseEnter: (e) => {
+      childElement.props?.onMouseEnter?.(e);
+      handleMouseEnter();
+    },
+    onMouseLeave: (e) => {
+      childElement.props?.onMouseLeave?.(e);
+      handleMouseLeave();
+    },
+    onClick: (e) => {
+      childElement.props?.onClick?.(e);
+      handleClick();
+    }
+  });
+  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
+    childWithHandlers,
+    isVisible && !disabled && ReactDOM2.createPortal(
+      /* @__PURE__ */ jsx21(
+        "div",
+        {
+          ref: tooltipRef,
+          className: `tooltip tooltip--${resolvedPlacement}`,
+          style: {
+            ...tooltipStyle,
+            // Start with opacity 0 and visibility hidden to prevent initial flash
+            opacity: tooltipStyle.top !== void 0 ? 1 : 0,
+            visibility: tooltipStyle.top !== void 0 ? "visible" : "hidden"
+          },
+          onMouseEnter: () => {
+            if (timeoutRef.current) {
+              clearTimeout(timeoutRef.current);
+            }
+          },
+          onMouseLeave: handleMouseLeave,
+          children: /* @__PURE__ */ jsx21("div", { className: "tooltip__content", children: content })
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+
+// src/components/_shared/HeadingAnchor.tsx
+import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
+function generateHeadingId(text) {
+  return text.toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").trim();
+}
+var HeadingAnchor = ({
+  title,
+  id: customId,
+  className = "heading-anchor",
+  dialogTitle = "Section Link"
+}) => {
+  const [isDialogOpen, setIsDialogOpen] = useState6(false);
+  const [copySuccess, setCopySuccess] = useState6(false);
+  const headingId = useMemo(() => {
+    return customId || generateHeadingId(title);
+  }, [title, customId]);
+  const headingUrl = useMemo(() => {
+    if (typeof window !== "undefined") {
+      const baseUrl = window.location.origin + window.location.pathname;
+      return `${baseUrl}#${headingId}`;
+    }
+    return "";
+  }, [headingId]);
+  const handleHashClick = (e) => {
+    e.preventDefault();
+    setIsDialogOpen(true);
+    setCopySuccess(false);
+  };
+  const handleCopyAndClose = async () => {
+    try {
+      await navigator.clipboard.writeText(headingUrl);
+      setCopySuccess(true);
+      setTimeout(() => {
+        setIsDialogOpen(false);
+        setCopySuccess(false);
+      }, 300);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+  const handleCloseDialog = () => {
+    setIsDialogOpen(false);
+    setCopySuccess(false);
+  };
+  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    /* @__PURE__ */ jsx22(Tooltip, { content: `Copy link to this ${dialogTitle.toLowerCase()}`, placement: "top", children: /* @__PURE__ */ jsx22(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        className,
+        onClick: handleHashClick,
+        "aria-label": `Copy link to ${title}`,
+        startIcon: "heroicons:hashtag-16-solid",
+        iconOnly: true
+      }
+    ) }),
+    /* @__PURE__ */ jsx22(
+      Dialog,
+      {
+        open: isDialogOpen,
+        onClose: handleCloseDialog,
+        title: dialogTitle,
+        size: "md",
+        footer: /* @__PURE__ */ jsx22(Button, { variant: "secondary", onClick: handleCloseDialog, children: "Close" }),
+        children: /* @__PURE__ */ jsxs10("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-4)" }, children: [
+          /* @__PURE__ */ jsxs10("p", { style: { margin: 0, color: "var(--color-text-secondary)" }, children: [
+            "Copy the link below to share this ",
+            dialogTitle.toLowerCase(),
+            ":"
+          ] }),
+          /* @__PURE__ */ jsx22(
+            InputText,
+            {
+              value: headingUrl,
+              readOnly: true,
+              onClick: (e) => e.currentTarget.select(),
+              style: { fontFamily: "monospace", fontSize: "var(--font-size-sm)" }
+            }
+          ),
+          /* @__PURE__ */ jsx22(
+            Button,
+            {
+              variant: "primary",
+              onClick: handleCopyAndClose,
+              style: { width: "100%" },
+              children: copySuccess ? "Copied! Closing..." : "Copy link and close dialog"
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+};
+function useHeadingId(title, customId) {
+  return useMemo(() => {
+    if (customId) return customId;
+    if (typeof title === "string" && title.trim()) {
+      return generateHeadingId(title);
+    }
+    return void 0;
+  }, [title, customId]);
+}
+
+// src/components/section/section.tsx
+import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+var Section = ({ title, children, size = "md", className }) => {
+  const sectionClasses = [
+    "section",
+    size !== "md" && `section--${size}`,
+    className
+  ].filter(Boolean).join(" ");
+  const sectionId = useHeadingId(title);
+  const titleText = typeof title === "string" ? title : void 0;
+  return /* @__PURE__ */ jsxs11(
+    "section",
+    {
+      className: sectionClasses,
+      id: sectionId,
+      "data-section-title": titleText,
+      children: [
+        title && /* @__PURE__ */ jsxs11("h2", { className: "section__title", children: [
+          title,
+          sectionId && titleText && /* @__PURE__ */ jsx23(
+            HeadingAnchor,
+            {
+              title: titleText,
+              id: sectionId,
+              className: "section__hash-link",
+              dialogTitle: "Section Link"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx23("div", { className: "section__content", children })
+      ]
+    }
+  );
+};
+export {
+  Section
+};