@expcat/tigercat-react 0.3.0 → 0.3.70

package/dist/chunk-EHYSER2Z.js

@@ -0,0 +1,144 @@
+'use strict';
+
+var chunk3T7L3MHX_js = require('./chunk-3T7L3MHX.js');
+var chunkU3JOBIDU_js = require('./chunk-U3JOBIDU.js');
+var chunkF24IF2QL_js = require('./chunk-F24IF2QL.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var CropUpload = ({
+  accept = "image/*",
+  disabled = false,
+  maxSize,
+  cropperProps,
+  modalTitle = "\u88C1\u526A\u56FE\u7247",
+  modalWidth = 520,
+  className,
+  children,
+  onCropComplete,
+  onError
+}) => {
+  const fileInputRef = react.useRef(null);
+  const cropperRef = react.useRef(null);
+  const [modalVisible, setModalVisible] = react.useState(false);
+  const [imageSrc, setImageSrc] = react.useState("");
+  const [cropping, setCropping] = react.useState(false);
+  const handleTriggerClick = react.useCallback(() => {
+    if (disabled) return;
+    fileInputRef.current?.click();
+  }, [disabled]);
+  const handleFileChange = react.useCallback(
+    (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      if (maxSize && file.size > maxSize) {
+        onError?.(new Error(`File size exceeds maximum of ${maxSize} bytes`));
+        e.target.value = "";
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = (ev) => {
+        setImageSrc(ev.target?.result);
+        setModalVisible(true);
+      };
+      reader.readAsDataURL(file);
+      e.target.value = "";
+    },
+    [maxSize, onError]
+  );
+  const handleConfirm = react.useCallback(async () => {
+    if (!cropperRef.current) return;
+    setCropping(true);
+    try {
+      const result = await cropperRef.current.getCropResult();
+      onCropComplete?.(result);
+      setModalVisible(false);
+    } catch (err) {
+      onError?.(err);
+    } finally {
+      setCropping(false);
+    }
+  }, [onCropComplete, onError]);
+  const handleCancel = react.useCallback(() => {
+    setModalVisible(false);
+    setImageSrc("");
+  }, []);
+  const triggerClasses = react.useMemo(
+    () => tigercatCore.classNames(disabled ? tigercatCore.cropUploadTriggerDisabledClasses : tigercatCore.cropUploadTriggerClasses, className),
+    [disabled, className]
+  );
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleTriggerClick();
+      }
+    },
+    [handleTriggerClick]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tiger-crop-upload inline-block", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept,
+        style: { display: "none" },
+        onChange: handleFileChange
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: triggerClasses,
+        onClick: handleTriggerClick,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-label": "Select image to crop and upload",
+        "aria-disabled": disabled ? "true" : void 0,
+        onKeyDown: handleKeyDown,
+        children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: "w-5 h-5",
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2",
+                  d: tigercatCore.uploadPlusIconPath
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u9009\u62E9\u56FE\u7247" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      chunk3T7L3MHX_js.Modal,
+      {
+        visible: modalVisible,
+        size: "lg",
+        title: modalTitle,
+        closable: true,
+        maskClosable: false,
+        onClose: handleCancel,
+        footer: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(chunkF24IF2QL_js.Button, { variant: "secondary", onClick: handleCancel, children: "\u53D6\u6D88" }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkF24IF2QL_js.Button, { onClick: handleConfirm, loading: cropping, children: "\u786E\u8BA4\u88C1\u526A" })
+        ] }),
+        children: imageSrc && /* @__PURE__ */ jsxRuntime.jsx(chunkU3JOBIDU_js.ImageCropper, { ref: cropperRef, src: imageSrc, ...cropperProps })
+      }
+    )
+  ] });
+};
+
+exports.CropUpload = CropUpload;

package/dist/{chunk-JI7SFMUT.mjs → chunk-EIMAQHCQ.mjs}

