@expcat/tigercat-react 0.0.1

package/dist/chunk-3OF7XPIQ.js

@@ -0,0 +1,90 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Alert.tsx
+var Icon = ({ path, className }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className,
+    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 Alert = ({
+  type = "info",
+  size = "md",
+  title,
+  description,
+  showIcon = true,
+  closable = false,
+  closeAriaLabel = "Close alert",
+  className,
+  children,
+  titleSlot,
+  descriptionSlot,
+  onClose,
+  ...props
+}) => {
+  const [visible, setVisible] = react.useState(true);
+  const colorScheme = tigercatCore.getAlertTypeClasses(type, tigercatCore.defaultAlertThemeColors);
+  const alertClasses = tigercatCore.classNames(
+    tigercatCore.alertBaseClasses,
+    tigercatCore.alertSizeClasses[size],
+    colorScheme.bg,
+    colorScheme.border,
+    className
+  );
+  const iconClasses = tigercatCore.classNames(tigercatCore.alertIconSizeClasses[size], colorScheme.icon);
+  const titleClasses = tigercatCore.classNames(tigercatCore.alertTitleSizeClasses[size], colorScheme.title);
+  const descriptionClasses = tigercatCore.classNames(tigercatCore.alertDescriptionSizeClasses[size], colorScheme.description);
+  const closeButtonClasses = tigercatCore.classNames(
+    tigercatCore.alertCloseButtonBaseClasses,
+    colorScheme.closeButton,
+    colorScheme.closeButtonHover,
+    colorScheme.focus
+  );
+  const handleClose = (event) => {
+    onClose?.(event);
+    if (!event.defaultPrevented) {
+      setVisible(false);
+    }
+  };
+  if (!visible) {
+    return null;
+  }
+  const iconPath = tigercatCore.getAlertIconPath(type);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...props, className: alertClasses, role: "alert", children: [
+    showIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.alertIconContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { path: iconPath, className: iconClasses }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.alertContentClasses, children: [
+      (title || titleSlot) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClasses, children: titleSlot || title }),
+      (description || descriptionSlot) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClasses, children: descriptionSlot || description }),
+      !title && !description && !titleSlot && !descriptionSlot && children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClasses, children })
+    ] }),
+    closable && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: closeButtonClasses,
+        onClick: handleClose,
+        "aria-label": closeAriaLabel,
+        type: "button",
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { path: tigercatCore.alertCloseIconPath, className: "h-4 w-4" })
+      }
+    )
+  ] });
+};
+
+exports.Alert = Alert;

package/dist/chunk-3WPKVV4N.js

