@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-WPRXOO6N.mjs

@@ -0,0 +1,90 @@
+// src/components/Icon.tsx
+import React, { forwardRef } from "react";
+import {
+  classNames,
+  getIconDefinition,
+  iconSizeClasses,
+  iconSvgBaseClasses,
+  iconWrapperClasses,
+  mergeChildSvgAttrs,
+  resolveIconSize,
+  resolveIconSvgAttrs,
+  resolveIconWrapperStyle,
+  warnUnknownIconName
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+function asSvgLineCap(value) {
+  if (value === "inherit" || value === "round" || value === "butt" || value === "square") {
+    return value;
+  }
+  return void 0;
+}
+function asSvgLineJoin(value) {
+  if (value === "inherit" || value === "round" || value === "bevel" || value === "miter") {
+    return value;
+  }
+  return void 0;
+}
+function toReactSvgAttrs(attrs) {
+  return {
+    xmlns: attrs.xmlns,
+    viewBox: attrs.viewBox,
+    fill: attrs.fill,
+    stroke: attrs.stroke,
+    strokeWidth: attrs.strokeWidth,
+    strokeLinecap: asSvgLineCap(attrs.strokeLinecap),
+    strokeLinejoin: asSvgLineJoin(attrs.strokeLinejoin),
+    "aria-hidden": attrs["aria-hidden"],
+    focusable: attrs.focusable
+  };
+}
+var Icon = forwardRef(function Icon2({ name, icon, size = "md", color, className, style, children, ...props }, ref) {
+  const resolvedSize = resolveIconSize(size);
+  const iconClasses = classNames(iconWrapperClasses, className);
+  const iconStyle = resolveIconWrapperStyle(color, style);
+  const isDecorative = props["aria-label"] == null && props["aria-labelledby"] == null && props.role == null;
+  const hasChildren = React.Children.count(children) > 0;
+  const definition = !hasChildren ? icon ?? (name ? getIconDefinition(name) : void 0) : void 0;
+  if (!hasChildren && !definition && name) {
+    warnUnknownIconName(name);
+  }
+  const svgClassName = classNames(iconSvgBaseClasses, iconSizeClasses[resolvedSize]);
+  const builtInSvg = definition ? /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: svgClassName,
+      ...toReactSvgAttrs(
+        resolveIconSvgAttrs({ mode: definition.mode, viewBox: definition.viewBox })
+      ),
+      children: definition.paths.map((d, i) => /* @__PURE__ */ jsx("path", { d }, i))
+    }
+  ) : null;
+  const processedChildren = React.Children.map(children, (child) => {
+    if (!React.isValidElement(child) || child.type !== "svg") {
+      return child;
+    }
+    const svgProps = child.props;
+    const merged = mergeChildSvgAttrs(svgProps);
+    return React.cloneElement(child, {
+      ...svgProps,
+      ...toReactSvgAttrs(merged),
+      className: classNames(svgClassName, svgProps.className)
+    });
+  });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...props,
+      ref,
+      className: iconClasses,
+      style: iconStyle,
+      ...isDecorative ? { "aria-hidden": true } : { role: props.role ?? "img" },
+      children: builtInSvg ?? processedChildren
+    }
+  );
+});
+Icon.displayName = "Icon";
+
+export {
+  Icon
+};

package/dist/{chunk-XZVQ3PJS.mjs → chunk-WQMOFDAY.mjs}

@@ -1,15 +1,11 @@
 // src/components/Link.tsx
-import { useCallback, useMemo } from "react";
+import { forwardRef, useCallback, useMemo } from "react";
 import {
-  classNames,
-  getLinkVariantClasses,
   getSecureRel,
-  linkBaseClasses,
-  linkDisabledClasses,
-  linkSizeClasses
+  resolveLinkClasses
 } from "@expcat/tigercat-core";
 import { jsx } from "react/jsx-runtime";
