@expcat/tigercat-react 0.0.1

package/dist/chunk-FQ6UHRAO.js

@@ -0,0 +1,499 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Select.tsx
+var flattenSelectOptions = (options) => {
+  const all = [];
+  for (const item of options) {
+    if (tigercatCore.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 = react.useId();
+  const listboxId = `tiger-select-listbox-${instanceId}`;
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [searchQuery, setSearchQuery] = react.useState("");
+  const [activeIndex, setActiveIndex] = react.useState(-1);
+  const dropdownRef = react.useRef(null);
+  const triggerRef = react.useRef(null);
+  const searchInputRef = react.useRef(null);
+  const filteredOptions = react.useMemo(
+    () => searchable && searchQuery ? tigercatCore.filterOptions(options, searchQuery) : options,
+    [options, searchable, searchQuery]
+  );
+  const flatFilteredOptions = react.useMemo(
+    () => flattenSelectOptions(filteredOptions),
+    [filteredOptions]
+  );
+  const allOptions = react.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;
+    }
+  };
+  react.useEffect(() => {
+    if (isOpen && searchable) {
+      searchInputRef.current?.focus();
+    }
+  }, [isOpen, searchable]);
+  react.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]);
+  react.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 = tigercatCore.getSelectTriggerClasses(size, disabled, isOpen);
+  const renderOption = (option, index) => {
+    const optionSelected = isSelected(option);
+    const optionActive = index === activeIndex;
+    return /* @__PURE__ */ jsxRuntime.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: tigercatCore.getSelectOptionClasses(optionSelected, !!option.disabled, size),
+        onMouseEnter: () => {
+          if (!option.disabled) {
+            setActiveIndex(index);
+          }
+        },
+        onClick: () => selectOption(option),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-between w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label }),
+          optionSelected && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: tigercatCore.selectEmptyStateClasses, children: options.length === 0 ? noDataText : noOptionsText });
+    }
+    let optionIndex = -1;
+    return filteredOptions.map((item) => {
+      if (tigercatCore.isOptionGroup(item)) {
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.selectGroupLabelClasses, children: item.label }),
+          item.options.map((option) => {
+            optionIndex += 1;
+            return renderOption(option, optionIndex);
+          })
+        ] }, item.label);
+      }
+      optionIndex += 1;
+      return renderOption(item, optionIndex);
+    });
+  };
+  const containerClasses = tigercatCore.classNames(tigercatCore.selectBaseClasses, className);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClasses, ...divProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        className: triggerClasses,
+        disabled,
+        onClick: toggleDropdown,
+        onKeyDown: handleTriggerKeyDown,
+        "aria-haspopup": "listbox",
+        "aria-expanded": isOpen,
+        "aria-controls": listboxId,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: tigercatCore.classNames(
+                "flex-1 text-left truncate",
+                displayText === placeholder && "text-[var(--tiger-select-placeholder,var(--tiger-text-muted,#9ca3af))]"
+              ),
+              children: displayText
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+            showClearButton && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex", "data-tiger-select-clear": true, onClick: clearSelection, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: tigercatCore.classNames("inline-flex", isOpen && "rotate-180"), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: dropdownRef,
+        className: tigercatCore.selectDropdownBaseClasses,
+        role: "listbox",
+        id: listboxId,
+        "aria-multiselectable": isMultipleSelect(props) ? true : void 0,
+        onKeyDown: handleDropdownKeyDown,
+        children: [
+          searchable && /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: searchInputRef,
+              type: "text",
+              className: tigercatCore.selectSearchInputClasses,
+              placeholder: "Search...",
+              value: searchQuery,
+              onChange: handleSearchInput,
+              onKeyDown: handleSearchKeyDown
+            }
+          ),
+          renderOptions()
+        ]
+      }
+    )
+  ] });
+};
+
+exports.Select = Select;

package/dist/chunk-G6FSHN2I.mjs

