@expcat/tigercat-react 0.0.1

package/dist/chunk-GIYBVWR4.mjs

@@ -0,0 +1,213 @@
+import { useFormContext } from './chunk-3XXXM4OB.mjs';
+import React, { useState, useId, useMemo, useCallback, useEffect } from 'react';
+import { getFieldError, classNames } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var FormItem = ({
+  name,
+  label,
+  labelWidth,
+  required,
+  rules,
+  error: controlledError,
+  showMessage = true,
+  size,
+  children,
+  className
+}) => {
+  const formContext = useFormContext();
+  const [errorMessage, setErrorMessage] = useState("");
+  const reactId = useId();
+  const baseId = useMemo(() => `tiger-form-item-${reactId}`, [reactId]);
+  const labelId = `${baseId}-label`;
+  const fieldId = `${baseId}-field`;
+  const errorId = `${baseId}-error`;
+  const mergeAriaDescribedBy = useCallback(
+    (existing, next) => {
+      if (!existing) {
+        return next;
+      }
+      if (!next) {
+        return existing;
+      }
+      const parts = new Set(
+        `${existing} ${next}`.split(" ").map((s) => s.trim()).filter(Boolean)
+      );
+      return Array.from(parts).join(" ");
+    },
+    []
+  );
+  const actualSize = size || formContext?.size || "md";
+  const labelPosition = formContext?.labelPosition || "right";
+  const labelAlign = formContext?.labelAlign || "right";
+  const actualLabelWidth = useMemo(() => {
+    const width = labelWidth || formContext?.labelWidth;
+    if (typeof width === "number") {
+      return `${width}px`;
+    }
+    return width;
+  }, [labelWidth, formContext?.labelWidth]);
+  const showRequiredAsterisk = useMemo(() => {
+    if (required !== void 0) {
+      return required;
+    }
+    if (rules) {
+      const ruleArray = Array.isArray(rules) ? rules : [rules];
+      return ruleArray.some((rule) => rule.required);
+    }
+    if (name && formContext?.rules) {
+      const fieldRules = formContext.rules[name];
+      if (fieldRules) {
+        const ruleArray = Array.isArray(fieldRules) ? fieldRules : [fieldRules];
+        return ruleArray.some((rule) => rule.required);
+      }
+    }
+    return false;
+  }, [required, rules, name, formContext?.rules]);
+  const isRequired = useMemo(
+    () => showRequiredAsterisk && (formContext?.showRequiredAsterisk ?? true),
+    [showRequiredAsterisk, formContext?.showRequiredAsterisk]
+  );
+  useEffect(() => {
+    if (name && formContext?.errors) {
+      const error = getFieldError(name, formContext.errors);
+      setErrorMessage(error || "");
+    }
+  }, [name, formContext?.errors]);
+  useEffect(() => {
+    if (controlledError !== void 0) {
+      setErrorMessage(controlledError);
+    }
+  }, [controlledError]);
+  useEffect(() => {
+    if (!name || !formContext) {
+      return;
+    }
+    if (rules) {
+      formContext.registerFieldRules(name, rules);
+    }
+    return () => {
+      formContext.registerFieldRules(name, void 0);
+    };
+  }, [name, rules, formContext]);
+  const handleBlur = useCallback(() => {
+    if (name && formContext) {
+      formContext.validateField(name, rules, "blur");
+    }
+  }, [name, formContext, rules]);
+  const handleChange = useCallback(() => {
+    if (name && formContext) {
+      formContext.validateField(name, rules, "change");
+    }
+  }, [name, formContext, rules]);
+  const hasError = useMemo(() => !!errorMessage, [errorMessage]);
+  const describedById = useMemo(
+    () => showMessage && hasError ? errorId : void 0,
+    [showMessage, hasError, errorId]
+  );
+  const onlyChild = useMemo(() => {
+    const count = React.Children.count(children);
+    if (count !== 1) {
+      return null;
+    }
+    return React.Children.toArray(children)[0] ?? null;
+  }, [children]);
+  const isClonableChild = React.isValidElement(onlyChild);
+  const childId = isClonableChild ? onlyChild.props.id : void 0;
+  const effectiveFieldId = childId ?? fieldId;
+  const enhancedChild = useMemo(() => {
+    if (!isClonableChild) {
+      return children;
+    }
+    const nextProps = {
+      id: effectiveFieldId,
+      "aria-invalid": hasError ? true : onlyChild.props["aria-invalid"],
+      "aria-required": isRequired ? true : onlyChild.props["aria-required"],
+      "aria-describedby": mergeAriaDescribedBy(onlyChild.props["aria-describedby"], describedById),
+      onBlur: (event) => {
+        onlyChild.props.onBlur?.(event);
+        handleBlur();
+      },
+      onChange: (event) => {
+        onlyChild.props.onChange?.(event);
+        handleChange();
+      }
+    };
+    return React.cloneElement(onlyChild, nextProps);
+  }, [
+    isClonableChild,
+    children,
+    onlyChild,
+    effectiveFieldId,
+    hasError,
+    isRequired,
+    mergeAriaDescribedBy,
+    describedById,
+    handleBlur,
+    handleChange
+  ]);
+  const formItemClasses = useMemo(
+    () => classNames(
+      "tiger-form-item",
+      `tiger-form-item--${actualSize}`,
+      `tiger-form-item--label-${labelPosition}`,
+      hasError && "tiger-form-item--error",
+      formContext?.disabled && "tiger-form-item--disabled",
+      className
+    ),
+    [actualSize, labelPosition, hasError, formContext?.disabled, className]
+  );
+  const labelClasses = useMemo(
+    () => classNames(
+      "tiger-form-item__label",
+      `tiger-form-item__label--${labelAlign}`,
+      isRequired && "tiger-form-item__label--required"
+    ),
+    [labelAlign, isRequired]
+  );
+  const labelStyles = useMemo(() => {
+    if (labelPosition === "top") {
+      return {};
+    }
+    return actualLabelWidth ? { width: actualLabelWidth } : {};
+  }, [labelPosition, actualLabelWidth]);
+  const errorClasses = useMemo(
+    () => classNames("tiger-form-item__error", hasError && "tiger-form-item__error--show"),
+    [hasError]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: formItemClasses, children: [
+    label && /* @__PURE__ */ jsxs(
+      "label",
+      {
+        id: labelId,
+        className: labelClasses,
+        style: labelStyles,
+        htmlFor: isClonableChild ? effectiveFieldId : void 0,
+        children: [
+          isRequired && /* @__PURE__ */ jsx("span", { className: "tiger-form-item__asterisk", children: "*" }),
+          label
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "tiger-form-item__content", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "tiger-form-item__field",
+          role: "group",
+          "aria-labelledby": label ? labelId : void 0,
+          "aria-describedby": describedById,
+          "aria-invalid": hasError ? true : void 0,
+          "aria-required": isRequired ? true : void 0,
+          onBlur: isClonableChild ? void 0 : handleBlur,
+          onChange: isClonableChild ? void 0 : handleChange,
+          children: enhancedChild
+        }
+      ),
+      showMessage && hasError && /* @__PURE__ */ jsx("div", { id: errorId, role: "alert", className: errorClasses, children: errorMessage })
+    ] })
+  ] });
+};
+FormItem.displayName = "TigerFormItem";
+
+export { FormItem };

