@expcat/tigercat-react 0.4.3 → 1.0.4

package/dist/chunk-WNLUUD5N.mjs

@@ -0,0 +1,179 @@
+import { useRef, useId, useState, useEffect, useCallback } from 'react';
+import { injectShakeStyle, SHAKE_CLASS, getInputClasses, classNames, getInputAffixClasses, getInputWrapperClasses, getInputCountClasses, parseInputValue, getInputErrorClasses, getInputClearButtonClasses, getInputPasswordToggleClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Input.tsx
+var Input = ({
+  size = "md",
+  type = "text",
+  status = "default",
+  errorMessage,
+  _shakeTrigger,
+  prefix,
+  suffix,
+  value,
+  defaultValue,
+  placeholder = "",
+  disabled = false,
+  readonly = false,
+  required = false,
+  maxLength,
+  minLength,
+  name,
+  id,
+  autoComplete,
+  autoFocus = false,
+  clearable = false,
+  showPassword = false,
+  showCount = false,
+  onInput,
+  onChange,
+  onFocus,
+  onBlur,
+  onClear,
+  className,
+  style,
+  ...props
+}) => {
+  injectShakeStyle();
+  const wrapperRef = useRef(null);
+  const inputRef = useRef(null);
+  const reactId = useId();
+  const errorMsgId = `tiger-input-error-${reactId}`;
+  const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+  const [passwordVisible, setPasswordVisible] = useState(false);
+  useEffect(() => {
+    if (status === "error" && wrapperRef.current) {
+      const el = wrapperRef.current;
+      el.classList.remove(SHAKE_CLASS);
+      void el.offsetWidth;
+      el.classList.add(SHAKE_CLASS);
+    }
+  }, [status, _shakeTrigger]);
+  const handleAnimationEnd = useCallback(() => {
+    wrapperRef.current?.classList.remove(SHAKE_CLASS);
+  }, []);
+  const isControlled = value !== void 0;
+  const inputValue = isControlled ? value : internalValue;
+  const currentValStr = String(inputValue);
+  const handleInput = (event) => {
+    if (!isControlled) {
+      setInternalValue(parseInputValue(event.currentTarget, type));
+    }
+    onInput?.(event);
+  };
+  const handleChange = (event) => {
+    if (!isControlled) {
+      setInternalValue(parseInputValue(event.currentTarget, type));
+    }
+    onChange?.(event);
+  };
+  const handleClear = () => {
+    if (!isControlled) {
+      setInternalValue("");
+    }
+    onClear?.();
+    inputRef.current?.focus();
+  };
+  const togglePasswordVisibility = () => {
+    setPasswordVisible((v) => !v);
+  };
+  const hasPrefix = !!prefix;
+  const hasSuffix = !!suffix || clearable || showPassword;
+  const activeError = status === "error" && !!errorMessage;
+  const showClear = clearable && !disabled && !readonly && currentValStr.length > 0;
+  const showPasswordToggle = showPassword && type === "password" && !disabled;
+  const effectiveType = showPassword && type === "password" ? passwordVisible ? "text" : "password" : type;
+  const inputClasses = getInputClasses({
+    size,
+    status,
+    hasPrefix,
+    hasSuffix
+  });
+  const renderSuffix = () => {
+    if (activeError) {
+      return /* @__PURE__ */ jsx("div", { id: errorMsgId, className: getInputErrorClasses(size), children: errorMessage });
+    }
+    if (showClear) {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: getInputClearButtonClasses(size),
+          onClick: handleClear,
+          "aria-label": "Clear input",
+          tabIndex: -1,
+          children: "\u2715"
+        }
+      );
+    }
+    if (showPasswordToggle) {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: getInputPasswordToggleClasses(size),
+          onClick: togglePasswordVisibility,
+          "aria-label": passwordVisible ? "Hide password" : "Show password",
+          tabIndex: -1,
+          children: passwordVisible ? "\u{1F648}" : "\u{1F441}"
+        }
+      );
+    }
+    if (suffix) {
+      return /* @__PURE__ */ jsx("div", { className: getInputAffixClasses("suffix", size), children: suffix });
+    }
+    return null;
+  };
+  const wrapperNode = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: classNames(getInputWrapperClasses(), className),
+      style,
+      onAnimationEnd: handleAnimationEnd,
+      children: [
+        hasPrefix && /* @__PURE__ */ jsx("div", { className: getInputAffixClasses("prefix", size), children: prefix }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...props,
+            ref: inputRef,
+            className: inputClasses,
+            type: effectiveType,
+            value: inputValue,
+            placeholder,
+            disabled,
+            readOnly: readonly,
+            required,
+            maxLength,
+            minLength,
+            name,
+            id,
+            autoComplete,
+            autoFocus,
+            ...status === "error" ? { "aria-invalid": true } : {},
+            ...activeError ? { "aria-describedby": errorMsgId } : {},
+            onInput: handleInput,
+            onChange: handleChange,
+            onFocus,
+            onBlur
+          }
+        ),
+        renderSuffix()
+      ]
+    }
+  );
+  if (showCount) {
+    const count = currentValStr.length;
+    const isOver = maxLength !== void 0 && count > maxLength;
+    const countText = maxLength !== void 0 ? `${count} / ${maxLength}` : `${count}`;
+    return /* @__PURE__ */ jsxs("div", { children: [
+      wrapperNode,
+      /* @__PURE__ */ jsx("div", { className: getInputCountClasses(isOver), children: countText })
+    ] });
+  }
+  return wrapperNode;
+};
+
+export { Input };

