@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/{chunk-YNDPQVEK.mjs → chunk-4ED2QCE6.mjs}

@@ -1,19 +1,22 @@
 import {
   useCollapseContext
-} from "./chunk-Y6557RWE.mjs";
+} from "./chunk-2BRMZBQ2.mjs";
 
 // src/components/CollapsePanel.tsx
-import { useMemo, useCallback, useLayoutEffect, useRef } from "react";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import {
   classNames,
-  getCollapsePanelClasses,
-  getCollapsePanelHeaderClasses,
-  getCollapseIconClasses,
-  createCollapseTransitionController,
-  getInitialCollapseContentStyle,
+  collapseExtraClasses,
+  collapseHeaderRowClasses,
   collapseHeaderTextClasses,
-  collapsePanelContentWrapperClasses,
+  collapseKeyOf,
   collapsePanelContentBaseClasses,
+  collapsePanelContentWrapperClasses,
+  createAriaId,
+  createCollapseTransitionController,
+  getCollapseIconClasses,
+  getCollapsePanelClasses,
+  getCollapsePanelHeaderClasses,
   isPanelActive
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -29,9 +32,12 @@ var CollapsePanel = ({
 }) => {
   const collapseContext = useCollapseContext();
   const contentRef = useRef(null);
+  const headerRef = useRef(null);
   const transitionControllerRef = useRef(null);
-  const initialContentStyleRef = useRef(getInitialCollapseContentStyle(false));
   const initialActiveRef = useRef(null);
+  const headerIdRef = useRef(createAriaId({ prefix: "tiger-collapse-header" }));
+  const contentIdRef = useRef(createAriaId({ prefix: "tiger-collapse-content" }));
+  const [controllerReady, setControllerReady] = useState(false);
   if (!collapseContext) {
     throw new Error("CollapsePanel must be used within a Collapse component");
   }
@@ -41,9 +47,6 @@ var CollapsePanel = ({
   if (initialActiveRef.current === null) {
     initialActiveRef.current = isActive;
   }
-  if (!transitionControllerRef.current) {
-    initialContentStyleRef.current = getInitialCollapseContentStyle(initialActiveRef.current);
-  }
   const panelClasses = useMemo(() => {
     return classNames(getCollapsePanelClasses(collapseContext.ghost, className));
   }, [collapseContext.ghost, className]);
@@ -58,18 +61,24 @@ var CollapsePanel = ({
       collapseContext.handlePanelClick(panelKey);
     }
   }, [disabled, collapseContext, panelKey]);
-  const handleExtraClick = useCallback((event) => {
-    event.stopPropagation();
-  }, []);
   const handleKeyDown = useCallback(
     (event) => {
       if (disabled) {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+        }
         return;
       }
       if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
         collapseContext.handlePanelClick(panelKey);
+        return;
       }
+      if (!collapseContext.accordion) return;
+      const action = event.key === "ArrowDown" ? "next" : event.key === "ArrowUp" ? "prev" : event.key === "Home" ? "first" : event.key === "End" ? "last" : null;
+      if (!action) return;
+      event.preventDefault();
+      collapseContext.moveHeaderFocus(collapseKeyOf(panelKey), action);
     },
     [disabled, collapseContext, panelKey]
   );
@@ -79,11 +88,27 @@ var CollapsePanel = ({
       expanded: initialActiveRef.current ?? false
     });
     transitionControllerRef.current = controller;
+    setControllerReady(true);
     return () => {
       transitionControllerRef.current = null;
       controller.dispose();
     };
   }, []);
+  useLayoutEffect(() => {
+    const key = collapseKeyOf(panelKey);
+    collapseContext.registerHeader({
+      key,
+      el: {
+        focus: () => {
+          headerRef.current?.focus();
+        }
+      },
+      disabled
+    });
+    return () => {
+      collapseContext.unregisterHeader(key);
+    };
+  }, [collapseContext, panelKey, disabled]);
   useLayoutEffect(() => {
     transitionControllerRef.current?.update(isActive);
   }, [isActive]);