@@ -0,0 +1,111 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { classNames, getTooltipContainerClasses, getTooltipTriggerClasses, getDropdownMenuWrapperClasses, getTooltipContentClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Tooltip.tsx
+var tooltipIdCounter = 0;
+var createTooltipId = () => `tiger-tooltip-${++tooltipIdCounter}`;
+var Tooltip = ({
+  visible,
+  defaultVisible = false,
+  content,
+  trigger = "hover",
+  placement = "top",
+  disabled = false,
+  className,
+  style,
+  children,
+  contentContent,
+  onVisibleChange,
+  ...divProps
+}) => {
+  const isControlled = visible !== void 0;
+  const [internalVisible, setInternalVisible] = useState(defaultVisible);
+  const currentVisible = isControlled ? visible : internalVisible;
+  const containerRef = useRef(null);
+  const tooltipIdRef = useRef(null);
+  if (!tooltipIdRef.current) {
+    tooltipIdRef.current = createTooltipId();
+  }
+  const tooltipId = tooltipIdRef.current;
+  const tooltipContent = contentContent ?? content;
+  const describedBy = tooltipContent != null ? tooltipId : void 0;
+  const setVisible = useCallback(
+    (newVisible) => {
+      if (disabled && newVisible) return;
+      if (!isControlled) {
+        setInternalVisible(newVisible);
+      }
+      onVisibleChange?.(newVisible);
+    },
+    [disabled, isControlled, onVisibleChange]
+  );
+  const handleTriggerClick = () => {
+    if (disabled || trigger !== "click") return;
+    setVisible(!currentVisible);
+  };
+  const handleTriggerMouseEnter = () => {
+    if (disabled || trigger !== "hover") return;
+    setVisible(true);
+  };
+  const handleTriggerMouseLeave = () => {
+    if (disabled || trigger !== "hover") return;
+    setVisible(false);
+  };
+  const handleTriggerFocus = () => {
+    if (disabled || trigger !== "focus") return;
+    setVisible(true);
+  };
+  const handleTriggerBlur = () => {
+    if (disabled || trigger !== "focus") return;
+    setVisible(false);
+  };
+  useEffect(() => {
+    if (!currentVisible || trigger !== "click") return;
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      if (!target) return;
+      if (containerRef.current?.contains(target)) return;
+      setVisible(false);
+    };
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("click", handleClickOutside);
+    }, 0);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [currentVisible, trigger, setVisible]);
+  useEffect(() => {
+    if (!currentVisible) return;
+    const handleKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      setVisible(false);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [currentVisible, setVisible]);
+  const containerClasses = classNames(getTooltipContainerClasses(), className);
+  const triggerClasses = getTooltipTriggerClasses(disabled);
+  const contentWrapperClasses = getDropdownMenuWrapperClasses(currentVisible, placement);
+  const contentClasses = getTooltipContentClasses();
+  const triggerHandlers = {};
+  if (trigger === "click") {
+    triggerHandlers.onClick = handleTriggerClick;
+  } else if (trigger === "hover") {
+    triggerHandlers.onMouseEnter = handleTriggerMouseEnter;
+    triggerHandlers.onMouseLeave = handleTriggerMouseLeave;
+  } else if (trigger === "focus") {
+    triggerHandlers.onFocus = handleTriggerFocus;
+    triggerHandlers.onBlur = handleTriggerBlur;
+  }
+  if (!children) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: containerClasses, style, ...divProps, children: [
+    /* @__PURE__ */ jsx("div", { className: triggerClasses, "aria-describedby": describedBy, ...triggerHandlers, children }),
+    /* @__PURE__ */ jsx("div", { className: contentWrapperClasses, hidden: !currentVisible, "aria-hidden": !currentVisible, children: /* @__PURE__ */ jsx("div", { id: tooltipId, role: "tooltip", className: contentClasses, children: tooltipContent }) })
+  ] });
+};
+
+export { Tooltip };