@expcat/tigercat-react 0.0.1

package/dist/chunk-VEGBO77D.mjs

@@ -0,0 +1,20 @@
+import React, { useContext, useMemo } from 'react';
+import { mergeTigerLocale } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/ConfigProvider.tsx
+var TigerConfigContext = React.createContext({});
+var ConfigProvider = ({ locale, children }) => {
+  const parent = useContext(TigerConfigContext);
+  const value = useMemo(() => {
+    return {
+      locale: mergeTigerLocale(parent.locale, locale)
+    };
+  }, [parent.locale, locale]);
+  return /* @__PURE__ */ jsx(TigerConfigContext.Provider, { value, children });
+};
+function useTigerConfig() {
+  return useContext(TigerConfigContext);
+}
+
+export { ConfigProvider, useTigerConfig };

package/dist/chunk-VJJ76I7U.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Header.tsx
+var Header = ({
+  className,
+  height = "64px",
+  style,
+  children,
+  ...props
+}) => {
+  const headerClasses = tigercatCore.classNames(tigercatCore.layoutHeaderClasses, className);
+  const headerStyle = { ...style, height };
+  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: headerClasses, style: headerStyle, ...props, children });
+};
+
+exports.Header = Header;

package/dist/chunk-VO4WDK4K.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Card.tsx
+var Card = ({
+  variant = "default",
+  size = "md",
+  hoverable = false,
+  cover,
+  coverAlt = "Card cover image",
+  header,
+  footer,
+  actions,
+  className,
+  children,
+  ...props
+}) => {
+  const sectionSizeClass = cover ? tigercatCore.cardSizeClasses[size] : void 0;
+  const cardClasses = tigercatCore.classNames(
+    tigercatCore.getCardClasses(variant, hoverable),
+    !cover && tigercatCore.cardSizeClasses[size],
+    className
+  );
+  const bodyClasses = tigercatCore.classNames(tigercatCore.cardBodyClasses, sectionSizeClass);
+  const getSectionClasses = (baseClasses) => tigercatCore.classNames(baseClasses, sectionSizeClass);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cardClasses, ...props, children: [
+    cover && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.cardCoverWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: cover, alt: coverAlt, className: tigercatCore.cardCoverClasses }) }),
+    header != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: getSectionClasses(tigercatCore.cardHeaderClasses), children: header }),
+    children != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: bodyClasses, children }),
+    footer != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: getSectionClasses(tigercatCore.cardFooterClasses), children: footer }),
+    actions != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: getSectionClasses(tigercatCore.classNames(tigercatCore.cardActionsClasses, tigercatCore.cardFooterClasses)), children: actions })
+  ] });
+};
+
+exports.Card = Card;

package/dist/chunk-VSF4DF7N.js

@@ -0,0 +1,84 @@
+'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/RadioGroup.tsx
+var RadioGroupContext = React__default.default.createContext(null);
+var RadioGroup = ({
+  value,
+  defaultValue,
+  name,
+  disabled = false,
+  size = "md",
+  onChange,
+  children,
+  className,
+  ...props
+}) => {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : internalValue;
+  const generatedNameRef = React.useRef(
+    `tiger-radio-group-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`
+  );
+  const groupName = name || generatedNameRef.current;
+  const handleChange = (newValue) => {
+    if (disabled) return;
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onChange?.(newValue);
+  };
+  const handleKeyDown = (event) => {
+    if (disabled) return;
+    if (event.key !== "ArrowDown" && event.key !== "ArrowRight" && event.key !== "ArrowUp" && event.key !== "ArrowLeft") {
+      return;
+    }
+    const target = event.target;
+    const currentInput = target.closest('input[type="radio"]');
+    if (!currentInput) return;
+    const container = event.currentTarget;
+    const inputs = Array.from(
+      container.querySelectorAll('input[type="radio"]')
+    );
+    const enabledInputs = inputs.filter((input) => !input.disabled);
+    if (enabledInputs.length === 0) return;
+    const currentIndex = enabledInputs.indexOf(currentInput);
+    if (currentIndex === -1) return;
+    event.preventDefault();
+    const direction = event.key === "ArrowDown" || event.key === "ArrowRight" ? 1 : -1;
+    const nextIndex = (currentIndex + direction + enabledInputs.length) % enabledInputs.length;
+    const nextInput = enabledInputs[nextIndex];
+    nextInput.focus();
+    nextInput.click();
+  };
+  const contextValue = {
+    value: currentValue,
+    name: groupName,
+    disabled,
+    size,
+    onChange: handleChange
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: tigercatCore.getRadioGroupClasses({
+        className,
+        hasCustomClass: !!className
+      }),
+      role: "radiogroup",
+      onKeyDown: handleKeyDown,
+      ...props,
+      children
+    }
+  ) });
+};
+
+exports.RadioGroup = RadioGroup;
+exports.RadioGroupContext = RadioGroupContext;

