@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-U7V7ZWJ6.mjs

@@ -0,0 +1,256 @@
+import {
+  composeEventHandlers
+} from "./chunk-WWZZRB7H.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  renderBodyPortal,
+  useClickOutside,
+  useEscapeKey
+} from "./chunk-NPGU6VYD.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/FloatButton.tsx
+import {
+  cloneElement,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useRef
+} from "react";
+import {
+  classNames,
+  floatButtonGroupExpandClasses,
+  floatButtonIconSizeClasses,
+  floatButtonPlusIconPath,
+  getFloatButtonClasses,
+  getFloatButtonGroupClasses,
+  getFloatButtonLabels,
+  getFloatButtonOffsetStyle,
+  mergeTigerLocale,
+  resolveFloatButtonAriaLabel,
+  resolveFloatButtonShape,
+  shouldMergeOverlayTriggerChild
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FloatButtonGroupContext = createContext(null);
+var DefaultPlusIcon = ({ size }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    className: floatButtonIconSizeClasses[size],
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: floatButtonPlusIconPath })
+  }
+);
+function nodeHasVisibleText(node) {
+  if (node == null || typeof node === "boolean") return false;
+  if (typeof node === "string" || typeof node === "number") return String(node).trim().length > 0;
+  if (Array.isArray(node)) return node.some(nodeHasVisibleText);
+  if (!isValidElement(node)) return false;
+  const props = node.props;
+  if (node.type === "svg" || props["aria-hidden"] === true || props["aria-hidden"] === "true") {
+    return false;
+  }
+  return nodeHasVisibleText(props.children);
+}
+var FloatButton = forwardRef(function FloatButton2({
+  shape,
+  size = "md",
+  type = "primary",
+  tooltip,
+  disabled = false,
+  ariaLabel,
+  className,
+  floating = false,
+  placement = "bottom-right",
+  offset,
+  style,
+  children,
+  onClick,
+  locale,
+  ...props
+}, ref) {
+  const group = useContext(FloatButtonGroupContext);
+  const config = useTigerConfig();
+  const resolvedShape = resolveFloatButtonShape(shape, group?.shape);
+  const labels = getFloatButtonLabels(mergeTigerLocale(config.locale, locale));
+  const classes = useMemo(
+    () => getFloatButtonClasses({
+      shape: resolvedShape,
+      size,
+      type,
+      disabled,
+      floating,
+      inGroup: Boolean(group?.inGroup),
+      placement,
+      className
+    }),
+    [resolvedShape, size, type, disabled, floating, group?.inGroup, placement, className]
+  );
+  const buttonStyle = useMemo(
+    () => ({
+      ...getFloatButtonOffsetStyle(placement, offset, floating && !group?.inGroup),
+      ...style
+    }),
+    [floating, group?.inGroup, placement, offset, style]
+  );
+  const resolvedAriaLabel = resolveFloatButtonAriaLabel({
+    ariaLabel,
+    tooltip,
+    hasVisibleText: nodeHasVisibleText(children),
+    localeLabel: labels.ariaLabel
+  });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...props,
+      ref,
+      className: classes,
+      type: "button",
+      disabled,
+      style: buttonStyle,
+      "aria-label": resolvedAriaLabel,
+      title: tooltip,
+      onClick: disabled ? void 0 : onClick,
+      children: children ?? /* @__PURE__ */ jsx(DefaultPlusIcon, { size })
+    }
+  );
+});
+var FloatButtonGroup = forwardRef(
+  function FloatButtonGroup2({
+    shape: groupShape,
+    trigger = "click",
+    open: controlledOpen,
+    defaultOpen = false,
+    closeOnAction = true,
+    triggerNode,
+    children,
+    className,
+    onOpenChange,
+    placement = "bottom-right",
+    offset,
+    portal = true,
+    style,
+    ...props
+  }, ref) {
+    const groupContextValue = useMemo(() => ({ shape: groupShape, inGroup: true }), [groupShape]);
+    const [isOpen, setOpen] = useControlledState({
+      value: controlledOpen,
+      defaultValue: defaultOpen,
+      onChange: onOpenChange
+    });
+    const instanceId = useId();
+    const panelId = `tiger-float-group-${instanceId}`;
+    const groupRef = useRef(null);
+    const setGroupRef = useCallback(
+      (node) => {
+        groupRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const toggle = useCallback(() => {
+      setOpen((current) => !current);
+    }, [setOpen]);
+    const close = useCallback(() => {
+      setOpen(false);
+    }, [setOpen]);
+    const handleMouseEnter = useCallback(() => {
+      setOpen(true);
+    }, [setOpen]);
+    const handleMouseLeave = useCallback(() => {
+      setOpen(false);
+    }, [setOpen]);
+    useClickOutside({
+      enabled: isOpen,
+      refs: [groupRef],
+      onOutsideClick: close,
+      defer: true
+    });
+    useEscapeKey({ enabled: isOpen, onEscape: close, layerRef: groupRef });
+    const groupClasses = useMemo(
+      () => classNames(getFloatButtonGroupClasses({ placement, portal }), className),
+      [placement, portal, className]
+    );
+    const groupStyle = useMemo(
+      () => ({ ...getFloatButtonOffsetStyle(placement, offset, true), ...style }),
+      [placement, offset, style]
+    );
+    const triggerAria = {
+      "aria-expanded": isOpen,
+      "aria-controls": isOpen ? panelId : void 0,
+      "data-state": isOpen ? "open" : "closed"
+    };
+    const handleTriggerClick = (event) => {
+      event.stopPropagation();
+      if (trigger === "hover") {
+        setOpen(true);
+        return;
+      }
+      toggle();
+    };
+    let triggerEl;
+    if (isValidElement(triggerNode) && shouldMergeOverlayTriggerChild(true, triggerNode.type)) {
+      const child = triggerNode;
+      triggerEl = cloneElement(child, {
+        ...triggerAria,
+        onClick: composeEventHandlers(child.props.onClick, handleTriggerClick)
+      });
+    } else if (triggerNode) {
+      triggerEl = /* @__PURE__ */ jsx("button", { type: "button", ...triggerAria, onClick: handleTriggerClick, children: triggerNode });
+    } else {
+      triggerEl = /* @__PURE__ */ jsx(FloatButton, { ...triggerAria, onClick: handleTriggerClick });
+    }
+    const handleActionClick = (event) => {
+      if (!closeOnAction) return;
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+      if (target.closest('button, a, [role="button"]')) close();
+    };
+    const content = /* @__PURE__ */ jsx(FloatButtonGroupContext.Provider, { value: groupContextValue, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...props,
+        ref: setGroupRef,
+        className: groupClasses,
+        style: groupStyle,
+        onMouseEnter: trigger === "hover" ? composeEventHandlers(props.onMouseEnter, handleMouseEnter) : props.onMouseEnter,
+        onMouseLeave: trigger === "hover" ? composeEventHandlers(props.onMouseLeave, handleMouseLeave) : props.onMouseLeave,
+        children: [
+          triggerEl,
+          isOpen ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: panelId,
+              role: "group",
+              className: floatButtonGroupExpandClasses,
+              onClick: handleActionClick,
+              children
+            }
+          ) : null
+        ]
+      }
+    ) });
+    return portal ? renderBodyPortal(content) : content;
+  }
+);
+var FloatButton_default = FloatButton;
+
+export {
+  FloatButton,
+  FloatButtonGroup,
+  FloatButton_default
+};