@@ -0,0 +1,140 @@
+'use strict';
+
+var chunkQFVE7GKD_js = require('./chunk-QFVE7GKD.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+function getMenuButtonsWithin(menuEl) {
+  return Array.from(
+    menuEl.querySelectorAll('button[data-tiger-menuitem="true"]')
+  ).filter((el) => !el.disabled);
+}
+function roveFocus(current, next) {
+  const menuEl = current.closest('ul[role="menu"]');
+  if (!menuEl) {
+    next.focus();
+    return;
+  }
+  const items = getMenuButtonsWithin(menuEl);
+  items.forEach((el) => {
+    el.tabIndex = el === next ? 0 : -1;
+  });
+  next.focus();
+}
+function moveFocus(current, delta) {
+  const menuEl = current.closest('ul[role="menu"]');
+  if (!menuEl) return;
+  const items = getMenuButtonsWithin(menuEl);
+  const currentIndex = items.indexOf(current);
+  if (currentIndex < 0) return;
+  const nextIndex = (currentIndex + delta + items.length) % items.length;
+  roveFocus(current, items[nextIndex]);
+}
+function focusEdge(current, edge) {
+  const menuEl = current.closest('ul[role="menu"]');
+  if (!menuEl) return;
+  const items = getMenuButtonsWithin(menuEl);
+  if (items.length === 0) return;
+  roveFocus(current, edge === "start" ? items[0] : items[items.length - 1]);
+}
+var MenuItem = ({
+  itemKey,
+  disabled = false,
+  icon,
+  className,
+  children,
+  level = 0,
+  collapsed: collapsedOverride
+}) => {
+  const menuContext = chunkQFVE7GKD_js.useMenuContext();
+  if (!menuContext) {
+    console.warn("MenuItem must be used within Menu component");
+  }
+  const isSelected = !!menuContext && tigercatCore.isKeySelected(itemKey, menuContext.selectedKeys);
+  const effectiveCollapsed = collapsedOverride ?? (menuContext ? menuContext.collapsed : false);
+  const itemClasses = tigercatCore.classNames(
+    menuContext ? tigercatCore.getMenuItemClasses(isSelected, disabled, menuContext.theme, effectiveCollapsed) : "flex items-center px-4 py-2 cursor-pointer transition-colors duration-200",
+    className
+  );
+  const indentStyle = menuContext && menuContext.mode === "inline" && level > 0 ? tigercatCore.getMenuItemIndent(level, menuContext.inlineIndent) : {};
+  const handleClick = react.useCallback(() => {
+    if (!disabled && menuContext) {
+      menuContext.handleSelect(itemKey);
+    }
+  }, [disabled, menuContext, itemKey]);
+  const handleKeyDown = react.useCallback(
+    (event) => {
+      if (!menuContext) return;
+      const current = event.currentTarget;
+      const rootMenu = current.closest('ul[role="menu"]');
+      const isRoot = rootMenu?.dataset.tigerMenuRoot === "true";
+      const isHorizontalRoot = isRoot && menuContext.mode === "horizontal";
+      const nextKey = isHorizontalRoot ? "ArrowRight" : "ArrowDown";
+      const prevKey = isHorizontalRoot ? "ArrowLeft" : "ArrowUp";
+      if (event.key === nextKey) {
+        event.preventDefault();
+        moveFocus(current, 1);
+        return;
+      }
+      if (event.key === prevKey) {
+        event.preventDefault();
+        moveFocus(current, -1);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        focusEdge(current, "start");
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        focusEdge(current, "end");
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleClick();
+      }
+    },
+    [menuContext, handleClick]
+  );
+  const renderIcon = () => {
+    if (!icon) return null;
+    if (typeof icon === "string") {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.menuItemIconClasses, dangerouslySetInnerHTML: { __html: icon } });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.menuItemIconClasses, children: icon });
+  };
+  const renderLabel = () => {
+    if (!effectiveCollapsed) return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children });
+    if (!icon) {
+      const text = String(children || "");
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-center", children: text.charAt(0).toUpperCase() });
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("li", { role: "none", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      className: itemClasses,
+      style: indentStyle,
+      role: "menuitem",
+      "data-tiger-menuitem": "true",
+      "data-tiger-selected": isSelected ? "true" : "false",
+      "aria-current": isSelected ? "page" : void 0,
+      "aria-disabled": disabled ? "true" : void 0,
+      disabled,
+      tabIndex: -1,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      children: [
+        renderIcon(),
+        renderLabel()
+      ]
+    }
+  ) });
+};
+
+exports.MenuItem = MenuItem;

package/dist/chunk-3XXXM4OB.mjs