-var Link = ({
+var Link = forwardRef(function Link2({
   variant = "primary",
   size = "md",
   disabled = false,
@@ -23,16 +19,9 @@ var Link = ({
   children,
   className,
   ...props
-}) => {
+}, ref) {
   const linkClasses = useMemo(
-    () => classNames(
-      linkBaseClasses,
-      getLinkVariantClasses(variant, void 0, { disabled }),
-      linkSizeClasses[size],
-      underline && "hover:underline",
-      disabled && linkDisabledClasses,
-      className
-    ),
+    () => resolveLinkClasses({ variant, size, underline, disabled, className }),
     [variant, size, underline, disabled, className]
   );
   const computedRel = useMemo(() => getSecureRel(target, rel), [target, rel]);
@@ -62,8 +51,9 @@ var Link = ({
     "a",
     {
       ...props,
+      ref,
       className: linkClasses,
-      href: disabled ? void 0 : href,
+      href,
       target,
       rel: computedRel,
       "aria-disabled": disabled || void 0,
@@ -73,7 +63,8 @@ var Link = ({
       children
     }
   );
-};
+});
+Link.displayName = "Link";
 
 export {
   Link

package/dist/chunk-WWDZAWTS.mjs

@@ -0,0 +1,497 @@
+import {
+  ColorSwatch
+} from "./chunk-JVLLOOEE.mjs";
+import {
+  FormItemControlProvider,
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay,
+  useBodyScrollLock,
+  useFocusTrap
+} from "./chunk-OU2AV7DY.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/ColorPicker.tsx
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import {
+  applyColorPickerAlpha,
+  applyColorPickerHue,
+  classNames,
+  colorPickerBaseClasses,
+  colorPickerCheckerboardStyle,
+  colorPickerChromeLabelClasses,
+  colorPickerClearButtonClasses,
+  colorPickerHueTrackStyle,
+  colorPickerInputClasses,
+  colorPickerPanelClasses,
+  colorPickerPreviewClasses,
+  colorPickerSliderTrackClasses,
+  colorPickerSvPlaneClasses,
+  colorPickerSvThumbClasses,
+  colorPickerTriggerSwatchClasses,
+  commitPresetColor,
+  createDocumentDragSession,
+  cssColorFromHsva,
+  formatHsva,
+  getColorPickerAlphaTrackStyle,
+  getColorPickerFormatLabel,
+  getColorPickerLabels,
+  getColorPickerSvPlaneStyle,
+  getColorPickerTriggerClasses,
+  hsvaFromSvPointer,
+  isColorPickerEmpty,
+  mergeAriaDescribedBy,
+  mergeHsvaHue,
+  mergeTigerLocale,
+  nudgeColorPickerSv,
+  parseColorInput,
+  parseColorToHsva,
+  seedColorPickerHsva,
+  selectDoneActionClasses,
+  selectDoneButtonClasses,
+  SHAKE_CLASS,
+  runShakeAnimation
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ColorPicker = forwardRef(
+  function ColorPicker2(props, ref) {
+    const {
+      value,
+      defaultValue,
+      disabled = false,
+      size = "md",
+      showAlpha = false,
+      format = "hex",
+      presets,
+      className,
+      locale,
+      labels: labelsOverride,
+      open,
+      defaultOpen = false,
+      clearable = true,
+      closeOnSelect = true,
+      name,
+      id,
+      status: statusProp,
+      placement = "bottom-start",
+      offset = 4,
+      dropdownClassName,
+      getPopupContainer,
+      onChange,
+      onOpenChange,
+      onBlur,
+      style
+    } = props;
+    const config = useTigerConfig();
+    const formItemControl = useFormItemControlContext();
+    const mergedLocale = useMemo(
+      () => mergeTigerLocale(config.locale, locale),
+      [config.locale, locale]
+    );
+    const labels = useMemo(
+      () => getColorPickerLabels(mergedLocale, labelsOverride),
+      [mergedLocale, labelsOverride]
+    );
+    const effectiveDisabled = Boolean(disabled || formItemControl?.disabled);
+    const status = statusProp ?? formItemControl?.status ?? "default";
+    const effectiveId = id ?? formItemControl?.id;
+    const effectiveName = name ?? formItemControl?.name;
+    const describedBy = mergeAriaDescribedBy(
+      typeof props["aria-describedby"] === "string" ? props["aria-describedby"] : void 0,
+      formItemControl?.describedBy
+    );
+    const labelledby = typeof props["aria-labelledby"] === "string" && props["aria-labelledby"].trim() ? props["aria-labelledby"] : formItemControl?.labelId;
+    const parsedValue = value !== void 0 ? value : formItemControl?.value;
+    const [committed, setCommitted] = useControlledState({
+      value: value !== void 0 || formItemControl?.value !== void 0 ? parsedValue : void 0,
+      defaultValue,
+      onChange: (next) => {
+        onChange?.(next ?? "");
+        formItemControl?.onChange?.(next ?? "");
+      }
+    });
+    const [isOpen, setOpen] = useControlledState({
+      value: open,
+      defaultValue: defaultOpen,
+      onChange: onOpenChange
+    });
+    const draggingRef = useRef(false);
+    const [hsva, setHsva] = useState(() => seedColorPickerHsva(committed));
+    const hsvaRef = useRef(hsva);
+    hsvaRef.current = hsva;
+    const [inputValue, setInputValue] = useState(
+      () => isColorPickerEmpty(committed) ? "" : formatHsva(seedColorPickerHsva(committed), format, showAlpha)
+    );
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const panelRef = useRef(null);
+    const svRef = useRef(null);
+    const dragSessionRef = useRef(null);
+    const instanceId = useId();
+    const panelId = `${instanceId}-panel`;
+    const overlay = useAnchoredOverlay({
+      enabled: isOpen,
+      referenceRef: triggerRef,
+      floatingRef: panelRef,
+      containerRef: rootRef,
+      placement,
+      offset,
+      layout: "fullscreen-sm",
+      dismissOnOutside: true,
+      dismissOnEscape: true,
+      restoreFocusOnDismiss: true,
+      getContainer: getPopupContainer,
+      onDismiss: () => {
+        setOpen(false);
+        window.setTimeout(() => triggerRef.current?.focus(), 0);
+      }
+    });
+    useFocusTrap({ enabled: isOpen, containerRef: panelRef, inert: true });
+    useBodyScrollLock({ enabled: isOpen });
+    const setTriggerRef = (node) => {
+      triggerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    useEffect(() => {
+      if (draggingRef.current) return;
+      const parsed = parseColorToHsva(committed);
+      if (parsed) {
+        setHsva((prev) => mergeHsvaHue(prev, parsed));
+        setInputValue(formatHsva(parsed, format, showAlpha));
+        return;
+      }
+      if (isColorPickerEmpty(committed)) {
+        setInputValue("");
+      }
+    }, [committed, format, showAlpha]);
+    useEffect(() => {
+      if (status === "error") runShakeAnimation(rootRef.current);
+    }, [status, formItemControl?.shakeTrigger]);
+    useEffect(() => {
+      if (!isOpen) return;
+      const plane = svRef.current;
+      plane?.focus();
+    }, [isOpen]);
+    useEffect(() => {
+      return () => dragSessionRef.current?.dispose();
+    }, []);
+    const setOpenSafe = useCallback(
+      (next) => {
+        if (effectiveDisabled) return;
+        setOpen(next);
+      },
+      [effectiveDisabled, setOpen]
+    );
+    const commitHsva = useCallback(
+      (next) => {
+        setHsva(next);
+        const formatted = formatHsva(next, format, showAlpha);
+        setInputValue(formatted);
+        setCommitted(formatted);
+      },
+      [format, setCommitted, showAlpha]
+    );
+    const displayColor = cssColorFromHsva(hsva, showAlpha);
+    const hasValue = !isColorPickerEmpty(committed);
+    const showClear = Boolean(clearable && hasValue && !effectiveDisabled);
+    function handleTriggerKeyDown(event) {
+      if (effectiveDisabled) return;
+      if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
+        event.preventDefault();
+        setOpenSafe(!isOpen);
+      } else if (event.key === "Escape" && isOpen) {
+        event.preventDefault();
+        setOpenSafe(false);
+      } else if ((event.key === "Delete" || event.key === "Backspace") && showClear) {
+        event.preventDefault();
+        setCommitted("");
+        setInputValue("");
+      }
+    }
+    function handleFocusOut(event) {
+      const next = event.relatedTarget;
+      if (rootRef.current && next && rootRef.current.contains(next) || panelRef.current && next && panelRef.current.contains(next)) {
+        return;
+      }
+      formItemControl?.onBlur?.();
+      onBlur?.(event);
+    }
+    function startSvDrag(event) {
+      if (effectiveDisabled) return;
+      event.preventDefault();
+      const plane = svRef.current;
+      if (!plane) return;
+      draggingRef.current = true;
+      const apply = (clientX, clientY) => {
+        commitHsva(
+          hsvaFromSvPointer(
+            clientX,
+            clientY,
+            plane.getBoundingClientRect(),
+            hsvaRef.current.h,
+            hsvaRef.current.a
+          )
+        );
+      };
+      apply(event.clientX, event.clientY);
+      dragSessionRef.current?.dispose();
+      dragSessionRef.current = createDocumentDragSession({
+        startX: event.clientX,
+        startY: event.clientY,
+        pointerId: event.pointerId,
+        pointerTarget: plane,
+        dragThreshold: 0,
+        onMove: (payload) => apply(payload.currentX, payload.currentY),
+        onEnd: () => {
+          draggingRef.current = false;
+          dragSessionRef.current = null;
+        }
+      });
+    }
+    function handleSvKeyDown(event) {
+      const step = event.shiftKey ? 10 : 2;
+      let next = null;
+      if (event.key === "ArrowRight") next = nudgeColorPickerSv(hsva, step, 0);
+      else if (event.key === "ArrowLeft") next = nudgeColorPickerSv(hsva, -step, 0);
+      else if (event.key === "ArrowUp") next = nudgeColorPickerSv(hsva, 0, step);
+      else if (event.key === "ArrowDown") next = nudgeColorPickerSv(hsva, 0, -step);
+      if (!next) return;
+      event.preventDefault();
+      commitHsva(next);
+    }
+    function handleHueChange(event) {
+      draggingRef.current = true;
+      commitHsva(applyColorPickerHue(hsva, Number(event.target.value)));
+      draggingRef.current = false;
+    }
+    function handleAlphaChange(event) {
+      draggingRef.current = true;
+      commitHsva(applyColorPickerAlpha(hsva, Number(event.target.value) / 100));
+      draggingRef.current = false;
+    }
+    function handleInputChange(event) {
+      const raw = event.target.value;
+      setInputValue(raw);
+      const parsed = parseColorInput(raw, format, showAlpha);
+      if (!parsed) return;
+      const next = parseColorToHsva(parsed);
+      if (!next) return;
+      setHsva(next);
+      setCommitted(parsed);
+    }
+    function handlePreset(color) {
+      const formatted = commitPresetColor(color, hsva, format, showAlpha);
+      if (!formatted) return;
+      const next = parseColorToHsva(formatted);
+      if (next) setHsva(next);
+      setInputValue(formatted);
+      setCommitted(formatted);
+      if (closeOnSelect) setOpenSafe(false);
+    }
+    function handleClear() {
+      setCommitted("");
+      setInputValue("");
+    }
+    const triggerSwatchStyle = {
+      ...colorPickerCheckerboardStyle,
+      backgroundColor: hasValue ? displayColor : void 0
+    };
+    if (hasValue) {
+      triggerSwatchStyle.backgroundImage = `${colorPickerCheckerboardStyle.backgroundImage}`;
+      triggerSwatchStyle.boxShadow = `inset 0 0 0 999px ${displayColor}`;
+    }
+    const svStyle = {
+      ...getColorPickerSvPlaneStyle(hsva.h)
+    };
+    const alphaStyle = getColorPickerAlphaTrackStyle(hsva);
+    const panel = isOpen ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        id: panelId,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": labels.panelTitle,
+        className: classNames(colorPickerPanelClasses, overlay.floatingClasses, dropdownClassName),
+        style: overlay.floatingStyles,
+        "data-positioned": overlay.positioned,
+        "data-tiger-colorpicker-panel": "",
+        onBlur: handleFocusOut,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--tiger-text,#111827)]", children: labels.panelTitle }),
+            showClear ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: colorPickerClearButtonClasses,
+                "data-tiger-colorpicker-clear": "",
+                onClick: handleClear,
+                children: labels.clear
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: svRef,
+              className: colorPickerSvPlaneClasses,
+              style: svStyle,
+              role: "slider",
+              tabIndex: effectiveDisabled ? -1 : 0,
+              "aria-label": `${labels.saturation}, ${labels.brightness}`,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              "aria-valuenow": Math.round(hsva.s),
+              "aria-valuetext": `${labels.saturation} ${Math.round(hsva.s)}, ${labels.brightness} ${Math.round(hsva.v)}`,
+              "data-tiger-colorpicker-sv": "",
+              onPointerDown: startSvDrag,
+              onKeyDown: handleSvKeyDown,
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: colorPickerSvThumbClasses,
+                  style: { left: `${hsva.s}%`, top: `${100 - hsva.v}%` },
+                  "aria-hidden": "true"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: colorPickerChromeLabelClasses, children: labels.hue }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 0,
+                max: 360,
+                value: Math.round(hsva.h),
+                className: colorPickerSliderTrackClasses,
+                style: colorPickerHueTrackStyle,
+                "aria-label": labels.hue,
+                disabled: effectiveDisabled,
+                onChange: handleHueChange
+              }
+            )
+          ] }),
+          showAlpha ? /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: colorPickerChromeLabelClasses, children: labels.alpha }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 0,
+                max: 100,
+                value: Math.round(hsva.a * 100),
+                className: colorPickerSliderTrackClasses,
+                style: alphaStyle,
+                "aria-label": labels.alpha,
+                disabled: effectiveDisabled,
+                onChange: handleAlphaChange
+              }
+            )
+          ] }) : null,
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: classNames(colorPickerChromeLabelClasses, "uppercase"), children: getColorPickerFormatLabel(format, labels) }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                className: colorPickerInputClasses,
+                value: inputValue,
+                "aria-label": labels.value,
+                disabled: effectiveDisabled,
+                onChange: handleInputChange
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: colorPickerPreviewClasses,
+                style: {
+                  ...colorPickerCheckerboardStyle,
+                  boxShadow: `inset 0 0 0 999px ${displayColor}`
+                },
+                role: "img",
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-[var(--tiger-text,#111827)]", children: hasValue ? formatHsva(hsva, format, showAlpha) : "" })
+          ] }),
+          presets && presets.length > 0 ? /* @__PURE__ */ jsx(FormItemControlProvider, { value: null, children: /* @__PURE__ */ jsx(
+            ColorSwatch,
+            {
+              colors: presets,
+              value: hasValue ? formatHsva(hsva, "hex", false) : void 0,
+              columns: Math.min(8, presets.length),
+              size: "sm",
+              ariaLabel: labels.swatches,
+              onChange: (color) => handlePreset(color)
+            }
+          ) }) : null,
+          /* @__PURE__ */ jsx("div", { className: selectDoneActionClasses, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: selectDoneButtonClasses,
+              onClick: () => setOpenSafe(false),
+              children: labels.done
+            }
+          ) })
+        ]
+      }
+    ) : null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: rootRef,
+        className: classNames(colorPickerBaseClasses, className, status === "error" && SHAKE_CLASS),
+        style,
+        onBlur: handleFocusOut,
+        children: [
+          effectiveName ? /* @__PURE__ */ jsx("input", { type: "hidden", name: effectiveName, value: hasValue ? committed ?? "" : "" }) : null,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: setTriggerRef,
+              type: "button",
+              id: effectiveId,
+              className: getColorPickerTriggerClasses(size, effectiveDisabled, status),
+              "data-tiger-colorpicker-trigger": "",
+              "aria-label": labelledby ? void 0 : labels.trigger,
+              "aria-labelledby": labelledby,
+              "aria-describedby": describedBy,
+              title: labels.trigger,
+              "aria-haspopup": "dialog",
+              "aria-expanded": isOpen,
+              "aria-controls": isOpen ? panelId : void 0,
+              "aria-invalid": status === "error" ? true : void 0,
+              "aria-required": formItemControl?.required || void 0,
+              disabled: effectiveDisabled,
+              onClick: () => setOpenSafe(!isOpen),
+              onKeyDown: handleTriggerKeyDown,
+              children: /* @__PURE__ */ jsx("span", { className: colorPickerTriggerSwatchClasses, style: triggerSwatchStyle })
+            }
+          ),
+          renderOverlayPortal(panel, overlay.target)
+        ]
+      }
+    );
+  }
+);
+var ColorPicker_default = ColorPicker;
+
+export {
+  ColorPicker,
+  ColorPicker_default
+};