package/dist/chunk-UAFA5GOL.mjs

@@ -0,0 +1,160 @@
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Rate.tsx
+import { forwardRef, useMemo, useState } from "react";
+import {
+  rateBaseClasses,
+  getRateStarClasses,
+  rateHalfStarInnerClasses,
+  rateActiveColor,
+  rateInactiveColor,
+  rateHoverColor,
+  rateIsInlineStartHalf,
+  starPathD,
+  starViewBox,
+  classNames,
+  mergeTigerLocale,
+  getRateLabels,
+  formatRateValueText,
+  sliderGetKeyboardValue,
+  sliderNormalizeValue,
+  getLocaleDirection
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Rate = forwardRef(function Rate2({
+  value,
+  defaultValue = 0,
+  count = 5,
+  allowHalf = false,
+  disabled = false,
+  readOnly = false,
+  size = "md",
+  allowClear = true,
+  character,
+  className,
+  locale,
+  labels: labelsOverride,
+  onChange,
+  onHoverChange,
+  onKeyDown,
+  "aria-label": ariaLabel,
+  ...rest
+}, ref) {
+  const config = useTigerConfig();
+  const [currentValue, setCurrentValue] = useControlledState({
+    value,
+    defaultValue,
+    onChange
+  });
+  const [hoverValue, setHoverValue] = useState(0);
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(
+    () => getRateLabels(mergedLocale, labelsOverride),
+    [mergedLocale, labelsOverride]
+  );
+  const rtl = getLocaleDirection(mergedLocale) === "rtl";
+  const locked = disabled || readOnly;
+  const step = allowHalf ? 0.5 : 1;
+  const normalized = sliderNormalizeValue(currentValue, 0, count, step);
+  const displayValue = hoverValue > 0 ? hoverValue : normalized;
+  const isChar = character != null && character !== false;
+  const glyph = (extraClass) => isChar ? /* @__PURE__ */ jsx("span", { className: extraClass, children: character }) : /* @__PURE__ */ jsx("svg", { viewBox: starViewBox, fill: "currentColor", className: extraClass ?? "h-full w-full", children: /* @__PURE__ */ jsx("path", { d: starPathD }) });
+  const hitValue = (index, clientX, el) => {
+    const half = allowHalf && rateIsInlineStartHalf(clientX, el.getBoundingClientRect(), rtl);
+    return half ? index + 0.5 : index + 1;
+  };
+  const commit = (next) => {
+    if (locked) return;
+    setCurrentValue(next);
+  };
+  const stars = [];
+  for (let i = 0; i < count; i++) {
+    const full = displayValue >= i + 1;
+    const half = allowHalf && !full && displayValue >= i + 0.5;
+    const isHovering = hoverValue > 0;
+    const colorClass = full || half ? isHovering ? rateHoverColor : rateActiveColor : rateInactiveColor;
+    const content = half ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: classNames("absolute inset-0", rateInactiveColor), children: glyph() }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: classNames(
+            "absolute top-0 bottom-0 overflow-hidden",
+            isHovering ? rateHoverColor : rateActiveColor
+          ),
+          style: { width: "50%", insetInlineStart: 0 },
+          children: glyph(rateHalfStarInnerClasses)
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx("span", { className: colorClass, children: glyph() });
+    stars.push(
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: getRateStarClasses(size, Boolean(isChar), locked),
+          "aria-hidden": "true",
+          onClick: (e) => {
+            if (locked) return;
+            const val = hitValue(i, e.clientX, e.currentTarget);
+            commit(allowClear && val === normalized ? 0 : val);
+          },
+          onMouseMove: (e) => {
+            if (locked) return;
+            const val = hitValue(i, e.clientX, e.currentTarget);
+            if (val !== hoverValue) {
+              setHoverValue(val);
+              onHoverChange?.(val);
+            }
+          },
+          children: content
+        },
+        i
+      )
+    );
+  }
+  const valueText = formatRateValueText(labels.valueText, normalized, mergedLocale?.locale);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: classNames(rateBaseClasses, className),
+      role: "slider",
+      "aria-label": ariaLabel ?? labels.ariaLabel,
+      "aria-valuemin": 0,
+      "aria-valuemax": count,
+      "aria-valuenow": normalized,
+      "aria-valuetext": valueText,
+      "aria-disabled": disabled || void 0,
+      "aria-readonly": readOnly || void 0,
+      "aria-orientation": "horizontal",
+      tabIndex: disabled ? -1 : 0,
+      ...rest,
+      onMouseLeave: () => {
+        if (locked) return;
+        setHoverValue(0);
+        onHoverChange?.(0);
+      },
+      onKeyDown: (e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented || locked) return;
+        const next = sliderGetKeyboardValue(e.key, normalized, 0, count, step, void 0, rtl);
+        if (next == null) return;
+        e.preventDefault();
+        commit(next);
+      },
+      children: stars
+    }
+  );
+});
+
+export {
+  Rate
+};