package/dist/{chunk-VCOBBJLP.js → chunk-WVVXZKNI.js}

@@ -1,10 +1,10 @@
 'use strict';
 
+var chunkUKGQ7256_js = require('./chunk-UKGQ7256.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
 
-// src/components/Textarea.tsx
 var Textarea = react.forwardRef(
   ({
     size = "md",
@@ -29,9 +29,10 @@ var Textarea = react.forwardRef(
     ...props
   }, ref) => {
     const textareaRef = react.useRef(null);
-    const [internalValue, setInternalValue] = react.useState(defaultValue || "");
-    const isControlled = value !== void 0;
-    const currentValue = isControlled ? value : internalValue;
+    const [currentValue, setInternalValue, isControlled] = chunkUKGQ7256_js.useControlledState(
+      value,
+      defaultValue || ""
+    );
     const setRefs = (node) => {
       textareaRef.current = node;
       if (typeof ref === "function") ref(node);

package/dist/chunk-XEYP62CR.js

@@ -0,0 +1,194 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/ImageViewer.tsx
+function SvgIcon({ pathD, label }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className: "w-5 h-5",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-label": label,
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: pathD })
+    }
+  );
+}
+var ImageViewer = ({
+  images,
+  open = false,
+  currentIndex = 0,
+  zoomable = true,
+  rotatable = true,
+  showNav = true,
+  showCounter = true,
+  maskClosable = true,
+  minZoom = 0.5,
+  maxZoom = 3,
+  className,
+  onClose,
+  onIndexChange
+}) => {
+  const [index, setIndex] = react.useState(currentIndex);
+  const [zoom, setZoom] = react.useState(1);
+  const [rotation, setRotation] = react.useState(0);
+  react.useEffect(() => {
+    setIndex(currentIndex);
+  }, [currentIndex]);
+  const handleClose = react.useCallback(() => {
+    onClose?.();
+  }, [onClose]);
+  const handlePrev = react.useCallback(() => {
+    const newIndex = (index - 1 + images.length) % images.length;
+    setIndex(newIndex);
+    setZoom(1);
+    setRotation(0);
+    onIndexChange?.(newIndex);
+  }, [index, images.length, onIndexChange]);
+  const handleNext = react.useCallback(() => {
+    const newIndex = (index + 1) % images.length;
+    setIndex(newIndex);
+    setZoom(1);
+    setRotation(0);
+    onIndexChange?.(newIndex);
+  }, [index, images.length, onIndexChange]);
+  react.useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      switch (e.key) {
+        case "Escape":
+          handleClose();
+          break;
+        case "ArrowLeft":
+          handlePrev();
+          break;
+        case "ArrowRight":
+          handleNext();
+          break;
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, handleClose, handlePrev, handleNext]);
+  const backdropClasses = react.useMemo(
+    () => tigercatCore.classNames(tigercatCore.imageViewerBackdropClasses, className),
+    [className]
+  );
+  if (!open || images.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: backdropClasses,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Image viewer",
+      onClick: (e) => {
+        if (maskClosable && e.target === e.currentTarget) handleClose();
+      },
+      children: [
+        showCounter && images.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.imageViewerCounterClasses, children: [
+          index + 1,
+          " / ",
+          images.length
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: tigercatCore.imageViewerCloseBtnClasses,
+            onClick: handleClose,
+            "aria-label": "Close",
+            type: "button",
+            children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.close, label: "Close" })
+          }
+        ),
+        showNav && images.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: tigercatCore.classNames(tigercatCore.imageViewerNavBtnClasses, "left-4"),
+              onClick: handlePrev,
+              "aria-label": "Previous image",
+              type: "button",
+              children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.prev, label: "Previous" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: tigercatCore.classNames(tigercatCore.imageViewerNavBtnClasses, "right-4"),
+              onClick: handleNext,
+              "aria-label": "Next image",
+              type: "button",
+              children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.next, label: "Next" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            className: tigercatCore.imageViewerImgClasses,
+            src: images[index],
+            alt: `Image ${index + 1}`,
+            style: { transform: `scale(${zoom}) rotate(${rotation}deg)` },
+            draggable: false
+          }
+        ),
+        (zoomable || rotatable) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.imageViewerToolbarClasses, children: [
+          zoomable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: tigercatCore.imageViewerToolbarBtnClasses,
+                onClick: () => setZoom(tigercatCore.clampZoom(zoom - 0.25, minZoom, maxZoom)),
+                "aria-label": "Zoom out",
+                type: "button",
+                children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.zoomOut, label: "Zoom out" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: tigercatCore.imageViewerToolbarBtnClasses,
+                onClick: () => setZoom(tigercatCore.clampZoom(zoom + 0.25, minZoom, maxZoom)),
+                "aria-label": "Zoom in",
+                type: "button",
+                children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.zoomIn, label: "Zoom in" })
+              }
+            )
+          ] }),
+          rotatable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: tigercatCore.imageViewerToolbarBtnClasses,
+                onClick: () => setRotation(tigercatCore.normalizeRotation(rotation - 90)),
+                "aria-label": "Rotate left",
+                type: "button",
+                children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.rotateLeft, label: "Rotate left" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: tigercatCore.imageViewerToolbarBtnClasses,
+                onClick: () => setRotation(tigercatCore.normalizeRotation(rotation + 90)),
+                "aria-label": "Rotate right",
+                type: "button",
+                children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.rotateRight, label: "Rotate right" })
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+exports.ImageViewer = ImageViewer;

package/dist/chunk-XFJ5Q5PF.mjs

@@ -0,0 +1,30 @@
+import { createContext, useContext, useMemo } from 'react';
+import { classNames, buttonGroupBaseClasses, buttonGroupVerticalClasses, buttonGroupHorizontalClasses, buttonGroupItemVerticalClasses, buttonGroupItemClasses } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/ButtonGroup.tsx
+var ButtonGroupContext = createContext(null);
+function useButtonGroupContext() {
+  return useContext(ButtonGroupContext);
+}
+var ButtonGroup = ({
+  size,
+  vertical = false,
+  className,
+  children,
+  ...rest
+}) => {
+  const contextValue = useMemo(() => ({ size }), [size]);
+  const groupClasses = useMemo(
+    () => classNames(
+      buttonGroupBaseClasses,
+      vertical ? buttonGroupVerticalClasses : buttonGroupHorizontalClasses,
+      vertical ? buttonGroupItemVerticalClasses : buttonGroupItemClasses,
+      className
+    ),
+    [vertical, className]
+  );
+  return /* @__PURE__ */ jsx(ButtonGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ...rest, className: groupClasses, role: "group", children }) });
+};
+
+export { ButtonGroup, ButtonGroupContext, useButtonGroupContext };