@expcat/tigercat-react 0.0.67 → 0.1.0

package/dist/chunk-OTRGVENC.js

@@ -0,0 +1,305 @@
+'use strict';
+
+var react = require('react');
+var client = require('react-dom/client');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Notification.tsx
+var NOTIFICATION_CONTAINER_ID_PREFIX = "tiger-notification-container";
+var notificationInstancesByPosition = {
+  "top-left": [],
+  "top-right": [],
+  "bottom-left": [],
+  "bottom-right": []
+};
+var instanceIdCounter = 0;
+var containerRoots = {
+  "top-left": null,
+  "top-right": null,
+  "bottom-left": null,
+  "bottom-right": null
+};
+var updateCallbacks = {
+  "top-left": null,
+  "top-right": null,
+  "bottom-left": null,
+  "bottom-right": null
+};
+function getNextInstanceId() {
+  return ++instanceIdCounter;
+}
+var Icon = ({ path, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: tigercatCore.icon24ViewBox,
+      stroke: "currentColor",
+      strokeWidth: tigercatCore.icon24StrokeWidth,
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          strokeLinecap: tigercatCore.icon24PathStrokeLinecap,
+          strokeLinejoin: tigercatCore.icon24PathStrokeLinejoin,
+          d: path
+        }
+      )
+    }
+  );
+};
+var NotificationItem = ({ notification: notification2, onClose }) => {
+  const [isVisible, setIsVisible] = react.useState(false);
+  react.useEffect(() => {
+    setTimeout(() => setIsVisible(true), 10);
+  }, []);
+  const colorScheme = tigercatCore.getNotificationTypeClasses(notification2.type, tigercatCore.defaultNotificationThemeColors);
+  const notificationClasses = tigercatCore.classNames(
+    tigercatCore.notificationBaseClasses,
+    colorScheme.bg,
+    colorScheme.border,
+    notification2.className,
+    isVisible ? "opacity-100 translate-x-0" : "opacity-0 translate-x-full"
+  );
+  const iconPath = notification2.icon || tigercatCore.getNotificationIconPath(notification2.type);
+  const iconClass = tigercatCore.classNames(tigercatCore.notificationIconClasses, colorScheme.icon);
+  const handleClose = () => {
+    setIsVisible(false);
+    setTimeout(() => onClose(notification2.id), 300);
+  };
+  const a11yRole = notification2.type === "error" ? "alert" : "status";
+  const ariaLive = notification2.type === "error" ? "assertive" : "polite";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: notificationClasses,
+      role: a11yRole,
+      "aria-live": ariaLive,
+      "aria-atomic": "true",
+      onClick: notification2.onClick,
+      onKeyDown: (e) => {
+        if (!notification2.onClick) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          notification2.onClick();
+        }
+      },
+      tabIndex: notification2.onClick ? 0 : void 0,
+      style: notification2.onClick ? { cursor: "pointer" } : void 0,
+      "data-tiger-notification": "",
+      "data-tiger-notification-type": notification2.type,
+      "data-tiger-notification-id": String(notification2.id),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { path: iconPath, className: iconClass }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.notificationContentClasses, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.classNames(tigercatCore.notificationTitleClasses, colorScheme.titleText), children: notification2.title }),
+          notification2.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.classNames(tigercatCore.notificationDescriptionClasses, colorScheme.descriptionText), children: notification2.description })
+        ] }),
+        notification2.closable && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: tigercatCore.notificationCloseButtonClasses,
+            onClick: (e) => {
+              e.stopPropagation();
+              handleClose();
+            },
+            "aria-label": "Close notification",
+            type: "button",
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { path: tigercatCore.notificationCloseIconPath, className: tigercatCore.notificationCloseIconClasses })
+          }
+        )
+      ]
+    }
+  );
+};
+var NotificationContainer = ({
+  position = "top-right"
+}) => {
+  const [notifications, setNotifications] = react.useState([]);
+  react.useEffect(() => {
+    updateCallbacks[position] = () => {
+      setNotifications([...notificationInstancesByPosition[position]]);
+    };
+    updateCallbacks[position]();
+    return () => {
+      updateCallbacks[position] = null;
+    };
+  }, [position]);
+  const containerClasses = tigercatCore.classNames(
+    tigercatCore.notificationContainerBaseClasses,
+    tigercatCore.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]?.();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: containerClasses,
+      id: `${NOTIFICATION_CONTAINER_ID_PREFIX}-${position}`,
+      "aria-live": "polite",
+      "aria-relevant": "additions",
+      "data-tiger-notification-container": "",
+      "data-tiger-notification-position": position,
+      children: notifications.map((notification2) => /* @__PURE__ */ jsxRuntime.jsx(
+        NotificationItem,
+        {
+          notification: notification2,
+          onClose: handleRemove
+        },
+        notification2.id
+      ))
+    }
+  );
+};
+function ensureContainer(position) {
+  if (!tigercatCore.isBrowser()) {
+    return;
+  }
+  const containerId = `${NOTIFICATION_CONTAINER_ID_PREFIX}-${position}`;
+  const rootId = `${containerId}-root`;
+  const existingRootEl = document.getElementById(rootId);
+  if (containerRoots[position] && !existingRootEl) {
+    containerRoots[position] = null;
+    updateCallbacks[position] = null;
+  }
+  if (containerRoots[position]) {
+    return;
+  }
+  let rootEl = existingRootEl;
+  if (!rootEl) {
+    rootEl = document.createElement("div");
+    rootEl.id = rootId;
+    document.body.appendChild(rootEl);
+  }
+  containerRoots[position] = client.createRoot(rootEl);
+  containerRoots[position].render(/* @__PURE__ */ jsxRuntime.jsx(NotificationContainer, { position }));
+}
+function addNotification(config) {
+  const position = config.position || "top-right";
+  ensureContainer(position);
+  const id = getNextInstanceId();
+  const instance = {
+    id,
+    type: config.type || "info",
+    title: config.title,
+    description: config.description,
+    duration: config.duration !== void 0 ? config.duration : 4500,
+    closable: config.closable !== void 0 ? config.closable : true,
+    onClose: config.onClose,
+    onClick: config.onClick,
+    icon: config.icon,
+    className: config.className,
+    position
+  };
+  notificationInstancesByPosition[position].push(instance);
+  if (updateCallbacks[position]) {
+    updateCallbacks[position]();
+  }
+  if (instance.duration > 0) {
+    setTimeout(() => {
+      removeNotification(id, position);
+    }, instance.duration);
+  }
+  return () => removeNotification(id, position);
+}
+function removeNotification(id, position) {
+  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();
+    }
+    if (updateCallbacks[position]) {
+      updateCallbacks[position]();
+    }
+  }
+}
+function clearAll(position) {
+  if (position) {
+    notificationInstancesByPosition[position].forEach((instance) => {
+      if (instance.onClose) {
+        instance.onClose();
+      }
+    });
+    notificationInstancesByPosition[position] = [];
+    if (updateCallbacks[position]) {
+      updateCallbacks[position]();
+    }
+  } else {
+    Object.keys(notificationInstancesByPosition).forEach((pos) => {
+      const p = pos;
+      notificationInstancesByPosition[p].forEach((instance) => {
+        if (instance.onClose) {
+          instance.onClose();
+        }
+      });
+      notificationInstancesByPosition[p] = [];
+      if (updateCallbacks[p]) {
+        updateCallbacks[p]();
+      }
+    });
+  }
+}
+function normalizeOptions(options) {
+  if (typeof options === "string") {
+    return { title: options };
+  }
+  return options;
+}
+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);
+  }
+};
+var Notification_default = notification;
+
+exports.NotificationContainer = NotificationContainer;
+exports.Notification_default = Notification_default;
+exports.notification = notification;