package/dist/chunk-UJTAHHQT.mjs

@@ -0,0 +1,41 @@
+// src/hooks/useControlledState.ts
+import { useCallback, useRef, useState } from "react";
+function useControlledState(options) {
+  const { value: controlledValue, defaultValue, onChange, postState } = options;
+  const postStateRef = useRef(postState);
+  postStateRef.current = postState;
+  const applyPostState = (next) => {
+    const fn = postStateRef.current;
+    return fn ? fn(next) : next;
+  };
+  const [internalValue, setInternalValue] = useState(() => applyPostState(defaultValue));
+  const isControlled = controlledValue !== void 0;
+  const raw = isControlled ? controlledValue : internalValue;
+  const value = applyPostState(raw);
+  if (isControlled && !Object.is(internalValue, value)) {
+    setInternalValue(value);
+  }
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const isControlledRef = useRef(isControlled);
+  isControlledRef.current = isControlled;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const setValue = useCallback((next, ...args) => {
+    const prev = valueRef.current;
+    const resolvedRaw = typeof next === "function" ? next(prev) : next;
+    const post = postStateRef.current;
+    const resolved = post ? post(resolvedRaw) : resolvedRaw;
+    if (Object.is(resolved, prev)) return;
+    valueRef.current = resolved;
+    if (!isControlledRef.current) {
+      setInternalValue(resolved);
+    }
+    onChangeRef.current?.(resolved, ...args);
+  }, []);
+  return [value, setValue];
+}
+
+export {
+  useControlledState
+};

