@expcat/tigercat-react 0.0.1

package/dist/chunk-YYKJ63LD.mjs

@@ -0,0 +1,497 @@
+import { useId, useState, useRef, useMemo, useEffect } from 'react';
+import { filterOptions, getSelectTriggerClasses, classNames, selectBaseClasses, selectDropdownBaseClasses, selectSearchInputClasses, selectEmptyStateClasses, isOptionGroup, selectGroupLabelClasses, getSelectOptionClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Select.tsx
+var flattenSelectOptions = (options) => {
+  const all = [];
+  for (const item of options) {
+    if (isOptionGroup(item)) {
+      all.push(...item.options);
+    } else {
+      all.push(item);
+    }
+  }
+  return all;
+};
+var isMultipleSelect = (props) => props.multiple === true;
+var Select = (props) => {
+  const {
+    options = [],
+    size = "md",
+    disabled = false,
+    placeholder = "Select an option",
+    searchable = false,
+    clearable = true,
+    noOptionsText = "No options found",
+    noDataText = "No options available",
+    onSearch,
+    className
+  } = props;
+  const divProps = (({ value: _value, onChange: _onChange, multiple: _multiple, ...rest }) => rest)(
+    props
+  );
+  const instanceId = useId();
+  const listboxId = `tiger-select-listbox-${instanceId}`;
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const dropdownRef = useRef(null);
+  const triggerRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const filteredOptions = useMemo(
+    () => searchable && searchQuery ? filterOptions(options, searchQuery) : options,
+    [options, searchable, searchQuery]
+  );
+  const flatFilteredOptions = useMemo(
+    () => flattenSelectOptions(filteredOptions),
+    [filteredOptions]
+  );
+  const allOptions = useMemo(() => flattenSelectOptions(options), [options]);
+  const displayText = (() => {
+    if (isMultipleSelect(props)) {
+      const value2 = props.value ?? [];
+      if (value2.length === 0) {
+        return placeholder;
+      }
+      const selectedOptions = allOptions.filter((opt) => value2.includes(opt.value));
+      return selectedOptions.map((opt) => opt.label).join(", ");
+    }
+    const value = props.value;
+    if (value === void 0 || value === null || value === "") {
+      return placeholder;
+    }
+    return allOptions.find((opt) => opt.value === value)?.label ?? placeholder;
+  })();
+  const showClearButton = clearable && !disabled && props.value !== void 0 && props.value !== null && props.value !== "" && (!Array.isArray(props.value) || props.value.length > 0);
+  const isSelected = (option) => {
+    if (isMultipleSelect(props)) {
+      return (props.value ?? []).includes(option.value);
+    }
+    return props.value === option.value;
+  };
+  const getOptionId = (index) => `tiger-select-option-${instanceId}-${index}`;
+  const findFirstEnabledIndex = () => flatFilteredOptions.findIndex((opt) => !opt.disabled);
+  const findLastEnabledIndex = () => {
+    for (let i = flatFilteredOptions.length - 1; i >= 0; i--) {
+      if (!flatFilteredOptions[i]?.disabled) {
+        return i;
+      }
+    }
+    return -1;
+  };
+  const findNextEnabledIndex = (current, direction) => {
+    if (flatFilteredOptions.length === 0) {
+      return -1;
+    }
+    const start = current < 0 ? direction === 1 ? 0 : flatFilteredOptions.length - 1 : current + direction;
+    for (let i = start; i >= 0 && i < flatFilteredOptions.length; i += direction) {
+      if (!flatFilteredOptions[i]?.disabled) {
+        return i;
+      }
+    }
+    return current;
+  };
+  const focusOptionAt = (index) => {
+    if (index < 0) {
+      return;
+    }
+    requestAnimationFrame(() => {
+      const el = dropdownRef.current?.querySelector(`[data-option-index="${index}"]`);
+      el?.focus();
+      el?.scrollIntoView({ block: "nearest" });
+    });
+  };
+  const setActiveAndFocus = (index) => {
+    setActiveIndex(index);
+    focusOptionAt(index);
+  };
+  const closeDropdown = () => {
+    setIsOpen(false);
+    setSearchQuery("");
+    setActiveIndex(-1);
+  };
+  const toggleDropdown = () => {
+    if (!disabled) {
+      setIsOpen((prev) => !prev);
+    }
+  };
+  const getActiveOption = () => {
+    if (activeIndex < 0) {
+      return void 0;
+    }
+    return flatFilteredOptions[activeIndex];
+  };
+  const selectActiveOption = () => {
+    const option = getActiveOption();
+    if (!option || option.disabled) {
+      return;
+    }
+    selectOption(option);
+  };
+  const selectOption = (option) => {
+    if (option.disabled) {
+      return;
+    }
+    if (isMultipleSelect(props)) {
+      const currentValue = props.value ?? [];
+      const nextValue = currentValue.includes(option.value) ? currentValue.filter((v) => v !== option.value) : [...currentValue, option.value];
+      props.onChange?.(nextValue);
+      return;
+    }
+    props.onChange?.(option.value);
+    closeDropdown();
+    requestAnimationFrame(() => {
+      triggerRef.current?.focus();
+    });
+  };
+  const clearSelection = (event) => {
+    event.stopPropagation();
+    if (isMultipleSelect(props)) {
+      props.onChange?.([]);
+      return;
+    }
+    props.onChange?.(void 0);
+  };
+  const handleSearchInput = (event) => {
+    const query = event.target.value;
+    setSearchQuery(query);
+    onSearch?.(query);
+  };
+  const handleTriggerKeyDown = (event) => {
+    if (disabled) {
+      return;
+    }
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+          return;
+        }
+        const next = findNextEnabledIndex(activeIndex, 1);
+        setActiveAndFocus(next);
+        return;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+          return;
+        }
+        const next = findNextEnabledIndex(activeIndex, -1);
+        setActiveAndFocus(next);
+        return;
+      }
+      case "Enter":
+      case " ": {
+        event.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+          return;
+        }
+        selectActiveOption();
+        return;
+      }
+      case "Escape": {
+        if (isOpen) {
+          event.preventDefault();
+          closeDropdown();
+        }
+        return;
+      }
+      default:
+        return;
+    }
+  };
+  const handleDropdownKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        const next = findNextEnabledIndex(activeIndex, 1);
+        setActiveAndFocus(next);
+        return;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        const next = findNextEnabledIndex(activeIndex, -1);
+        setActiveAndFocus(next);
+        return;
+      }
+      case "Home": {
+        event.preventDefault();
+        const next = findFirstEnabledIndex();
+        setActiveAndFocus(next);
+        return;
+      }
+      case "End": {
+        event.preventDefault();
+        const next = findLastEnabledIndex();
+        setActiveAndFocus(next);
+        return;
+      }
+      case "Enter":
+      case " ": {
+        event.preventDefault();
+        selectActiveOption();
+        return;
+      }
+      case "Escape": {
+        event.preventDefault();
+        closeDropdown();
+        triggerRef.current?.focus();
+        return;
+      }
+      case "Tab": {
+        closeDropdown();
+        return;
+      }
+      default:
+        return;
+    }
+  };
+  const handleSearchKeyDown = (event) => {
+    switch (event.key) {
+      case " ": {
+        event.stopPropagation();
+        return;
+      }
+      case "ArrowDown": {
+        event.preventDefault();
+        event.stopPropagation();
+        const next = activeIndex >= 0 ? activeIndex : findFirstEnabledIndex();
+        setActiveAndFocus(next);
+        return;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        event.stopPropagation();
+        const next = activeIndex >= 0 ? activeIndex : findLastEnabledIndex();
+        setActiveAndFocus(next);
+        return;
+      }
+      case "Enter": {
+        if (activeIndex >= 0) {
+          event.preventDefault();
+          event.stopPropagation();
+          selectActiveOption();
+        }
+        return;
+      }
+      case "Escape": {
+        event.preventDefault();
+        event.stopPropagation();
+        closeDropdown();
+        triggerRef.current?.focus();
+        return;
+      }
+      default:
+        return;
+    }
+  };
+  useEffect(() => {
+    if (isOpen && searchable) {
+      searchInputRef.current?.focus();
+    }
+  }, [isOpen, searchable]);
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    if (flatFilteredOptions.length === 0) {
+      setActiveIndex(-1);
+      return;
+    }
+    const selectedIndex = (() => {
+      if (isMultipleSelect(props)) {
+        const value2 = props.value ?? [];
+        if (value2.length === 0) {
+          return -1;
+        }
+        return flatFilteredOptions.findIndex((opt) => value2.includes(opt.value) && !opt.disabled);
+      }
+      const value = props.value;
+      if (value === void 0 || value === null || value === "") {
+        return -1;
+      }
+      return flatFilteredOptions.findIndex((opt) => opt.value === value && !opt.disabled);
+    })();
+    const nextActive = selectedIndex >= 0 ? selectedIndex : findFirstEnabledIndex();
+    setActiveIndex(nextActive);
+    if (!searchable) {
+      focusOptionAt(nextActive);
+    }
+  }, [isOpen, searchable, flatFilteredOptions, props.multiple, props.value]);
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      if (dropdownRef.current && triggerRef.current && !dropdownRef.current.contains(target) && !triggerRef.current.contains(target)) {
+        closeDropdown();
+      }
+    };
+    document.addEventListener("click", handleClickOutside);
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [isOpen]);
+  const triggerClasses = getSelectTriggerClasses(size, disabled, isOpen);
+  const renderOption = (option, index) => {
+    const optionSelected = isSelected(option);
+    const optionActive = index === activeIndex;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: getOptionId(index),
+        "data-option-index": index,
+        role: "option",
+        "aria-selected": optionSelected,
+        "aria-disabled": option.disabled ? true : void 0,
+        tabIndex: optionActive ? 0 : -1,
+        className: getSelectOptionClasses(optionSelected, !!option.disabled, size),
+        onMouseEnter: () => {
+          if (!option.disabled) {
+            setActiveIndex(index);
+          }
+        },
+        onClick: () => selectOption(option),
+        children: /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between w-full", children: [
+          /* @__PURE__ */ jsx("span", { children: option.label }),
+          optionSelected && /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "w-5 h-5 text-[var(--tiger-select-check-icon,var(--tiger-primary,#2563eb))]",
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 20 20",
+              fill: "currentColor",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          )
+        ] })
+      },
+      option.value
+    );
+  };
+  const hasOptions = filteredOptions.length > 0;
+  const renderOptions = () => {
+    if (!hasOptions) {
+      return /* @__PURE__ */ jsx("div", { className: selectEmptyStateClasses, children: options.length === 0 ? noDataText : noOptionsText });
+    }
+    let optionIndex = -1;
+    return filteredOptions.map((item) => {
+      if (isOptionGroup(item)) {
+        return /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: selectGroupLabelClasses, children: item.label }),
+          item.options.map((option) => {
+            optionIndex += 1;
+            return renderOption(option, optionIndex);
+          })
+        ] }, item.label);
+      }
+      optionIndex += 1;
+      return renderOption(item, optionIndex);
+    });
+  };
+  const containerClasses = classNames(selectBaseClasses, className);
+  return /* @__PURE__ */ jsxs("div", { className: containerClasses, ...divProps, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        className: triggerClasses,
+        disabled,
+        onClick: toggleDropdown,
+        onKeyDown: handleTriggerKeyDown,
+        "aria-haspopup": "listbox",
+        "aria-expanded": isOpen,
+        "aria-controls": listboxId,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: classNames(
+                "flex-1 text-left truncate",
+                displayText === placeholder && "text-[var(--tiger-select-placeholder,var(--tiger-text-muted,#9ca3af))]"
+              ),
+              children: displayText
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+            showClearButton && /* @__PURE__ */ jsx("span", { className: "inline-flex", "data-tiger-select-clear": true, onClick: clearSelection, children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "w-4 h-4 text-[var(--tiger-select-icon,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-select-icon-hover,var(--tiger-text-muted,#6b7280))]",
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 20 20",
+                fill: "currentColor",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    fillRule: "evenodd",
+                    d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+                    clipRule: "evenodd"
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsx("span", { className: classNames("inline-flex", isOpen && "rotate-180"), children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "w-5 h-5 text-[var(--tiger-select-icon,var(--tiger-text-muted,#9ca3af))] transition-transform",
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 20 20",
+                fill: "currentColor",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    fillRule: "evenodd",
+                    d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z",
+                    clipRule: "evenodd"
+                  }
+                )
+              }
+            ) })
+          ] })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: dropdownRef,
+        className: selectDropdownBaseClasses,
+        role: "listbox",
+        id: listboxId,
+        "aria-multiselectable": isMultipleSelect(props) ? true : void 0,
+        onKeyDown: handleDropdownKeyDown,
+        children: [
+          searchable && /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: searchInputRef,
+              type: "text",
+              className: selectSearchInputClasses,
+              placeholder: "Search...",
+              value: searchQuery,
+              onChange: handleSearchInput,
+              onKeyDown: handleSearchKeyDown
+            }
+          ),
+          renderOptions()
+        ]
+      }
+    )
+  ] });
+};
+
+export { Select };