package/dist/chunk-VVO4V4IK.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Switch.tsx
+var Switch = ({
+  checked = false,
+  disabled = false,
+  size = "md",
+  onChange,
+  className,
+  onClick,
+  onKeyDown,
+  tabIndex,
+  ...props
+}) => {
+  const switchClasses = tigercatCore.classNames(tigercatCore.getSwitchClasses(size, checked, disabled), className);
+  const thumbClasses = tigercatCore.getSwitchThumbClasses(size, checked);
+  const toggle = () => {
+    if (disabled) return;
+    onChange?.(!checked);
+  };
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    toggle();
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    if (disabled) return;
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      toggle();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ...props,
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      className: switchClasses,
+      disabled,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      "aria-disabled": disabled || void 0,
+      tabIndex: disabled ? -1 : tabIndex,
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: thumbClasses, "aria-hidden": "true" })
+    }
+  );
+};
+
+exports.Switch = Switch;

package/dist/chunk-W7HUFFPJ.mjs

@@ -0,0 +1,263 @@
+import { useState, useEffect, useCallback } from 'react';
+import { createRoot } from 'react-dom/client';
+import { flushSync } from 'react-dom';
+import { classNames, messageContainerBaseClasses, messagePositionClasses, getMessageTypeClasses, defaultMessageThemeColors, messageBaseClasses, getMessageIconPath, messageIconClasses, messageContentClasses, messageCloseButtonClasses, messageCloseIconPath, isBrowser, messageLoadingSpinnerClasses, icon24StrokeWidth, icon24ViewBox, icon24PathStrokeLinejoin, icon24PathStrokeLinecap } from '@expcat/tigercat-core';
+import { jsx, jsxs } from '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 = classNames(className, isLoading ? messageLoadingSpinnerClasses : "");
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: iconClass,
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: icon24ViewBox,
+      stroke: "currentColor",
+      strokeWidth: icon24StrokeWidth,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          strokeLinecap: icon24PathStrokeLinecap,
+          strokeLinejoin: icon24PathStrokeLinejoin,
+          d: path
+        }
+      )
+    }
+  );
+};
+var MessageItem = ({ message: message2, onClose }) => {
+  const [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
+    setTimeout(() => setIsVisible(true), 10);
+  }, []);
+  const colorScheme = getMessageTypeClasses(message2.type, defaultMessageThemeColors);
+  const messageClasses = classNames(
+    messageBaseClasses,
+    colorScheme.bg,
+    colorScheme.border,
+    colorScheme.text,
+    message2.className,
+    isVisible ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-2"
+  );
+  const iconPath = message2.icon || getMessageIconPath(message2.type);
+  const iconClass = classNames(messageIconClasses, colorScheme.icon);
+  const handleClose = 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__ */ 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__ */ jsx(Icon, { path: iconPath, className: iconClass, isLoading: message2.type === "loading" }),
+        /* @__PURE__ */ jsx("div", { className: messageContentClasses, children: message2.content }),
+        message2.closable && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: messageCloseButtonClasses,
+            onClick: handleClose,
+            "aria-label": MESSAGE_CLOSE_ARIA_LABEL,
+            type: "button",
+            children: /* @__PURE__ */ jsx(Icon, { path: messageCloseIconPath, className: "w-4 h-4" })
+          }
+        )
+      ]
+    }
+  );
+};
+var MessageContainer = ({ position = "top" }) => {
+  const [messages, setMessages] = useState(() => [...messageInstances]);
+  useEffect(() => {
+    updateCallback = () => {
+      flushSync(() => {
+        setMessages([...messageInstances]);
+      });
+    };
+    updateCallback();
+    return () => {
+      updateCallback = null;
+    };
+  }, []);
+  const containerClasses = classNames(messageContainerBaseClasses, messagePositionClasses[position]);
+  const handleRemove = 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__ */ jsx(
+    "div",
+    {
+      className: containerClasses,
+      id: MESSAGE_CONTAINER_ID,
+      "aria-live": "polite",
+      "aria-relevant": "additions",
+      "data-tiger-message-container": true,
+      children: messages.map((message2) => /* @__PURE__ */ jsx(MessageItem, { message: message2, onClose: handleRemove }, message2.id))
+    }
+  );
+};
+function ensureContainer() {
+  if (!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 = createRoot(rootEl);
+  flushSync(() => {
+    containerRoot?.render(/* @__PURE__ */ 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 (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;
+
+export { MessageContainer, Message_default, message };

package/dist/chunk-WDAMDVLU.mjs

@@ -0,0 +1,106 @@
+import { createContext, useContext, useRef, useState, useCallback, useMemo, useEffect } from 'react';
+import { classNames, getMenuClasses } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Menu.tsx
+var MenuContext = createContext(null);
+function useMenuContext() {
+  return useContext(MenuContext);
+}
+var Menu = ({
+  mode = "vertical",
+  theme = "light",
+  selectedKeys: controlledSelectedKeys,
+  defaultSelectedKeys = [],
+  openKeys: controlledOpenKeys,
+  defaultOpenKeys = [],
+  collapsed = false,
+  multiple = true,
+  inlineIndent = 24,
+  className,
+  style,
+  onSelect,
+  onOpenChange,
+  children
+}) => {
+  const menuRef = useRef(null);
+  const [internalSelectedKeys, setInternalSelectedKeys] = useState(defaultSelectedKeys);
+  const [internalOpenKeys, setInternalOpenKeys] = useState(defaultOpenKeys);
+  const selectedKeys = controlledSelectedKeys !== void 0 ? controlledSelectedKeys : internalSelectedKeys;
+  const openKeys = controlledOpenKeys !== void 0 ? controlledOpenKeys : internalOpenKeys;
+  const handleSelect = useCallback(
+    (key) => {
+      const newSelectedKeys = [key];
+      if (controlledSelectedKeys === void 0) {
+        setInternalSelectedKeys(newSelectedKeys);
+      }
+      onSelect?.(key, { selectedKeys: newSelectedKeys });
+    },
+    [controlledSelectedKeys, onSelect]
+  );
+  const handleOpenChange = useCallback(
+    (key) => {
+      const isOpen = openKeys.includes(key);
+      let newOpenKeys;
+      if (isOpen) {
+        newOpenKeys = openKeys.filter((k) => k !== key);
+      } else {
+        if (multiple) {
+          newOpenKeys = [...openKeys, key];
+        } else {
+          newOpenKeys = [key];
+        }
+      }
+      if (controlledOpenKeys === void 0) {
+        setInternalOpenKeys(newOpenKeys);
+      }
+      onOpenChange?.(key, { openKeys: newOpenKeys });
+    },
+    [openKeys, multiple, controlledOpenKeys, onOpenChange]
+  );
+  const menuClasses = useMemo(() => {
+    return classNames(getMenuClasses(mode, theme, collapsed), className);
+  }, [mode, theme, collapsed, className]);
+  const contextValue = useMemo(
+    () => ({
+      mode,
+      theme,
+      collapsed,
+      inlineIndent,
+      selectedKeys,
+      openKeys,
+      handleSelect,
+      handleOpenChange
+    }),
+    [mode, theme, collapsed, inlineIndent, selectedKeys, openKeys, handleSelect, handleOpenChange]
+  );
+  useEffect(() => {
+    const root = menuRef.current;
+    if (!root) return;
+    const items = Array.from(
+      root.querySelectorAll('button[data-tiger-menuitem="true"]')
+    ).filter((el) => !el.disabled && !el.closest('[data-tiger-menu-hidden="true"]'));
+    if (items.length === 0) return;
+    const hasActive = items.some((el) => el.tabIndex === 0);
+    if (hasActive) return;
+    const selected = items.find((el) => el.dataset.tigerSelected === "true");
+    const active = selected ?? items[0];
+    items.forEach((el) => {
+      el.tabIndex = el === active ? 0 : -1;
+    });
+  }, [mode, collapsed, selectedKeys, openKeys]);
+  return /* @__PURE__ */ jsx(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ref: menuRef,
+      className: menuClasses,
+      style,
+      role: "menu",
+      "data-tiger-menu-root": "true",
+      "data-tiger-menu-mode": mode,
+      children
+    }
+  ) });
+};
+
+export { Menu, useMenuContext };

package/dist/chunk-WEGU7O4J.mjs

@@ -0,0 +1,66 @@
+import { useBreadcrumbContext } from './chunk-7JQ7LURS.mjs';
+import { useMemo, useCallback } from 'react';
+import { getBreadcrumbItemClasses, getBreadcrumbLinkClasses, getBreadcrumbSeparatorClasses, getSeparatorContent } from '@expcat/tigercat-core';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var BreadcrumbItem = ({
+  href,
+  target,
+  current = false,
+  separator: customSeparator,
+  className,
+  style,
+  onClick,
+  children,
+  icon,
+  ...props
+}) => {
+  const breadcrumbContext = useBreadcrumbContext();
+  const itemClasses = useMemo(
+    () => getBreadcrumbItemClasses(current, className),
+    [current, className]
+  );
+  const linkClasses = useMemo(() => getBreadcrumbLinkClasses(current), [current]);
+  const separatorClasses = useMemo(() => getBreadcrumbSeparatorClasses(), []);
+  const separatorContent = useMemo(() => {
+    const sep = customSeparator !== void 0 ? customSeparator : breadcrumbContext?.separator || "/";
+    return getSeparatorContent(sep);
+  }, [customSeparator, breadcrumbContext]);
+  const handleClick = useCallback(
+    (event) => {
+      if (!current) {
+        onClick?.(event);
+      }
+    },
+    [current, onClick]
+  );
+  const computedRel = useMemo(() => {
+    if (target === "_blank") {
+      return "noopener noreferrer";
+    }
+    return void 0;
+  }, [target]);
+  const contentElements = icon ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "inline-flex", children: icon }),
+    children
+  ] }) : children;
+  const linkElement = href && !current ? /* @__PURE__ */ jsx(
+    "a",
+    {
+      className: linkClasses,
+      href,
+      target,
+      rel: computedRel,
+      "aria-current": current ? "page" : void 0,
+      onClick: handleClick,
+      children: contentElements
+    }
+  ) : /* @__PURE__ */ jsx("span", { className: linkClasses, "aria-current": current ? "page" : void 0, children: contentElements });
+  const separatorElement = !current ? /* @__PURE__ */ jsx("span", { className: separatorClasses, "aria-hidden": "true", children: separatorContent }) : null;
+  return /* @__PURE__ */ jsxs("li", { className: itemClasses, style, ...props, children: [
+    linkElement,
+    separatorElement
+  ] });
+};
+
+export { BreadcrumbItem };