package/dist/chunk-P273E6XE.js

@@ -0,0 +1,219 @@
+'use strict';
+
+var chunkJW64IJP2_js = require('./chunk-JW64IJP2.js');
+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);
+
+var FormItem = ({
+  name,
+  label,
+  labelWidth,
+  required,
+  rules,
+  error: controlledError,
+  showMessage = true,
+  size,
+  children,
+  className
+}) => {
+  const formContext = chunkJW64IJP2_js.useFormContext();
+  const [errorMessage, setErrorMessage] = React.useState("");
+  const reactId = React.useId();
+  const baseId = React.useMemo(() => `tiger-form-item-${reactId}`, [reactId]);
+  const labelId = `${baseId}-label`;
+  const fieldId = `${baseId}-field`;
+  const errorId = `${baseId}-error`;
+  const mergeAriaDescribedBy = React.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 = React.useMemo(() => {
+    const width = labelWidth || formContext?.labelWidth;
+    if (typeof width === "number") {
+      return `${width}px`;
+    }
+    return width;
+  }, [labelWidth, formContext?.labelWidth]);
+  const showRequiredAsterisk = React.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 = React.useMemo(
+    () => showRequiredAsterisk && (formContext?.showRequiredAsterisk ?? true),
+    [showRequiredAsterisk, formContext?.showRequiredAsterisk]
+  );
+  React.useEffect(() => {
+    if (name && formContext?.errors) {
+      const error = tigercatCore.getFieldError(name, formContext.errors);
+      setErrorMessage(error || "");
+    }
+  }, [name, formContext?.errors]);
+  React.useEffect(() => {
+    if (controlledError !== void 0) {
+      setErrorMessage(controlledError);
+    }
+  }, [controlledError]);
+  React.useEffect(() => {
+    if (!name || !formContext) {
+      return;
+    }
+    if (rules) {
+      formContext.registerFieldRules(name, rules);
+    }
+    return () => {
+      formContext.registerFieldRules(name, void 0);
+    };
+  }, [name, rules, formContext]);
+  const handleBlur = React.useCallback(() => {
+    if (name && formContext) {
+      formContext.validateField(name, rules, "blur");
+    }
+  }, [name, formContext, rules]);
+  const handleChange = React.useCallback(() => {
+    if (name && formContext) {
+      formContext.validateField(name, rules, "change");
+    }
+  }, [name, formContext, rules]);
+  const hasError = React.useMemo(() => !!errorMessage, [errorMessage]);
+  const describedById = React.useMemo(
+    () => showMessage && hasError ? errorId : void 0,
+    [showMessage, hasError, errorId]
+  );
+  const onlyChild = React.useMemo(() => {
+    const count = React__default.default.Children.count(children);
+    if (count !== 1) {
+      return null;
+    }
+    return React__default.default.Children.toArray(children)[0] ?? null;
+  }, [children]);
+  const isClonableChild = React__default.default.isValidElement(onlyChild);
+  const childId = isClonableChild ? onlyChild.props.id : void 0;
+  const effectiveFieldId = childId ?? fieldId;
+  const enhancedChild = React.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__default.default.cloneElement(onlyChild, nextProps);
+  }, [
+    isClonableChild,
+    children,
+    onlyChild,
+    effectiveFieldId,
+    hasError,
+    isRequired,
+    mergeAriaDescribedBy,
+    describedById,
+    handleBlur,
+    handleChange
+  ]);
+  const formItemClasses = React.useMemo(
+    () => tigercatCore.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 = React.useMemo(
+    () => tigercatCore.classNames(
+      "tiger-form-item__label",
+      `tiger-form-item__label--${labelAlign}`,
+      isRequired && "tiger-form-item__label--required"
+    ),
+    [labelAlign, isRequired]
+  );
+  const labelStyles = React.useMemo(() => {
+    if (labelPosition === "top") {
+      return {};
+    }
+    return actualLabelWidth ? { width: actualLabelWidth } : {};
+  }, [labelPosition, actualLabelWidth]);
+  const errorClasses = React.useMemo(
+    () => tigercatCore.classNames("tiger-form-item__error", hasError && "tiger-form-item__error--show"),
+    [hasError]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: formItemClasses, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        id: labelId,
+        className: labelClasses,
+        style: labelStyles,
+        htmlFor: isClonableChild ? effectiveFieldId : void 0,
+        children: [
+          isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tiger-form-item__asterisk", children: "*" }),
+          label
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tiger-form-item__content", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { id: errorId, role: "alert", className: errorClasses, children: errorMessage })
+    ] })
+  ] });
+};
+FormItem.displayName = "TigerFormItem";
+
+exports.FormItem = FormItem;