@hellboy/ds 0.1.3 → 0.2.7

package/dist/components/textarea.mjs

@@ -0,0 +1,1924 @@
+// src/components/textarea/RichTextarea.tsx
+import * as React22 from "react";
+import DOMPurify from "dompurify";
+
+// src/components/floating-bar/floating-bar.tsx
+import { jsx } from "react/jsx-runtime";
+var FloatingBar = ({
+  position = "bottom",
+  children,
+  className = "",
+  ...props
+}) => {
+  const classes = [
+    "floating-bar",
+    `floating-bar--${position}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "floating-bar__content", children })
+    }
+  );
+};
+
+// src/components/select/Select.tsx
+import * as React2 from "react";
+
+// 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/popover/popover.tsx
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Fragment, jsx as jsx3, 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__ */ jsx3(
+      "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__ */ jsx3(
+        "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__ */ jsx3("div", { className: "popover__content", children })
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+
+// 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"
+};
+var LIST_ICONS = {
+  selected: "check-solid",
+  unselected: "circle-solid"
+};
+
+// src/components/list/List.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var ListItem = ({
+  children,
+  icon,
+  selected = false,
+  disabled = false,
+  onClick,
+  category,
+  className = "",
+  ...props
+}) => {
+  const classes = [
+    "list-item",
+    selected && "list-item--selected",
+    disabled && "list-item--disabled",
+    onClick && !disabled && "list-item--interactive",
+    className
+  ].filter(Boolean).join(" ");
+  const handleClick = () => {
+    if (!disabled && onClick) {
+      onClick();
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (!disabled && onClick && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      onClick();
+    }
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: classes,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick && !disabled ? 0 : void 0,
+      "aria-selected": selected,
+      "aria-disabled": disabled,
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx4("div", { className: "list-item__icon", children: /* @__PURE__ */ jsx4(Icon, { name: icon, size: 20 }) }),
+        /* @__PURE__ */ jsxs2("div", { className: "list-item__content", children: [
+          category && /* @__PURE__ */ jsx4("div", { className: "list-item__category", children: category }),
+          /* @__PURE__ */ jsx4("div", { children })
+        ] }),
+        selected && /* @__PURE__ */ jsx4("div", { className: "list-item__indicator", children: /* @__PURE__ */ jsx4(Icon, { name: LIST_ICONS.selected, size: 16 }) })
+      ]
+    }
+  );
+};
+var List = ({ children, className = "", ...props }) => {
+  const classes = ["list", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx4("div", { className: classes, role: "list", ...props, children });
+};
+
+// src/components/select/Select.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var Select = ({
+  options,
+  value,
+  onChange,
+  label,
+  placeholder = "Select an option",
+  helperText,
+  error,
+  disabled = false,
+  fullWidth = false,
+  size = "md",
+  className = "",
+  id
+}) => {
+  const [isOpen, setIsOpen] = React2.useState(false);
+  const selectId = id || `select-${React2.useId()}`;
+  const selectedOption = options.find((opt) => opt.value === value);
+  const handleSelect = (optionValue) => {
+    onChange?.(optionValue);
+    setIsOpen(false);
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setIsOpen(!isOpen);
+    } else if (e.key === "Escape") {
+      setIsOpen(false);
+    } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      if (!isOpen) {
+        setIsOpen(true);
+      }
+    }
+  };
+  const containerClasses = [
+    "select-container",
+    fullWidth && "select-container--full-width",
+    className
+  ].filter(Boolean).join(" ");
+  const triggerClasses = [
+    "select__trigger",
+    `select__trigger--${size}`,
+    error && "select__trigger--error",
+    disabled && "select__trigger--disabled",
+    isOpen && "select__trigger--open"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs3("div", { className: containerClasses, children: [
+    label && /* @__PURE__ */ jsx5("label", { htmlFor: selectId, className: "select__label", children: label }),
+    /* @__PURE__ */ jsx5(
+      Popover,
+      {
+        trigger: /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            id: selectId,
+            type: "button",
+            className: triggerClasses,
+            onClick: () => !disabled && setIsOpen(!isOpen),
+            onKeyDown: handleKeyDown,
+            disabled,
+            "aria-haspopup": "listbox",
+            "aria-expanded": isOpen,
+            "aria-labelledby": label ? `${selectId}-label` : void 0,
+            "aria-describedby": error ? `${selectId}-error` : helperText ? `${selectId}-helper` : void 0,
+            "aria-invalid": error ? "true" : "false",
+            children: [
+              /* @__PURE__ */ jsxs3("span", { className: "select__trigger-content", children: [
+                selectedOption?.icon && /* @__PURE__ */ jsx5(
+                  Icon,
+                  {
+                    name: selectedOption.icon,
+                    size: size === "sm" ? 16 : size === "lg" ? 24 : 20
+                  }
+                ),
+                /* @__PURE__ */ jsx5("span", { className: "select__trigger-text", children: selectedOption ? selectedOption.label : placeholder })
+              ] }),
+              /* @__PURE__ */ jsx5(
+                Icon,
+                {
+                  name: "flowbite:chevron-down-outline",
+                  size: size === "sm" ? 16 : size === "lg" ? 24 : 20,
+                  className: "select__trigger-icon"
+                }
+              )
+            ]
+          }
+        ),
+        isOpen,
+        onToggle: () => !disabled && setIsOpen(!isOpen),
+        placement: "bottom",
+        children: /* @__PURE__ */ jsx5("div", { className: "select__dropdown scrollable", role: "listbox", children: /* @__PURE__ */ jsx5(List, { children: options.map((option) => /* @__PURE__ */ jsx5(
+          ListItem,
+          {
+            icon: option.icon,
+            selected: option.value === value,
+            disabled: option.disabled,
+            onClick: () => !option.disabled && handleSelect(option.value),
+            role: "option",
+            "aria-selected": option.value === value,
+            children: option.label
+          },
+          option.value
+        )) }) })
+      }
+    ),
+    error && /* @__PURE__ */ jsx5("p", { id: `${selectId}-error`, className: "select__message select__message--error", children: error }),
+    helperText && !error && /* @__PURE__ */ jsx5("p", { id: `${selectId}-helper`, className: "select__message", children: helperText })
+  ] });
+};
+
+// src/components/button/button.tsx
+import React3 from "react";
+import { Button as AriakitButton } from "@ariakit/react";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var Button = React3.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__ */ jsxs4(Fragment2, { children: [
+      isLoading && /* @__PURE__ */ jsx6("span", { className: "btn__spinner" }),
+      startIcon && (isLoading ? /* @__PURE__ */ jsx6("span", { className: "btn__icon-placeholder", style: { width: iconSize, height: iconSize } }) : /* @__PURE__ */ jsx6(Icon, { name: startIcon, size: iconSize, className: "btn__icon" })),
+      !iconOnly && children,
+      endIcon && /* @__PURE__ */ jsx6(Icon, { name: endIcon, size: iconSize, className: "btn__icon" })
+    ] });
+    const handleClick = (e) => {
+      if (href && !isLoading && !disabled) {
+        window.location.href = href;
+      }
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ jsx6(
+      AriakitButton,
+      {
+        ref,
+        disabled: disabled || isLoading,
+        className: buttonClasses,
+        onClick: handleClick,
+        ...props,
+        children: buttonContent
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/dialog/Dialog.tsx
+import * as React21 from "react";
+import { createPortal as createPortal3 } from "react-dom";
+
+// src/components/_shared/Backdrop.tsx
+import * as React4 from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Backdrop = React4.forwardRef(
+  ({ className = "", blur = true, style, ...props }, ref) => {
+    return /* @__PURE__ */ jsx7(
+      "div",
+      {
+        ref,
+        className: `backdrop ${blur ? "backdrop--blur" : ""} ${className}`,
+        style,
+        "aria-hidden": "true",
+        ...props
+      }
+    );
+  }
+);
+Backdrop.displayName = "Backdrop";
+
+// src/components/_shared/Thumb.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+
+// src/components/_shared/HeadingAnchor.tsx
+import { useState as useState7, useMemo } from "react";
+
+// 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 React5 from "react";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var InputField = React5.forwardRef(
+  ({
+    type = "text",
+    label,
+    helperText,
+    error,
+    icon,
+    iconRight,
+    fullWidth = false,
+    size = "md",
+    className = "",
+    disabled,
+    id,
+    onRightIconClick,
+    ...props
+  }, ref) => {
+    const inputId = id || `input-${React5.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__ */ jsxs6("div", { className: containerClasses, children: [
+      label && /* @__PURE__ */ jsx9("label", { htmlFor: inputId, className: "input__label", children: label }),
+      /* @__PURE__ */ jsxs6("div", { className: "input__wrapper", children: [
+        icon && /* @__PURE__ */ jsx9("span", { className: "input__icon input__icon--left", "aria-hidden": "true", children: /* @__PURE__ */ jsx9(Icon, { name: icon, size: 16 }) }),
+        /* @__PURE__ */ jsx9(
+          "input",
+          {
+            ref,
+            type,
+            id: inputId,
+            className: inputClasses,
+            disabled,
+            ...props
+          }
+        ),
+        iconRight && /* @__PURE__ */ jsx9(
+          "button",
+          {
+            type: "button",
+            className: "input__icon input__icon--right",
+            onClick: onRightIconClick,
+            tabIndex: -1,
+            "aria-label": "Icon action",
+            children: /* @__PURE__ */ jsx9(Icon, { name: iconRight, size: 16 })
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsx9("p", { className: "input__message input__message--error", children: error }),
+      helperText && !error && /* @__PURE__ */ jsx9("p", { className: "input__message", children: helperText })
+    ] });
+  }
+);
+
+// src/components/input/DatePicker.tsx
+import * as React6 from "react";
+import { jsx as jsx10, jsxs as jsxs7 } 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__ */ jsxs7("div", { className: "date-picker", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "date-picker__header", children: [
+      /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          className: "date-picker__nav",
+          onClick: handlePrevMonth,
+          disabled,
+          "aria-label": "Previous month",
+          children: "\u2039"
+        }
+      ),
+      /* @__PURE__ */ jsxs7("div", { className: "date-picker__title", children: [
+        /* @__PURE__ */ jsx10(
+          "select",
+          {
+            className: "date-picker__select",
+            value: currentMonth,
+            onChange: (e) => setCurrentMonth(Number(e.target.value)),
+            disabled,
+            children: MONTHS.map((month, idx) => /* @__PURE__ */ jsx10("option", { value: idx, children: month }, month))
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          "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__ */ jsx10("option", { value: year, children: year }, year))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          className: "date-picker__nav",
+          onClick: handleNextMonth,
+          disabled,
+          "aria-label": "Next month",
+          children: "\u203A"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx10("div", { className: "date-picker__weekdays", children: DAYS_OF_WEEK.map((day) => /* @__PURE__ */ jsx10("div", { className: "date-picker__weekday", children: day }, day)) }),
+    /* @__PURE__ */ jsx10("div", { className: "date-picker__days", children: days.map((day, idx) => /* @__PURE__ */ jsx10(
+      "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 jsx11, jsxs as jsxs8 } 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__ */ jsxs8("div", { className: "time-picker__column", children: [
+    /* @__PURE__ */ jsx11("div", { className: "time-picker__label", children: label }),
+    /* @__PURE__ */ jsx11("div", { className: "time-picker__scroll scrollable", ref: columnRef, children: items.map((item) => /* @__PURE__ */ jsx11(
+      "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__ */ jsxs8("div", { className: "time-picker", children: [
+    /* @__PURE__ */ jsx11(
+      TimeColumn,
+      {
+        label: "Hours",
+        value: hours,
+        max: 23,
+        field: "hours",
+        step: 1,
+        disabled,
+        onChange: handleChange
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      TimeColumn,
+      {
+        label: "Minutes",
+        value: minutes,
+        max: 59,
+        field: "minutes",
+        step: minuteStep,
+        disabled,
+        onChange: handleChange
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      TimeColumn,
+      {
+        label: "Seconds",
+        value: seconds,
+        max: 59,
+        field: "seconds",
+        step: 1,
+        disabled,
+        onChange: handleChange
+      }
+    ),
+    showMilliseconds && /* @__PURE__ */ jsx11(
+      TimeColumn,
+      {
+        label: "ms",
+        value: milliseconds,
+        max: 999,
+        field: "milliseconds",
+        step: 1,
+        disabled,
+        onChange: handleChange
+      }
+    )
+  ] });
+};
+
+// src/components/input/Input.tsx
+import { jsx as jsx12, jsxs as jsxs9 } 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__ */ jsx12(
+        InputField,
+        {
+          ref: ref || inputRef,
+          type: actualType,
+          label,
+          helperText,
+          error,
+          icon: leftIcon,
+          iconRight: rightIconName,
+          onRightIconClick: handleRightIconClick,
+          fullWidth,
+          size,
+          className,
+          disabled,
+          id,
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs9("div", { className: `input-container ${fullWidth ? "input-container--full-width" : ""} ${className}`.trim(), children: [
+      label && /* @__PURE__ */ jsx12("label", { htmlFor: id, className: "input__label", children: label }),
+      /* @__PURE__ */ jsx12(
+        Popover,
+        {
+          trigger: /* @__PURE__ */ jsx12(
+            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__ */ jsxs9("div", { style: { padding: "1rem" }, children: [
+            (type === "date" || type === "datetime-local") && /* @__PURE__ */ jsx12(
+              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__ */ jsx12(
+              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__ */ jsx12("p", { className: "input__message input__message--error", children: error }),
+      helperText && !error && /* @__PURE__ */ jsx12("p", { className: "input__message", children: helperText })
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+// src/components/input/InputText.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var InputText = React9.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx13(Input, { ref, ...props, type: "text" });
+});
+InputText.displayName = "InputText";
+
+// src/components/input/InputEmail.tsx
+import React10 from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var InputEmail = React10.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx14(Input, { ref, ...props, type: "email" });
+});
+InputEmail.displayName = "InputEmail";
+
+// src/components/input/InputPassword.tsx
+import React11 from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var InputPassword = React11.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx15(Input, { ref, ...props, type: "password" });
+});
+InputPassword.displayName = "InputPassword";
+
+// src/components/input/InputSearch.tsx
+import React12 from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var InputSearch = React12.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx16(Input, { ref, ...props, type: "search" });
+});
+InputSearch.displayName = "InputSearch";
+
+// src/components/input/InputTel.tsx
+import React13 from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var InputTel = React13.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx17(Input, { ref, ...props, type: "tel" });
+});
+InputTel.displayName = "InputTel";
+
+// src/components/input/InputUrl.tsx
+import React14 from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var InputUrl = React14.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx18(Input, { ref, ...props, type: "url" });
+});
+InputUrl.displayName = "InputUrl";
+
+// src/components/input/InputNumber.tsx
+import React15 from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var InputNumber = React15.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx19(Input, { ref, ...props, type: "number" });
+});
+InputNumber.displayName = "InputNumber";
+
+// src/components/input/InputDate.tsx
+import React16 from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var InputDate = React16.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx20(Input, { ref, ...props, type: "date" });
+});
+InputDate.displayName = "InputDate";
+
+// src/components/input/InputTime.tsx
+import React17 from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var InputTime = React17.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx21(Input, { ref, ...props, type: "time" });
+});
+InputTime.displayName = "InputTime";
+
+// src/components/input/InputDateTime.tsx
+import React18 from "react";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var InputDateTime = React18.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx22(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 jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
+
+// src/components/_shared/HeadingAnchor.tsx
+import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
+
+// src/components/dialog/Dialog.tsx
+import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
+var Dialog = ({
+  open,
+  onClose,
+  title,
+  children,
+  size = "md",
+  footer,
+  showCloseButton = true,
+  closeOnBackdropClick = true,
+  closeOnEscape = true,
+  className = "",
+  ariaLabel,
+  ariaDescribedBy
+}) => {
+  const dialogRef = React21.useRef(null);
+  React21.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]);
+  React21.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]);
+  React21.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__ */ jsxs12("div", { className: "dialog__portal", children: [
+    /* @__PURE__ */ jsx25(Backdrop, { onClick: handleBackdropClick, "data-enter": "" }),
+    /* @__PURE__ */ jsxs12(
+      "div",
+      {
+        ref: dialogRef,
+        className: `dialog dialog--${size} ${className}`,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": ariaLabel || title,
+        "aria-describedby": ariaDescribedBy,
+        children: [
+          (title || showCloseButton) && /* @__PURE__ */ jsxs12("div", { className: "dialog__header", children: [
+            title && /* @__PURE__ */ jsx25("h2", { className: "dialog__title", children: title }),
+            showCloseButton && /* @__PURE__ */ jsx25(
+              Button,
+              {
+                variant: "ghost",
+                className: "dialog__close",
+                startIcon: ACTION_ICONS.close,
+                iconOnly: true,
+                onClick: onClose,
+                "aria-label": "Close dialog"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx25("div", { className: "dialog__content scrollable", children }),
+          footer && /* @__PURE__ */ jsx25("div", { className: "dialog__footer", children: footer })
+        ]
+      }
+    )
+  ] });
+  return createPortal3(dialogContent, document.body);
+};
+
+// src/components/textarea/RichTextarea.tsx
+import { Fragment as Fragment5, jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
+var defaultToolbarOptions = [
+  "bold",
+  "italic",
+  "underline",
+  "link",
+  "unorderedList",
+  "orderedList"
+];
+var iconMap = {
+  bold: "bold",
+  italic: "italic",
+  underline: "underline",
+  strikethrough: "strikethrough",
+  link: "link",
+  unlink: "link-slash",
+  orderedList: "numbered-list",
+  unorderedList: "list-bullet",
+  code: "code-bracket",
+  blockquote: "quote",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3"
+};
+var headingOptions = [
+  { value: "p", label: "Normal" },
+  { value: "h1", label: "Heading 1" },
+  { value: "h2", label: "Heading 2" },
+  { value: "h3", label: "Heading 3" }
+];
+var defaultSanitizer = (html) => {
+  return DOMPurify.sanitize(html, {
+    ALLOWED_TAGS: [
+      "b",
+      "i",
+      "u",
+      "s",
+      "strong",
+      "em",
+      "a",
+      "ul",
+      "ol",
+      "li",
+      "p",
+      "br",
+      "code",
+      "pre",
+      "blockquote",
+      "h1",
+      "h2",
+      "h3"
+    ],
+    ALLOWED_ATTR: ["href", "target", "rel"]
+  });
+};
+var RichTextarea = React22.forwardRef(
+  ({
+    value,
+    defaultValue,
+    onChange,
+    onSelectionChange,
+    placeholder = "Enter text...",
+    toolbarOptions = defaultToolbarOptions,
+    showTopToolbar = false,
+    readOnly = false,
+    disabled = false,
+    sanitizeHTML = defaultSanitizer,
+    onPaste,
+    ariaLabel,
+    ariaDescribedBy,
+    maxLines,
+    className = "",
+    style,
+    onBlur,
+    onFocus
+  }, ref) => {
+    const editorRef = React22.useRef(null);
+    const [internalHTML, setInternalHTML] = React22.useState(
+      sanitizeHTML(defaultValue || "")
+    );
+    const [showToolbar, setShowToolbar] = React22.useState(false);
+    const [toolbarPosition, setToolbarPosition] = React22.useState({
+      top: 0,
+      left: 0
+    });
+    const [activeFormats, setActiveFormats] = React22.useState(/* @__PURE__ */ new Set());
+    const [currentHeading, setCurrentHeading] = React22.useState("p");
+    const [showLinkDialog, setShowLinkDialog] = React22.useState(false);
+    const [linkUrl, setLinkUrl] = React22.useState("");
+    const [savedRange, setSavedRange] = React22.useState(null);
+    const [showLinkTooltip, setShowLinkTooltip] = React22.useState(false);
+    const [tooltipPosition, setTooltipPosition] = React22.useState({ x: 0, y: 0 });
+    const [isHoldingCtrl, setIsHoldingCtrl] = React22.useState(false);
+    const [shouldScroll, setShouldScroll] = React22.useState(false);
+    const isControlled = value !== void 0;
+    const currentHTML = isControlled ? value : internalHTML;
+    React22.useImperativeHandle(ref, () => editorRef.current);
+    React22.useEffect(() => {
+      if (isControlled && editorRef.current) {
+        const sanitized = sanitizeHTML(value || "");
+        if (editorRef.current.innerHTML !== sanitized) {
+          editorRef.current.innerHTML = sanitized;
+        }
+      }
+    }, [value, isControlled, sanitizeHTML]);
+    React22.useEffect(() => {
+      if (!isControlled && editorRef.current && defaultValue) {
+        editorRef.current.innerHTML = sanitizeHTML(defaultValue);
+      }
+    }, []);
+    React22.useEffect(() => {
+      const handleGlobalKeyDown = (event) => {
+        const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+        const modKey = isMac ? event.metaKey : event.ctrlKey;
+        if (modKey && !isHoldingCtrl) {
+          setIsHoldingCtrl(true);
+        }
+      };
+      const handleGlobalKeyUp = (event) => {
+        const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+        const modKey = isMac ? event.metaKey : event.ctrlKey;
+        if (!modKey && isHoldingCtrl) {
+          setIsHoldingCtrl(false);
+        }
+      };
+      document.addEventListener("keydown", handleGlobalKeyDown);
+      document.addEventListener("keyup", handleGlobalKeyUp);
+      return () => {
+        document.removeEventListener("keydown", handleGlobalKeyDown);
+        document.removeEventListener("keyup", handleGlobalKeyUp);
+      };
+    }, [isHoldingCtrl]);
+    React22.useEffect(() => {
+      if (!maxLines || !editorRef.current) return;
+      const calculateHeight = () => {
+        const editor = editorRef.current;
+        if (!editor) return;
+        const computedStyle = window.getComputedStyle(editor);
+        const lineHeight = parseFloat(computedStyle.lineHeight) || 1.2 * parseFloat(computedStyle.fontSize);
+        const maxHeight = maxLines * lineHeight;
+        const contentHeight = editor.scrollHeight;
+        setShouldScroll(contentHeight > maxHeight);
+        if (maxLines) {
+          editor.style.maxHeight = `${maxHeight}px`;
+        }
+      };
+      calculateHeight();
+      const handleResize = () => calculateHeight();
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }, [maxLines, currentHTML]);
+    const execCommand = (command, value2 = null) => {
+      document.execCommand(command, false, value2 || void 0);
+      editorRef.current?.focus();
+      updateActiveFormats();
+      handleContentChange();
+    };
+    const applyHeading = (headingTag) => {
+      if (headingTag === "p") {
+        execCommand("formatBlock", "<p>");
+      } else {
+        execCommand("formatBlock", `<${headingTag}>`);
+      }
+      setCurrentHeading(headingTag);
+    };
+    const handleInput = () => {
+      handleContentChange();
+    };
+    const handleContentChange = () => {
+      if (!editorRef.current) return;
+      const html = editorRef.current.innerHTML;
+      const sanitized = sanitizeHTML(html);
+      if (isControlled) {
+        onChange?.(sanitized);
+      } else {
+        setInternalHTML(sanitized);
+        onChange?.(sanitized);
+      }
+    };
+    const handlePaste = (event) => {
+      if (onPaste && onPaste(event)) {
+        return;
+      }
+      event.preventDefault();
+      const text = event.clipboardData.getData("text/html") || event.clipboardData.getData("text/plain");
+      const sanitized = sanitizeHTML(text);
+      document.execCommand("insertHTML", false, sanitized);
+      handleContentChange();
+    };
+    const handleKeyDown = (event) => {
+      const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+      const modKey = isMac ? event.metaKey : event.ctrlKey;
+      if (modKey) {
+        switch (event.key.toLowerCase()) {
+          case "b":
+            event.preventDefault();
+            execCommand("bold");
+            break;
+          case "i":
+            event.preventDefault();
+            execCommand("italic");
+            break;
+          case "u":
+            event.preventDefault();
+            execCommand("underline");
+            break;
+          case "k":
+            event.preventDefault();
+            handleLinkCommand();
+            break;
+          default:
+            break;
+        }
+      }
+      if (event.key === "Escape") {
+        setShowToolbar(false);
+      }
+    };
+    const handleLinkCommand = () => {
+      const selection = window.getSelection();
+      if (selection && selection.rangeCount > 0) {
+        setSavedRange(selection.getRangeAt(0).cloneRange());
+      } else {
+        setSavedRange(null);
+      }
+      setShowLinkDialog(true);
+    };
+    const handleLinkSubmit = () => {
+      if (linkUrl) {
+        const selection = window.getSelection();
+        if (selection && savedRange) {
+          try {
+            selection.removeAllRanges();
+            selection.addRange(savedRange);
+          } catch (e) {
+          }
+        }
+        const currentSelection = window.getSelection();
+        if (currentSelection && !currentSelection.isCollapsed) {
+          execCommand("createLink", linkUrl);
+        } else {
+          execCommand("insertHTML", `<a href="${linkUrl.replace(/"/g, "&quot;")}" target="_blank" rel="noopener noreferrer">${linkUrl}</a>`);
+        }
+        setLinkUrl("");
+        setSavedRange(null);
+      }
+      setShowLinkDialog(false);
+    };
+    const handleLinkCancel = () => {
+      setLinkUrl("");
+      setSavedRange(null);
+      setShowLinkDialog(false);
+    };
+    const handleSelectionChange = () => {
+      const selection = window.getSelection();
+      onSelectionChange?.(selection);
+      if (!selection || selection.isCollapsed) {
+        setShowToolbar(false);
+        return;
+      }
+      const range = selection.getRangeAt(0);
+      if (!editorRef.current?.contains(range.commonAncestorContainer)) {
+        setShowToolbar(false);
+        return;
+      }
+      updateActiveFormats();
+      updateToolbarPosition(range);
+      setShowToolbar(true);
+    };
+    const updateToolbarPosition = (range) => {
+      const rect = range.getBoundingClientRect();
+      const editorRect = editorRef.current?.getBoundingClientRect();
+      if (!editorRect) return;
+      setToolbarPosition({
+        top: rect.top - editorRect.top - 48,
+        // 48px above selection
+        left: rect.left - editorRect.left + rect.width / 2
+      });
+    };
+    const updateActiveFormats = () => {
+      const formats = /* @__PURE__ */ new Set();
+      if (document.queryCommandState("bold")) formats.add("bold");
+      if (document.queryCommandState("italic")) formats.add("italic");
+      if (document.queryCommandState("underline")) formats.add("underline");
+      if (document.queryCommandState("strikeThrough"))
+        formats.add("strikethrough");
+      if (document.queryCommandState("insertOrderedList"))
+        formats.add("orderedList");
+      if (document.queryCommandState("insertUnorderedList"))
+        formats.add("unorderedList");
+      setActiveFormats(formats);
+    };
+    const handleEditorFocus = (event) => {
+      onFocus?.(event);
+      document.addEventListener("selectionchange", handleSelectionChange);
+    };
+    const handleEditorBlur = (event) => {
+      setTimeout(() => {
+        const activeElement = document.activeElement;
+        const isToolbarClick = activeElement?.closest(".rich-textarea__toolbar");
+        if (!isToolbarClick) {
+          setShowToolbar(false);
+          document.removeEventListener(
+            "selectionchange",
+            handleSelectionChange
+          );
+        }
+      }, 150);
+      onBlur?.(event);
+    };
+    const handleEditorClick = (event) => {
+      const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+      const modKey = isMac ? event.metaKey : event.ctrlKey;
+      if (modKey) {
+        const target = event.target;
+        let linkElement = null;
+        if (target.tagName === "A") {
+          linkElement = target;
+        } else {
+          linkElement = target.closest("a");
+        }
+        if (linkElement && linkElement.href) {
+          event.preventDefault();
+          window.open(linkElement.href, "_blank", "noopener,noreferrer");
+        }
+      }
+    };
+    const handleEditorMouseMove = (event) => {
+      const target = event.target;
+      let linkElement = null;
+      if (target.tagName === "A") {
+        linkElement = target;
+      } else {
+        linkElement = target.closest("a");
+      }
+      if (linkElement && linkElement.href) {
+        const rect = linkElement.getBoundingClientRect();
+        const editorRect = editorRef.current?.getBoundingClientRect();
+        if (editorRect) {
+          setTooltipPosition({
+            x: rect.left - editorRect.left,
+            y: rect.top - editorRect.top + 32
+          });
+          setShowLinkTooltip(true);
+        }
+      } else {
+        setShowLinkTooltip(false);
+      }
+    };
+    const handleEditorMouseLeave = () => {
+      setShowLinkTooltip(false);
+    };
+    const renderToolbarButton = (option) => {
+      const isActive = activeFormats.has(option);
+      const handleClick = () => {
+        switch (option) {
+          case "bold":
+            execCommand("bold");
+            break;
+          case "italic":
+            execCommand("italic");
+            break;
+          case "underline":
+            execCommand("underline");
+            break;
+          case "strikethrough":
+            execCommand("strikeThrough");
+            break;
+          case "link":
+            handleLinkCommand();
+            break;
+          case "unlink":
+            execCommand("unlink");
+            break;
+          case "orderedList":
+            execCommand("insertOrderedList");
+            break;
+          case "unorderedList":
+            execCommand("insertUnorderedList");
+            break;
+          case "code":
+            execCommand("formatBlock", "<pre>");
+            break;
+          case "blockquote":
+            execCommand("formatBlock", "<blockquote>");
+            break;
+          case "h1":
+            execCommand("formatBlock", "<h1>");
+            break;
+          case "h2":
+            execCommand("formatBlock", "<h2>");
+            break;
+          case "h3":
+            execCommand("formatBlock", "<h3>");
+            break;
+          default:
+            break;
+        }
+      };
+      return /* @__PURE__ */ jsx26(
+        "button",
+        {
+          type: "button",
+          className: `rich-textarea__toolbar-button ${isActive ? "rich-textarea__toolbar-button--active" : ""}`,
+          onClick: handleClick,
+          onMouseDown: (e) => e.preventDefault(),
+          "aria-label": option,
+          "aria-pressed": isActive,
+          children: /* @__PURE__ */ jsx26(Icon, { name: `${iconMap[option]}`, size: 16 })
+        },
+        option
+      );
+    };
+    const editorClasses = [
+      "rich-textarea",
+      shouldScroll && "scrollable",
+      disabled && "rich-textarea--disabled",
+      readOnly && "rich-textarea--readonly",
+      className
+    ].filter(Boolean).join(" ");
+    const isEmpty = !currentHTML || currentHTML === "<br>";
+    return /* @__PURE__ */ jsxs13("div", { className: `rich-textarea-container ${showTopToolbar ? "rich-textarea-container--with-top-toolbar" : ""} ${isHoldingCtrl ? "rich-textarea-container--holding-ctrl" : ""}`, style, children: [
+      showTopToolbar && !readOnly && !disabled && /* @__PURE__ */ jsx26(FloatingBar, { position: "top", className: "rich-textarea__top-toolbar", children: /* @__PURE__ */ jsxs13("div", { className: "rich-textarea__top-toolbar-content", children: [
+        /* @__PURE__ */ jsx26(
+          Select,
+          {
+            options: headingOptions,
+            value: currentHeading,
+            onChange: (value2) => applyHeading(value2),
+            placeholder: "Format",
+            className: "rich-textarea__heading-select"
+          }
+        ),
+        /* @__PURE__ */ jsx26("div", { className: "rich-textarea__top-toolbar-buttons", children: toolbarOptions.map((option) => {
+          const isActive = activeFormats.has(option);
+          return /* @__PURE__ */ jsx26(
+            Button,
+            {
+              variant: isActive ? "primary" : "ghost",
+              size: "sm",
+              onClick: () => {
+                switch (option) {
+                  case "bold":
+                    execCommand("bold");
+                    break;
+                  case "italic":
+                    execCommand("italic");
+                    break;
+                  case "underline":
+                    execCommand("underline");
+                    break;
+                  case "strikethrough":
+                    execCommand("strikeThrough");
+                    break;
+                  case "link":
+                    handleLinkCommand();
+                    break;
+                  case "unlink":
+                    execCommand("unlink");
+                    break;
+                  case "orderedList":
+                    execCommand("insertOrderedList");
+                    break;
+                  case "unorderedList":
+                    execCommand("insertUnorderedList");
+                    break;
+                  case "code":
+                    execCommand("formatBlock", "<pre>");
+                    break;
+                  case "blockquote":
+                    execCommand("formatBlock", "<blockquote>");
+                    break;
+                  case "h1":
+                    applyHeading("h1");
+                    break;
+                  case "h2":
+                    applyHeading("h2");
+                    break;
+                  case "h3":
+                    applyHeading("h3");
+                    break;
+                  default:
+                    break;
+                }
+              },
+              onMouseDown: (e) => e.preventDefault(),
+              "aria-label": option,
+              "aria-pressed": isActive,
+              children: /* @__PURE__ */ jsx26(Icon, { name: `${iconMap[option]}`, size: 16 })
+            },
+            option
+          );
+        }) })
+      ] }) }),
+      /* @__PURE__ */ jsx26(
+        "div",
+        {
+          ref: editorRef,
+          className: editorClasses,
+          contentEditable: !disabled && !readOnly,
+          role: "textbox",
+          "aria-label": ariaLabel,
+          "aria-describedby": ariaDescribedBy,
+          "aria-multiline": "true",
+          "aria-readonly": readOnly,
+          "aria-disabled": disabled,
+          onInput: handleInput,
+          onPaste: handlePaste,
+          onKeyDown: handleKeyDown,
+          onClick: handleEditorClick,
+          onMouseMove: handleEditorMouseMove,
+          onMouseLeave: handleEditorMouseLeave,
+          onFocus: handleEditorFocus,
+          onBlur: handleEditorBlur,
+          "data-placeholder": isEmpty ? placeholder : void 0,
+          suppressContentEditableWarning: true
+        }
+      ),
+      showToolbar && !readOnly && !disabled && /* @__PURE__ */ jsx26(
+        "div",
+        {
+          className: "rich-textarea__toolbar",
+          style: {
+            top: `${toolbarPosition.top}px`,
+            left: `${toolbarPosition.left}px`
+          },
+          role: "toolbar",
+          "aria-label": "Text formatting",
+          children: toolbarOptions.map(renderToolbarButton)
+        }
+      ),
+      /* @__PURE__ */ jsx26(
+        Dialog,
+        {
+          open: showLinkDialog,
+          onClose: handleLinkCancel,
+          title: "Insert Link",
+          size: "sm",
+          footer: /* @__PURE__ */ jsxs13(Fragment5, { children: [
+            /* @__PURE__ */ jsx26(Button, { variant: "ghost", onClick: handleLinkCancel, children: "Cancel" }),
+            /* @__PURE__ */ jsx26(Button, { variant: "primary", onClick: handleLinkSubmit, children: "Insert" })
+          ] }),
+          children: /* @__PURE__ */ jsx26(
+            InputText,
+            {
+              label: "URL",
+              value: linkUrl,
+              onChange: (e) => setLinkUrl(e.target.value),
+              placeholder: "https://example.com",
+              autoFocus: true,
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  handleLinkSubmit();
+                }
+              }
+            }
+          )
+        }
+      ),
+      showLinkTooltip && /* @__PURE__ */ jsxs13(
+        "div",
+        {
+          className: "rich-textarea__link-tooltip",
+          style: {
+            position: "absolute",
+            top: `${tooltipPosition.y}px`,
+            left: `${tooltipPosition.x}px`,
+            backgroundColor: "var(--color-bg-1)",
+            color: "var(--color-foreground-1)",
+            padding: "4px 8px",
+            borderRadius: "4px",
+            fontSize: "12px",
+            whiteSpace: "nowrap",
+            boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+            zIndex: 1e3,
+            pointerEvents: "none",
+            border: "1px solid var(--color-border-1)"
+          },
+          children: [
+            navigator.platform.toUpperCase().indexOf("MAC") >= 0 ? "CMD" : "CTRL",
+            " + Click to access URL"
+          ]
+        }
+      )
+    ] });
+  }
+);
+RichTextarea.displayName = "RichTextarea";
+
+// src/components/textarea/Textarea.tsx
+import * as React23 from "react";
+import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+var Textarea = React23.forwardRef(
+  ({
+    label,
+    helperText,
+    error,
+    fullWidth = false,
+    size = "md",
+    className = "",
+    rows = 3,
+    resize = "vertical",
+    style,
+    ...props
+  }, ref) => {
+    const textareaId = React23.useId();
+    const errorId = React23.useId();
+    const helperId = React23.useId();
+    const textareaClasses = [
+      "input-field",
+      "input-field--textarea",
+      `input-field--${size}`,
+      fullWidth && "input-field--full-width",
+      error && "input-field--error",
+      className
+    ].filter(Boolean).join(" ");
+    const containerClasses = [
+      "input-container",
+      fullWidth && "input-container--full-width"
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs14("div", { className: containerClasses, children: [
+      label && /* @__PURE__ */ jsx27("label", { htmlFor: textareaId, className: "input-label", children: label }),
+      /* @__PURE__ */ jsx27("div", { className: "input-field-wrapper", children: /* @__PURE__ */ jsx27(
+        "textarea",
+        {
+          ...props,
+          ref,
+          id: textareaId,
+          rows,
+          className: textareaClasses,
+          style: {
+            resize,
+            ...style
+          },
+          "aria-invalid": !!error,
+          "aria-describedby": [error && errorId, helperText && helperId].filter(Boolean).join(" ") || void 0
+        }
+      ) }),
+      error && /* @__PURE__ */ jsx27("div", { id: errorId, className: "input-error", role: "alert", children: error }),
+      helperText && !error && /* @__PURE__ */ jsx27("div", { id: helperId, className: "input-helper", children: helperText })
+    ] });
+  }
+);
+Textarea.displayName = "Textarea";
+export {
+  RichTextarea,
+  Textarea
+};