package/dist/chunk-HDDBBZQH.js

@@ -0,0 +1,321 @@
+'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/TabPane.tsx
+var TabsContext = React.createContext(null);
+function useTabsContext() {
+  return React.useContext(TabsContext);
+}
+var Tabs = ({
+  activeKey: controlledActiveKey,
+  defaultActiveKey,
+  type = "line",
+  tabPosition = "top",
+  size = "medium",
+  closable = false,
+  centered = false,
+  destroyInactiveTabPane = false,
+  className,
+  style,
+  onChange,
+  onTabClick,
+  onEdit,
+  children
+}) => {
+  const reactId = React.useId();
+  const idBase = React.useMemo(() => `tiger-tabs-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`, [reactId]);
+  const [internalActiveKey, setInternalActiveKey] = React.useState(
+    defaultActiveKey
+  );
+  const containerClasses = React.useMemo(() => {
+    return tigercatCore.classNames(tigercatCore.getTabsContainerClasses(tabPosition), className);
+  }, [tabPosition, className]);
+  const tabNavClasses = React.useMemo(() => {
+    return tigercatCore.getTabNavClasses(tabPosition, type);
+  }, [tabPosition, type]);
+  const tabNavListClasses = React.useMemo(() => {
+    return tigercatCore.getTabNavListClasses(tabPosition, centered);
+  }, [tabPosition, centered]);
+  const tabContentClasses = React.useMemo(() => {
+    return tigercatCore.tabContentBaseClasses;
+  }, []);
+  const { tabItems, tabPanes, firstTabKey } = React.useMemo(() => {
+    const items = [];
+    const panes = [];
+    let firstKey;
+    const childrenArray = [];
+    React__default.default.Children.forEach(children, (child) => {
+      if (React__default.default.isValidElement(child) && child.type === TabPane) {
+        childrenArray.push(child);
+      }
+    });
+    const resolvedFirstKey = childrenArray[0]?.props.tabKey;
+    if (resolvedFirstKey !== void 0) {
+      firstKey = resolvedFirstKey;
+    }
+    const resolvedActiveKey = controlledActiveKey !== void 0 ? controlledActiveKey : defaultActiveKey !== void 0 ? defaultActiveKey : firstKey;
+    childrenArray.forEach((child) => {
+      if (React__default.default.isValidElement(child) && child.type === TabPane) {
+        const key = child.props.tabKey;
+        const tabId = `${idBase}-tab-${String(key)}`;
+        const panelId = `${idBase}-panel-${String(key)}`;
+        items.push(
+          React__default.default.cloneElement(child, {
+            renderMode: "tab",
+            tabId,
+            panelId,
+            tabIndex: key === resolvedActiveKey ? 0 : -1
+          })
+        );
+        panes.push(React__default.default.cloneElement(child, { renderMode: "pane", tabId, panelId }));
+      }
+    });
+    return { tabItems: items, tabPanes: panes, firstTabKey: firstKey };
+  }, [children, controlledActiveKey, defaultActiveKey, idBase]);
+  const activeKey = controlledActiveKey !== void 0 ? controlledActiveKey : internalActiveKey !== void 0 ? internalActiveKey : firstTabKey;
+  const handleTabClick = React.useCallback(
+    (key) => {
+      onTabClick?.(key);
+      if (key === activeKey) {
+        return;
+      }
+      if (controlledActiveKey === void 0) {
+        setInternalActiveKey(key);
+      }
+      onChange?.(key);
+    },
+    [activeKey, controlledActiveKey, onChange, onTabClick]
+  );
+  const handleTabClose = React.useCallback(
+    (key, event) => {
+      event.stopPropagation();
+      onEdit?.({ targetKey: key, action: "remove" });
+    },
+    [onEdit]
+  );
+  const handleTabAdd = React.useCallback(() => {
+    onEdit?.({ targetKey: void 0, action: "add" });
+  }, [onEdit]);
+  const contextValue = React.useMemo(
+    () => ({
+      activeKey,
+      type,
+      size,
+      tabPosition,
+      closable,
+      destroyInactiveTabPane,
+      idBase,
+      handleTabClick,
+      handleTabClose
+    }),
+    [
+      activeKey,
+      type,
+      size,
+      tabPosition,
+      closable,
+      destroyInactiveTabPane,
+      idBase,
+      handleTabClick,
+      handleTabClose
+    ]
+  );
+  const tabNavContent = /* @__PURE__ */ jsxRuntime.jsx("div", { className: tabNavClasses, role: "tablist", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tabNavListClasses, children: [
+    tabItems,
+    type === "editable-card" && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: tigercatCore.tabAddButtonClasses,
+        onClick: handleTabAdd,
+        "aria-label": "Add tab",
+        children: "+"
+      }
+    )
+  ] }) });
+  const tabContent = /* @__PURE__ */ jsxRuntime.jsx("div", { className: tabContentClasses, children: tabPanes });
+  let content;
+  if (tabPosition === "left" || tabPosition === "right") {
+    content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      tabNavContent,
+      tabContent
+    ] });
+  } else if (tabPosition === "bottom") {
+    content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      tabContent,
+      tabNavContent
+    ] });
+  } else {
+    content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      tabNavContent,
+      tabContent
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClasses, style, children: content }) });
+};
+var TabPane = ({
+  tabKey,
+  label,
+  disabled = false,
+  closable,
+  icon,
+  className,
+  style,
+  children,
+  renderMode = "pane",
+  tabId,
+  panelId,
+  tabIndex
+}) => {
+  const tabsContext = useTabsContext();
+  if (!tabsContext) {
+    throw new Error("TabPane must be used within a Tabs component");
+  }
+  const isActive = React.useMemo(() => {
+    return tigercatCore.isKeyActive(tabKey, tabsContext.activeKey);
+  }, [tabKey, tabsContext.activeKey]);
+  const isClosable = React.useMemo(() => {
+    return closable !== void 0 ? closable : tabsContext.closable && tabsContext.type === "editable-card";
+  }, [closable, tabsContext.closable, tabsContext.type]);
+  const tabItemClasses = React.useMemo(() => {
+    return tigercatCore.classNames(tigercatCore.getTabItemClasses(isActive, disabled, tabsContext.type, tabsContext.size));
+  }, [isActive, disabled, tabsContext.type, tabsContext.size]);
+  const tabPaneClasses = React.useMemo(() => {
+    return tigercatCore.classNames(tigercatCore.getTabPaneClasses(isActive), className);
+  }, [isActive, className]);
+  const handleClick = () => {
+    if (!disabled) {
+      tabsContext.handleTabClick(tabKey);
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (disabled) {
+      return;
+    }
+    if (isClosable && (event.key === "Backspace" || event.key === "Delete")) {
+      event.preventDefault();
+      tabsContext.handleTabClose(tabKey, event);
+      return;
+    }
+    const isVertical = tabsContext.tabPosition === "left" || tabsContext.tabPosition === "right";
+    const nextKeys = isVertical ? ["ArrowDown"] : ["ArrowRight"];
+    const prevKeys = isVertical ? ["ArrowUp"] : ["ArrowLeft"];
+    const key = event.key;
+    if (nextKeys.includes(key) || prevKeys.includes(key) || key === "Home" || key === "End" || key === "Enter" || key === " ") {
+      event.preventDefault();
+    }
+    if (key === "Enter" || key === " ") {
+      tabsContext.handleTabClick(tabKey);
+      return;
+    }
+    const tabList = event.currentTarget?.closest('[role="tablist"]');
+    const tabButtons = Array.from(
+      tabList?.querySelectorAll('[role="tab"]') ?? []
+    );
+    const enabled = tabButtons.filter((b) => !b.disabled);
+    const currentIndex = enabled.findIndex((b) => b.id === tabId);
+    if (currentIndex === -1) {
+      return;
+    }
+    const focusByIndex = (index) => {
+      const next = enabled[index];
+      if (!next) return;
+      next.focus();
+      const nextKey = next.getAttribute("data-tiger-tab-key");
+      if (nextKey != null) {
+        const parsed = nextKey.startsWith("n:") ? Number(nextKey.slice(2)) : nextKey.startsWith("s:") ? nextKey.slice(2) : nextKey;
+        tabsContext.handleTabClick(parsed);
+      }
+    };
+    if (nextKeys.includes(key)) {
+      focusByIndex((currentIndex + 1) % enabled.length);
+      return;
+    }
+    if (prevKeys.includes(key)) {
+      focusByIndex((currentIndex - 1 + enabled.length) % enabled.length);
+      return;
+    }
+    if (key === "Home") {
+      focusByIndex(0);
+      return;
+    }
+    if (key === "End") {
+      focusByIndex(enabled.length - 1);
+    }
+  };
+  const handleClose = (event) => {
+    if (!disabled) {
+      tabsContext.handleTabClose(tabKey, event);
+    }
+  };
+  if (renderMode === "tab") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: tabItemClasses,
+        role: "tab",
+        id: tabId,
+        "aria-controls": panelId,
+        "aria-selected": isActive,
+        "aria-disabled": disabled,
+        disabled,
+        tabIndex: typeof tabIndex === "number" ? tabIndex : isActive ? 0 : -1,
+        "data-tiger-tabs-id": tabsContext.idBase,
+        "data-tiger-tab-key": typeof tabKey === "number" ? `n:${tabKey}` : `s:${tabKey}`,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center", children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+          isClosable && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: tigercatCore.tabCloseButtonClasses,
+              "aria-label": `Close ${String(label)}`,
+              tabIndex: -1,
+              onClick: handleClose,
+              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: tigercatCore.closeIconViewBox, children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  strokeLinecap: tigercatCore.closeIconPathStrokeLinecap,
+                  strokeLinejoin: tigercatCore.closeIconPathStrokeLinejoin,
+                  strokeWidth: tigercatCore.closeIconPathStrokeWidth,
+                  d: tigercatCore.closeIconPathD
+                }
+              ) })
+            }
+          )
+        ]
+      }
+    );
+  }
+  const shouldRender = isActive || !tabsContext.destroyInactiveTabPane;
+  if (!shouldRender) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: tabPaneClasses,
+      style,
+      role: "tabpanel",
+      id: panelId,
+      "aria-labelledby": tabId,
+      "aria-hidden": !isActive,
+      children
+    }
+  );
+};
+
+exports.TabPane = TabPane;
+exports.Tabs = Tabs;
+exports.useTabsContext = useTabsContext;