@@ -1,9 +1,9 @@
+import { StatusIcon } from './chunk-FLYJVZED.mjs';
 import { useState, useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
-import { classNames, notificationContainerBaseClasses, notificationPositionClasses, getNotificationTypeClasses, defaultNotificationThemeColors, notificationBaseClasses, getNotificationIconPath, notificationIconClasses, notificationContentClasses, notificationTitleClasses, notificationDescriptionClasses, notificationCloseButtonClasses, notificationCloseIconClasses, notificationCloseIconPath, icon24StrokeWidth, icon24ViewBox, icon24PathStrokeLinejoin, icon24PathStrokeLinecap, ANIMATION_DURATION_MS, isBrowser } from '@expcat/tigercat-core';
+import { classNames, notificationContainerBaseClasses, notificationPositionClasses, getNotificationTypeClasses, notificationBaseClasses, getNotificationIconPath, notificationIconClasses, notificationContentClasses, notificationTitleClasses, notificationDescriptionClasses, notificationCloseButtonClasses, notificationCloseIconClasses, notificationCloseIconPath, normalizeStringOption, ANIMATION_DURATION_MS, isBrowser } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-// src/components/Notification.tsx
 var NOTIFICATION_CONTAINER_ID_PREFIX = "tiger-notification-container";
 var notificationInstancesByPosition = {
   "top-left": [],
@@ -27,35 +27,12 @@ var updateCallbacks = {
 function getNextInstanceId() {
   return ++instanceIdCounter;
 }
-var Icon = ({ path, className }) => {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      className,
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: icon24ViewBox,
-      stroke: "currentColor",
-      strokeWidth: icon24StrokeWidth,
-      "aria-hidden": "true",
-      focusable: "false",
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          strokeLinecap: icon24PathStrokeLinecap,
-          strokeLinejoin: icon24PathStrokeLinejoin,
-          d: path
-        }
-      )
-    }
-  );
-};
 var NotificationItem = ({ notification: notification2, onClose }) => {
   const [isVisible, setIsVisible] = useState(false);
   useEffect(() => {
     setTimeout(() => setIsVisible(true), 10);
   }, []);
-  const colorScheme = getNotificationTypeClasses(notification2.type, defaultNotificationThemeColors);
+  const colorScheme = getNotificationTypeClasses(notification2.type);
   const notificationClasses = classNames(
     notificationBaseClasses,
     colorScheme.bg,
@@ -92,7 +69,7 @@ var NotificationItem = ({ notification: notification2, onClose }) => {
       "data-tiger-notification-type": notification2.type,
       "data-tiger-notification-id": String(notification2.id),
       children: [
-        /* @__PURE__ */ jsx(Icon, { path: iconPath, className: iconClass }),
+        /* @__PURE__ */ jsx(StatusIcon, { path: iconPath, className: iconClass, "aria-hidden": "true", focusable: "false" }),
         /* @__PURE__ */ jsxs("div", { className: notificationContentClasses, children: [
           /* @__PURE__ */ jsx("div", { className: classNames(notificationTitleClasses, colorScheme.titleText), children: notification2.title }),
           notification2.description && /* @__PURE__ */ jsx("div", { className: classNames(notificationDescriptionClasses, colorScheme.descriptionText), children: notification2.description })
@@ -107,7 +84,7 @@ var NotificationItem = ({ notification: notification2, onClose }) => {
             },
             "aria-label": "Close notification",
             type: "button",
-            children: /* @__PURE__ */ jsx(Icon, { path: notificationCloseIconPath, className: notificationCloseIconClasses })
+            children: /* @__PURE__ */ jsx(StatusIcon, { path: notificationCloseIconPath, className: notificationCloseIconClasses })
           }
         )
       ]
@@ -132,16 +109,7 @@ var NotificationContainer = ({
     notificationPositionClasses[position]
   );
   const handleRemove = (id) => {
-    const instances = notificationInstancesByPosition[position];
-    const index = instances.findIndex((notif) => notif.id === id);
-    if (index !== -1) {
-      const instance = instances[index];
-      instances.splice(index, 1);
-      if (instance.onClose) {
-        instance.onClose();
-      }
-      updateCallbacks[position]?.();
-    }
+    removeNotification(id, position);
   };
   return /* @__PURE__ */ jsx(
     "div",
@@ -167,8 +135,7 @@ function ensureContainer(position) {
   if (!isBrowser()) {
     return;
   }
-  const containerId = `${NOTIFICATION_CONTAINER_ID_PREFIX}-${position}`;
-  const rootId = `${containerId}-root`;
+  const rootId = `${NOTIFICATION_CONTAINER_ID_PREFIX}-${position}-root`;
   const existingRootEl = document.getElementById(rootId);
   if (containerRoots[position] && !existingRootEl) {
     containerRoots[position] = null;
@@ -186,6 +153,17 @@ function ensureContainer(position) {
   containerRoots[position] = createRoot(rootEl);
   containerRoots[position].render(/* @__PURE__ */ jsx(NotificationContainer, { position }));
 }
+function destroyContainer(position) {
+  const rootId = `${NOTIFICATION_CONTAINER_ID_PREFIX}-${position}-root`;
+  if (containerRoots[position]) {
+    containerRoots[position].unmount();
+    containerRoots[position] = null;
+  }
+  updateCallbacks[position] = null;
+  if (isBrowser()) {
+    document.getElementById(rootId)?.remove();
+  }
+}
 function addNotification(config) {
   const position = config.position || "top-right";
   ensureContainer(position);
@@ -204,9 +182,7 @@ function addNotification(config) {
     position
   };
   notificationInstancesByPosition[position].push(instance);
-  if (updateCallbacks[position]) {
-    updateCallbacks[position]();
-  }
+  updateCallbacks[position]?.();
   if (instance.duration > 0) {
     setTimeout(() => {
       removeNotification(id, position);
@@ -220,78 +196,51 @@ function removeNotification(id, position) {
   if (index !== -1) {
     const instance = instances[index];
     instances.splice(index, 1);
-    if (instance.onClose) {
-      instance.onClose();
-    }
-    if (updateCallbacks[position]) {
-      updateCallbacks[position]();
-    }
+    instance.onClose?.();
+    updateCallbacks[position]?.();
+  }
+  if (notificationInstancesByPosition[position].length === 0) {
+    destroyContainer(position);
   }
 }
 function clearAll(position) {
   if (position) {
     notificationInstancesByPosition[position].forEach((instance) => {
-      if (instance.onClose) {
-        instance.onClose();
-      }
+      instance.onClose?.();
     });
     notificationInstancesByPosition[position] = [];
-    if (updateCallbacks[position]) {
-      updateCallbacks[position]();
-    }
+    destroyContainer(position);
   } else {
     Object.keys(notificationInstancesByPosition).forEach((pos) => {
       const p = pos;
       notificationInstancesByPosition[p].forEach((instance) => {
-        if (instance.onClose) {
-          instance.onClose();
-        }
+        instance.onClose?.();
       });
       notificationInstancesByPosition[p] = [];
-      if (updateCallbacks[p]) {
-        updateCallbacks[p]();
-      }
+      destroyContainer(p);
     });
   }
 }
 function normalizeOptions(options) {
-  if (typeof options === "string") {
-    return { title: options };
-  }
-  return options;
+  return normalizeStringOption(options, "title");
 }
 var notification = {
-  /**
-   * Show an info notification
-   */
   info(options) {
     const config = normalizeOptions(options);
     return addNotification({ ...config, type: "info" });
   },
-  /**
-   * Show a success notification
-   */
   success(options) {
     const config = normalizeOptions(options);
     return addNotification({ ...config, type: "success" });
   },
-  /**
-   * Show a warning notification
-   */
   warning(options) {
     const config = normalizeOptions(options);
     return addNotification({ ...config, type: "warning" });
   },
-  /**
-   * Show an error notification
-   */
   error(options) {
     const config = normalizeOptions(options);
     return addNotification({ ...config, type: "error" });
   },
-  /**
-   * Clear all notifications
-   */
   clear(position) {
     clearAll(position);
   }

package/dist/chunk-ENSLMM3L.mjs

@@ -0,0 +1,68 @@
+import React, { useMemo } from 'react';
+import { getSpinnerSVG, classNames, buttonBaseClasses, getButtonVariantClasses, buttonSizeClasses, buttonDisabledClasses } from '@expcat/tigercat-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/Button.tsx
+var spinnerSvg = getSpinnerSVG("spinner");
+var DefaultSpinner = /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "animate-spin h-4 w-4",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: spinnerSvg.viewBox,
+    "aria-hidden": "true",
+    focusable: "false",
+    children: spinnerSvg.elements.map(
+      (el, index) => React.createElement(el.type, { key: index, ...el.attrs })
+    )
+  }
+);
+var Button = ({
+  variant = "primary",
+  size = "md",
+  disabled = false,
+  loading = false,
+  loadingIcon,
+  block = false,
+  onClick,
+  children,
+  type = "button",
+  className,
+  "aria-busy": ariaBusyProp,
+  "aria-disabled": ariaDisabledProp,
+  ...rest
+}) => {
+  const isDisabled = disabled || loading;
+  const ariaBusy = ariaBusyProp ?? (loading ? true : void 0);
+  const ariaDisabled = ariaDisabledProp ?? (isDisabled ? true : void 0);
+  const buttonClasses = useMemo(
+    () => classNames(
+      buttonBaseClasses,
+      getButtonVariantClasses(variant),
+      buttonSizeClasses[size],
+      isDisabled && buttonDisabledClasses,
+      block && "w-full",
+      className
+    ),
+    [variant, size, isDisabled, block, className]
+  );
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...rest,
+      className: buttonClasses,
+      "aria-busy": ariaBusy,
+      "aria-disabled": ariaDisabled,
+      disabled: isDisabled,
+      onClick: isDisabled ? void 0 : onClick,
+      type,
+      children: [
+        loading && /* @__PURE__ */ jsx("span", { className: "mr-2", children: loadingIcon ?? DefaultSpinner }),
+        children
+      ]
+    }
+  );
+};
+
+export { Button };

package/dist/chunk-F24IF2QL.js

@@ -0,0 +1,74 @@
+'use strict';
+
+var React = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/components/Button.tsx
+var spinnerSvg = tigercatCore.getSpinnerSVG("spinner");
+var DefaultSpinner = /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className: "animate-spin h-4 w-4",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: spinnerSvg.viewBox,
+    "aria-hidden": "true",
+    focusable: "false",
+    children: spinnerSvg.elements.map(
+      (el, index) => React__default.default.createElement(el.type, { key: index, ...el.attrs })
+    )
+  }
+);
+var Button = ({
+  variant = "primary",
+  size = "md",
+  disabled = false,
+  loading = false,
+  loadingIcon,
+  block = false,
+  onClick,
+  children,
+  type = "button",
+  className,
+  "aria-busy": ariaBusyProp,
+  "aria-disabled": ariaDisabledProp,
+  ...rest
+}) => {
+  const isDisabled = disabled || loading;
+  const ariaBusy = ariaBusyProp ?? (loading ? true : void 0);
+  const ariaDisabled = ariaDisabledProp ?? (isDisabled ? true : void 0);
+  const buttonClasses = React.useMemo(
+    () => tigercatCore.classNames(
+      tigercatCore.buttonBaseClasses,
+      tigercatCore.getButtonVariantClasses(variant),
+      tigercatCore.buttonSizeClasses[size],
+      isDisabled && tigercatCore.buttonDisabledClasses,
+      block && "w-full",
+      className
+    ),
+    [variant, size, isDisabled, block, className]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ...rest,
+      className: buttonClasses,
+      "aria-busy": ariaBusy,
+      "aria-disabled": ariaDisabled,
+      disabled: isDisabled,
+      onClick: isDisabled ? void 0 : onClick,
+      type,
+      children: [
+        loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2", children: loadingIcon ?? DefaultSpinner }),
+        children
+      ]
+    }
+  );
+};
+
+exports.Button = Button;