@@ -96,10 +121,11 @@ var CollapsePanel = ({
       viewBox: "0 0 16 16",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
       children: /* @__PURE__ */ jsx(
         "path",
         {
-          d: "M6 12L10 8L6 4",
+          d: "M4 6L8 10L12 6",
           stroke: "currentColor",
           strokeWidth: "2",
           strokeLinecap: "round",
@@ -108,32 +134,39 @@ var CollapsePanel = ({
       )
     }
   );
+  const initialClass = controllerReady ? void 0 : initialActiveRef.current ? "max-h-none opacity-100" : "max-h-0 opacity-0";
   return /* @__PURE__ */ jsxs("div", { className: panelClasses, style, children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: headerClasses,
-        role: "button",
-        tabIndex: disabled ? -1 : 0,
-        "aria-expanded": isActive,
-        "aria-disabled": disabled,
-        onClick: handleClick,
-        onKeyDown: handleKeyDown,
-        children: [
-          showArrow && collapseContext.expandIconPosition === "start" && arrowIcon,
-          /* @__PURE__ */ jsx("span", { className: collapseHeaderTextClasses, children: header }),
-          extra && /* @__PURE__ */ jsx("span", { className: "ml-auto", onClick: handleExtraClick, children: extra }),
-          showArrow && collapseContext.expandIconPosition === "end" && arrowIcon
-        ]
-      }
-    ),
+    /* @__PURE__ */ jsxs("div", { className: collapseHeaderRowClasses, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: headerRef,
+          type: "button",
+          id: headerIdRef.current,
+          className: headerClasses,
+          "aria-expanded": isActive,
+          "aria-controls": contentIdRef.current,
+          "aria-disabled": disabled || void 0,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          children: [
+            showArrow && collapseContext.expandIconPosition === "start" && arrowIcon,
+            /* @__PURE__ */ jsx("span", { className: collapseHeaderTextClasses, children: header }),
+            showArrow && collapseContext.expandIconPosition === "end" && arrowIcon
+          ]
+        }
+      ),
+      extra ? /* @__PURE__ */ jsx("span", { className: collapseExtraClasses, children: extra }) : null
+    ] }),
     /* @__PURE__ */ jsx(
       "div",
       {
         ref: contentRef,
+        id: contentIdRef.current,
         "data-tiger-collapse-content": "",
-        className: collapsePanelContentWrapperClasses,
-        style: initialContentStyleRef.current,
+        className: classNames(collapsePanelContentWrapperClasses, initialClass),
+        role: isActive ? "region" : void 0,
+        "aria-labelledby": isActive ? headerIdRef.current : void 0,
         ...!isActive ? {
           inert: true,
           "aria-hidden": true

package/dist/chunk-4IVRLBKW.mjs

@@ -0,0 +1,101 @@
+import {
+  ImagePreview
+} from "./chunk-SGKPZW57.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/ImageGroup.tsx
+import { useState, useCallback, useMemo, useRef, createContext } from "react";
+import {
+  clampImageGroupPreviewIndex,
+  getImageGroupClasses,
+  getImageGroupItemIndex,
+  getImageGroupLightboxItems,
+  getImageLabels,
+  registerImageGroupItem,
+  resolveImageGroupName,
+  unregisterImageGroupItem
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ImageGroupContext = createContext(null);
+var ImageGroup = ({
+  preview = true,
+  onPreviewOpenChange,
+  children,
+  className,
+  id,
+  style,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...rest
+}) => {
+  const config = useTigerConfig();
+  const labels = useMemo(() => getImageLabels(config.locale), [config.locale]);
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [previewIndex, setPreviewIndex] = useState(0);
+  const [items, setItems] = useState([]);
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
+  const register = useCallback((item) => {
+    setItems((current) => registerImageGroupItem(current, item).items);
+  }, []);
+  const unregister = useCallback((itemId) => {
+    setItems((current) => unregisterImageGroupItem(current, itemId));
+  }, []);
+  const openPreview = useCallback(
+    (itemId) => {
+      if (!preview) return;
+      const index = getImageGroupItemIndex(itemsRef.current, itemId);
+      if (index < 0) return;
+      setPreviewIndex(index);
+      setPreviewVisible(true);
+      onPreviewOpenChange?.(true);
+    },
+    [preview, onPreviewOpenChange]
+  );
+  const contextValue = useMemo(
+    () => ({ preview, register, unregister, openPreview }),
+    [preview, register, unregister, openPreview]
+  );
+  const images = getImageGroupLightboxItems(items);
+  const currentIndex = clampImageGroupPreviewIndex(previewIndex, images.length);
+  const groupName = resolveImageGroupName({
+    ariaLabel,
+    ariaLabelledby,
+    localeLabel: labels.groupAriaLabel
+  });
+  return /* @__PURE__ */ jsx(ImageGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      id,
+      style,
+      className: getImageGroupClasses(className),
+      role: groupName.role,
+      "aria-label": groupName["aria-label"],
+      "aria-labelledby": groupName["aria-labelledby"],
+      children: [
+        children,
+        preview && /* @__PURE__ */ jsx(
+          ImagePreview,
+          {
+            open: previewVisible && images.length > 0,
+            images,
+            currentIndex,
+            onOpenChange: (val) => {
+              setPreviewVisible(val);
+              if (!val) onPreviewOpenChange?.(false);
+            },
+            onCurrentIndexChange: setPreviewIndex
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+export {
+  ImageGroupContext,
+  ImageGroup
+};

package/dist/{chunk-N2D7NPEW.mjs → chunk-4JVXADTJ.mjs}

@@ -15,6 +15,10 @@ import {
   getCountdownValueClasses
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
+function initialRemaining(value, now) {
+  if (now === void 0) return 0;
+  return getCountdownRemaining(value, now);
+}
 var Countdown = ({
   value,
   now,
@@ -30,7 +34,7 @@ var Countdown = ({
   onFinish,
   ...rest
 }) => {
-  const [remaining, setRemaining] = useState(() => getCountdownRemaining(value, now));
+  const [remaining, setRemaining] = useState(() => initialRemaining(value, now));
   const finishedRef = useRef(remaining <= 0);
   const onChangeRef = useRef(onChange);
   const onFinishRef = useRef(onFinish);
@@ -38,44 +42,48 @@ var Countdown = ({
   onFinishRef.current = onFinish;
   const formatted = useMemo(() => formatCountdown(remaining, format), [format, remaining]);
   useEffect(() => {
-    const nextRemaining = getCountdownRemaining(value, now);
+    const nextRemaining = now === void 0 ? getCountdownRemaining(value) : getCountdownRemaining(value, now);
     setRemaining(nextRemaining);
     finishedRef.current = nextRemaining <= 0;
   }, [value, now]);
   useEffect(() => {
     if (interval <= 0 || value === void 0) return void 0;
+    const current = getCountdownRemaining(value);
+    if (current <= 0) return void 0;
     let timerId;
     const tick = () => {
       const nextRemaining = getCountdownRemaining(value);
       const payload = createCountdownPayload(nextRemaining, format);
       setRemaining(nextRemaining);
       onChangeRef.current?.(payload);
-      if (nextRemaining <= 0 && !finishedRef.current) {
-        finishedRef.current = true;
-        onFinishRef.current?.(payload);
+      if (nextRemaining <= 0) {
+        if (!finishedRef.current) {
+          finishedRef.current = true;
+          onFinishRef.current?.(payload);
+        }
         window.clearInterval(timerId);
       }
     };
     timerId = window.setInterval(tick, interval);
     return () => window.clearInterval(timerId);
   }, [format, interval, value]);
-  return /* @__PURE__ */ jsxs("div", { className: classNames(countdownBaseClasses, className), ...rest, children: [
-    title ? /* @__PURE__ */ jsx("div", { className: getCountdownTitleClasses(size), children: title }) : null,
-    /* @__PURE__ */ jsxs("div", { className: countdownValueWrapperClasses, children: [
-      prefix ? /* @__PURE__ */ jsx("span", { className: countdownPrefixClasses, children: prefix }) : null,
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: getCountdownValueClasses(size),
-          role: "timer",
-          "aria-live": "polite",
-          "aria-label": ariaLabel,
-          children: formatted
-        }
-      ),
-      suffix ? /* @__PURE__ */ jsx("span", { className: countdownSuffixClasses, children: suffix }) : null
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      className: classNames(countdownBaseClasses, className),
+      role: ariaLabel ? "group" : rest.role,
+      "aria-label": ariaLabel,
+      children: [
+        title ? /* @__PURE__ */ jsx("div", { className: getCountdownTitleClasses(size), children: title }) : null,
+        /* @__PURE__ */ jsxs("div", { className: countdownValueWrapperClasses, children: [
+          prefix ? /* @__PURE__ */ jsx("span", { className: countdownPrefixClasses, children: prefix }) : null,
+          /* @__PURE__ */ jsx("span", { className: getCountdownValueClasses(size), role: "timer", children: formatted }),
+          suffix ? /* @__PURE__ */ jsx("span", { className: countdownSuffixClasses, children: suffix }) : null
+        ] })
+      ]
+    }
+  );
 };
 var Countdown_default = Countdown;
 

package/dist/chunk-4KZETZUH.mjs

@@ -0,0 +1,143 @@
+import {
+  RadioGroupContext
+} from "./chunk-MADQ6KHD.mjs";
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+
+// src/components/Radio.tsx
+import { useContext, useMemo, forwardRef } from "react";
+import {
+  classNames,
+  defaultRadioColors,
+  devWarn,
+  getRadioDotClasses,
+  getRadioLabelClasses,
+  getRadioVisualClasses,
+  mergeAriaDescribedBy,
+  radioRootBaseClasses,
+  resolveRadioInputName
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Radio = forwardRef(function Radio2({
+  value,
+  size,
+  disabled,
+  name,
+  checked,
+  defaultChecked = false,
+  status: statusProp,
+  onChange,
+  children,
+  className,
+  style,
+  id,
+  onBlur,
+  ...props
+}, ref) {
+  const groupContext = useContext(RadioGroupContext);
+  const formItemControl = useFormItemControlContext();
+  const isInGroup = !!groupContext;
+  if (isInGroup && checked !== void 0) {
+    devWarn(
+      "Radio.groupChecked",
+      "Radio inside RadioGroup follows the group value. Per-item `checked` is ignored."
+    );
+  }
+  const [checkedState, setChecked] = useControlledState({
+    value: isInGroup ? void 0 : checked,
+    defaultValue: defaultChecked,
+    onChange
+  });
+  const actualSize = size || groupContext?.size || "md";
+  const actualDisabled = Boolean(disabled || groupContext?.disabled || formItemControl?.disabled);
+  const actualName = resolveRadioInputName(name, groupContext?.name);
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const isChecked = isInGroup ? groupContext.value === value : checkedState;
+  const radioClasses = useMemo(
+    () => getRadioVisualClasses({
+      size: actualSize,
+      checked: isChecked,
+      disabled: actualDisabled,
+      colors: defaultRadioColors
+    }),
+    [actualSize, isChecked, actualDisabled]
+  );
+  const dotClasses = useMemo(
+    () => getRadioDotClasses({
+      size: actualSize,
+      checked: isChecked,
+      colors: defaultRadioColors
+    }),
+    [actualSize, isChecked]
+  );
+  const labelClasses = useMemo(
+    () => getRadioLabelClasses({
+      size: actualSize,
+      disabled: actualDisabled,
+      colors: defaultRadioColors
+    }),
+    [actualSize, actualDisabled]
+  );
+  const handleChange = (event) => {
+    if (actualDisabled) {
+      event.preventDefault();
+      return;
+    }
+    const next = event.target.checked;
+    if (!next) return;
+    if (isInGroup) {
+      groupContext.onChange(value);
+      return;
+    }
+    setChecked(true, event);
+    formItemControl?.onChange?.(value);
+  };
+  const handleBlur = (event) => {
+    onBlur?.(event);
+    if (!isInGroup) formItemControl?.onBlur?.();
+  };
+  const describedBy = mergeAriaDescribedBy(
+    typeof props["aria-describedby"] === "string" ? props["aria-describedby"] : void 0,
+    isInGroup ? void 0 : formItemControl?.describedBy
+  );
+  const effectiveId = isInGroup ? id : id ?? formItemControl?.id;
+  const input = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...props,
+      ref,
+      id: effectiveId,
+      type: "radio",
+      className: "sr-only peer",
+      name: actualName,
+      value,
+      checked: isChecked,
+      disabled: actualDisabled,
+      "aria-invalid": status === "error" ? true : props["aria-invalid"],
+      "aria-describedby": describedBy,
+      onChange: handleChange,
+      onBlur: handleBlur
+    }
+  );
+  const visual = /* @__PURE__ */ jsx("span", { className: radioClasses, "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: dotClasses }) });
+  if (!children) {
+    return /* @__PURE__ */ jsxs("span", { className: classNames(radioRootBaseClasses, className), style, children: [
+      input,
+      visual
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("label", { className: classNames(radioRootBaseClasses, className), style, children: [
+    input,
+    visual,
+    /* @__PURE__ */ jsx("span", { className: labelClasses, children })
+  ] });
+});
+Radio.displayName = "Radio";
+
+export {
+  Radio
+};

package/dist/chunk-4ZFZCNX5.mjs

@@ -0,0 +1,96 @@
+// src/components/Skeleton.tsx
+import { forwardRef } from "react";
+import {
+  classNames,
+  getParagraphRowWidth,
+  getSkeletonClasses,
+  getSkeletonInlineStyle,
+  isSkeletonNamed,
+  resolveSkeletonAriaHidden
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var Skeleton = forwardRef(function Skeleton2({
+  variant = "text",
+  animation = "pulse",
+  width,
+  height,
+  shape = "circle",
+  rows = 1,
+  paragraph = false,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-hidden": ariaHidden,
+  ...divProps
+}, ref) {
+  const named = isSkeletonNamed(ariaLabel, ariaLabelledBy);
+  const computedAriaHidden = resolveSkeletonAriaHidden(ariaHidden, named);
+  const namedStatus = named && computedAriaHidden !== true;
+  const inlineStyle = getSkeletonInlineStyle(width, height);
+  const a11y = {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-hidden": computedAriaHidden,
+    role: namedStatus ? "status" : void 0,
+    "aria-busy": namedStatus ? true : void 0
+  };
+  if (variant === "text" && rows > 1) {
+    const rowElements = [];
+    for (let i = 0; i < rows; i++) {
+      const rowStyle = {};
+      if (paragraph) {
+        rowStyle.width = getParagraphRowWidth(i, rows);
+      }
+      if (height) rowStyle.height = height;
+      rowElements.push(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames(
+              getSkeletonClasses(variant, animation, shape, {
+                height,
+                omitWidth: true
+              }),
+              !paragraph && "w-full",
+              i < rows - 1 && "mb-2"
+            ),
+            style: Object.keys(rowStyle).length > 0 ? rowStyle : void 0
+          },
+          i
+        )
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...divProps,
+        ref,
+        "data-tiger-skeleton": "",
+        className: classNames("flex flex-col", !width && "w-full", className),
+        style: { ...inlineStyle, ...style },
+        ...a11y,
+        children: rowElements
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...divProps,
+      ref,
+      "data-tiger-skeleton": "",
+      className: classNames(
+        getSkeletonClasses(variant, animation, shape, { width, height }),
+        className
+      ),
+      style: { ...inlineStyle, ...style },
+      ...a11y
+    }
+  );
+});
+Skeleton.displayName = "Skeleton";
+
+export {
+  Skeleton
+};