package/dist/chunk-HQLZL3XQ.mjs

@@ -0,0 +1,48 @@
+import { shouldHideBadge, formatBadgeContent, dotSizeClasses, badgeSizeClasses, classNames, badgeBaseClasses, getBadgeVariantClasses, badgeTypeClasses, badgePositionClasses, badgeWrapperClasses } from '@expcat/tigercat-core';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+// src/components/Badge.tsx
+var Badge = ({
+  variant = "danger",
+  size = "md",
+  type = "number",
+  content,
+  max = 99,
+  showZero = false,
+  position = "top-right",
+  standalone = true,
+  className,
+  children,
+  ["aria-label"]: ariaLabelProp,
+  ...props
+}) => {
+  const isDot = type === "dot";
+  const isHidden = shouldHideBadge(content, type, showZero);
+  const displayContent = formatBadgeContent(content, max, showZero);
+  const sizeClass = isDot ? dotSizeClasses[size] : badgeSizeClasses[size];
+  const badgeClasses = classNames(
+    badgeBaseClasses,
+    getBadgeVariantClasses(variant),
+    sizeClass,
+    badgeTypeClasses[type],
+    !standalone && badgePositionClasses[position],
+    className
+  );
+  const computedAriaLabel = ariaLabelProp ?? (isDot ? "notification" : type === "number" ? `${displayContent} notifications` : `${displayContent ?? ""}`);
+  if (isHidden) {
+    if (standalone) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  const badgeElement = /* @__PURE__ */ jsx("span", { ...props, className: badgeClasses, role: "status", "aria-label": computedAriaLabel, children: !isDot && displayContent });
+  if (standalone) {
+    return badgeElement;
+  }
+  return /* @__PURE__ */ jsxs("span", { className: badgeWrapperClasses, children: [
+    children,
+    badgeElement
+  ] });
+};
+
+export { Badge };