@expcat/tigercat-react 2.1.2 → 2.1.3

package/dist/chunk-JVLLOOEE.mjs

@@ -0,0 +1,248 @@
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/ColorSwatch.tsx
+import { forwardRef, useCallback, useId, useMemo, useRef, useState } from "react";
+import {
+  classNames,
+  COLOR_SWATCH_CHECK_PATH,
+  colorSwatchBaseClasses,
+  colorSwatchGridClasses,
+  colorSwatchGroupClasses,
+  colorSwatchGroupLabelClasses,
+  createDefaultColorSwatchGroups,
+  flattenColorSwatchGroups,
+  getColorPickerLabels,
+  getColorSwatchButtonClasses,
+  getColorSwatchCheckClasses,
+  getColorSwatchCheckTone,
+  getElementTextDirection,
+  getNextColorSwatchIndex,
+  isColorSwatchSelected,
+  markFormItemGroupControl,
+  mergeAriaDescribedBy,
+  mergeTigerLocale,
+  normalizeColorSwatchGroups
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ColorSwatchInner = forwardRef(function ColorSwatch({
+  value,
+  defaultValue,
+  disabled = false,
+  size = "md",
+  colors,
+  groups,
+  columns = 6,
+  ariaLabel,
+  className,
+  locale,
+  labels: labelsOverride,
+  name,
+  id,
+  status: statusProp,
+  onChange,
+  onBlur,
+  style,
+  ...rest
+}, ref) {
+  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 rest["aria-describedby"] === "string" ? rest["aria-describedby"] : void 0,
+    formItemControl?.describedBy
+  );
+  const labelledby = typeof rest["aria-labelledby"] === "string" && rest["aria-labelledby"].trim() ? rest["aria-labelledby"] : formItemControl?.labelId;
+  const groupName = typeof rest["aria-label"] === "string" && rest["aria-label"].trim() ? rest["aria-label"] : ariaLabel ?? labels.swatches;
+  const parsedValue = value !== void 0 ? value : formItemControl?.value;
+  const [selectedValue, setSelectedValue] = useControlledState({
+    value: value !== void 0 || formItemControl?.value !== void 0 ? parsedValue : void 0,
+    defaultValue,
+    onChange: (next, option) => {
+      if (next !== void 0) onChange?.(next, option);
+      formItemControl?.onChange?.(next);
+    }
+  });
+  const [focusIndex, setFocusIndex] = useState(-1);
+  const optionRefs = useRef([]);
+  const rootRef = useRef(null);
+  const reactId = useId();
+  const fallbackGroups = useMemo(
+    () => createDefaultColorSwatchGroups(labels.primaryGroup, labels.accentGroup),
+    [labels.accentGroup, labels.primaryGroup]
+  );
+  const normalizedGroups = useMemo(
+    () => normalizeColorSwatchGroups(groups, colors, fallbackGroups),
+    [groups, colors, fallbackGroups]
+  );
+  const options = useMemo(() => flattenColorSwatchGroups(normalizedGroups), [normalizedGroups]);
+  const selectedIndex = options.findIndex(
+    (option) => isColorSwatchSelected(option.value, selectedValue)
+  );
+  const firstEnabledIndex = options.findIndex((option) => !option.disabled);
+  const activeIndex = selectedIndex >= 0 ? selectedIndex : firstEnabledIndex;
+  const handleSelect = useCallback(
+    (option) => {
+      if (effectiveDisabled || option.disabled) return;
+      setSelectedValue(option.value, option);
+    },
+    [effectiveDisabled, setSelectedValue]
+  );
+  function handleKeyDown(optionIndex, event) {
+    if (effectiveDisabled) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      const option = options[optionIndex];
+      if (option) handleSelect(option);
+      return;
+    }
+    const dir = getElementTextDirection(rootRef.current);
+    const nextIndex = getNextColorSwatchIndex(
+      normalizedGroups,
+      optionIndex,
+      event.key,
+      columns,
+      dir
+    );
+    if (nextIndex < 0 || nextIndex === optionIndex) return;
+    event.preventDefault();
+    setFocusIndex(nextIndex);
+    optionRefs.current[nextIndex]?.focus();
+  }
+  function handleBlur(event) {
+    const next = event.relatedTarget;
+    if (rootRef.current && next && rootRef.current.contains(next)) return;
+    formItemControl?.onBlur?.();
+    onBlur?.(event);
+  }
+  const assignRoot = (node) => {
+    rootRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  if (options.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: assignRoot,
+        className: classNames(colorSwatchBaseClasses, className),
+        style,
+        id: effectiveId
+      }
+    );
+  }
+  let flatIndex = 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: assignRoot,
+      className: classNames(colorSwatchBaseClasses, className),
+      style,
+      role: "radiogroup",
+      id: effectiveId,
+      "aria-label": labelledby ? void 0 : groupName,
+      "aria-labelledby": labelledby,
+      "aria-describedby": describedBy,
+      "aria-invalid": status === "error" ? true : void 0,
+      "aria-disabled": effectiveDisabled || void 0,
+      "aria-required": formItemControl?.required || void 0,
+      onBlur: handleBlur,
+      children: [
+        effectiveName ? /* @__PURE__ */ jsx("input", { type: "hidden", name: effectiveName, value: selectedValue ?? "" }) : null,
+        normalizedGroups.map((group, groupIndex) => {
+          const labelId = group.label ? `${reactId}-g${groupIndex}` : void 0;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: colorSwatchGroupClasses,
+              role: group.label ? "group" : void 0,
+              "aria-labelledby": labelId,
+              children: [
+                group.label ? /* @__PURE__ */ jsx("div", { id: labelId, className: colorSwatchGroupLabelClasses, children: group.label }) : null,
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: colorSwatchGridClasses,
+                    style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
+                    children: group.colors.map((option) => {
+                      const optionIndex = flatIndex;
+                      flatIndex += 1;
+                      const selected = isColorSwatchSelected(option.value, selectedValue);
+                      const optionDisabled = effectiveDisabled || !!option.disabled;
+                      const tabIndex = !optionDisabled && optionIndex === (focusIndex >= 0 ? focusIndex : activeIndex) ? 0 : -1;
+                      const tone = getColorSwatchCheckTone(option.value);
+                      return /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          ref: (node) => {
+                            optionRefs.current[optionIndex] = node;
+                          },
+                          type: "button",
+                          className: getColorSwatchButtonClasses(size, selected, optionDisabled),
+                          style: { backgroundColor: option.value },
+                          role: "radio",
+                          "aria-checked": selected,
+                          "aria-label": option.label,
+                          disabled: optionDisabled,
+                          tabIndex,
+                          onFocus: () => setFocusIndex(optionIndex),
+                          onClick: () => handleSelect(option),
+                          onKeyDown: (event) => handleKeyDown(optionIndex, event),
+                          children: selected ? /* @__PURE__ */ jsx("span", { className: getColorSwatchCheckClasses(size, tone), "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                            "svg",
+                            {
+                              viewBox: "0 0 20 20",
+                              fill: "none",
+                              stroke: "currentColor",
+                              strokeWidth: "2.5",
+                              className: "h-full w-full",
+                              children: /* @__PURE__ */ jsx(
+                                "path",
+                                {
+                                  d: COLOR_SWATCH_CHECK_PATH,
+                                  strokeLinecap: "round",
+                                  strokeLinejoin: "round"
+                                }
+                              )
+                            }
+                          ) }) : null
+                        },
+                        `${option.groupIndex}-${option.index}-${option.value}`
+                      );
+                    })
+                  }
+                )
+              ]
+            },
+            `${groupIndex}-${group.label ?? "group"}`
+          );
+        })
+      ]
+    }
+  );
+});
+var ColorSwatch2 = markFormItemGroupControl(ColorSwatchInner);
+var ColorSwatch_default = ColorSwatch2;
+
+export {
+  ColorSwatch2 as ColorSwatch,
+  ColorSwatch_default
+};