package/dist/chunk-Z4Z3I74Q.mjs

@@ -0,0 +1,166 @@
+import { clampPercentage, getStatusVariant, formatProgressText, classNames, progressLineBaseClasses, progressTrackBgClasses, progressLineSizeClasses, progressLineInnerClasses, getProgressVariantClasses, progressStripedClasses, progressStripedAnimationClasses, progressTextBaseClasses, progressTextSizeClasses, getProgressTextColorClasses, getCircleSize, calculateCirclePath, progressCircleTrackStrokeClasses, progressCircleTextClasses, progressCircleBaseClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Progress.tsx
+var Progress = ({
+  variant = "primary",
+  size = "md",
+  type = "line",
+  percentage = 0,
+  status = "normal",
+  showText,
+  text,
+  format,
+  striped = false,
+  stripedAnimation = false,
+  strokeWidth = 6,
+  width = "auto",
+  height,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  "aria-describedby": ariaDescribedby,
+  ...props
+}) => {
+  const clampedPercentage = clampPercentage(percentage);
+  const effectiveVariant = getStatusVariant(status) || variant;
+  const shouldShowText = showText ?? type === "line";
+  const displayText = shouldShowText ? formatProgressText(clampedPercentage, text, format) : "";
+  const resolvedAriaLabel = ariaLabel ?? (ariaLabelledby ? void 0 : `Progress: ${clampedPercentage}%`);
+  const lineTrackClasses = classNames(
+    progressLineBaseClasses,
+    progressTrackBgClasses,
+    !height && progressLineSizeClasses[size]
+  );
+  const lineBarClasses = classNames(
+    progressLineInnerClasses,
+    getProgressVariantClasses(effectiveVariant),
+    striped && progressStripedClasses,
+    striped && stripedAnimation && progressStripedAnimationClasses
+  );
+  const textClasses = classNames(
+    progressTextBaseClasses,
+    progressTextSizeClasses[size],
+    getProgressTextColorClasses(effectiveVariant)
+  );
+  const renderLineProgress = () => {
+    const containerStyle = width !== "auto" ? { width: typeof width === "number" ? `${width}px` : width } : {};
+    const mergedStyle = {
+      ...style ?? {},
+      ...containerStyle
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...props,
+        className: classNames("flex items-center w-full", className),
+        style: mergedStyle,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: lineTrackClasses,
+              style: { flex: 1, ...height ? { height: `${height}px` } : {} },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: lineBarClasses,
+                  style: { width: `${clampedPercentage}%` },
+                  role: "progressbar",
+                  "aria-label": resolvedAriaLabel,
+                  "aria-labelledby": ariaLabelledby,
+                  "aria-describedby": ariaDescribedby,
+                  "aria-valuenow": clampedPercentage,
+                  "aria-valuemin": 0,
+                  "aria-valuemax": 100
+                }
+              )
+            }
+          ),
+          shouldShowText && /* @__PURE__ */ jsx("span", { className: textClasses, children: displayText })
+        ]
+      }
+    );
+  };
+  const renderCircleProgress = () => {
+    const { width: svgWidth, height: svgHeight, radius, cx, cy } = getCircleSize(size, strokeWidth);
+    const { strokeDasharray, strokeDashoffset } = calculateCirclePath(
+      radius,
+      strokeWidth,
+      clampedPercentage
+    );
+    const strokeColor = getProgressVariantClasses(effectiveVariant).replace("bg-", "text-");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...props,
+        className: classNames(progressCircleBaseClasses, className),
+        style: {
+          ...style ?? {},
+          width: `${svgWidth}px`,
+          height: `${svgHeight}px`
+        },
+        children: [
+          /* @__PURE__ */ jsxs("svg", { width: svgWidth, height: svgHeight, viewBox: `0 0 ${svgWidth} ${svgHeight}`, children: [
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx,
+                cy,
+                r: radius,
+                fill: "none",
+                stroke: "currentColor",
+                className: progressCircleTrackStrokeClasses,
+                strokeWidth
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx,
+                cy,
+                r: radius,
+                fill: "none",
+                stroke: "currentColor",
+                className: strokeColor,
+                strokeWidth,
+                strokeLinecap: "round",
+                strokeDasharray,
+                strokeDashoffset,
+                style: {
+                  transition: "stroke-dashoffset 0.3s ease",
+                  transform: "rotate(-90deg)",
+                  transformOrigin: "center"
+                },
+                role: "progressbar",
+                "aria-label": resolvedAriaLabel,
+                "aria-labelledby": ariaLabelledby,
+                "aria-describedby": ariaDescribedby,
+                "aria-valuenow": clampedPercentage,
+                "aria-valuemin": 0,
+                "aria-valuemax": 100
+              }
+            )
+          ] }),
+          shouldShowText && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: classNames(
+                progressCircleTextClasses,
+                progressTextSizeClasses[size],
+                "font-medium",
+                getProgressTextColorClasses(effectiveVariant)
+              ),
+              children: displayText
+            }
+          )
+        ]
+      }
+    );
+  };
+  if (type === "circle") return renderCircleProgress();
+  return renderLineProgress();
+};
+
+export { Progress };

package/dist/chunk-ZO4XVOHU.mjs

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import { isEscapeKey, isEventOutside } from '@expcat/tigercat-core';
+
+// src/utils/overlay.ts
+function useClickOutside({
+  enabled,
+  refs,
+  onOutsideClick,
+  defer = false
+}) {
+  useEffect(() => {
+    if (!enabled) return;
+    const handler = (event) => {
+      const elements = refs.map((ref) => ref?.current);
+      if (isEventOutside(event, elements)) {
+        onOutsideClick();
+      }
+    };
+    const attach = () => document.addEventListener("click", handler);
+    const detach = () => document.removeEventListener("click", handler);
+    if (!defer) {
+      attach();
+      return () => detach();
+    }
+    const timer = window.setTimeout(() => attach(), 0);
+    return () => {
+      window.clearTimeout(timer);
+      detach();
+    };
+  }, [enabled, refs, onOutsideClick, defer]);
+}
+function useEscapeKey({ enabled, onEscape }) {
+  useEffect(() => {
+    if (!enabled) return;
+    const handler = (event) => {
+      if (event.defaultPrevented) return;
+      if (!isEscapeKey(event)) return;
+      onEscape();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [enabled, onEscape]);
+}
+
+export { useClickOutside, useEscapeKey };