package/dist/chunk-UK5NGPTQ.mjs

@@ -0,0 +1,62 @@
+import {
+  LayoutContext
+} from "./chunk-5J7EDMS7.mjs";
+
+// src/components/Layout.tsx
+import React, { forwardRef, useCallback, useContext, useMemo, useState } from "react";
+import {
+  classNames,
+  getLayoutRootClasses,
+  injectLayoutGridStyles,
+  isLayoutSiderTypeName,
+  resolveLayoutHasSider
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+function isSiderChild(child) {
+  if (!React.isValidElement(child)) return false;
+  const type = child.type;
+  return isLayoutSiderTypeName(type.displayName) || isLayoutSiderTypeName(type.name);
+}
+function childrenHaveSider(children) {
+  return React.Children.toArray(children).some(isSiderChild);
+}
+var Layout = forwardRef(function Layout2({ className, children, hasSider, direction, fullHeight = false, style, ...props }, ref) {
+  injectLayoutGridStyles();
+  const parent = useContext(LayoutContext);
+  const nested = parent != null;
+  const childIsSider = childrenHaveSider(children);
+  const resolvedHasSider = resolveLayoutHasSider({ hasSider, direction, childIsSider });
+  const [siderCollapsed, setSiderCollapsedState] = useState(false);
+  const [contentEl, setContentElState] = useState(null);
+  const setSiderCollapsed = useCallback((collapsed) => {
+    setSiderCollapsedState(collapsed);
+  }, []);
+  const setContentEl = useCallback((el) => {
+    setContentElState(el);
+  }, []);
+  const contextValue = useMemo(
+    () => ({
+      nested,
+      hasSider: resolvedHasSider,
+      siderCollapsed,
+      setSiderCollapsed,
+      contentEl,
+      setContentEl
+    }),
+    [nested, resolvedHasSider, siderCollapsed, setSiderCollapsed, contentEl, setContentEl]
+  );
+  const layoutClasses = classNames(
+    getLayoutRootClasses({
+      hasSider: resolvedHasSider,
+      nested,
+      fullHeight
+    }),
+    className
+  );
+  return /* @__PURE__ */ jsx(LayoutContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref, className: layoutClasses, style, ...props, children }) });
+});
+Layout.displayName = "TigerLayout";
+
+export {
+  Layout
+};