package/dist/chunk-KDO5PUMV.mjs

@@ -0,0 +1,368 @@
+import {
+  Icon
+} from "./chunk-WPRXOO6N.mjs";
+import {
+  Button
+} from "./chunk-WFLXJOFU.mjs";
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Transfer.tsx
+import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef } from "react";
+import {
+  applyTransferSelectAll,
+  canMoveTransferItems,
+  classNames,
+  emptyTransferSelectedKeys,
+  filterTransferItems,
+  getCheckboxLabelClasses,
+  getCheckboxVisualClasses,
+  getInputClasses,
+  getTransferItemClasses,
+  getTransferLabels,
+  getTransferSelectAllState,
+  hasTransferKey,
+  markFormItemGroupControl,
+  mergeAriaDescribedBy,
+  mergeTigerLocale,
+  moveTransferItems,
+  resolveLocaleText,
+  resolveTransferTargetKeys,
+  runShakeAnimation,
+  splitTransferData,
+  toggleTransferKey,
+  transferBaseClasses,
+  transferEmptyClasses,
+  transferItemDescriptionClasses,
+  transferKeyId,
+  transferMoveToSourceIconClasses,
+  transferMoveToTargetIconClasses,
+  transferOperationClasses,
+  transferPanelBodyClasses,
+  transferPanelClasses,
+  transferPanelHeaderClasses,
+  checkboxCheckPathD,
+  checkboxIconSizeClasses,
+  checkboxIconViewBox,
+  checkboxIndeterminatePathD,
+  devWarn
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TransferCheckbox({
+  checked,
+  indeterminate,
+  disabled,
+  size,
+  onChange,
+  children
+}) {
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (inputRef.current) inputRef.current.indeterminate = Boolean(indeterminate);
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxs("label", { className: getCheckboxLabelClasses(size, Boolean(disabled)), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "checkbox",
+        className: "sr-only peer",
+        checked,
+        disabled,
+        "aria-checked": indeterminate ? "mixed" : checked,
+        onChange: () => {
+          if (!disabled) onChange();
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: getCheckboxVisualClasses({
+          size,
+          checked,
+          indeterminate,
+          disabled: Boolean(disabled)
+        }),
+        "aria-hidden": "true",
+        children: (checked || indeterminate) && /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: checkboxIconSizeClasses[size],
+            viewBox: checkboxIconViewBox,
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ jsx("path", { d: indeterminate ? checkboxIndeterminatePathD : checkboxCheckPathD })
+          }
+        )
+      }
+    ),
+    children
+  ] });
+}
+var TransferInner = forwardRef(function Transfer(props, ref) {
+  const {
+    value,
+    targetKeys,
+    defaultValue,
+    defaultTargetKeys,
+    selectedKeys: selectedKeysProp,
+    defaultSelectedKeys,
+    dataSource = [],
+    size = "md",
+    disabled = false,
+    searchable = false,
+    searchValue,
+    defaultSearchValue,
+    sourceTitle,
+    targetTitle,
+    emptyText,
+    filterOption,
+    className,
+    name,
+    status: statusProp,
+    onChange,
+    onSelectChange,
+    onSearchChange,
+    locale,
+    labels: labelsOverride,
+    onBlur,
+    ...rest
+  } = props;
+  const formItemControl = useFormItemControlContext();
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(
+    () => getTransferLabels(mergedLocale, {
+      ...labelsOverride,
+      sourceTitle,
+      targetTitle
+    }),
+    [mergedLocale, labelsOverride, sourceTitle, targetTitle]
+  );
+  const resolved = resolveTransferTargetKeys(value, targetKeys);
+  useEffect(() => {
+    if (resolved.conflict) {
+      devWarn(
+        "Transfer.valueTargetKeys",
+        "Transfer received both `value` and `targetKeys`. `value` wins."
+      );
+    }
+  }, [resolved.conflict]);
+  const [targetValue, setTargetValue] = useControlledState({
+    value: resolved.keys,
+    defaultValue: defaultValue ?? defaultTargetKeys ?? [],
+    onChange: (next) => {
+      formItemControl?.onChange?.(next);
+    }
+  });
+  const [selected, setSelected] = useControlledState({
+    value: selectedKeysProp,
+    defaultValue: defaultSelectedKeys ?? emptyTransferSelectedKeys(),
+    onChange: onSelectChange
+  });
+  const [search, setSearch] = useControlledState({
+    value: searchValue,
+    defaultValue: defaultSearchValue ?? {},
+    onChange: onSearchChange
+  });
+  const effectiveDisabled = Boolean(disabled || formItemControl?.disabled);
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const fieldName = name ?? formItemControl?.name;
+  const describedBy = mergeAriaDescribedBy(
+    typeof rest["aria-describedby"] === "string" ? rest["aria-describedby"] : void 0,
+    formItemControl?.describedBy
+  );
+  const labelledby = typeof rest["aria-labelledby"] === "string" ? rest["aria-labelledby"] : formItemControl?.labelId;
+  const reactId = useId();
+  const groupId = rest.id ?? formItemControl?.id ?? `tiger-transfer-${reactId}`;
+  const rootRef = useRef(null);
+  useImperativeHandle(ref, () => rootRef.current, []);
+  useEffect(() => {
+    if (status === "error") runShakeAnimation(rootRef.current);
+  }, [status, formItemControl?.shakeTrigger]);
+  const { sourceItems, targetItems } = useMemo(
+    () => splitTransferData(dataSource, targetValue),
+    [dataSource, targetValue]
+  );
+  const sourceSearch = search.source ?? "";
+  const targetSearch = search.target ?? "";
+  const filteredSource = useMemo(
+    () => filterTransferItems(sourceItems, sourceSearch, filterOption),
+    [sourceItems, sourceSearch, filterOption]
+  );
+  const filteredTarget = useMemo(
+    () => filterTransferItems(targetItems, targetSearch, filterOption),
+    [targetItems, targetSearch, filterOption]
+  );
+  const canMoveRight = canMoveTransferItems(selected.source, dataSource, effectiveDisabled);
+  const canMoveLeft = canMoveTransferItems(selected.target, dataSource, effectiveDisabled);
+  function updateSearch(panel, nextValue) {
+    setSearch({ ...search, [panel]: nextValue });
+  }
+  function updateSelected(next) {
+    setSelected(next);
+  }
+  function toggle(panel, key) {
+    updateSelected({ ...selected, [panel]: toggleTransferKey(selected[panel], key) });
+  }
+  function selectAll(panel, visible, checked) {
+    const state = getTransferSelectAllState(visible, selected[panel]);
+    updateSelected({
+      ...selected,
+      [panel]: applyTransferSelectAll(selected[panel], state.enabledKeys, checked)
+    });
+  }
+  function move(direction) {
+    const selectedKeys = direction === "right" ? selected.source : selected.target;
+    if (direction === "right" && !canMoveRight) return;
+    if (direction === "left" && !canMoveLeft) return;
+    const result = moveTransferItems(direction, targetValue, selectedKeys, dataSource);
+    const movedIds = new Set(result.movedKeys.map(transferKeyId));
+    setTargetValue(result.targetKeys);
+    onChange?.(result.targetKeys, direction, result.movedKeys);
+    updateSelected({
+      source: direction === "right" ? selected.source.filter((key) => !movedIds.has(transferKeyId(key))) : selected.source,
+      target: direction === "left" ? selected.target.filter((key) => !movedIds.has(transferKeyId(key))) : selected.target
+    });
+  }
+  function handleFocusOut(event) {
+    onBlur?.(event);
+    const next = event.relatedTarget;
+    if (next && event.currentTarget.contains(next)) return;
+    formItemControl?.onBlur?.();
+  }
+  function renderPanel(panel, title, allItems, visibleItems, query) {
+    const selectedKeys = selected[panel];
+    const selectedCount = selectedKeys.filter(
+      (key) => allItems.some((item) => transferKeyId(item.key) === transferKeyId(key))
+    ).length;
+    const selectState = getTransferSelectAllState(visibleItems, selectedKeys);
+    return /* @__PURE__ */ jsxs("div", { className: transferPanelClasses, role: "group", "aria-label": title, children: [
+      /* @__PURE__ */ jsx("div", { className: transferPanelHeaderClasses, children: /* @__PURE__ */ jsx(
+        TransferCheckbox,
+        {
+          checked: selectState.checked,
+          indeterminate: selectState.indeterminate,
+          disabled: effectiveDisabled || selectState.enabledKeys.length === 0,
+          size,
+          onChange: () => selectAll(panel, visibleItems, !selectState.checked),
+          children: /* @__PURE__ */ jsxs("span", { className: "font-medium text-[var(--tiger-text,#111827)]", children: [
+            title,
+            " (",
+            selectedCount,
+            "/",
+            allItems.length,
+            ")"
+          ] })
+        }
+      ) }),
+      searchable ? /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "search",
+          className: getInputClasses({ status, size: "sm" }),
+          placeholder: resolveLocaleText("Search", mergedLocale?.common?.searchPlaceholder),
+          value: query,
+          disabled: effectiveDisabled,
+          "aria-label": labels.searchAriaLabel.replace("{title}", title),
+          onChange: (event) => updateSearch(panel, event.target.value)
+        }
+      ) : null,
+      /* @__PURE__ */ jsx("div", { className: transferPanelBodyClasses, children: visibleItems.length > 0 ? visibleItems.map((item) => {
+        const isSelected = hasTransferKey(selectedKeys, item.key);
+        const itemDisabled = effectiveDisabled || Boolean(item.disabled);
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: getTransferItemClasses(isSelected, itemDisabled, size),
+            children: /* @__PURE__ */ jsx(
+              TransferCheckbox,
+              {
+                checked: isSelected,
+                disabled: itemDisabled,
+                size,
+                onChange: () => toggle(panel, item.key),
+                children: /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx("span", { className: "block truncate", children: item.label }),
+                  item.description ? /* @__PURE__ */ jsx("span", { className: transferItemDescriptionClasses, children: item.description }) : null
+                ] })
+              }
+            )
+          },
+          transferKeyId(item.key)
+        );
+      }) : /* @__PURE__ */ jsx("div", { className: transferEmptyClasses, children: resolveLocaleText("No data", emptyText, mergedLocale?.common?.emptyText) }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      ref: rootRef,
+      id: groupId,
+      role: "group",
+      "aria-labelledby": labelledby,
+      "aria-describedby": describedBy,
+      "aria-invalid": status === "error" ? true : rest["aria-invalid"],
+      "aria-required": formItemControl?.required || rest["aria-required"] ? true : void 0,
+      "aria-disabled": effectiveDisabled || void 0,
+      className: classNames(
+        transferBaseClasses,
+        status === "error" && "ring-1 ring-[var(--tiger-error,#dc2626)]",
+        className
+      ),
+      onBlur: handleFocusOut,
+      children: [
+        fieldName ? targetValue.map((key) => /* @__PURE__ */ jsx("input", { type: "hidden", name: fieldName, value: String(key) }, transferKeyId(key))) : null,
+        renderPanel("source", labels.sourceTitle, sourceItems, filteredSource, sourceSearch),
+        /* @__PURE__ */ jsxs("div", { className: transferOperationClasses, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              disabled: !canMoveRight,
+              "aria-label": labels.moveToTargetAriaLabel,
+              onClick: () => move("right"),
+              children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", className: transferMoveToTargetIconClasses, "aria-hidden": true })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              disabled: !canMoveLeft,
+              "aria-label": labels.moveToSourceAriaLabel,
+              onClick: () => move("left"),
+              children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", className: transferMoveToSourceIconClasses, "aria-hidden": true })
+            }
+          )
+        ] }),
+        renderPanel("target", labels.targetTitle, targetItems, filteredTarget, targetSearch)
+      ]
+    }
+  );
+});
+var Transfer2 = markFormItemGroupControl(TransferInner);
+Transfer2.displayName = "Transfer";
+
+export {
+  Transfer2 as Transfer
+};