@expcat/tigercat-react 0.0.1

package/dist/chunk-EUHWE7MN.js

@@ -0,0 +1,267 @@
+'use strict';
+
+var react = require('react');
+var client = require('react-dom/client');
+var reactDom = require('react-dom');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Message.tsx
+var MESSAGE_CONTAINER_ID = "tiger-message-container";
+var MESSAGE_CLOSE_ARIA_LABEL = "Close message";
+var messageInstances = [];
+var instanceIdCounter = 0;
+var containerRoot = null;
+var updateCallback = null;
+function getNextInstanceId() {
+  return ++instanceIdCounter;
+}
+var Icon = ({ path, className, isLoading = false }) => {
+  const iconClass = tigercatCore.classNames(className, isLoading ? tigercatCore.messageLoadingSpinnerClasses : "");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className: iconClass,
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: tigercatCore.icon24ViewBox,
+      stroke: "currentColor",
+      strokeWidth: tigercatCore.icon24StrokeWidth,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          strokeLinecap: tigercatCore.icon24PathStrokeLinecap,
+          strokeLinejoin: tigercatCore.icon24PathStrokeLinejoin,
+          d: path
+        }
+      )
+    }
+  );
+};
+var MessageItem = ({ message: message2, onClose }) => {
+  const [isVisible, setIsVisible] = react.useState(false);
+  react.useEffect(() => {
+    setTimeout(() => setIsVisible(true), 10);
+  }, []);
+  const colorScheme = tigercatCore.getMessageTypeClasses(message2.type, tigercatCore.defaultMessageThemeColors);
+  const messageClasses = tigercatCore.classNames(
+    tigercatCore.messageBaseClasses,
+    colorScheme.bg,
+    colorScheme.border,
+    colorScheme.text,
+    message2.className,
+    isVisible ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-2"
+  );
+  const iconPath = message2.icon || tigercatCore.getMessageIconPath(message2.type);
+  const iconClass = tigercatCore.classNames(tigercatCore.messageIconClasses, colorScheme.icon);
+  const handleClose = react.useCallback(() => {
+    setIsVisible(false);
+    setTimeout(() => onClose(message2.id), 300);
+  }, [message2.id, onClose]);
+  const a11yRole = message2.type === "error" ? "alert" : "status";
+  const ariaLive = message2.type === "error" ? "assertive" : "polite";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: messageClasses,
+      role: a11yRole,
+      "aria-live": ariaLive,
+      "aria-atomic": "true",
+      "aria-busy": message2.type === "loading" || void 0,
+      "data-tiger-message": true,
+      "data-tiger-message-type": message2.type,
+      "data-tiger-message-id": String(message2.id),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { path: iconPath, className: iconClass, isLoading: message2.type === "loading" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.messageContentClasses, children: message2.content }),
+        message2.closable && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: tigercatCore.messageCloseButtonClasses,
+            onClick: handleClose,
+            "aria-label": MESSAGE_CLOSE_ARIA_LABEL,
+            type: "button",
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { path: tigercatCore.messageCloseIconPath, className: "w-4 h-4" })
+          }
+        )
+      ]
+    }
+  );
+};
+var MessageContainer = ({ position = "top" }) => {
+  const [messages, setMessages] = react.useState(() => [...messageInstances]);
+  react.useEffect(() => {
+    updateCallback = () => {
+      reactDom.flushSync(() => {
+        setMessages([...messageInstances]);
+      });
+    };
+    updateCallback();
+    return () => {
+      updateCallback = null;
+    };
+  }, []);
+  const containerClasses = tigercatCore.classNames(tigercatCore.messageContainerBaseClasses, tigercatCore.messagePositionClasses[position]);
+  const handleRemove = react.useCallback((id) => {
+    const index = messageInstances.findIndex((msg) => msg.id === id);
+    if (index !== -1) {
+      const instance = messageInstances[index];
+      messageInstances.splice(index, 1);
+      if (instance.onClose) {
+        instance.onClose();
+      }
+      if (updateCallback) {
+        updateCallback();
+      }
+    }
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: containerClasses,
+      id: MESSAGE_CONTAINER_ID,
+      "aria-live": "polite",
+      "aria-relevant": "additions",
+      "data-tiger-message-container": true,
+      children: messages.map((message2) => /* @__PURE__ */ jsxRuntime.jsx(MessageItem, { message: message2, onClose: handleRemove }, message2.id))
+    }
+  );
+};
+function ensureContainer() {
+  if (!tigercatCore.isBrowser()) {
+    return;
+  }
+  const rootId = `${MESSAGE_CONTAINER_ID}-root`;
+  const existingRootEl = document.getElementById(rootId);
+  if (containerRoot && !existingRootEl) {
+    containerRoot = null;
+    updateCallback = null;
+  }
+  if (containerRoot) {
+    return;
+  }
+  let rootEl = existingRootEl;
+  if (!rootEl) {
+    rootEl = document.createElement("div");
+    rootEl.id = rootId;
+    document.body.appendChild(rootEl);
+  }
+  containerRoot = client.createRoot(rootEl);
+  reactDom.flushSync(() => {
+    containerRoot?.render(/* @__PURE__ */ jsxRuntime.jsx(MessageContainer, {}));
+  });
+}
+function addMessage(config) {
+  const id = getNextInstanceId();
+  const instance = {
+    id,
+    type: config.type || "info",
+    content: config.content,
+    duration: config.duration !== void 0 ? config.duration : 3e3,
+    closable: config.closable || false,
+    onClose: config.onClose,
+    icon: config.icon,
+    className: config.className
+  };
+  messageInstances.push(instance);
+  ensureContainer();
+  if (updateCallback) {
+    updateCallback();
+  }
+  if (instance.duration > 0) {
+    setTimeout(() => {
+      removeMessage(id);
+    }, instance.duration);
+  }
+  return () => removeMessage(id);
+}
+function removeMessage(id) {
+  const index = messageInstances.findIndex((msg) => msg.id === id);
+  if (index !== -1) {
+    const instance = messageInstances[index];
+    messageInstances.splice(index, 1);
+    if (instance.onClose) {
+      instance.onClose();
+    }
+    if (updateCallback) {
+      updateCallback();
+    }
+  }
+}
+function clearAll() {
+  messageInstances.forEach((instance) => {
+    if (instance.onClose) {
+      instance.onClose();
+    }
+  });
+  messageInstances = [];
+  if (updateCallback) {
+    updateCallback();
+  }
+  if (containerRoot) {
+    containerRoot.unmount();
+    containerRoot = null;
+  }
+  updateCallback = null;
+  const rootId = `${MESSAGE_CONTAINER_ID}-root`;
+  if (tigercatCore.isBrowser()) {
+    const rootEl = document.getElementById(rootId);
+    if (rootEl?.parentNode) {
+      rootEl.parentNode.removeChild(rootEl);
+    }
+  }
+}
+function normalizeOptions(options) {
+  if (typeof options === "string") {
+    return { content: options };
+  }
+  return options;
+}
+var message = {
+  /**
+   * Show an info message
+   */
+  info(options) {
+    const config = normalizeOptions(options);
+    return addMessage({ ...config, type: "info" });
+  },
+  /**
+   * Show a success message
+   */
+  success(options) {
+    const config = normalizeOptions(options);
+    return addMessage({ ...config, type: "success" });
+  },
+  /**
+   * Show a warning message
+   */
+  warning(options) {
+    const config = normalizeOptions(options);
+    return addMessage({ ...config, type: "warning" });
+  },
+  /**
+   * Show an error message
+   */
+  error(options) {
+    const config = normalizeOptions(options);
+    return addMessage({ ...config, type: "error" });
+  },
+  /**
+   * Show a loading message
+   */
+  loading(options) {
+    const config = normalizeOptions(options);
+    return addMessage({ ...config, type: "loading", duration: 0 });
+  },
+  /**
+   * Clear all messages
+   */
+  clear() {
+    clearAll();
+  }
+};
+var Message_default = message;
+
+exports.MessageContainer = MessageContainer;
+exports.Message_default = Message_default;
+exports.message = message;