@@ -0,0 +1,203 @@
+import React, { createContext, forwardRef, useState, useCallback, useImperativeHandle, useMemo, useContext } from 'react';
+import { getValueByPath, validateField, validateForm, classNames } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Form.tsx
+var FormContext = createContext(null);
+var useFormContext = () => {
+  const context = useContext(FormContext);
+  return context;
+};
+var Form = forwardRef(
+  ({
+    model = {},
+    rules,
+    labelWidth,
+    labelPosition = "right",
+    labelAlign = "right",
+    size = "md",
+    inlineMessage = true,
+    showRequiredAsterisk = true,
+    disabled = false,
+    children,
+    onSubmit,
+    onValidate,
+    onChange,
+    className,
+    ...props
+  }, ref) => {
+    const [errors, setErrors] = useState([]);
+    const [formValues, setFormValues] = useState(model);
+    const fieldRulesRef = React.useRef({});
+    React.useEffect(() => {
+      setFormValues(model);
+    }, [model]);
+    const registerFieldRules = useCallback(
+      (fieldName, nextRules) => {
+        if (!fieldName) {
+          return;
+        }
+        if (!nextRules) {
+          delete fieldRulesRef.current[fieldName];
+          return;
+        }
+        fieldRulesRef.current[fieldName] = nextRules;
+      },
+      []
+    );
+    const getEffectiveRules = useCallback(() => {
+      const fromForm = rules ?? {};
+      const fromItems = fieldRulesRef.current;
+      const merged = { ...fromForm, ...fromItems };
+      return Object.keys(merged).length > 0 ? merged : void 0;
+    }, [rules]);
+    const validateField$1 = useCallback(
+      async (fieldName, rulesOverride, trigger) => {
+        const fieldRules = rulesOverride ?? fieldRulesRef.current[fieldName] ?? rules?.[fieldName];
+        if (!fieldRules) {
+          return;
+        }
+        const value = getValueByPath(formValues, fieldName);
+        const error = await validateField(fieldName, value, fieldRules, formValues, trigger);
+        setErrors((prevErrors) => {
+          const filtered = prevErrors.filter((e) => e.field !== fieldName);
+          if (error) {
+            return [...filtered, { field: fieldName, message: error }];
+          }
+          return filtered;
+        });
+        onValidate?.(fieldName, !error, error);
+      },
+      [rules, formValues, onValidate]
+    );
+    const validate = useCallback(async () => {
+      const effectiveRules = getEffectiveRules();
+      if (!effectiveRules) {
+        setErrors([]);
+        return true;
+      }
+      const result = await validateForm(formValues, effectiveRules);
+      setErrors(result.errors);
+      return result.valid;
+    }, [getEffectiveRules, formValues]);
+    const clearValidate = useCallback((fieldNames) => {
+      if (!fieldNames) {
+        setErrors([]);
+        return;
+      }
+      const fields = Array.isArray(fieldNames) ? fieldNames : [fieldNames];
+      setErrors((prevErrors) => prevErrors.filter((error) => !fields.includes(error.field)));
+    }, []);
+    const resetFields = useCallback(() => {
+      clearValidate();
+      setFormValues(model);
+    }, [model, clearValidate]);
+    const updateValue = useCallback(
+      (fieldName, value) => {
+        const setValueByPath = (target, path, nextValue) => {
+          if (!path.includes(".")) {
+            return { ...target, [path]: nextValue };
+          }
+          const segments = path.split(".").filter(Boolean);
+          if (segments.length === 0) {
+            return target;
+          }
+          const clone = { ...target };
+          let cursor = clone;
+          for (let i = 0; i < segments.length; i++) {
+            const key = segments[i];
+            const isLast = i === segments.length - 1;
+            if (isLast) {
+              cursor[key] = nextValue;
+              break;
+            }
+            const existing = cursor[key];
+            const next = existing && typeof existing === "object" && !Array.isArray(existing) ? { ...existing } : {};
+            cursor[key] = next;
+            cursor = next;
+          }
+          return clone;
+        };
+        setFormValues((prevValues) => {
+          const newValues = setValueByPath(prevValues, fieldName, value);
+          onChange?.(newValues);
+          return newValues;
+        });
+      },
+      [onChange]
+    );
+    const handleSubmit = useCallback(
+      async (event) => {
+        event.preventDefault();
+        const effectiveRules = getEffectiveRules();
+        if (!effectiveRules) {
+          setErrors([]);
+          onSubmit?.({ valid: true, values: formValues, errors: [] });
+          return;
+        }
+        const result = await validateForm(formValues, effectiveRules);
+        setErrors(result.errors);
+        onSubmit?.({
+          valid: result.valid,
+          values: formValues,
+          errors: result.errors
+        });
+      },
+      [getEffectiveRules, formValues, onSubmit]
+    );
+    useImperativeHandle(
+      ref,
+      () => ({
+        validate,
+        validateField: validateField$1,
+        clearValidate,
+        resetFields
+      }),
+      [validate, validateField$1, clearValidate, resetFields]
+    );
+    const contextValue = useMemo(
+      () => ({
+        model: formValues,
+        rules,
+        labelWidth,
+        labelPosition,
+        labelAlign,
+        size,
+        inlineMessage,
+        showRequiredAsterisk,
+        disabled,
+        errors,
+        registerFieldRules,
+        validateField: validateField$1,
+        clearValidate,
+        updateValue
+      }),
+      [
+        formValues,
+        rules,
+        labelWidth,
+        labelPosition,
+        labelAlign,
+        size,
+        inlineMessage,
+        showRequiredAsterisk,
+        disabled,
+        errors,
+        registerFieldRules,
+        validateField$1,
+        clearValidate,
+        updateValue
+      ]
+    );
+    const formClasses = classNames(
+      "tiger-form",
+      `tiger-form--label-${labelPosition}`,
+      disabled && "tiger-form--disabled",
+      className
+    );
+    return /* @__PURE__ */ jsx(FormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("form", { className: formClasses, onSubmit: handleSubmit, ...props, children }) });
+  }
+);
+Form.displayName = "TigerForm";
+
+export { Form, useFormContext };

