@expcat/tigercat-react 1.4.0 → 2.0.0-preview.1

package/dist/{chunk-WFWEMXO7.mjs → chunk-JSBWEK6D.mjs}

@@ -6,7 +6,9 @@ import {
 import {
   classNames as classNames2,
   selectDropdownBaseClasses,
-  selectSearchInputClasses
+  selectSearchInputClasses,
+  selectDoneActionClasses,
+  selectDoneButtonClasses
 } from "@expcat/tigercat-core";
 
 // src/components/Select/state.ts
@@ -31,9 +33,10 @@ var SELECT_KEYS = /* @__PURE__ */ new Set([
   "disabled",
   "placeholder",
   "searchable",
+  "searchValue",
+  "defaultSearchValue",
   "clearable",
-  "noOptionsText",
-  "noDataText",
+  "emptyText",
   "maxTagCount",
   "virtual",
   "remote",
@@ -41,7 +44,7 @@ var SELECT_KEYS = /* @__PURE__ */ new Set([
   "creatable",
   "createOptionText",
   "listHeight",
-  "onSearch",
+  "onSearchChange",
   "onCreate",
   "className",
   "value",
@@ -56,15 +59,18 @@ function useSelectState(props) {
     disabled = false,
     placeholder = "Select an option",
     searchable = false,
+    searchValue,
+    defaultSearchValue = "",
     clearable = true,
-    noOptionsText,
-    noDataText,
+    emptyText,
     maxTagCount,
     remote = false,
     searchDebounce = 0,
     creatable = false,
     createOptionText = "Create",
-    onSearch,
+    virtual = false,
+    listHeight = 256,
+    onSearchChange,
     onCreate,
     className,
     value,
@@ -85,7 +91,8 @@ function useSelectState(props) {
   const instanceId = useId();
   const listboxId = `tiger-select-listbox-${instanceId}`;
   const [isOpen, setIsOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
+  const [uncontrolledSearchValue, setUncontrolledSearchValue] = useState(defaultSearchValue);
+  const searchQuery = searchValue ?? uncontrolledSearchValue;
   const [activeIndex, setActiveIndex] = useState(-1);
   const [createdOptions, setCreatedOptions] = useState([]);
   const dropdownRef = useRef(null);
@@ -158,7 +165,7 @@ function useSelectState(props) {
   };
   const closeDropdown = () => {
     setIsOpen(false);
-    setSearchQuery("");
+    updateSearchValue("");
     setActiveIndex(-1);
   };
   const toggleDropdown = () => {
@@ -211,18 +218,25 @@ function useSelectState(props) {
     onChange?.(void 0);
   };
   const handleSearchInput = (event) => {
-    const query = event.target.value;
-    setSearchQuery(query);
-    searchDebouncerRef.current?.schedule(query);
+    updateSearchValue(event.target.value);
   };
+  const updateSearchValue = useCallback(
+    (query) => {
+      if (searchValue === void 0) {
+        setUncontrolledSearchValue(query);
+      }
+      searchDebouncerRef.current?.schedule(query);
+    },
+    [searchValue]
+  );
   useEffect(() => {
     searchDebouncerRef.current?.cancel();
     searchDebouncerRef.current = createSelectSearchDebouncer({
       delay: searchDebounce,
-      onSearch: (query) => onSearch?.(query)
+      onSearchChange: (query) => onSearchChange?.(query)
     });
     return () => searchDebouncerRef.current?.cancel();
-  }, [onSearch, searchDebounce]);
+  }, [onSearchChange, searchDebounce]);
   const handleTriggerKeyDown = (event) => {
     if (disabled) {
       return;
@@ -421,24 +435,23 @@ function useSelectState(props) {
     searchInputRef,
     isMultiple,
     size,
+    virtual,
+    listHeight,
     disabled,
     placeholder,
     searchable,
     clearable,
-    noDataText: resolveLocaleText(
-      "No options available",
-      noDataText,
-      mergedLocale?.common?.emptyText
-    ),
-    noOptionsText: resolveLocaleText(
-      "No options found",
-      noOptionsText,
-      mergedLocale?.common?.emptyText
-    ),
+    emptyText: resolveLocaleText("No options found", emptyText, mergedLocale?.common?.emptyText),
     createOptionText,
     className,
     divProps,
     searchPlaceholder: resolveLocaleText("Search...", mergedLocale?.common?.searchPlaceholder),
+    clearAriaLabel: resolveLocaleText("Clear selection", mergedLocale?.common?.clearText),
+    doneText: resolveLocaleText(
+      "Done",
+      mergedLocale?.common?.okText,
+      mergedLocale?.common?.closeText
+    ),
     filteredOptions,
     flatSelectableOptions,
     creatableOption,
@@ -451,6 +464,7 @@ function useSelectState(props) {
     isSelected,
     selectOption,
     clearSelection,
+    closeDropdown,
     toggleDropdown,
     handleSearchInput,
     handleTriggerKeyDown,
@@ -460,12 +474,16 @@ function useSelectState(props) {
 }
 
 // src/components/Select/render-option.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 import {
   getSelectOptionClasses,
   selectGroupLabelClasses,
   selectEmptyStateClasses,
   isOptionGroup,
-  getCreateSelectOptionLabel
+  getPickerOptionAria,
+  getCreateSelectOptionLabel,
+  getSelectVirtualItemHeight,
+  fixedSizeStrategy
 } from "@expcat/tigercat-core";
 
 // src/components/Select/icons.tsx
@@ -513,14 +531,16 @@ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function renderOption(ctx, option, index, displayLabel = option.label) {
   const optionSelected = ctx.isSelected(option);
   const optionActive = index === ctx.activeIndex;
+  const optionAria = getPickerOptionAria({
+    selected: optionSelected,
+    disabled: !!option.disabled
+  });
   return /* @__PURE__ */ jsx2(
     "div",
     {
       id: ctx.getOptionId(index),
       "data-option-index": index,
-      role: "option",
-      "aria-selected": optionSelected,
-      "aria-disabled": option.disabled ? true : void 0,
+      ...optionAria,
       tabIndex: optionActive ? 0 : -1,
       className: getSelectOptionClasses(optionSelected, !!option.disabled, ctx.size),
       onMouseEnter: () => {
@@ -537,9 +557,52 @@ function renderOption(ctx, option, index, displayLabel = option.label) {
     option.value
   );
 }
+var VirtualSelectOptions = ({
+  ctx,
+  options
+}) => {
+  const itemHeight = getSelectVirtualItemHeight(ctx.size);
+  const containerRef = useRef2(null);
+  const [scrollTop, setScrollTop] = useState2(0);
+  const strategy = fixedSizeStrategy(itemHeight);
+  const { startIndex, endIndex, totalHeight } = strategy.getRange(
+    scrollTop,
+    ctx.listHeight,
+    options.length,
+    5
+  );
+  useEffect2(() => {
+    const el = containerRef.current;
+    if (!el || ctx.activeIndex < 0) return;
+    const top = ctx.activeIndex * itemHeight;
+    if (top < el.scrollTop) el.scrollTop = top;
+    else if (top + itemHeight > el.scrollTop + ctx.listHeight)
+      el.scrollTop = top + itemHeight - ctx.listHeight;
+  }, [ctx.activeIndex, itemHeight, ctx.listHeight]);
+  const visible = [];
+  for (let i = startIndex; i <= endIndex; i++) {
+    visible.push(renderOption(ctx, options[i], i));
+  }
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref: containerRef,
+      "data-tiger-select-virtual": "",
+      style: { maxHeight: `${ctx.listHeight}px`, overflowY: "auto" },
+      onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+      children: /* @__PURE__ */ jsx2("div", { style: { height: `${totalHeight}px`, position: "relative" }, children: /* @__PURE__ */ jsx2("div", { style: { transform: `translateY(${startIndex * itemHeight}px)` }, children: visible }) })
+    }
+  );
+};
 function renderOptions(ctx) {
   if (!ctx.hasOptions && !ctx.creatableOption) {
-    return /* @__PURE__ */ jsx2("div", { className: selectEmptyStateClasses, children: ctx.optionsLength === 0 ? ctx.noDataText : ctx.noOptionsText });
+    return /* @__PURE__ */ jsx2("div", { className: selectEmptyStateClasses, children: ctx.emptyText });
+  }
+  const hasGroups = ctx.filteredOptions.some(isOptionGroup);
+  if (ctx.virtual && !hasGroups) {
+    const flat = ctx.filteredOptions.filter((o) => !isOptionGroup(o));
+    const all = ctx.creatableOption ? [...flat, ctx.creatableOption] : flat;
+    return /* @__PURE__ */ jsx2(VirtualSelectOptions, { ctx, options: all });
   }
   let optionIndex = -1;
   const optionNodes = ctx.filteredOptions.map((item) => {
@@ -574,12 +637,12 @@ import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var Select = (props) => {
   const ctx = useSelectState(props);
   return /* @__PURE__ */ jsxs2("div", { ...ctx.divProps, className: ctx.containerClasses, children: [
-    /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsx3(
       "button",
       {
         ref: ctx.triggerRef,
         type: "button",
-        className: ctx.triggerClasses,
+        className: classNames2(ctx.triggerClasses, "pr-16"),
         disabled: ctx.disabled,
         onClick: ctx.toggleDropdown,
         onKeyDown: ctx.handleTriggerKeyDown,
@@ -588,33 +651,32 @@ var Select = (props) => {
         "aria-controls": ctx.listboxId,
         "aria-activedescendant": ctx.isOpen && ctx.activeIndex >= 0 ? ctx.getOptionId(ctx.activeIndex) : void 0,
         "data-state": ctx.isOpen ? "open" : "closed",
-        children: [
-          /* @__PURE__ */ jsx3(
-            "span",
-            {
-              className: classNames2(
-                "flex-1 text-left truncate",
-                ctx.displayText === ctx.placeholder && "text-[var(--tiger-select-placeholder,var(--tiger-text-muted,#9ca3af))]"
-              ),
-              children: ctx.displayText
-            }
-          ),
-          /* @__PURE__ */ jsxs2("span", { className: "flex items-center gap-1", children: [
-            ctx.showClearButton && /* @__PURE__ */ jsx3(
-              "span",
-              {
-                className: "inline-flex",
-                "data-tiger-select-clear": true,
-                "aria-label": "Clear selection",
-                onClick: ctx.clearSelection,
-                children: /* @__PURE__ */ jsx3(SelectClearIcon, {})
-              }
+        children: /* @__PURE__ */ jsx3(
+          "span",
+          {
+            className: classNames2(
+              "flex-1 text-left truncate",
+              ctx.displayText === ctx.placeholder && "text-[var(--tiger-select-placeholder,var(--tiger-text-muted,#9ca3af))]"
             ),
-            /* @__PURE__ */ jsx3("span", { className: classNames2("inline-flex", ctx.isOpen && "rotate-180"), children: /* @__PURE__ */ jsx3(SelectChevronIcon, {}) })
-          ] })
-        ]
+            children: ctx.displayText
+          }
+        )
       }
     ),
+    /* @__PURE__ */ jsxs2("span", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center gap-1", children: [
+      ctx.showClearButton && /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: "pointer-events-auto inline-flex rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tiger-select-ring,var(--tiger-primary,#2563eb))]",
+          "data-tiger-select-clear": true,
+          "aria-label": ctx.clearAriaLabel,
+          onClick: ctx.clearSelection,
+          children: /* @__PURE__ */ jsx3(SelectClearIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx3("span", { className: classNames2("inline-flex", ctx.isOpen && "rotate-180"), "aria-hidden": "true", children: /* @__PURE__ */ jsx3(SelectChevronIcon, {}) })
+    ] }),
     ctx.isOpen && /* @__PURE__ */ jsxs2(
       "div",
       {
@@ -637,7 +699,21 @@ var Select = (props) => {
               onKeyDown: ctx.handleSearchKeyDown
             }
           ),
-          renderOptions(ctx)
+          renderOptions(ctx),
+          /* @__PURE__ */ jsx3("div", { className: selectDoneActionClasses, children: /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: selectDoneButtonClasses,
+              onClick: ctx.closeDropdown,
+              onKeyDown: (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.stopPropagation();
+                }
+              },
+              children: ctx.doneText
+            }
+          ) })
         ]
       }
     )

package/dist/{chunk-SQTOVSDU.mjs → chunk-K6JLLCY7.mjs}

@@ -1,6 +1,6 @@
 import {
   useControlledState
-} from "./chunk-WHYHLUXG.mjs";
+} from "./chunk-MEFARVQI.mjs";
 import {
   useTigerConfig
 } from "./chunk-QAIBQHIO.mjs";
@@ -14,8 +14,8 @@ import {
   getTimePickerRangeTabButtonClasses,
   timePickerFooterClasses,
   timePickerFooterButtonClasses,
-  ClockIconPath,
-  TimePickerCloseIconPath
+  clockSolidIcon20PathD,
+  closeSolidIcon20PathD
 } from "@expcat/tigercat-core";
 
 // src/components/TimePicker/state.ts
@@ -238,7 +238,7 @@ function useTimePickerState(allProps) {
     updateTime(hours24, selectedMinutes, selectedSeconds);
   };
   const updateTime = (hours, minutes, seconds) => {
-    if (!isTimeInRange(hours, minutes, minTime, maxTime)) {
+    if (!isTimeInRange(hours, minutes, minTime, maxTime, seconds)) {
       return;
     }
     let timeString = formatTime(hours, minutes, seconds, showSeconds);
@@ -305,10 +305,13 @@ function useTimePickerState(allProps) {
   };
   const isHourDisabled = (hour) => {
     const hours24 = format === "12" ? to24HourFormat(hour, selectedPeriod) : hour;
-    return !isTimeInRange(hours24, selectedMinutes, minTime, maxTime);
+    return !isTimeInRange(hours24, selectedMinutes, minTime, maxTime, selectedSeconds);
   };
   const isMinuteDisabled = (minute) => {
-    return !isTimeInRange(selectedHours, minute, minTime, maxTime);
+    return !isTimeInRange(selectedHours, minute, minTime, maxTime, selectedSeconds);
+  };
+  const isSecondDisabled = (second) => {
+    return !isTimeInRange(selectedHours, selectedMinutes, minTime, maxTime, second);
   };
   const handleInputClick = () => {
     togglePanel();
@@ -391,7 +394,8 @@ function useTimePickerState(allProps) {
     selectSecond,
     selectPeriod,
     isHourDisabled,
-    isMinuteDisabled
+    isMinuteDisabled,
+    isSecondDisabled
   };
 }
 
@@ -432,7 +436,7 @@ function renderTimePickerMobile(ctx) {
         value: ctx.selectedSeconds,
         "aria-label": ctx.labels.second,
         onChange: (event) => ctx.selectSecond(Number(event.target.value)),
-        children: ctx.secondsList.map((second) => /* @__PURE__ */ jsx("option", { value: second, children: padTwo(second) }, second))
+        children: ctx.secondsList.map((second) => /* @__PURE__ */ jsx("option", { value: second, disabled: ctx.isSecondDisabled(second), children: padTwo(second) }, second))
       }
     ),
     ctx.format === "12" && /* @__PURE__ */ jsxs(
@@ -523,11 +527,13 @@ function renderTimePickerDesktop(ctx) {
       /* @__PURE__ */ jsx2("div", { className: timePickerColumnHeaderClasses, children: ctx.labels.second }),
       /* @__PURE__ */ jsx2("div", { className: timePickerColumnListClasses, children: ctx.secondsList.map((second) => {
         const isSelected = ctx.selectedSeconds === second;
+        const isDisabled = ctx.isSecondDisabled(second);
         return /* @__PURE__ */ jsx2(
           "button",
           {
             type: "button",
-            className: getTimePickerItemClasses(isSelected, false),
+            className: getTimePickerItemClasses(isSelected, isDisabled),
+            disabled: isDisabled,
             onClick: () => ctx.selectSecond(second),
             "data-tiger-timepicker-unit": "second",
             "aria-label": getTimePickerOptionAriaLabel(
@@ -619,7 +625,7 @@ var TimePicker = (allProps) => {
           className: timePickerClearButtonClasses,
           onClick: ctx.clearTime,
           "aria-label": ctx.labels.clear,
-          children: /* @__PURE__ */ jsx4(Icon, { path: TimePickerCloseIconPath, className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx4(Icon, { path: closeSolidIcon20PathD, className: "w-4 h-4" })
         }
       ),
       /* @__PURE__ */ jsx4(
@@ -630,7 +636,7 @@ var TimePicker = (allProps) => {
           disabled: ctx.disabled || ctx.readonly,
           onClick: ctx.togglePanel,
           "aria-label": ctx.labels.toggle,
-          children: /* @__PURE__ */ jsx4(Icon, { path: ClockIconPath, className: "w-5 h-5" })
+          children: /* @__PURE__ */ jsx4(Icon, { path: clockSolidIcon20PathD, className: "w-5 h-5" })
         }
       )
     ] }),

package/dist/{chunk-3EB42WFR.mjs → chunk-KCPGFO5R.mjs}

@@ -14,7 +14,7 @@ import {
   resultExtraClasses,
   getResultColorScheme,
   getResultIconPath,
-  getResultHttpLabel
+  isHttpResultStatus
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Result = ({
@@ -29,7 +29,7 @@ var Result = ({
 }) => {
   const colors = useMemo(() => getResultColorScheme(status), [status]);
   const iconPath = useMemo(() => getResultIconPath(status), [status]);
-  const httpLabel = useMemo(() => getResultHttpLabel(status), [status]);
+  const httpLabel = useMemo(() => isHttpResultStatus(status) ? status : void 0, [status]);
   const wrapperClasses = useMemo(() => classNames(resultBaseClasses, className), [className]);
   const iconContainerCls = useMemo(
     () => classNames(resultIconContainerBaseClasses, colors.iconBg),

package/dist/{chunk-G3PBQ4B4.mjs → chunk-KQ4ZKXXN.mjs}

@@ -15,7 +15,8 @@ var Segmented = ({
   size = "md",
   block = false,
   className,
-  onChange
+  onChange,
+  ...rest
 }) => {
   function handleSelect(opt) {
     if (opt.disabled || disabled) return;
@@ -23,12 +24,59 @@ var Segmented = ({
     onChange?.(opt.value);
   }
   const selectedIndex = options.findIndex((opt) => opt.value === value);
+  const firstEnabledIndex = options.findIndex((opt) => !opt.disabled);
+  const rovingIndex = selectedIndex >= 0 ? selectedIndex : firstEnabledIndex;
+  function focusOption(container, index) {
+    if (!container) return;
+    const els = container.querySelectorAll('[role="radio"]');
+    els[index]?.focus();
+  }
+  function handleKeyDown(e, index) {
+    if (disabled) return;
+    const enabledIdxs = options.reduce((acc, opt, i) => {
+      if (!opt.disabled) acc.push(i);
+      return acc;
+    }, []);
+    if (enabledIdxs.length === 0) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleSelect(options[index]);
+      return;
+    }
+    const pos = enabledIdxs.indexOf(index);
+    let target = null;
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        target = enabledIdxs[(pos + 1 + enabledIdxs.length) % enabledIdxs.length];
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        target = enabledIdxs[(pos - 1 + enabledIdxs.length) % enabledIdxs.length];
+        break;
+      case "Home":
+        target = enabledIdxs[0];
+        break;
+      case "End":
+        target = enabledIdxs[enabledIdxs.length - 1];
+        break;
+      default:
+        return;
+    }
+    if (target == null) return;
+    e.preventDefault();
+    const container = e.currentTarget.closest('[role="radiogroup"]');
+    focusOption(container, target);
+    handleSelect(options[target]);
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ...rest,
       className: classNames(getSegmentedContainerClasses(size, block), className),
       style: getSegmentedContainerStyle(options.length),
       role: "radiogroup",
+      "aria-disabled": disabled || void 0,
       children: [
         /* @__PURE__ */ jsx(
           "div",
@@ -39,7 +87,7 @@ var Segmented = ({
             style: getSegmentedIndicatorStyle(selectedIndex, options.length, size)
           }
         ),
-        options.map((opt) => {
+        options.map((opt, index) => {
           const selected = opt.value === value;
           const isDisabled = !!opt.disabled || disabled;
           return /* @__PURE__ */ jsx(
@@ -52,7 +100,9 @@ var Segmented = ({
               role: "radio",
               "aria-checked": selected,
               "aria-disabled": isDisabled,
+              tabIndex: isDisabled ? -1 : index === rovingIndex ? 0 : -1,
               onClick: () => handleSelect(opt),
+              onKeyDown: (e) => handleKeyDown(e, index),
               children: /* @__PURE__ */ jsx("span", { children: opt.label })
             },
             opt.value

package/dist/{chunk-2L7QEOFD.mjs → chunk-KWVA2DN3.mjs}

@@ -1,6 +1,6 @@
 import {
   useControlledState
-} from "./chunk-WHYHLUXG.mjs";
+} from "./chunk-MEFARVQI.mjs";
 import {
   renderBodyPortal,
   useBodyScrollLock,

package/dist/{chunk-YH57D4AV.mjs → chunk-LAKPYMBZ.mjs}

@@ -62,6 +62,7 @@ var InfiniteScroll = ({
       threshold,
       direction,
       root: containerRef.current,
+      inverse,
       onLoadMore: () => {
         if (!disabled && !loading && hasMore) {
           onLoadMoreRef.current?.();

package/dist/{chunk-6GU5NH5F.mjs → chunk-LBXNMCXN.mjs}

@@ -9,6 +9,8 @@ import {
   countLines,
   generateLineNumbers,
   handleTabKey,
+  getActiveLineIndex,
+  getCodeEditorActiveLineClasses,
   codeEditorTextareaClasses,
   codeEditorHighlightClasses
 } from "@expcat/tigercat-core";
@@ -25,6 +27,7 @@ var CodeEditor = ({
   wordWrap = false,
   minLines = 3,
   maxLines = 0,
+  highlightActiveLine = true,
   disabled = false,
   className,
   style,
@@ -32,6 +35,7 @@ var CodeEditor = ({
   highlighter
 }) => {
   const [internalValue, setInternalValue] = useState(defaultValue);
+  const [activeLine, setActiveLine] = useState(0);
   const textareaRef = useRef(null);
   const code = controlledValue !== void 0 ? controlledValue : internalValue;
   const lines = useMemo(() => code.split("\n"), [code]);
@@ -48,11 +52,17 @@ var CodeEditor = ({
     if (maxLines > 0) s.maxHeight = `${maxLines * lineHeight + 1.5}rem`;
     return s;
   }, [minLines, maxLines, style]);
+  const updateActiveLine = useCallback(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    setActiveLine(getActiveLineIndex(ta.value, ta.selectionStart));
+  }, []);
   const handleInput = useCallback(
     (e) => {
       const val = e.target.value;
       setInternalValue(val);
       onChange?.(val);
+      setActiveLine(getActiveLineIndex(val, e.target.selectionStart));
     },
     [onChange]
   );
@@ -74,27 +84,42 @@ var CodeEditor = ({
     [tabSize, onChange]
   );
   const wrapClass = wordWrap ? "whitespace-pre-wrap break-all" : "";
+  const showActiveLine = highlightActiveLine && !disabled;
+  const activeLineClass = getCodeEditorActiveLineClasses(theme);
   const renderToken = (token, idx) => {
     const cls = getTokenClasses(token.type, theme);
     return cls ? /* @__PURE__ */ jsx("span", { className: cls, children: token.value }, idx) : /* @__PURE__ */ jsx(React.Fragment, { children: token.value }, idx);
   };
   const renderLine = (line, lineIndex) => {
+    const lineClass = classNames(
+      "min-h-[1.625rem]",
+      showActiveLine && lineIndex === activeLine && activeLineClass
+    );
     if (highlighter?.highlightLine) {
       const html = highlighter.highlightLine(line, language, theme) || (line === "" ? "\n" : "");
       return /* @__PURE__ */ jsx(
         "div",
         {
-          className: "min-h-[1.625rem]",
+          className: lineClass,
+          "data-active-line": showActiveLine && lineIndex === activeLine ? "" : void 0,
           dangerouslySetInnerHTML: { __html: html }
         },
         lineIndex
       );
     }
     const tokens = tokenizeLine(line, language);
-    return /* @__PURE__ */ jsxs("div", { className: "min-h-[1.625rem]", children: [
-      tokens.map(renderToken),
-      line === "" ? "\n" : null
-    ] }, lineIndex);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: lineClass,
+        "data-active-line": showActiveLine && lineIndex === activeLine ? "" : void 0,
+        children: [
+          tokens.map(renderToken),
+          line === "" ? "\n" : null
+        ]
+      },
+      lineIndex
+    );
   };
   const blockHtml = highlighter && !highlighter.highlightLine && highlighter.highlightCode ? highlighter.highlightCode(code, language, theme) : null;
   return /* @__PURE__ */ jsx(
@@ -123,6 +148,9 @@ var CodeEditor = ({
               value: code,
               onChange: handleInput,
               onKeyDown: handleKeyDown,
+              onSelect: updateActiveLine,
+              onClick: updateActiveLine,
+              onKeyUp: updateActiveLine,
               readOnly: readOnly || disabled,
               disabled,
               placeholder,