package/dist/chunk-FAKTU64M.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Button.tsx
+var spinnerSvg = tigercatCore.getSpinnerSVG("spinner");
+var Button = ({
+  variant = "primary",
+  size = "md",
+  disabled = false,
+  loading = false,
+  block = false,
+  onClick,
+  children,
+  type = "button",
+  className,
+  ...props
+}) => {
+  const isDisabled = disabled || loading;
+  const ariaBusy = props["aria-busy"] ?? (loading ? true : void 0);
+  const ariaDisabled = props["aria-disabled"] ?? (isDisabled ? true : void 0);
+  const buttonClasses = tigercatCore.classNames(
+    tigercatCore.buttonBaseClasses,
+    tigercatCore.getButtonVariantClasses(variant),
+    tigercatCore.buttonSizeClasses[size],
+    isDisabled && tigercatCore.buttonDisabledClasses,
+    block && "w-full",
+    className
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      className: buttonClasses,
+      "aria-busy": ariaBusy,
+      "aria-disabled": ariaDisabled,
+      disabled: isDisabled,
+      onClick: (event) => {
+        if (isDisabled) return;
+        onClick?.(event);
+      },
+      type,
+      ...props,
+      children: [
+        loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2", children: /* @__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) => {
+              if (el.type === "circle") return /* @__PURE__ */ jsxRuntime.jsx("circle", { ...el.attrs }, index);
+              if (el.type === "path") return /* @__PURE__ */ jsxRuntime.jsx("path", { ...el.attrs }, index);
+              return null;
+            })
+          }
+        ) }),
+        children
+      ]
+    }
+  );
+};
+
+exports.Button = Button;