package/dist/chunk-427CM2U6.mjs

@@ -0,0 +1,76 @@
+import { classNames, getSkeletonClasses, getSkeletonDimensions, getParagraphRowWidth } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Skeleton.tsx
+var Skeleton = (props) => {
+  const {
+    variant = "text",
+    animation = "pulse",
+    width,
+    height,
+    shape = "circle",
+    rows = 1,
+    paragraph = false,
+    className,
+    style,
+    ["aria-label"]: ariaLabelProp,
+    ["aria-labelledby"]: ariaLabelledByProp,
+    ["aria-hidden"]: ariaHiddenProp,
+    ...divProps
+  } = props;
+  const skeletonClasses = classNames(getSkeletonClasses(variant, animation, shape), className);
+  const dimensions = getSkeletonDimensions(variant, width, height);
+  const computedAriaHidden = ariaHiddenProp ?? (ariaLabelProp || ariaLabelledByProp ? void 0 : true);
+  if (variant === "text" && rows > 1) {
+    const rowElements = [];
+    for (let i = 0; i < rows; i++) {
+      const rowStyle = {
+        height: dimensions.height
+      };
+      if (paragraph) {
+        rowStyle.width = getParagraphRowWidth(i, rows);
+      } else if (dimensions.width) {
+        rowStyle.width = dimensions.width;
+      }
+      rowElements.push(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames(skeletonClasses, i < rows - 1 && "mb-2"),
+            style: rowStyle,
+            "aria-hidden": computedAriaHidden
+          },
+          i
+        )
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...divProps,
+        className: classNames("flex flex-col", className),
+        style,
+        "aria-hidden": computedAriaHidden,
+        children: rowElements
+      }
+    );
+  }
+  const skeletonStyle = {
+    ...style,
+    ...dimensions.width ? { width: dimensions.width } : null,
+    height: dimensions.height
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...divProps,
+      className: skeletonClasses,
+      style: skeletonStyle,
+      "aria-label": ariaLabelProp,
+      "aria-labelledby": ariaLabelledByProp,
+      "aria-hidden": computedAriaHidden
+    }
+  );
+};
+
+export { Skeleton };

package/dist/chunk-472D2S4R.mjs

@@ -0,0 +1,23 @@
+import { getContainerClasses } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Container.tsx
+var Container = ({
+  maxWidth = false,
+  center = true,
+  padding = true,
+  children,
+  className,
+  as: Component = "div",
+  ...props
+}) => {
+  const containerClasses = getContainerClasses({
+    maxWidth,
+    center,
+    padding,
+    className
+  });
+  return /* @__PURE__ */ jsx(Component, { ...props, className: containerClasses, children });
+};
+
+export { Container };